rework vuex configuration (#95)

sitemedia/js/components/FacetChoice.js

@@ -5,16 +5,15 @@ export default Vue.component('FacetChoice', {
     <div class="ui checkbox">
         <input
             type="checkbox"
-            @input="toggleFacetChoice({ facet: name, value: value })"
-            :name="name"
+            @input="toggleFacetChoice({ facet: facet, value: value, active: active, count: count })"
+            :name="facet"
             :value="value"
             :checked="active"
         >
         <label>{{ value }} <span class="count">{{ count }}</span></label>
-    </div>
-    `,
+    </div>`,
     props: {
-        name: String,
+        facet: String,
         value: String,
         count: Number,
         active: Boolean,

sitemedia/js/components/SearchFacet.js

@@ -22,7 +22,6 @@ export default Vue.component('SearchFacet', {
                     v-for="choice of choices"
                     v-show="availableChoices.includes(choice.value)"
                     v-bind="choice"
-                    :name="name"
                     :key="choice.value"
                 />
             </div>

sitemedia/js/components/books/BooksSearch.js

@@ -7,7 +7,9 @@ export default Vue.component('BooksSearch', {
     template: `
     <div class="books-search">
         <sui-container textAlign="center" text>
-            <h4 is="sui-header" class="results-count">Displaying {{ totalResults }} {{ totalResults | pluralize('book') }}</h4>
+            <h4 is="sui-header" class="results-count">
+            Displaying {{ totalResults }} {{ totalResults | pluralize('book') }}
+            </h4>
         </sui-container>
         <form class="search-form ui form">
             <sui-menu tabular attached="top">
@@ -16,7 +18,7 @@ export default Vue.component('BooksSearch', {
                     v-for="(tab, index) in tabs"
                     :key="index"
                     :active="activeTab === index"
-                    :content="tab.map(facet => facetConfig[facet].label).join(' · ')"
+                    :content="tabLabel(tab)"
                     @click="activeTab = index"
                 />
             </sui-menu>
@@ -28,25 +30,16 @@ export default Vue.component('BooksSearch', {
             >
                 <div class="ui equal width stackable grid">
                     <search-facet
-                        v-for="facet in tab"
-                        v-bind="facetConfig[facet]"
-                        :name="facet"
-                        :choices="facets[facet]"
-                        :key="facet"
+                        v-for="facetName in tab"
+                        v-bind="facetConfig.find(facet => facet.name === facetName)"
+                        :choices="facetChoices.filter(choice => choice.facet === facetName)"
+                        :key="facetName"
                     >
                     </search-facet>
                 </div>
             </sui-segment>
             <sui-segment inverted>
                 <label>Selected</label>
-                <div v-for="(choices, facet) in activeFacets" :key="facet">
-                    <label>{{ facetConfig[facet].label }}:</label>
-                    <sui-label v-for="choice in choices" :key="choice.value">
-                        {{ choice.value }}
-                        <sui-icon name="delete" />
-                    </sui-label>
-                </div>
-                <a v-if="Object.keys(activeFacets).length > 0">Clear All</a>
             </sui-segment>
         </form>
     </div>`,
@@ -63,61 +56,81 @@ export default Vue.component('BooksSearch', {
                 ['annotator']
             ],
             activeTab: 0,
-            facetConfig: {
-                author: {
+            facetConfig: [
+                {
+                    name: 'author',
                     label: 'Author',
                     type: 'text',
                     search: true,
                     width: 6,
                 },
-                editor: {
+                {
+                    name: 'editor',
                     label: 'Editor',
                     type: 'text',
                 },
-                translator: {
+                {
+                    name: 'translator',
                     label: 'Translator',
                     type: 'text',
                 },
-                publisher: {
+                {
+                    name: 'publisher',
                     label: 'Publisher',
                     type: 'text',
                 },
-                pub_year: {
+                {
+                    name: 'pub_year',
                     label: 'Publication Year',
                     type: 'range',
                 },
-                language: {
+                {
+                    name: 'language',
                     label: 'Language',
                     type: 'text',
                 },
-                subject: {
+                {
+                    name: 'subject',
                     label: 'Subject',
                     type: 'text',
                 },
-                annotator: {
+                {
+                    name: 'annotator',
                     label: 'Annotator',
                     type: 'text',
                 },
-            },
+            ],
         }
     },
     computed: {
         ...mapState([
-            'facets',
             'filters',
             'totalResults',
+            'facetChoices',
         ]),
         ...mapGetters([
-            'activeFacets',
+            'activeFacetChoices',
         ]),
     },
     created() {
-        this.loadFacetData('/static/js/components/books/data.json')
+        this.loadSearchData('/static/js/components/books/data.json')
     },
     methods: {
         ...mapActions([
-            'loadFacetData',
+            'loadSearchData',
             'clearFacetChoices',
         ]),
+        /**
+         * Generate a string label for search widget tabs.
+         * Joins the matching label for each facet name in the tab with a separator.
+         *
+         * @param {Array} tab
+         * @returns {String}
+         */
+        tabLabel(tab) {
+            return tab
+                .map(facetName => this.facetConfig.find(facet => facet.name === facetName).label)
+                .join('  ·  ')
+        }
     },
 })

sitemedia/js/index.js

@@ -53,5 +53,4 @@ $(() => {
         })
 
     $('.ui.dropdown').dropdown()
-    $('.ui.checkbox').checkbox()
 });

sitemedia/js/store/actions.js

@@ -1,27 +1,24 @@
 export default {
-    loadFacetData ({ commit }, query) {
+    loadSearchData ({ commit }, query) {
         return fetch(query)
             .then(res => res.json())
             .then(data => {
                 commit('setTotalResults', data.total)
-                let newFacets = {}
-                for (let facet in data.facets) {
-                    let choices = []
-                    for (let value in data.facets[facet]) {
-                        choices.push({
-                            value: value,
-                            count: data.facets[facet][value],
-                            active: false
+                Object.entries(data.facets).map(facet => {
+                    Object.entries(facet[1]).map(choice => {
+                        commit('addFacetChoice', {
+                            facet: facet[0],
+                            value: choice[0],
+                            count: choice[1],
+                            active: false,
                         })
-                    }
-                    newFacets[facet] = choices
-                }
-                commit('setFacets', newFacets)
+                    })
+                })
             })
     },
 
-    toggleFacetChoice ({ commit }, facet, value) {
-        commit('toggleFacetChoice', facet, value)
+    toggleFacetChoice ({ commit }, choice) {
+        commit('editFacetChoice', { choice, active: !choice.active })
     },
 
     clearFacetChoices ({ commit }) {

sitemedia/js/store/getters.js

@@ -1,7 +1,5 @@
 export default {
-    activeFacets (state) {
-        return Object.entries(state.facets)
-            .map(facet => facet[1].filter(choice => choice.active))
-            .reduce((acc, cur) => Object.assign({ [cur[0]]: cur[1] }, acc), {})
+    activeFacetChoices (state) {
+        return state.facetChoices.filter(choice => choice.active)
     },
 }

sitemedia/js/store/index.js

@@ -6,9 +6,9 @@ import getters from './getters'
 Vue.use(Vuex)
 
 const state = {
-	facets: [],
 	filters: [],
 	totalResults: 0,
+	facetChoices: [],
 }
 
 export default new Vuex.Store({

sitemedia/js/store/mutations.js

@@ -1,17 +1,27 @@
 export default {
-    setFacets (state, facets) {
-        state.facets = facets
+    addFacetChoice (state, choice) {
+        state.facetChoices.push(choice)
     },
 
-    toggleFacetChoice (state, choice) {
-        let target = state.facets[choice.facet].find(c => c.value == choice.value)
-        target.active = !target.active
+    removeFacetChoice (state, choice) {
+        state.facetChoices
+            .filter(c => c.facet === choice.facet && c.value === choice.value)
+            .forEach(c => {
+                state.facetChoices.splice(state.facetChoices.indexOf(c), 1)
+            })
     },
-
+
+    editFacetChoice (state, { choice, active = choice.active, count = choice.count }) {
+        state.facetChoices
+            .filter(c => c.facet === choice.facet && c.value === choice.value)
+            .forEach(c => {
+                c.active = active
+                c.count = count
+            })
+    },
+
     clearFacetChoices (state) {
-        for (let facet in state.facets) {
-            state.facets[facet].forEach(choice => choice.active = false)
-        }
+        state.facetChoices.forEach(choice => choice.active = false)
     },
 
     setTotalResults (state, total) {