From 6a2a2e2473ef94f8d91504257314adde6b6a019d Mon Sep 17 00:00:00 2001
From: Jan Michael Yu <jan.michael.yu+github@gmail.com>
Date: Thu, 18 Oct 2018 16:19:05 +0800
Subject: [PATCH 1/5] GROVE-244 : adding a typeahead field, currently disabled
 but committed files contain instructions on which lines to uncomment to
 enable

---
 package.json                                  |   1 +
 .../ml-search/ml-facets-suggestions-auto.vue  | 105 ++++++++++++++++++
 .../ml-search/ml-facets-suggestions.vue       |  71 ++++++++++++
 src/main.js                                   |   2 +
 src/views/SearchPage.vue                      |   4 +
 5 files changed, 183 insertions(+)
 create mode 100755 src/components/ml-search/ml-facets-suggestions-auto.vue
 create mode 100755 src/components/ml-search/ml-facets-suggestions.vue

diff --git a/package.json b/package.json
index 86cb535..51456a7 100755
--- a/package.json
+++ b/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",
diff --git a/src/components/ml-search/ml-facets-suggestions-auto.vue b/src/components/ml-search/ml-facets-suggestions-auto.vue
new file mode 100755
index 0000000..e212a26
--- /dev/null
+++ b/src/components/ml-search/ml-facets-suggestions-auto.vue
@@ -0,0 +1,105 @@
+<template>
+    <div class="facet-list-suggestion">
+        <multiselect
+                v-model="selected"
+                :options="suggestions"
+                :multiple="true"
+                @search-change="getList"
+                :searchable="true"
+                placeholder="Type to search"
+                label="name"
+                track-by="name"
+                @select="onSelected"
+                open-direction="bottom"
+                @remove="onRemove"
+                :customLabel="customLabel"
+        >
+        </multiselect>
+    </div>
+</template>
+
+<script>
+  import Multiselect from 'vue-multiselect';
+  import Vue from 'vue';
+  import SearchApi from '@/api/SearchApi.js';
+
+  export default {
+    props: {
+      facetName: {
+        type: String,
+        required: true
+      },
+      facet: {
+        type: Object,
+        required: true
+      },
+      toggle: {
+        type: Function,
+        required: true
+      },
+      type: {
+        type: String,
+        required: true
+      },
+      negate: {
+        type: Function
+      }
+    },
+    data() {
+      return {
+        selected: '',
+        suggestions: this.facet.facetValues,
+        options: Vue.util.extend({}, this.facet).facetValues,
+        debounceMilliseconds: 50,
+        limit: 10
+      };
+    },
+    watch: {
+      facet () {
+        if (this.facet) {
+          this.suggestions = this.facet.facetValues
+        }
+      }
+    },
+    name: 'ml-facets-suggestions-auto',
+    components: {
+      Multiselect
+    },
+    methods: {
+      onSelected(option) {
+        this.selected = option;
+        this.toggle(this.facetName, this.facet.type, option.name);
+      },
+      getList(current) {
+        if (current === '' || current === undefined) {
+          return;
+        }
+
+        let qtext = this.facetName + ':' + current;
+
+        const suggestPromise = SearchApi.suggest(this.type, qtext);
+
+        suggestPromise.then(response => {
+          let newVal = response.suggestions.map(
+            (suggestion) => {
+              let name = suggestion.split(':')[1];
+              return {name: name, value: name};
+            }
+          );
+          this.suggestions = newVal;
+          return newVal;
+        });
+      },
+      onRemove(option) {
+        this.suggestions = this.options;
+        this.toggle(this.facetName, this.facet.type, option.name);
+      },
+      customLabel (option) {
+        return '' + option.name + ' ' + (option.count?'('+option.count+')':'');
+      },
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/src/components/ml-search/ml-facets-suggestions.vue b/src/components/ml-search/ml-facets-suggestions.vue
new file mode 100755
index 0000000..44df14a
--- /dev/null
+++ b/src/components/ml-search/ml-facets-suggestions.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="facet-list">
+
+    <div class="facet" v-for="(facet, facetName, $index) in facets" :key="$index"
+        v-show="!facet.hide">
+      <h3>{{ facetName }}</h3>
+      <ml-facets-suggestions-auto :facetName="facetName" :facet="facet" :toggle="toggle" v-on:toggle-facet="toggle" :type="type">
+      </ml-facets-suggestions-auto>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import mlChiclets from '@/components/ml-search/ml-chiclets.vue';
+import mlFacetsSuggestionsAuto from '@/components/ml-search/ml-facets-suggestions-auto.vue';
+
+export default {
+  name: 'ml-facets-suggestions',
+  components: {
+    mlChiclets,
+    mlFacetsSuggestionsAuto
+  },
+  props: {
+    facets: {
+      type: Object,
+      required: true
+    },
+    activeFacets: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    toggle: {
+      type: Function,
+      required: true
+    },
+    negate: {
+      type: Function
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    showMore: {
+      type: Function
+    }
+  },
+  methods: {
+    hasNonSelectedValues(facet) {
+      return (facet.facetValues || []).filter(value => {
+        return !value.selected;
+      }).length;
+    }
+  }
+};
+</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>
diff --git a/src/main.js b/src/main.js
index 1c675e8..9103a18 100755
--- a/src/main.js
+++ b/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';
diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index f9b55c4..f72a8ea 100755
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -4,8 +4,12 @@
       <div class="col-xs-12 search-row">
         <ml-input :qtext="qtext" :search="search" :suggest="suggest" class="search"></ml-input>
       </div>
+
       <div class="col-xs-12 col-sm-4 col-md-3 facets-col">
+          <!--// COMMENT the next line to enable facet typeahead-->
         <ml-facets v-if="facets" :facets="facets" :toggle="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet"></ml-facets>
+          <!--// UNCOMMENT the next line to enable facet typeahead-->
+        <!--<ml-facets-suggestions v-if="facets" :facets="facets" :toggle="toggleFacet" v-on:toggleFacet="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet" :type="type"></ml-facets-suggestions>-->
       </div>
       <div class="col-xs-12 col-sm-8 col-md-9 results-col">
         <i class="fa fa-refresh pull-right" :class="searchPending ? 'fa-spin' : ''"

From 334b30fbab2d1eeceec02eb8b54c1870368d09c2 Mon Sep 17 00:00:00 2001
From: Jan Michael Yu <jan.michael.yu+github@gmail.com>
Date: Thu, 1 Nov 2018 10:55:36 -0500
Subject: [PATCH 2/5] GROVE-244 : adding missing import lines for
 ml-facets-suggestions

---
 src/views/SearchPage.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index f72a8ea..562637c 100755
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -42,6 +42,7 @@ import mlMetrics from '@/components/ml-search/ml-metrics.vue';
 import mlResults from '@/components/ml-search/ml-results.vue';
 import mlSelect from '@/components/ml-select.vue';
 import SearchApi from '@/api/SearchApi.js';
+import mlFacetsSuggestions from '@/components/ml-search/ml-facets-suggestions.vue';
 
 export default {
   name: 'SearchPage',
@@ -56,7 +57,8 @@ export default {
     mlInput,
     mlMetrics,
     mlResults,
-    mlSelect
+    mlSelect,
+    mlFacetsSuggestions
   },
   computed: {
     isLoggedIn() {

From f6e54a108c716733bb9fe8d622dc22442876c858 Mon Sep 17 00:00:00 2001
From: Geert Josten <geert.josten@marklogic.com>
Date: Thu, 8 Nov 2018 21:43:15 +0100
Subject: [PATCH 3/5] Enabling ml-facets-suggestions

---
 src/components/ml-search/ml-facets-suggestions-auto.vue | 6 +++---
 src/main.js                                             | 2 +-
 src/views/SearchPage.vue                                | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ml-search/ml-facets-suggestions-auto.vue b/src/components/ml-search/ml-facets-suggestions-auto.vue
index e212a26..26cf3fb 100755
--- a/src/components/ml-search/ml-facets-suggestions-auto.vue
+++ b/src/components/ml-search/ml-facets-suggestions-auto.vue
@@ -48,8 +48,8 @@
     data() {
       return {
         selected: '',
-        suggestions: this.facet.facetValues,
-        options: Vue.util.extend({}, this.facet).facetValues,
+        suggestions: this.facet.facetValues || [],
+        //options: Vue.util.extend({}, this.facet).facetValues,
         debounceMilliseconds: 50,
         limit: 10
       };
@@ -57,7 +57,7 @@
     watch: {
       facet () {
         if (this.facet) {
-          this.suggestions = this.facet.facetValues
+          this.suggestions = this.facet.facetValues || [];
         }
       }
     },
diff --git a/src/main.js b/src/main.js
index 9103a18..f346f42 100755
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,7 @@ 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 'vue-multiselect/dist/vue-multiselect.min.css';
 
 //import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index 562637c..27563be 100755
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -7,9 +7,11 @@
 
       <div class="col-xs-12 col-sm-4 col-md-3 facets-col">
           <!--// COMMENT the next line to enable facet typeahead-->
-        <ml-facets v-if="facets" :facets="facets" :toggle="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet"></ml-facets>
+        <!--
+          <ml-facets v-if="facets" :facets="facets" :toggle="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet"></ml-facets>
+        -->
           <!--// UNCOMMENT the next line to enable facet typeahead-->
-        <!--<ml-facets-suggestions v-if="facets" :facets="facets" :toggle="toggleFacet" v-on:toggleFacet="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet" :type="type"></ml-facets-suggestions>-->
+        <ml-facets-suggestions v-if="facets" :facets="facets" :toggle="toggleFacet" v-on:toggleFacet="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet" :type="type"></ml-facets-suggestions>
       </div>
       <div class="col-xs-12 col-sm-8 col-md-9 results-col">
         <i class="fa fa-refresh pull-right" :class="searchPending ? 'fa-spin' : ''"
@@ -36,6 +38,7 @@
 </template>
 
 <script>
+//import mlFacets from '@/components/ml-search/ml-facets.vue';
 import mlFacets from '@/components/ml-search/ml-facets.vue';
 import mlInput from '@/components/ml-search/ml-input.vue';
 import mlMetrics from '@/components/ml-search/ml-metrics.vue';
@@ -54,6 +57,7 @@ export default {
   },
   components: {
     mlFacets,
+    mlFacetsSuggestions,
     mlInput,
     mlMetrics,
     mlResults,

From 34fd293a0175a623fc71c6904ba719b0f572384d Mon Sep 17 00:00:00 2001
From: Geert Josten <geert.josten@marklogic.com>
Date: Mon, 12 Nov 2018 11:41:32 +0100
Subject: [PATCH 4/5] Reorganized facet directives, integrated suggestions
 deeper into base code

---
 package-lock.json                             |   5 +
 src/api/SearchApi.js                          |  14 +++
 .../ml-search/ml-facet-suggestions.vue        |  75 +++++++++++++
 src/components/ml-search/ml-facet.vue         |  72 ++++++++++++
 .../ml-search/ml-facets-suggestions-auto.vue  | 105 ------------------
 .../ml-search/ml-facets-suggestions.vue       |  71 ------------
 src/components/ml-search/ml-facets.vue        |  75 -------------
 src/router.js                                 |   2 +-
 src/views/SearchPage.vue                      |  70 +++++++-----
 9 files changed, 211 insertions(+), 278 deletions(-)
 create mode 100755 src/components/ml-search/ml-facet-suggestions.vue
 create mode 100755 src/components/ml-search/ml-facet.vue
 delete mode 100755 src/components/ml-search/ml-facets-suggestions-auto.vue
 delete mode 100755 src/components/ml-search/ml-facets-suggestions.vue
 delete mode 100755 src/components/ml-search/ml-facets.vue

diff --git a/package-lock.json b/package-lock.json
index d5b31ba..ef3207a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15736,6 +15736,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-multiselect": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.3.tgz",
+      "integrity": "sha512-ANLvoLEZv5uzissmh2WSHTn8DGhqsKi6zVtctpf1wnGK6vmZBktQZzeuHGxH7KpIb+4A6BlXmq0RR08jtQ67tg=="
+    },
     "vue-pdf": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/vue-pdf/-/vue-pdf-3.3.1.tgz",
diff --git a/src/api/SearchApi.js b/src/api/SearchApi.js
index 391e64b..2025226 100755
--- a/src/api/SearchApi.js
+++ b/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 };
         });
       },
diff --git a/src/components/ml-search/ml-facet-suggestions.vue b/src/components/ml-search/ml-facet-suggestions.vue
new file mode 100755
index 0000000..a2b62dd
--- /dev/null
+++ b/src/components/ml-search/ml-facet-suggestions.vue
@@ -0,0 +1,75 @@
+<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.prevent="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 => {
+          self.suggestions = suggestions;
+        });
+      },
+      nameWithCount(option) {
+        return '' + option.name + ' ' + (option.count?'('+option.count+')':'');
+      },
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/src/components/ml-search/ml-facet.vue b/src/components/ml-search/ml-facet.vue
new file mode 100755
index 0000000..d870d11
--- /dev/null
+++ b/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>
diff --git a/src/components/ml-search/ml-facets-suggestions-auto.vue b/src/components/ml-search/ml-facets-suggestions-auto.vue
deleted file mode 100755
index 26cf3fb..0000000
--- a/src/components/ml-search/ml-facets-suggestions-auto.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-    <div class="facet-list-suggestion">
-        <multiselect
-                v-model="selected"
-                :options="suggestions"
-                :multiple="true"
-                @search-change="getList"
-                :searchable="true"
-                placeholder="Type to search"
-                label="name"
-                track-by="name"
-                @select="onSelected"
-                open-direction="bottom"
-                @remove="onRemove"
-                :customLabel="customLabel"
-        >
-        </multiselect>
-    </div>
-</template>
-
-<script>
-  import Multiselect from 'vue-multiselect';
-  import Vue from 'vue';
-  import SearchApi from '@/api/SearchApi.js';
-
-  export default {
-    props: {
-      facetName: {
-        type: String,
-        required: true
-      },
-      facet: {
-        type: Object,
-        required: true
-      },
-      toggle: {
-        type: Function,
-        required: true
-      },
-      type: {
-        type: String,
-        required: true
-      },
-      negate: {
-        type: Function
-      }
-    },
-    data() {
-      return {
-        selected: '',
-        suggestions: this.facet.facetValues || [],
-        //options: Vue.util.extend({}, this.facet).facetValues,
-        debounceMilliseconds: 50,
-        limit: 10
-      };
-    },
-    watch: {
-      facet () {
-        if (this.facet) {
-          this.suggestions = this.facet.facetValues || [];
-        }
-      }
-    },
-    name: 'ml-facets-suggestions-auto',
-    components: {
-      Multiselect
-    },
-    methods: {
-      onSelected(option) {
-        this.selected = option;
-        this.toggle(this.facetName, this.facet.type, option.name);
-      },
-      getList(current) {
-        if (current === '' || current === undefined) {
-          return;
-        }
-
-        let qtext = this.facetName + ':' + current;
-
-        const suggestPromise = SearchApi.suggest(this.type, qtext);
-
-        suggestPromise.then(response => {
-          let newVal = response.suggestions.map(
-            (suggestion) => {
-              let name = suggestion.split(':')[1];
-              return {name: name, value: name};
-            }
-          );
-          this.suggestions = newVal;
-          return newVal;
-        });
-      },
-      onRemove(option) {
-        this.suggestions = this.options;
-        this.toggle(this.facetName, this.facet.type, option.name);
-      },
-      customLabel (option) {
-        return '' + option.name + ' ' + (option.count?'('+option.count+')':'');
-      },
-    }
-  };
-</script>
-
-<style lang="less" scoped>
-</style>
diff --git a/src/components/ml-search/ml-facets-suggestions.vue b/src/components/ml-search/ml-facets-suggestions.vue
deleted file mode 100755
index 44df14a..0000000
--- a/src/components/ml-search/ml-facets-suggestions.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="facet-list">
-
-    <div class="facet" v-for="(facet, facetName, $index) in facets" :key="$index"
-        v-show="!facet.hide">
-      <h3>{{ facetName }}</h3>
-      <ml-facets-suggestions-auto :facetName="facetName" :facet="facet" :toggle="toggle" v-on:toggle-facet="toggle" :type="type">
-      </ml-facets-suggestions-auto>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import mlChiclets from '@/components/ml-search/ml-chiclets.vue';
-import mlFacetsSuggestionsAuto from '@/components/ml-search/ml-facets-suggestions-auto.vue';
-
-export default {
-  name: 'ml-facets-suggestions',
-  components: {
-    mlChiclets,
-    mlFacetsSuggestionsAuto
-  },
-  props: {
-    facets: {
-      type: Object,
-      required: true
-    },
-    activeFacets: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    toggle: {
-      type: Function,
-      required: true
-    },
-    negate: {
-      type: Function
-    },
-    type: {
-      type: String,
-      required: true,
-    },
-    showMore: {
-      type: Function
-    }
-  },
-  methods: {
-    hasNonSelectedValues(facet) {
-      return (facet.facetValues || []).filter(value => {
-        return !value.selected;
-      }).length;
-    }
-  }
-};
-</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>
diff --git a/src/components/ml-search/ml-facets.vue b/src/components/ml-search/ml-facets.vue
deleted file mode 100755
index c2b376f..0000000
--- a/src/components/ml-search/ml-facets.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="facet-list">
-    <ml-chiclets :active-facets="activeFacets" :toggle="toggle"></ml-chiclets>
-
-    <div class="facet" v-for="(facet, facetName, $index) in facets" :key="$index"
-        v-if="hasNonSelectedValues(facet)" v-show="!facet.hide">
-      <h3>{{ facetName }}</h3>
-      <div v-for="(value, $index) in facet.facetValues" :key="$index" v-if="!value.selected">
-        <span v-on:click.prevent="toggle(facetName, 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(facetName, 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>
-    </div>
-  </div>
-</template>
-
-<script>
-import mlChiclets from '@/components/ml-search/ml-chiclets.vue';
-
-export default {
-  name: 'ml-facets',
-  components: {
-    mlChiclets
-  },
-  props: {
-    facets: {
-      type: Object,
-      required: true
-    },
-    activeFacets: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    toggle: {
-      type: Function,
-      required: true
-    },
-    negate: {
-      type: Function
-    },
-    showMore: {
-      type: Function
-    }
-  },
-  methods: {
-    hasNonSelectedValues(facet) {
-      return (facet.facetValues || []).filter(value => {
-        return !value.selected;
-      }).length;
-    }
-  }
-};
-</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>
diff --git a/src/router.js b/src/router.js
index 3ec2f3c..9c8987f 100755
--- a/src/router.js
+++ b/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',
diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index 27563be..4a44f35 100755
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -6,13 +6,15 @@
       </div>
 
       <div class="col-xs-12 col-sm-4 col-md-3 facets-col">
