facet changes dynamically update choice counts (#95)

sitemedia/js/components/RangeFacet.js

@@ -9,7 +9,6 @@ export default Vue.component('RangeFacet', {
             <sui-input :placeholder="maxVal" />
         </div>
         <div class="histogram">
-            {{ choices }}
         </div>
     </div>
     `,

sitemedia/js/components/books/BooksSearch.js

@@ -123,13 +123,15 @@ export default Vue.component('BooksSearch', {
         ]),
     },
     created() {
-        this.loadSearchData('/static/js/components/books/data.json')
+        this.setEndpoint('/books/facets/')
+        this.loadSearchData()
     },
     methods: {
         ...mapActions([
             'loadSearchData',
             'clearFacetChoices',
             'toggleFacetChoice',
+            'setEndpoint',
         ]),
         /**
          * Generate a string label for search widget tabs.

sitemedia/js/store/actions.js

@@ -1,8 +1,8 @@
 import router from '../router'
 
 export default {
-    loadSearchData ({ commit }, query) {
-        return fetch(query)
+    loadSearchData ({ commit, getters }) {
+        return fetch(getters.dataPath)
             .then(res => res.json())
             .then(data => {
                 commit('setTotalResults', data.total)
@@ -33,13 +33,38 @@ export default {
             })
     },
 
-    toggleFacetChoice ({ commit, getters }, choice) {
+    updateFacetCounts ({ commit, getters }) {
+        return fetch(getters.dataPath)
+            .then(res => res.json())
+            .then(data => {
+                commit('setTotalResults', data.total)
+                commit('updateFacetChoiceCounts', Object.entries(data.facets))
+            })
+    },
+
+    toggleFacetChoice ({ commit, getters, dispatch }, choice) {
+        let activeBeforeToggle = Object.keys(getters.activeFacets)
         commit('editFacetChoice', { choice, active: !choice.active })
         router.replace({
             query: {
                 ...getters.activeFacets
             }
         })
+        if (Object.keys(getters.activeFacets) != activeBeforeToggle) { // a facet was added or removed
+            return dispatch('updateFacetCounts')
+        }
+    },
+
+    setRangeFacetMin ({ commit }, facet) {
+        commit('editRangeFacet', facet)
+    },
+
+    setRangeFacetMax ({ commit }, facet) {
+        commit('editRangeFacet', facet)
+    },
+
+    setEndpoint ({ commit }, endpoint) {
+        commit('setEndpoint', endpoint)
     },
 
     clearFacetChoices ({ commit }) {

sitemedia/js/store/getters.js

@@ -17,5 +17,10 @@ export default {
                 else acc[cur.facet] = cur.value
                 return acc
             }, {})
+    },
+
+    dataPath (state) {
+        let querystring = state.route.fullPath.split('?')[1]
+        return querystring ? `${state.endpoint}?${querystring}` : state.endpoint
     }
 }

sitemedia/js/store/index.js

@@ -10,6 +10,7 @@ const state = {
 	totalResults: 0,
 	facetChoices: [],
 	rangeFacets: [],
+	endpoint: ''
 }
 
 export default new Vuex.Store({

sitemedia/js/store/mutations.js

@@ -35,6 +35,14 @@ export default {
         })
     },
 
+    updateFacetChoiceCounts (state, facets) {
+        facets.forEach(facet => {
+            Object.keys(facet[1]).forEach(value => {
+                state.facetChoices.find(c => c.facet === facet[0] && c.value === value).count = facet[1][value]
+            })
+        })
+    },
+
     addRangeFacet (state, facet) {
         state.rangeFacets.push(facet)
     },
@@ -44,6 +52,10 @@ export default {
         state.rangeFacets[facet.facet].maxVal = maxVal
     },
 
+    setEndpoint (state, endpoint) {
+        state.endpoint = endpoint
+    },
+
     setTotalResults (state, total) {
         state.totalResults = total
     },