search: show refined count

verdie-g · May 16, 2018 · 5741926 · 5741926
1 parent ff25903
commit 5741926
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -24,7 +24,7 @@
         </refinement-list-dropdown>
       </li>
       <li class="column facet-item">
-        <refinement-list-dropdown-list :search-store="searchStore" :facetGroups="professions">
+        <refinement-list-dropdown-list :search-store="searchStore" :facetsGroups="professions">
           <h3 class="title is-size-6" slot="trigger" slot-scope="{ facetsRefinedCount }">
             <span>Professions</span>
             <b-tag rounded class="is-primary" v-if="facetsRefinedCount !== 0">

diff --git a/src/components/ais/BRefinementList.vue b/src/components/ais/BRefinementList.vue
@@ -4,7 +4,7 @@
       <b-checkbox v-model="facet.isRefined"
                   :class="bem('label')"
                   :native-value="facet.name"
-                  @input="toggleRefinement(facet)">
+                  @input="toggleRefinement(facet); emitFacetsRefinedCount()">
         <slot :count="facet.count" :active="facet.isRefined" :value="facet.name">
           <span :class="bem('value')">{{facet.name}}</span>
           <b-tag rounded :class="bem('count')" class="is-primary">{{facet.count}}</b-tag>
@@ -19,9 +19,10 @@ import { RefinementList } from 'vue-instantsearch';
 
 export default {
   extends: RefinementList,
-  computed: {
-    facetsRefinedCount() {
-      return this.facetValues.reduce((count, facet) => count + facet.isRefined, 0);
+  methods: {
+    emitFacetsRefinedCount() {
+      const refinedCount = this.facetValues.reduce((count, facet) => count + facet.isRefined, 0);
+      this.$emit('update:facetsRefinedCount', refinedCount);
     },
   },
 };

diff --git a/src/components/ais/RefinementListDropdown.vue b/src/components/ais/RefinementListDropdown.vue
@@ -9,7 +9,7 @@
       :searchStore="searchStore"
       :attribute-name="attributeName"
       class="facets-list"
-      ref="refinementList">
+      v-on:update:facetsRefinedCount="facetsRefinedCount = $event">
     </b-refinement-list>
   </b-dropdown>
 </template>
@@ -31,10 +31,10 @@ export default {
       required: true,
     },
   },
-  computed: {
-    facetsRefinedCount() {
-      return 0;
-    },
+  data() {
+    return {
+      facetsRefinedCount: 0,
+    };
   },
 };
 </script>
diff --git a/src/components/ais/RefinementListDropdownList.vue b/src/components/ais/RefinementListDropdownList.vue
@@ -8,34 +8,41 @@
     <b-tabs v-model="activeFacetsGroup">
       <b-tab-item>
         <ul class="facets-groups-index">
-          <li v-for="(facet, i) in facetGroups.facets"
+          <li v-for="(facet, i) in facetsGroups.facets"
               :key="facet.name"
               @click="activeFacetsGroup = i + 1">
-            <span>{{facet.label}}</span>
+            <span>
+              {{facet.label}}
+              <b-tag rounded class="is-primary" v-if="facetsRefinedCounts[i] !== 0">
+                {{facetsRefinedCounts[i]}}
+              </b-tag>
+            </span>
             <b-icon icon="chevron-right"></b-icon>
           </li>
         </ul>
       </b-tab-item>
 
       <b-tab-item
-        v-for="facet in facetGroups.facets"
+        v-for="(facet, i) in facetsGroups.facets"
         :key="facet.name"
         class="facets-group">
         <div class="facets-group-header" @click="activeFacetsGroup = 0">
           <span>{{facet.label}}</span>
           <b-icon icon="chevron-left"></b-icon>
         </div>
         <b-refinement-list
-          :attribute-name="`${facetGroups.name}.${facet.name}`"
+          :attribute-name="`${facetsGroups.name}.${facet.name}`"
           :search-store="searchStore"
-          class="facets-list">
+          class="facets-list"
+          v-on:update:facetsRefinedCount="updateFacetsRefinedCount($event, i)">
         </b-refinement-list>
       </b-tab-item>
     </b-tabs>
   </b-dropdown>
 </template>
 
 <script>
+import Vue from 'vue';
 import BRefinementList from './BRefinementList';
 
 export default {
@@ -47,18 +54,25 @@ export default {
       type: Object,
       required: true,
     },
-    facetGroups: {
+    facetsGroups: {
       type: Object,
       required: true,
     },
   },
+  methods: {
+    updateFacetsRefinedCount(count, i) {
+      // this.facetsRefinedCounts[i] = count;
+      Vue.set(this.facetsRefinedCounts, i, count);
+    },
+  },
   computed: {
     facetsRefinedCount() {
-      return 0;
+      return this.facetsRefinedCounts.reduce((totalCount, count) => totalCount + count, 0);
     },
   },
   data() {
     return {
+      facetsRefinedCounts: Array(this.facetsGroups.facets.length).fill(0),
       activeFacetsGroup: 0,
     };
   },