KZL 299 - Autocomplete on attribute name in basic filters

package.json

@@ -38,6 +38,7 @@
     "http-server": "^0.11.1",
     "lodash": "^4.17.10",
     "serve-static": "^1.13.2",
+    "vue-autosuggest": "^1.5.0",
     "vue-quill-editor": "^1.1.1"
   },
   "devDependencies": {

src/components/Common/Autocomplete.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <input
+      type="text"
+      v-model="search"
+      :class="inputClass"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.down="onArrowDown"
+      @keydown.up="onArrowUp"
+      @keydown.enter.prevent="onEnter"
+    />
+
+    <ul class="autocomplete-results" v-show="isOpen">
+      <li
+        v-for="(result, i) in results"
+        :key="i"
+        @click="setResult(result)"
+        class="autocomplete-result"
+        :class="{ 'is-active': i === arrowCounter }"
+      >
+        {{ result }}
+      </li>
+    </ul>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'autocomplete',
+    props: {
+      item: {
+        type: String,
+        required: false,
+        default: () => ''
+      },
+      items: {
+        type: Array,
+        required: false,
+        default: () => []
+      },
+      inputClass: {
+        type: String,
+        required: false,
+        default: () => ''
+      },
+      placeholder: {
+        type: String,
+        required: false,
+        default: () => ''
+      }
+    },
+    data() {
+      return {
+        search: '',
+        results: [],
+        isOpen: false,
+        arrowCounter: -1
+      }
+    },
+    methods: {
+      onInput() {
+        this.isOpen = true
+        this.filterResults()
+      },
+      filterResults() {
+        this.results = this.items.filter(item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1)
+      },
+      setResult(result) {
+        this.search = result
+        this.isOpen = false
+        this.$emit('autocomplete::change', result)
+      },
+      onArrowDown() {
+        if (this.arrowCounter + 1 < this.results.length) {
+          this.arrowCounter = this.arrowCounter + 1
+        }
+      },
+      onArrowUp() {
+        if (this.arrowCounter > 0) {
+          this.arrowCounter = this.arrowCounter - 1
+        }
+      },
+      onEnter() {
+        this.setResult(this.results[this.arrowCounter])
+        this.arrowCounter = -1
+      },
+      handleClickOutside(evt) {
+        if (!this.$el.contains(evt.target)) {
+          this.isOpen = false
+          this.arrowCounter = -1
+        }
+      }
+    },
+    mounted() {
+      document.addEventListener('click', this.handleClickOutside)
+    },
+    destroyed() {
+      document.removeEventListener('click', this.handleClickOutside)
+    }
+  }
+</script>
+
+<style>
+  .autocomplete-results {
+    padding: 0;
+    margin: 0;
+    border: 1px solid #eeeeee;
+    height: 120px;
+    overflow: auto;
+  }
+
+  .autocomplete-result.is-active {
+    background-color: #0397ef;
+    color: white;
+  }
+
+  .autocomplete-result {
+    list-style: none;
+    text-align: left;
+    padding: 4px 2px;
+    cursor: pointer;
+  }
+
+  .autocomplete-result:hover {
+    background-color: #0397ef;
+    color: white;
+  }
+</style>

src/components/Common/CommonList.vue

@@ -17,6 +17,7 @@
       :length-document="selectedDocuments.length"
       :document-to-delete="documentToDelete"
       :perform-delete="performDelete"
+      :collection-mapping="collectionMapping"
       @filters-updated="onFiltersUpdated"
       @create-clicked="create"
       @toggle-all="toggleAll"
@@ -70,7 +71,11 @@ export default {
     performSearch: Function,
     performDelete: Function,
     routeCreate: String,
-    routeUpdate: String
+    routeUpdate: String,
+    collectionMapping: {
+      type: Object,
+      required: true
+    }
   },
 
   data() {

src/components/Common/CrudlDocument.vue

@@ -5,6 +5,7 @@
       @reset="onFiltersUpdated"
       :available-operands="searchFilterOperands"
       :current-filter="currentFilter"
+      :collection-mapping="collectionMapping"
       >
     </filters>
 
@@ -146,7 +147,11 @@ export default {
     sorting: Object,
     searchFilterOperands: Object,
     documentToDelete: String,
-    performDelete: Function
+    performDelete: Function,
+    collectionMapping: {
+      type: Object,
+      required: true
+    }
   },
   data() {
     return {

src/components/Common/Filters/BasicFilter.vue

@@ -9,7 +9,12 @@
           <div v-for="(orBlock, groupIndex) in filters.basic" v-bind:key="`orBlock-${groupIndex}`" class="BasicFilter-orBlock row">
             <div v-for="(andBlock, filterIndex) in orBlock" v-bind:key="`andBlock-${filterIndex}`" class="BasicFilter-andBlock row dots">
               <div class="col s4">
-                <input placeholder="Attribute" type="text" class="validate" v-model="andBlock.attribute">
+                <autocomplete
+                  :items="attributeItems"
+                  input-class="validate"
+                  placeholder="Attribute"
+                  @autocomplete::change="(attribute) => selectAttribute(attribute, groupIndex, filterIndex)"
+                />
               </div>
               <div class="col s3">
                 <m-select v-model="andBlock.operator">
@@ -66,6 +71,7 @@
 
 <script>
 import MSelect from '../../Common/MSelect'
+import Autocomplete from '../Autocomplete'
 
 const emptyBasicFilter = { attribute: null, operator: 'match', value: null }
 const emptySorting = { attribute: null, order: 'asc' }
@@ -94,10 +100,15 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    collectionMapping: {
+      type: Object,
+      required: true
     }
   },
   components: {
-    MSelect
+    MSelect,
+    Autocomplete
   },
   data() {
     return {
@@ -107,7 +118,15 @@ export default {
       }
     }
   },
+  computed: {
+    attributeItems () {
+      return this.buildAttributeList(this.collectionMapping)
+    }
+  },
   methods: {
+    selectAttribute(attribute, groupIndex, filterIndex) {
+      this.filters.basic[groupIndex][filterIndex].attribute = attribute
+    },
     submitSearch() {
       let filters = this.filters.basic
 
@@ -171,6 +190,19 @@ export default {
       }
 
       this.filters.basic[groupIndex].splice(filterIndex, 1)
+    },
+    buildAttributeList(mapping, path = []) {
+      let attributes = []
+
+      for (const [attributeName, attributeValue] of Object.entries(mapping)) {
+        if (attributeValue.hasOwnProperty('properties')) {
+          attributes = attributes.concat(this.buildAttributeList(attributeValue.properties, path.concat(attributeName)))
+        } else if (attributeValue.hasOwnProperty('type')) {
+          attributes = attributes.concat(path.concat(attributeName).join('.'))
+        }
+      }
+
+      return attributes
     }
   },
   watch: {
@@ -194,6 +226,8 @@ export default {
         }
       }
     }
+  },
+  mounted() {
   }
 }
 </script>

