better search user interface:

- facets as object properties
- composer updates

resources/assets/js/search/App.vue

@@ -9,8 +9,9 @@
         </div>-->
 
         <!-- <facet-list v-bind:data="facets"></facet-list> -->
-        <div class="card" v-for="(item, index) in facets" :key="index">
-          <facet-list :data="item.values" :filterName="item.filterName" @filter="onFilter"></facet-list>
+        <!-- <div class="card" v-for="(item, index) in facets" :key="index"> -->
+          <div class="card" v-for="(values, key, index) in facets" :key="index">
+          <facet-list :data="values" :filterName="key" @filter="onFilter"></facet-list>
         </div>
       </div>
     </div>

resources/assets/js/search/app-class.js

@@ -15,7 +15,7 @@ import FilterItem from './models/filter-item';
 export default class App extends Vue {
 
   results = [];
-  facets = [];
+  facets = {};
   searchTerm = '';
   activeFilterItems = {};
 
@@ -32,20 +32,33 @@ export default class App extends Vue {
       var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
       this.results = res.response.docs;
       // this.facets = res.facet_counts.facet_fields;
-      this.facets = [];
+      // this.facets = [];
       var facet_fields = res.facet_counts.facet_fields;
       for (var prop in facet_fields) {
-        var facetValues = facet_fields[prop].map((facet, i) => {
+        var facetValues = facet_fields[prop].map((facetValue, i) => {
           if (i % 2 === 0) {
-            // var rObj = { value: facet, count: facet_fields[prop][i + 1] };
-            var rObj = new FilterItem(facet, facet_fields[prop][i + 1]);
+            // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
+            var rObj;
+            if (filter.value == facetValue) {
+              rObj = filter;
+            } else if( this.facets[prop].some(e => e.value === facetValue)) {
+              console.log(facetValue + " is included")
+              var indexOfFacetValue =  this.facets[prop].findIndex(i => i.value === facetValue);
+              console.log(indexOfFacetValue);
+              rObj = this.facets[prop][indexOfFacetValue];
+              rObj.count =  facet_fields[prop][i + 1];
+            } else {
+              rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
+            }
             return rObj;
           }
         }).filter(function (el) {
           return el != null && el.count > 0;
         });
-        this.facets.push({ filterName: prop, values: facetValues });
+        // this.facets.push({ filterName: prop, values: facetValues });
+        this.facets[prop] = facetValues;
       }
+
     }
   }
 
@@ -55,9 +68,10 @@ export default class App extends Vue {
     //   this.activeFilterItems.pop();
     // }
     this.activeFilterItems = {};
-    while (this.facets.length > 0) {
-      this.facets.pop();
-    }
+    // while (this.facets.length > 0) {
+    //   this.facets.pop();
+    // }
+    this.facets = {};
     this.searchTerm = term;
     var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
     this.results = res.response.docs;
@@ -72,7 +86,8 @@ export default class App extends Vue {
       }).filter(function (el) {
         return el != null && el.count > 0;
       });
-      this.facets.push({ filterName: prop, values: facetValues });
+      //this.facets.push({ filterName: prop, values: facetValues });
+      this.facets[prop] = facetValues;
     }
     // console.log(this.facets.toString());
   }

resources/assets/js/search/models/filter-item.js

@@ -19,6 +19,9 @@ export default class FilterItem {
         this.category = theCategory;
     }
 
+    get Active() {
+        return this.active;
+    }
     set Active(isActive) {
         this.active = isActive;
     }

resources/assets/js/search/search-results/facet-list.vue

@@ -17,7 +17,7 @@
         <label :for="item.value">
           <span click: @click="activateItem(item)">{{ item.value }} ({{ item.count }})</span>
         </label>-->
-        <a :class="Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.value }} ({{ item.count }})</a>
+        <a :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.value }} ({{ item.count }})</a>
       </li>
     </ul>
     <ul class="overflowing" v-if="overflowing == true">
@@ -36,7 +36,10 @@ export default FacetList;
 <style scoped>
 /* local styles */
 .disabled {
-  color: lightgrey;
+  /* background: #dddddd;   */
+  /* color: #EBEBE4; */
+  color:#ffffff;
   pointer-events: none;
+  text-decoration:line-through;
 }
 </style>