:sparkles: adding search drop-down | adding search getters | adding search display for list | #163

plugins/cia-endpoints/includes/class.make-search.php

 // include('formats.php');
 
 class Make_Search_Endpoint extends WP_REST_Controller {
+    function make_args($request) {
+        $args = [
+            'post_status'     => ['publish'],
+            'posts_per_page'  => -1,
+            'page'            => 1,
+            'relevanssi'      => true,
+            'post_type' => [
+                'artist',
+                'episode',
+                'event',
+                'exhibition',
+                'guide',
+                'object',
+                'publication',
+                'technique',
+                'short',
+                'post',
+                'page'
+            ]
+        ];
+        // Get parameters from request,
+        // /?limit=<num>&?orderby=<str>&?order=<str>
+        $params = $request->get_params();
+        if(intval($params['limit']) > 0) {
+            $args['posts_per_page'] = intval($params['limit']);
+        }
+        if(intval($params['p']) > 1) {
+            $args['page'] = intval($params['p']);
+            $args['offset'] = ($args['page'] * $args['posts_per_page']) - $args['posts_per_page'];
+        }
+        if($params['s']) {
+            $args['s'] = $params['s'];
+        }
+        
+        return $args;
+    }
     /**
      * Register the routes for the objects of the controller.
      */
         register_rest_route( $namespace, '/' . $route, [
             array(
                 'methods'  => WP_REST_Server::READABLE,
-                'callback' => array( $this, 'get_all_items' )
+                'callback' => array( $this, 'get_results' )
             ),
         ]);
     }
-    public function get_all_items( $request ) {
-        $args = array(
-            'numberposts' => 9,
-        );
-        $params = $request->get_params();
-        if($params['s']) {
-            $args['s'] = $params['s'];
-        }
+    public function get_results( $request ) {
         // https://www.relevanssi.com/user-manual/functions/relevanssi_do_query/
-        $q = new WP_Query( $args );
-        relevanssi_do_query( $q );
-        $found_posts = $q->get_posts();
-        
-        return new WP_REST_Response( $found_posts, 200 );
+        $q = new WP_Query($this->make_args($request));
+        $found_posts = relevanssi_do_query( $q );
+        return new WP_REST_Response( $this->prepare_items_for_reponse($found_posts), 200 );
+    }
+    public function prepare_items_for_reponse( $items ) {
+        $collection = [];
+        forEach( $items as $item ) {
+            $formatted = default_post_format( $item, false );
+            $formatted[hero] = get_post_meta( $item->ID, 'hero_header', true );
+            array_push($collection, $formatted);
+        }
+        return $collection;
     }
 }
 
+add_filter( 'relevanssi_query_filter', function( $query ) {
+    global $wp_query;
+    if ( isset( $wp_query->query_vars['orderby'] ) && 'post_date' === $wp_query->query_vars['orderby'] ) {
+        $query = str_replace( 'ORDER BY tf', 'ORDER BY relevanssi.doc', $query );
+    }
+    return $query;
+}, 11 );
 ?>

plugins/cia-endpoints/includes/class.make-sticky.php

                 'guide',
                 'object',
                 'publication',
+                'technique',
                 'short',
                 'post',
                 'page'

vue-theme/src/components/hero.vue

 @import './../sss/variables.sss'
 
 .hero
-    /* background-color: rebeccapurple */
-    /* min-height: 25vh */
     min-height: 54vw
     position: relative
     overflow: hidden

vue-theme/src/components/navigation/navigation.vue

 // Replace with calls to menu system
 <template lang="pug">
 nav.main.w-max
-    .menu
+    .menu.f-col
         ul.f-row.w-max
             li.f-row.start
                 router-link(to="/")
                     li
                         router-link(to="/page/contact") Contact 
             li.f-grow
-            li.t-up 🔍
-                ul.submenu 
-                    li
-                        router-link(to="/page/search") Search
+            li.t-up 
+                a(@click="toggleSearch") search
+        ul(v-if="isSearchOpen").search.w-max
+            li.f-row.w-max
+                input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
+                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍
 
     .mobile-menu
         .f-row.start
 </template>
 
 <script>
+import { computed, ref, nextTick } from '@vue/runtime-core'
+import { useRouter } from 'vue-router'
 import { postTypes, sortTypes } from '@/utils/helpers'