-          <!--// COMMENT the next line to enable facet typeahead-->
-        <!--
-          <ml-facets v-if="facets" :facets="facets" :toggle="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet"></ml-facets>
-        -->
-          <!--// UNCOMMENT the next line to enable facet typeahead-->
-        <ml-facets-suggestions v-if="facets" :facets="facets" :toggle="toggleFacet" v-on:toggleFacet="toggleFacet" :active-facets="activeFacets" :negate="toggleNegatedFacet" :type="type"></ml-facets-suggestions>
+        <div class="facet-list" v-if="facets">
+          <ml-chiclets :active-facets="activeFacets" :toggle="toggleFacet"></ml-chiclets>
+
+          <div v-for="(facet, facetName, $index) in facets" :key="$index">
+            <ml-facet :facet="facet" :toggle="toggleFacet" :negate="toggleNegatedFacet" :suggest="suggestFacet"></ml-facet>
+          </div>
+        </div>
       </div>
+
       <div class="col-xs-12 col-sm-8 col-md-9 results-col">
         <i class="fa fa-refresh pull-right" :class="searchPending ? 'fa-spin' : ''"
           v-on:click.prevent="$forceUpdate()"></i>
@@ -38,38 +40,41 @@
 </template>
 
 <script>
-//import mlFacets from '@/components/ml-search/ml-facets.vue';
-import mlFacets from '@/components/ml-search/ml-facets.vue';
+import mlChiclets from '@/components/ml-search/ml-chiclets.vue';
+import mlFacet from '@/components/ml-search/ml-facet.vue';
 import mlInput from '@/components/ml-search/ml-input.vue';
 import mlMetrics from '@/components/ml-search/ml-metrics.vue';
 import mlResults from '@/components/ml-search/ml-results.vue';
 import mlSelect from '@/components/ml-select.vue';
 import SearchApi from '@/api/SearchApi.js';
