- .panel-title: capitalize

- bind sevaal filter-viewmodel
- better dataservice with datatype facet

public/css/search_style.css

@@ -22,6 +22,7 @@ section.search {
 /* Seasrch items */
 
 .left-bar .panel-title {
+    text-transform: capitalize;
     margin-top: 8px;
     margin-bottom: 2px;
     color: white;

resources/assets/js/search/App.vue

@@ -9,7 +9,10 @@
           <span>{{ item }}</span>     
         </div> -->
 
-         <facet-list v-bind:data="facets"></facet-list>
+         <!-- <facet-list v-bind:data="facets"></facet-list> -->
+          <div class="card" v-for="(valueArray, filterName, index) in facets" :key="index">
+             <facet-list :data="valueArray" :filterName="filterName"></facet-list>
+          </div>
       </div>
     </div>
 

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

@@ -27,7 +27,7 @@ export default class App extends Vue {
  
 
   mounted() {
-    console.log('Component mounted.')
+    // console.log('Component mounted.')
   }
 
 }

resources/assets/js/search/search-results/dataservice.js

@@ -9,7 +9,7 @@ export default {
         const path = 'solr/rdr_data/select';
         const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
         const dismaxFields = "title^3 abstract^2 subject^1";
-        const facetFields = "facet.field=language";//&fq=year:(2019)";//&facet.query=year:2018";
+        const facetFields = "facet.field=language&facet.field={!key=datatype}doctype";//&fq=year:(2019)";//&facet.query=year:2018";
 
         // $dismax->setQueryFields('title^3 abstract^2 subject^1');
         const api = `${host}${path}?defType=dismax&q=${term}&fl=${fields}&qf=${dismaxFields}&facet=on&${facetFields}&wt=json&rows=20&indent=on`;

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

@@ -8,17 +8,22 @@ export default class FacetList extends Vue {
     
     ITEMS_PER_FILTER = 5;
     bar = 'bar';
+    // filterItems = [];
 
     @Prop()
     data;
+    @Prop()
+    filterName;
 
     get myLanguageFilters() {
-        var facetValues = this.data.language.map((facet, i) => {
+        // console.log(this.filterName);
+        // console.log(this.data);       
+        var facetValues = this.data.map((facet, i) => {
             if (i % 2 === 0) {
                 // var rObj = {};
                 // rObj['value'] = facet;
                 // rObj['count'] = solrArray[i +1];
-                var rObj = { value: facet, count: this.data.language[i + 1] };
+                var rObj = { value: facet, count: this.data[i + 1] };
                 return rObj;
             }
         }).filter(function (el) {
@@ -36,26 +41,27 @@ export default class FacetList extends Vue {
     get facets() {
         return this.data;
     };
-
-    mounted() {        
-    };
-
-    test(solrArray) {
-        //this.facetValues = this.data.language.filter((facet, i) => i % 2 === 0);
-
-        // var facetValues = this.data.language.map((facet, i) =>  {
-        var facetValues = solrArray.map((facet, i) => {
+    get filterItems() {
+        var facetValues = this.data.map((facet, i) => {
             if (i % 2 === 0) {
                 // var rObj = {};
                 // rObj['value'] = facet;
                 // rObj['count'] = solrArray[i +1];
-                var rObj = { value: facet, count: solrArray[i + 1] };
+                var rObj = { value: facet, count: this.data[i + 1] };
                 return rObj;
             }
+        }).filter(function (el) {
+            return el != null && el.count > 0;
         });
-
-
-        // this.facetCounts = this.data.filter((facet, i) => i % 2 === 1);
+        // var facetValues = this.data.language.filter(function(facet, i) {                                
+        //     return i % 2 === 0;
+        // }).map(function (facet, i) {
+        //     var rObj = { value: facet, count: this.data.language[i + 1] };
+        //     return rObj;
+        // }, this);
         return facetValues;
-    }
+    };
+
+    mounted() {        
+    };
 }

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

@@ -1,27 +1,34 @@
 <template>
-  <div>
-    <div class="card" v-for="(valueArray, filterName, index) in facets" :key="index">
-      <!-- <span>property: {{ filterName }}</span>
-      <span>value: {{ myLanguageFilters }}</span> -->
+  <!-- <span>property: {{ filterName }}</span>
+  <span>value: {{ myLanguageFilters }}</span>-->
 
-      <div class="panel panel-primary">
-        <h3 class="panel-title">{{ filterName }}</h3> <!-- e.g.language -->
-        <ul class="filter-items" v-for="(value, index) in myLanguageFilters" :key="index">
-          <li class="active" role="radio">
-            <input
-              class="css-w1gpbi"
-              name="language"
-              v-bind:id="value.value"
-              type="radio"
-              v-bind:value="value.value"
-            />
-            <label :for="value.value">
-              <span>{{ value.value }} ({{ value.count }})</span>
-            </label>
-          </li>
-        </ul>
-      </div>
-    </div>
+  <div class="panel panel-primary">
+    <h3 class="panel-title filterViewModelName">{{ filterName }}</h3>
+    <!-- e.g.language -->
+    <ul
+      class="filter-items"
+      v-for="(value, index) in myLanguageFilters"
+      :key="index"
+      v-bind:class="{'limited':filterItems.length > 1}"
+    >
+      <li class="active" role="radio">
+        <input
+          class="css-w1gpbi"
+          name="language"
+          v-bind:id="value.value"
+          type="radio"
+          v-bind:value="value.value"
+        />
+        <label :for="value.value">
+          <span>{{ value.value }} ({{ value.count }})</span>
+        </label>
+      </li>
+    </ul>
+    <ul class="overflowing">
+      <li>
+        <span @click="toggle()"></span>
+      </li>
+    </ul>
   </div>
 </template>