-import { computed } from '@vue/runtime-core'
 
 export default {
     setup() {
+        const router = useRouter()
+        const searchTerms = ref('')
+        const isSearchOpen = ref(false)
+        const toggleSearch = () => {
+            isSearchOpen.value = !isSearchOpen.value
+            if(isSearchOpen.value) {
+                nextTick(() => {
+                    const searchBox = document.querySelector('ul.search > li > input')
+                    searchBox.focus()
+                })
+            }
+        }
+        const sendSearch = () => {
+            router.push({ path: '/search', query: { s: searchTerms.value } })
+            searchTerms.value = ''
+            toggleSearch()
+        }
+        
+
         /**
          * Navigation items
          * Auto-includes declared postTypes
         return {
             sortTypes,
             menuItems,
-            uncheck
+            uncheck,
+            searchTerms,
+            sendSearch,
+            toggleSearch,
+            isSearchOpen
         }
     },
 }
                 height: $ms-3
                 padding: 0
     
+    .menu > ul
+        position: relative
+        padding: 0 0 0 $ms-0
+        &.search
+            background-color: #fefefe
+            box-shadow: 1px 1px 1px $lighter
+            position: absolute
+            top: 36px
+            padding: 0
+            input
+                width: 50%
+                font-size: $ms-2
+
     .menu   
         h1
             margin: $ms--7 0 0
             margin: 0
         img
             margin: 0 $ms--2 calc(-1 * $ms--6) 0
-        > ul
-            position: relative
-            padding: 0 0 0 $ms-0
-            > li:nth-child(1)
+        > ul > li
+            &:nth-child(1)
                 a
                     text-decoration: none
-            > li:nth-child(n+2)
+            &:nth-child(n+2)
                 a > h5
                     padding: $ms-1
-
                 //- menu hover
                 &:hover
                     color: $cia_red1
                     display: block 
                     cursor: pointer
                     transition: $transition
-            li 
-                ul.submenu
+            ul.submenu
+                display: block  
+                position: absolute
+                background-color: $lighter
+                padding: 0 0.5em 0.5em
+                opacity: 0
+
+                //- submenu hover
+                &:hover 
                     display: block  
-                    position: absolute
                     background-color: $lighter
-                    padding: 0 0.5em 0.5em
-                    opacity: 0
-                    //- submenu hover
+                    opacity: 1
+                    transition: $transition
+
+                > li 
+                    line-height: 1.5
+                    width: max-content
+                    background-color: $lighter
+                    //- list hover
                     &:hover 
                         display: block  
                         background-color: $lighter
-                        opacity: 1
-                        transition: $transition
-
-                    li 
-                        line-height: 1.5
-                        width: max-content
-                        background-color: $lighter
-                        //- list hover
-                        &:hover 
-                            display: block  
-                            background-color: $lighter
                     
     
     .mobile-menu

vue-theme/src/pages/list.vue

 
         header.center.t-up
             .title.f-row
-                h3 {{ type }}s 
+                h3(v-if="!isSearch") {{ type }}s 
+                h3(v-else) Search results for: {{$route.query.s }} 
                 span(v-if="sortBy")
                     h3 {{ sortBy.replace('-', ' ') }}
 
         return {
             page: 0,
             perPage: 21,
+            // Set this from route for initial search
+            searchTerm: this.$route.query.s,
             keepFetching: true,
             loadingFetched: false,
-            observer: null
+            observer: null,
         }
     },
     computed: {
         grid() {
             return gridTypes.includes(this.type)
         },
+        isSearch() {
+            return this.$route.path == '/search'
+        },
         isWide() {
             return wideTypes.includes(this.type)
         },
         },
         loaded() {
             if (!this.pType) return
-            return this[`all${this.pType}Loaded`]
+            return this.isSearch ? this['allSearchResultsLoaded'] : this[`all${this.pType}Loaded`]
         },
         posts() {
             if (!this.pType) return
-            return this[`all${this.pType}`]
+            return this.isSearch ? this['allSearchResults'] : this[`all${this.pType}`]
         },
         shouldLoadAllAtOnce() {
             return this.type == 'episode' ||
         }
     },
     methods: {
+        async loadMoreSearchResults() {
+            if(!this.keepFetching) return console.warn('Nothing left to fetch...')
+            const getPosts = async params => {
+                return await this.$store.dispatch(`getMoreSearchResults`, { params })
+            }
+            try {
+                this.loadingFetched = true
+                this.page++
+                const res = await getPosts(
+                    {
+                        limit: this.perPage,
+                        page: this.page,
+                        s: this.searchTerm
+                    }
+                )
+                this.loadingFetched = false
+                // Stop trying to load more posts
+                if(res && !res.length) {
+                    this.keepFetching = false
+                    if(!res.length) console.warn(`Empty response for search results:`, res.length)
+                }
+            } catch (err) { console.error(err) }
+        },
         async loadMorePosts(shouldClear) {
             if(!this.keepFetching) return console.warn('Nothing left to fetch...')
 
         async getPage(type) {
             await this._getAllIfNotLoaded('page', this.$store)
             if(!this.allPages) throw 'no pages in state'
-            const page = this.allPages.filter(page => page.slug == `${type}s`)[0]
+            const page = this.allPages.filter(page => page.slug == `${type}`)[0]
             if(!page) throw `No page: ${type} found. Cannot set hero.`
             return page
         },
                 this.$store.commit('SET_HERO', this._setHeroInfo(page))
             } catch (err) { console.error(err) }
         },
-        setIntersectionLoader() {
+        setIntersectionLoader(cb) {
             // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
             if(!this.keepFetching) return console.warn('Cannot setup intersection handler keepFetching is set false')
             
             this.observer = new IntersectionObserver(entries => {
                 entries.forEach(entry => {
                     if (!entry.isIntersecting || this.loadingFetched) return
-                    setTimeout(this.loadMorePosts, TIMEOUT)
+                    setTimeout(cb, TIMEOUT)
                 })
             }, { threshold: 0.80 })
             this.observer.observe(document.querySelector(INTERSECT_SELECTOR))
             this.page = 0
             this.keepFetching = true
 
-            this.checkAndSetHero(this.type)
+            if(this.isSearch) {
+                this.checkAndSetHero(`search`)
+                this.$store.commit(`CLEAR_SEARCH_RESULTS`)
+                this.loadMoreSearchResults()
+                this.setIntersectionLoader(this.loadMoreSearchResults)
+            } else {
+                this.checkAndSetHero(`${this.type}s`)
 
-            // Clear any preloaded posts (from home, etc.)
-            this.loadMorePosts(true)
-            this.setIntersectionLoader()
+                // Clear any preloaded posts (from home, etc.)
+                this.loadMorePosts(true)
+                this.setIntersectionLoader(this.loadMorePosts)
+            }
         }
     },
+    beforeRouteUpdate(to, from) {
+        // !: Only fires between two searches
+        if(!to.query || to.query.s == from.query.s) return
+        console.log('between route search')
+        // Set the search term for impending callback fire
+        this.searchTerm = to.query.s
+        this.initPostList()
+    },
     watch: {
         // This only fires navigating from a list page, to another list page
         type(newType) {
             // console.log('sort changed :', newSort)
             if(!Object.values(sortTypes).includes(newSort)) return
             this.initPostList()
-        }
+        },
     },
     mounted() {
         // This only fires navigating from a non-list page > list page

vue-theme/src/pages/mixin-post-types.js

 getterHelper[`randomPosts`] = `randomPosts`
 getterHelper[`randomPostsLoaded`] = `randomPostsLoaded`
 
+getterHelper[`allSearchResults`] = `allSearchResults`
+getterHelper[`allSearchResultsLoaded`] = `allSearchResultsLoaded`
+
 const stateHelper = {}
 for (let type of postTypes) {
     stateHelper[type] = type

vue-theme/src/router/routes.js

      */
     { path: '/', component: indexPage },
 
+    /**
+     * Search
+     */ 
+     {
+        path: '/search',
+        component: listPage,
+    },
+
     /**
      * List Pages
      */ 

vue-theme/src/store/index.js

 import object from './modules/object'
 import publication from './modules/publication'
 import sticky from './modules/sticky'
+import searchResults from './modules/search'
 
 const debug = process.env.NODE_ENV !== 'production'
 
         object,
         publication,
         sticky,
+        searchResults
     },
     strict: debug,
 })

