querystring mutations and parser (#95)

sitemedia/js/components/SearchFacet.js

@@ -1,4 +1,4 @@
-import FacetChoice from './FacetChoice'
+import { mapActions } from 'vuex'
 
 export default Vue.component('SearchFacet', {
     template: `
@@ -19,22 +19,28 @@ export default Vue.component('SearchFacet', {
             </div>
             <div class="facets">
                 <label v-if="availableChoices.length == 0">No results</label>
-                <facet-choice
+                <div
+                    class="ui checkbox"
                     v-for="choice of choices"
                     v-show="availableChoices.includes(choice.value)"
-                    v-bind="choice"
                     :key="choice.value"
-                />
+                >
+                    <input
+                        type="checkbox"
+                        @input="toggleFacetChoice(choice)"
+                        :name="choice.facet"
+                        :value="choice.value"
+                        :checked="choice.active"
+                    >
+                    <label>{{ choice.value }} <span class="count">{{ choice.count }}</span></label>
+                </div>
             </div>
         </template>
         <template v-if="type === 'range'">
             <h1>range facet</h1>
         </template>
     </sui-grid-column>
     `,
-    components: {
-        FacetChoice
-    },
     data() {
         return {
             filter: '',
@@ -62,6 +68,9 @@ export default Vue.component('SearchFacet', {
         choices: Array
     },
     methods: {
+        ...mapActions([
+            'toggleFacetChoice',
+        ]),
         /**
          * Utility that normalizes strings for simple comparison.
          * Removes special characters, trims whitespace, and uppercases.

sitemedia/js/components/books/BooksSearch.js

@@ -116,6 +116,7 @@ export default Vue.component('BooksSearch', {
             'facetChoices',
         ]),
         ...mapGetters([
+            'activeFacets',
             'activeFacetChoices',
         ]),
     },
@@ -135,10 +136,10 @@ export default Vue.component('BooksSearch', {
          * @param {Array} tab
          * @returns {String}
          */
-        tabLabel(tab) {
+        tabLabel(tab, separator = '  ·  ') {
             return tab
                 .map(facetName => this.facetConfig.find(facet => facet.name === facetName).label)
-                .join('  ·  ')
-        }
+                .join(separator)
+        },
     },
 })

sitemedia/js/router/index.js

@@ -1,9 +1,14 @@
 import VueRouter from 'vue-router'
 
+import store from '../store'
 import BooksSearch from '../components/books/BooksSearch'
 
 export const routes = [
-    { path: '*', component: BooksSearch } // always render the books search view
+    {
+        path: '*', // always render the books search view
+        component: BooksSearch,
+        props: route => store.dispatch('setFormState', route.query) // convert any query params to form state
+    } 
 ]
 
 export default new VueRouter({

sitemedia/js/store/actions.js

@@ -1,3 +1,5 @@
+import router from '../router'
+
 export default {
     loadSearchData ({ commit }, query) {
         return fetch(query)
@@ -17,11 +19,25 @@ export default {
             })
     },
 
-    toggleFacetChoice ({ commit }, choice) {
+    toggleFacetChoice ({ commit, getters }, choice) {
         commit('editFacetChoice', { choice, active: !choice.active })
+        router.replace({
+            query: {
+                ...getters.activeFacets
+            }
+        })
     },
 
     clearFacetChoices ({ commit }) {
         commit('clearFacetChoices')
+        router.replace({
+            path: '/'
+        })
     },
+
+    setFormState ({ commit, getters }, query) {
+        if (JSON.stringify(query) != JSON.stringify(getters.activeFacets)) {
+            commit('setFacetChoices', Object.entries(query))
+        }
+    }
 }

sitemedia/js/store/getters.js

@@ -1,5 +1,21 @@
+import { toArray } from '../utilities'
+
 export default {
     activeFacetChoices (state) {
         return state.facetChoices.filter(choice => choice.active)
     },
+
+    activeFacets (state, getters) {
+        return getters.activeFacetChoices
+            .reduce((acc, cur) => {
+                if (acc[cur.facet]) {
+                    if (!Array.isArray(acc[cur.facet])) {
+                        acc[cur.facet] = toArray(acc[cur.facet])
+                    }
+                    acc[cur.facet].push(cur.value)
+                }
+                else acc[cur.facet] = cur.value
+                return acc
+            }, {})
+    }
 }

sitemedia/js/store/mutations.js

@@ -1,3 +1,5 @@
+import { toArray } from '../utilities'
+
 export default {
     addFacetChoice (state, choice) {
         state.facetChoices.push(choice)
@@ -24,6 +26,15 @@ export default {
         state.facetChoices.forEach(choice => choice.active = false)
     },
 
+    setFacetChoices (state, facets) {
+        state.facetChoices.forEach(choice => choice.active = false)
+        facets.forEach(facet => {
+            state.facetChoices
+                .filter(choice => choice.facet === facet[0] && toArray(facet[1]).includes(choice.value))
+                .forEach(choice => choice.active = true)
+        })
+    },
+
     setTotalResults (state, total) {
         state.totalResults = total
     },

sitemedia/js/utilities.js

@@ -0,0 +1 @@
+export const toArray = value => Array.isArray(value) ? value : value ? [value] : undefined