src/components/Common/Filters/Filters.vue

@@ -35,6 +35,7 @@
                   :submit-button-label="submitButtonLabel"
                   :action-buttons-visible="actionButtonsVisible"
                   :sorting="sorting"
+                  :collection-mapping="collectionMapping"
                   @update-filter="onBasicFilterUpdated"
                   @reset="onReset">
                 </basic-filter>
@@ -152,7 +153,11 @@ export default {
       default: true
     },
     currentFilter: Object,
-    formatFromBasicSearch: Function
+    formatFromBasicSearch: Function,
+    collectionMapping: {
+      type: Object,
+      required: true
+    }
   },
   data() {
     return {

src/components/Data/Collections/Steps/Mapping.vue

@@ -54,22 +54,15 @@
       <div class="col s4" v-show="!collectionIsRealtimeOnly">
         <div class="row">
           <p class="help">
-<<<<<<< HEAD
              A mapping defines how a document and its properties
              are stored and indexed.
              <a href="http://docs.kuzzle.io/api-documentation/controller-collection/update-mapping/" target="_blank">Read more about mapping</a>.
            </br>           </br>
-=======
-            Mapping is the process of defining how a document,
-            and the fields it contains, are stored and indexed.
-            <a href="http://docs.kuzzle.io/api-documentation/controller-collection/update-mapping/" target="_blank">Read more about mapping</a>
-          </br>
->>>>>>> origin/master
             You should omit the root "properties" field in this form.
             <pre>
 {
   "age": { "type": "integer" },
-  "name": { "type": "string" }
+  "name": { "type": "text" }
 }
             </pre>
           </p>

src/components/Data/Collections/Watch.vue

@@ -37,6 +37,7 @@
           :available-operands="realtimeFilterOperands"
           :quick-filter-enabled="false"
           :sorting-enabled="false"
+          :collection-mapping="collectionMapping"
           @filters-updated="onFiltersUpdated"
           @reset="onReset"
           >
@@ -117,18 +118,17 @@
 <script>
 import CollectionTabs from './Tabs'
 import Headline from '../../Materialize/Headline'
-
 import collapsible from '../../../directives/Materialize/collapsible.directive'
 import Notification from '../Realtime/Notification'
 import LastNotification from '../Realtime/LastNotification'
 import SubscriptionControls from '../Realtime/SubscriptionControls'
 import CollectionDropdown from '../Collections/Dropdown'
 import Filters from '../../Common/Filters/Filters'
 import kuzzle from '../../../services/kuzzle'
-// import { SET_BASIC_FILTER } from '../../../vuex/modules/common/crudlDocument/mutation-types'
 import * as filterManager from '../../../services/filterManager'
 import { canSubscribe } from '../../../services/userAuthorization'
 import { SET_TOAST } from '../../../vuex/modules/common/toaster/mutation-types'
+import { getMappingDocument } from '../../../services/kuzzleWrapper'
 
 import Vue from 'vue'
 
@@ -151,14 +151,19 @@ export default {
       warning: { message: '', count: 0, lastTime: null, info: false },
       notifStyle: {},
       scrollDown: true,
-      lastNotification: {}
+      lastNotification: {},
+      collectionMapping: {}
     }
   },
   created() {
     window.addEventListener('scroll', this.handleScroll)
   },
   mounted() {
     this.notifications = []
+    getMappingDocument(this.collection, this.index)
+      .then(response => {
+        this.collectionMapping = response.mapping
+      })
   },
   destroyed() {
     this.reset()

src/components/Data/Documents/List.vue

@@ -18,6 +18,7 @@
       :display-create="canCreateDocument(index, collection)"
       :perform-search="performSearchDocuments"
       :perform-delete="performDeleteDocuments"
+      :collection-mapping="collectionMapping"
       route-create="DataCreateDocument"
       route-update="DataUpdateDocument">
 
@@ -82,11 +83,17 @@ import {
 } from '../../../services/userAuthorization'
 import {
   performSearchDocuments,
-  performDeleteDocuments
+  performDeleteDocuments,
+  getMappingDocument
 } from '../../../services/kuzzleWrapper'
 
 export default {
   name: 'DocumentsList',
+  data () {
+    return {
+      collectionMapping: {}
+    }
+  },
   props: {
     index: String,
     collection: String
@@ -128,6 +135,12 @@ export default {
     canEditCollection,
     performSearchDocuments,
     performDeleteDocuments
+  },
+  mounted() {
+    getMappingDocument(this.collection, this.index)
+      .then(response => {
+        this.collectionMapping = response.mapping
+      })
   }
 }
 </script>