vue-theme/src/store/modules/search.js

+import api from '../../utils/api'
+
+const state = {
+    all: [],
+    loaded: false,
+}
+
+const getters = {
+    allSearchResults: state => state.all,
+    allSearchResultsLoaded: state => state.loaded,
+}
+
+const actions = {
+    async getMoreSearchResults({ commit }, { params }) {
+        const storeFetch = (searchResults => {
+            commit('ADD_TO_FETCHED_SEARCH_RESULTS', { searchResults })
+            commit('SEARCH_RESULTS_LOADED', true)
+        })
+        return await api.getByType({ type: 'search', params, cb: storeFetch })
+    }
+}
+
+const mutations = {
+    ADD_TO_FETCHED_SEARCH_RESULTS(state, { searchResults }) {
+        console.log('adding results', searchResults)
+        state.all = [...state.all, ...searchResults]
+    },
+    STORE_FETCHED_SEARCH_RESULTS(state, { searchResults }) {
+        state.all = searchResults
+    },
+    CLEAR_SEARCH_RESULTS(state) {
+        state.all = []
+    },
+    SEARCH_RESULTS_LOADED(state, val) {
+        state.loaded = val
+    },
+}
+
+export default { state, getters, actions, mutations }

vue-theme/src/utils/api.js

     
     if(!params) return query
 
-    if(params.limit && params.page) {
+    if(params.limit && params.page && params.s) {
+        query = `?s=${params.s}&limit=${params.limit}&p=${params.page}`
+    } else if(params.limit && params.page && !params.s) {
         query = `?limit=${params.limit}&p=${params.page}`
     } else if(params.limit && !params.page) {
         query = `?limit=${params.limit}`
             .catch(e => {
                 cb(e)
             })
-    },
+    }
 }