-import mlFacetsSuggestions from '@/components/ml-search/ml-facets-suggestions.vue';
 
 export default {
   name: 'SearchPage',
-  props: ['type'],
+  props: {
+    searchType: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       searchPending: false
     };
   },
   components: {
-    mlFacets,
-    mlFacetsSuggestions,
+    mlChiclets,
+    mlFacet,
     mlInput,
     mlMetrics,
     mlResults,
-    mlSelect,
-    mlFacetsSuggestions
+    mlSelect
   },
   computed: {
     isLoggedIn() {
       return this.$store.state.auth.authenticated;
     },
     searchState() {
-      return this.$store.state.search[this.type];
+      return this.$store.state.search[this.searchType];
     },
     facets() {
       return this.searchState.facets || {};
@@ -103,7 +108,7 @@ export default {
   },
   created() {
     if (this.isLoggedIn) {
-      this.page = this.$store.getters['search/' + this.type + '/page'] || 1;
+      this.page = this.$store.getters['search/' + this.searchType + '/page'] || 1;
     }
   },
   mounted() {
@@ -122,8 +127,8 @@ export default {
     toggleFacet(facet, type, value) {
       console.log('Toggle ' + facet + ' ' + type + ' ' + value);
       this.searchPending = true;
-      this.$store
-        .dispatch('search/' + this.type + '/toggleFacet', {
+      return this.$store
+        .dispatch('search/' + this.searchType + '/toggleFacet', {
           facet,
           type,
           value
@@ -135,8 +140,8 @@ export default {
     toggleNegatedFacet(facet, type, value) {
       console.log('Negate ' + facet + ' ' + type + ' ' + value);
       this.searchPending = true;
-      this.$store
-        .dispatch('search/' + this.type + '/toggleFacet', {
+      return this.$store
+        .dispatch('search/' + this.searchType + '/toggleFacet', {
           facet,
           type,
           value,
@@ -149,8 +154,8 @@ export default {
     pageChanged(page) {
       console.log('Paging to ' + page);
       this.searchPending = true;
-      this.$store
-        .dispatch('search/' + this.type + '/paginate', { page })
+      return this.$store
+        .dispatch('search/' + this.searchType + '/paginate', { page })
         .then(() => {
           this.searchPending = false;
         });
@@ -158,8 +163,8 @@ export default {
     search(qtext) {
       console.log('Searching for ' + qtext);
       this.searchPending = true;
-      this.$store
-        .dispatch('search/' + this.type + '/search', {
+      return this.$store
+        .dispatch('search/' + this.searchType + '/search', {
           qtext
         })
         .then(() => {
@@ -168,8 +173,21 @@ export default {
     },
     suggest(val) {
       console.log('Suggest ' + val);
-      return SearchApi.suggest(this.type, val).then(response => {
-        return response.suggestions;
+      return SearchApi.suggest(this.searchType, val).then(response => {
+        return (response.suggestions || []);
+      });
+    },
+    suggestFacet(facetName, val) {
+      val = (val !== undefined) ? val : '';
+      console.log('Facet ' + facetName + ' suggest ' + val);
+      // TODO: find a way to get facet suggestions with counts!
+      return SearchApi.suggest(this.searchType, facetName + ':' + (val.length ? '"' : '') + val).then(response => {
+        return (response.suggestions || []).map(
+          suggestion => {
+            let name = suggestion.split(':')[1]
+            return {name: name, value: name};
+          }
+        );
       });
     }
   }

From a68ca9d9608f46314cf9a9c6af25e3138cc35b4b Mon Sep 17 00:00:00 2001
From: Geert Josten <geert.josten@marklogic.com>
Date: Thu, 15 Nov 2018 20:50:35 +0100
Subject: [PATCH 5/5] Fixed some bugs preventing it to work properly

---
 src/components/ml-search/ml-facet-suggestions.vue | 8 ++++++--
 src/views/SearchPage.vue                          | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ml-search/ml-facet-suggestions.vue b/src/components/ml-search/ml-facet-suggestions.vue
index a2b62dd..8a04954 100755
--- a/src/components/ml-search/ml-facet-suggestions.vue
+++ b/src/components/ml-search/ml-facet-suggestions.vue
@@ -10,7 +10,7 @@
                 label="name"
                 track-by="name"
                 open-direction="bottom"
-                v-on:search-change.prevent="getSuggestions"
+                v-on:search-change="getSuggestions"
                 v-on:select="onSelected"
         >
         </multiselect>
@@ -61,7 +61,11 @@
         this.current = current;
         this.suggest(this.facet.name, current)
         .then(suggestions => {
-          self.suggestions = suggestions;
+          if (suggestions.length) {
+            self.suggestions = suggestions;
+          } else {
+            self.suggestions = [{ name: current + '* (no match)'}];
+          }
         });
       },
       nameWithCount(option) {
diff --git a/src/views/SearchPage.vue b/src/views/SearchPage.vue
index 4a44f35..5c2ac91 100755
--- a/src/views/SearchPage.vue
+++ b/src/views/SearchPage.vue
@@ -181,7 +181,8 @@ export default {
       val = (val !== undefined) ? val : '';
       console.log('Facet ' + facetName + ' suggest ' + val);
       // TODO: find a way to get facet suggestions with counts!
-      return SearchApi.suggest(this.searchType, facetName + ':' + (val.length ? '"' : '') + val).then(response => {
+      // TODO: how to support typeahead for val with spaces? Supported at all?? " in front didn't help!
+      return SearchApi.suggest(this.searchType, facetName + ':' + val).then(response => {
         return (response.suggestions || []).map(
           suggestion => {
             let name = suggestion.split(':')[1]