Feature/grove 244 typeahead facet

package.json

@@ -33,6 +33,7 @@
     "vue-breadcrumbs": "^1.1.2",
     "vue-hljs": "^1.1.2",
     "vue-json-tree-view": "^2.1.4",
+    "vue-multiselect": "^2.1.3",
     "vue-pdf": "^3.3.1",
     "vue-router": "^3.0.1",
     "vue-toast": "^3.1.0",

src/api/SearchApi.js

@@ -54,6 +54,20 @@ export default {
     }).then(
       response => {
         return response.json().then(function(json) {
+          Object.keys(json.facets || {}).forEach(key => {
+            var facet = json.facets[key];
+            facet.name = key;
+            (facet.facetValues || []).forEach(facetValue => {
+              let active =
+                activeFacets[key] &&
+                activeFacets[key].values.filter(activeValue => {
+                  return activeValue.value === facetValue.name;
+                }).length;
+              if (active) {
+                facetValue.selected = true;
+              }
+            });
+          });
           return { response: json };
         });
       },

src/components/ml-search/ml-facet-suggestions.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="facet-list-suggestion">
+        <multiselect v-if="suggestions.length && (current.length || (suggestions.length > facet.facetValues.length))"
+                :v-model="selected"
+                :options="suggestions"
+                :multiple="false"
+                :searchable="true"
+                :customLabel="nameWithCount"
+                placeholder="Search more.."
+                label="name"
+                track-by="name"
+                open-direction="bottom"
+                v-on:search-change="getSuggestions"
+                v-on:select="onSelected"
+        >
+        </multiselect>
+    </div>
+</template>
+
+<script>
+  import Multiselect from 'vue-multiselect';
+  import Vue from 'vue';
+
+  export default {
+    name: 'ml-facet-suggestions',
+    components: {
+      Multiselect
+    },
+    props: {
+      facet: {
+        type: Object,
+        required: true
+      },
+      toggle: {
+        type: Function,
+        required: true
+      },
+      suggest: {
+        type: Function,
+        reqiured: true
+      }
+    },
+    data() {
+      return {
+        current: '',
+        selected: null,
+        suggestions: []
+      };
+    },
+    created() {
+      this.getSuggestions('');
+    },
+    methods: {
+      onSelected(option) {
+        this.selected = option;
+        this.toggle(this.facet.name, this.facet.type, option.name)
+        .then(() => this.getSuggestions(''));
+      },
+      getSuggestions(current) {
+        var self = this;
+        this.current = current;
+        this.suggest(this.facet.name, current)
+        .then(suggestions => {
+          if (suggestions.length) {
+            self.suggestions = suggestions;
+          } else {
+            self.suggestions = [{ name: current + '* (no match)'}];
+          }
+        });
+      },
+      nameWithCount(option) {
+        return '' + option.name + ' ' + (option.count?'('+option.count+')':'');
+      },
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/ml-search/ml-facet.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="facet" v-if="nonSelectedValues.length && !facet.hide">
+    <h3>{{ facet.name }}</h3>
+    <div v-for="(value, $index) in nonSelectedValues" :key="$index">
+      <span v-on:click.prevent="toggle(facet.name, facet.type, value.name)">
+        <i class="fa fa-plus-circle facet-add-pos"></i>
+        <span v-if="!!value.name" :title="value.name"> {{ value.name }}</span>
+        <em v-if="!value.name">blank</em>
+        <span> ({{ value.count }}) </span>
+      </span>
+      <i v-if="!!negate" class="fa fa-ban facet-add-neg" v-on:click.prevent="negate(facet.name, facet.type, value.name)" :title="value.name"></i>
+    </div>
+    <!--div v-if="!!showMore && !facet.displayingAll">
+      <a href v-on:click.prevent="showMore(facetName)">see more ...</a>
+    </div-->
+    <ml-facet-suggestions v-if="suggest" :facet="facet" :toggle="toggle" :suggest="suggest">
+    </ml-facet-suggestions>
+  </div>
+</template>
+
+<script>
+import mlFacetSuggestions from '@/components/ml-search/ml-facet-suggestions.vue';
+
+export default {
+  name: 'ml-facet',
+  components: {
+    mlFacetSuggestions
+  },
+  props: {
+    facet: {
+      type: Object,
+      required: true
+    },
+    toggle: {
+      type: Function,
+      required: true
+    },
+    negate: {
+      type: Function
+    }/*,
+    showMore: {
+      type: Function
+    }*/,
+    suggest: {
+      type: Function
+    }
+  },
+  computed: {
+    facetValues() {
+      return this.facet.facetValues || [];
+    },
+    nonSelectedValues() {
+      return this.facetValues.filter(value => {
+        return !value.selected;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.facet-list {
+  .facet-add-pos,
+  .facet-add-neg {
+    visibility: hidden;
+  }
+  span:hover > .facet-add-pos,
+  div:hover > .facet-add-neg {
+    visibility: visible !important;
+  }
+}
+</style>

src/main.js

@@ -8,6 +8,8 @@ import router from './router';
 import store from './store';
 import './registerServiceWorker';
 import './styles/main.less';
+// UNCOMMENT the next line to enable facet typeahead
+import 'vue-multiselect/dist/vue-multiselect.min.css';
 
 //import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';

src/router.js

@@ -69,7 +69,7 @@ const $router = new Router({
       component: () =>
         import(/* webpackChunkName: "search" */ './views/SearchPage.vue'),
       props: {
-        type: 'all'
+        searchType: 'all'
       },
       meta: {
         label: 'Search',