feat(importAccount): typeahead support using searchindex (#2422)

Satellite-im · Mar 30, 2022 · 462c254 · 462c254
1 parent 7cb2bbe
commit 462c254
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 37 deletions.
diff --git a/components/ui/TypeHead/TypeHead.html → components/ui/TypeAhead/TypeAhead.html b/components/ui/TypeHead/TypeHead.html → components/ui/TypeAhead/TypeAhead.html
@@ -1,5 +1,5 @@
 <div
-  class="typehead-container"
+  class="typeahead-container"
   data-cy="add-passphrase"
   v-click-outside="lostFocus"
 >
@@ -14,12 +14,14 @@
     v-on:keydown.up="onUpBrowseItem"
     v-on:keydown.down="onDownBrowseItem"
   />
-  <div v-if="isFocus && searchList.length" class="search-options">
+  <div v-if="isFocus && searchResults.length" class="search-options">
     <ul class="search-option-group">
       <li
-        v-for="(item, i) in searchList"
+        v-for="(item, i) in searchResults"
         :class="{'active': i === browseIndex}"
-        @click="onItemClicked(item)"
+        @click="onItemClicked(item, i)"
+        @mousemove="onItemHighlighted(i)"
+        @focus="onItemHighlighted(i)"
       >
         {{ label ? item[label] : item}}
       </li>

diff --git a/components/ui/TypeHead/TypeHead.less → components/ui/TypeAhead/TypeAhead.less b/components/ui/TypeHead/TypeHead.less → components/ui/TypeAhead/TypeAhead.less
@@ -1,4 +1,4 @@
-.typehead-container {
+.typeahead-container {
   position: relative;
   .search-options {
     position: absolute;
@@ -17,7 +17,10 @@
         font-size: 16px;
         padding: 5px 10px;
         text-align: center;
-        &:hover,
+        &:not(.active) {
+          background: transparent !important;
+          box-shadow: none !important;
+        }
         &.active {
           &:extend(.background-primary);
           &:extend(.glow-primary);

diff --git a/components/ui/TypeHead/TypeHead.vue → components/ui/TypeAhead/TypeAhead.vue b/components/ui/TypeHead/TypeHead.vue → components/ui/TypeAhead/TypeAhead.vue
@@ -1,19 +1,20 @@
-<template src="./TypeHead.html"></template>
+<template src="./TypeAhead.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { InputSize, InputStyle } from '~/components/interactables/Input/types'
+import SearchIndex from '~/libraries/SatelliteDB/SearchIndex'
 
 export default Vue.extend({
   props: {
     /**
-     * list for showing typehead items
+     * List for showing typeahead items
      */
     list: {
       type: Array as PropType<Array<String | Object>>,
-      default: [],
+      default: () => [],
     },
     /**
-     * list for showing typehead items
+     * Method to call when an item is selected
      */
     onSelected: {
       type: Function,
@@ -28,7 +29,7 @@ export default Vue.extend({
       required: false,
     },
     /**
-     * key to point label when object array passed
+     * Key to point label when object array passed
      */
     label: {
       type: String,
@@ -60,9 +61,17 @@ export default Vue.extend({
     },
   },
   data() {
+    const records = this.list.map((item) => {
+      const id = this.label ? (item as any)[this.label] : item
+      return { id }
+    })
     return {
       searchText: '',
-      searchList: [] as Array<string | Object>,
+      searchResults: [] as Array<string | Object>,
+      searchIndex: new SearchIndex({
+        schema: { fields: ['id'] },
+        records,
+      }),
       isFocus: false,
       browseIndex: -1,
     }
@@ -78,36 +87,28 @@ export default Vue.extend({
   methods: {
     update() {
       if (!this.searchText) {
-        this.searchList = []
+        this.searchResults = []
         return
       }
       if (!this.isFocus) this.isFocus = true
 
-      this.browseIndex = -1
-      this.searchList = this.list
-        .filter((item: any) =>
-          this.label
-            ? item[this.label]
-                .toLowerCase()
-                .indexOf(this.searchText.toLowerCase()) === 0
-            : item.toLowerCase().indexOf(this.searchText.toLowerCase()) === 0,
-        )
+      this.browseIndex = 0
+      this.searchResults = this.searchIndex
+        .autoSuggest(this.searchText)
+        .map((match) => match.suggestion)
         .slice(0, this.maxShowCounts)
-
-      this.searchList.every((item: any, index) => {
-        const compare = (this.label ? item[this.label] : item) as string
-        this.browseIndex =
-          compare.toLowerCase() === this.searchText.toLowerCase() ? index : -1
-        return this.browseIndex !== -1
-      })
     },
     setFocus() {
       this.isFocus = true
     },
     lostFocus() {
       this.isFocus = false
     },
-    onItemClicked(item: any) {
+    onItemHighlighted(index: number) {
+      this.browseIndex = index
+    },
+    onItemClicked(item: any, index: number) {
+      this.onItemHighlighted(index)
       this.$emit('onSelected', item)
       this.isFocus = false
       this.searchText = ''
@@ -125,21 +126,21 @@ export default Vue.extend({
     },
     onDownBrowseItem(event: KeyboardEvent) {
       event.preventDefault()
-      if (this.browseIndex < this.searchList.length - 1) {
+      if (this.browseIndex < this.searchResults.length - 1) {
         this.browseIndex++
       }
     },
     onEnterPressed() {
       const item =
-        this.browseIndex !== -1 ? this.searchList[this.browseIndex] : null
+        this.browseIndex !== -1 ? this.searchResults[this.browseIndex] : null
       const itemSplitted = this.searchText.trim().toLowerCase().split(' ')
-      if (item) {
-        this.onItemClicked(item)
-      } else if (itemSplitted.length > 1) {
+      if (itemSplitted.length > 1) {
         this.onMultipleItemSelected(itemSplitted)
+      } else if (item) {
+        this.onItemClicked(item, this.browseIndex)
       }
     },
   },
 })
 </script>
-<style scoped lang="less" src="./TypeHead.less"></style>
+<style scoped lang="less" src="./TypeAhead.less"></style>
diff --git a/pages/setup/ImportAccount/ImportAccount.html b/pages/setup/ImportAccount/ImportAccount.html
@@ -2,7 +2,7 @@
   <div class="input-account-body">
     <TypographyTitle :size="4" :text="$t('pages.inputAccount.title')" />
     <TypographySubtitle :size="6" :text="$t('pages.inputAccount.subtitle')" />
-    <UiTypeHead
+    <UiTypeAhead
       :list="bipList"
       size="small"
       type="primary"