Add live search

ConnorChristie · Feb 26, 2020 · 360b283 · 360b283
1 parent 6934ba7
commit 360b283
Show file tree

Hide file tree

Showing 22 changed files with 38 additions and 54 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "clipboard": "^2.0.4",
     "js-base64": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "material-design-icons": "^3.0.1",
     "moment": "^2.24.0",
     "normalize.css": "^8.0.1",

diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
@@ -26,8 +26,6 @@
     <div id="result" ref="result">
       <div>
         <template v-if="isEmpty">
-          <p>{{ text }}</p>
-
           <template v-if="value.length === 0">
             <h3>{{ $t('search.types') }}</h3>
             <div class="boxes">
@@ -53,10 +51,11 @@
             <router-link @click.native="close" :to="'./' + s.path">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
-              <span>./{{ s.path }}</span>
+              <span>{{ s.path }}</span>
             </router-link>
           </li>
         </ul>
+        <p v-show="noResults">{{ $t('search.noResultsFound') }}</p>
       </div>
       <p id="renew">
         <i class="material-icons spin">autorenew</i>
@@ -69,6 +68,7 @@
 import { mapState, mapGetters, mapMutations } from "vuex"
 import url from "@/utils/url"
 import { search } from "@/api"
+import debounce from 'lodash.debounce'
 
 var boxes = {
   image: { label: "images", icon: "insert_photo" },
@@ -87,7 +87,8 @@ export default {
       results: [],
       reload: false,
       resultsCount: 50,
-      scrollable: null
+      scrollable: null,
+      noResults: false
     }
   },
   watch: {
@@ -111,7 +112,7 @@ export default {
       }
     },
     value () {
-      if (this.results.length) {
+      if (this.value === '') {
         this.reset()
       }
     }
@@ -125,13 +126,6 @@ export default {
     isEmpty() {
       return this.results.length === 0
     },
-    text() {
-      if (this.ongoing) {
-        return ""
-      }
-
-      return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
-    },
     filteredResults () {
       return this.results.slice(0, this.resultsCount)
     }
@@ -165,21 +159,28 @@ export default {
         return
       }
 
-      this.results.length = 0
+      this.keyupDebounced()
     },
+    keyupDebounced: debounce(async function() {
+      await this.submit();
+    }, 2000),
     init (string) {
       this.value = `${string} `
       this.$refs.input.focus()
     },
     reset () {
       this.ongoing = false
+      this.noResults = false
       this.resultsCount = 50
       this.results = []
     },
     async submit(event) {
-      event.preventDefault()
+      if (event) {
+        event.preventDefault()
+      }
 
       if (this.value === '') {
+        this.reset()
         return
       }
 
@@ -189,10 +190,10 @@ export default {
       }
 
       this.ongoing = true
-
-
       this.results = await search(path, this.value)
       this.ongoing = false
+
+      this.noResults = this.results.length === 0 && this.value.length !== 0
     }
   }
 }

diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
@@ -146,6 +146,7 @@ header .search-button {
 
 #search.active #result {
   padding: .5em;
+  padding-top: 2em;
   height: calc(100% - 4em);
 }
 

diff --git a/frontend/src/i18n/ar.json b/frontend/src/i18n/ar.json
@@ -203,8 +203,7 @@
     "types": "الأنواع",
     "video": "فيديوهات",
     "search": "البحث...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
@@ -203,8 +203,7 @@
     "types": "Typen",
     "video": "Video",
     "search": "Suche...",
-    "typeToSearch": "Tippe um zu suchen...",
-    "pressToSearch": "Drücken sie Enter um zu suchen..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
@@ -208,8 +208,7 @@
     "types": "Types",
     "video": "Video",
     "search": "Search...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/es.json b/frontend/src/i18n/es.json
@@ -203,8 +203,7 @@
     "types": "Tipos",
     "video": "Vídeo",
     "search": "Buscar...",
-    "typeToSearch": "Escribe para realizar una busqueda...",
-    "pressToSearch": "Presiona enter para buscar..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/fr.json b/frontend/src/i18n/fr.json
@@ -203,8 +203,7 @@
     "types": "Types",
     "video": "Video",
     "search": "Recherche en cours...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/is.json b/frontend/src/i18n/is.json
@@ -203,8 +203,7 @@
     "types": "Skrárgerðir",
     "video": "Myndbönd",
     "search": "Leita...",
-    "typeToSearch": "Skrifaðu til að leita...",
-    "pressToSearch": "Ýttu á Enter til að leita..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/it.json b/frontend/src/i18n/it.json
@@ -203,8 +203,7 @@
     "types": "Tipi",
     "video": "Video",
     "search": "Cerca...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/ja.json b/frontend/src/i18n/ja.json
@@ -203,8 +203,7 @@
     "types": "種類",
     "video": "ビデオ",
     "search": "検索...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/ko.json b/frontend/src/i18n/ko.json
@@ -203,8 +203,7 @@
     "types": "Types",
     "video": "비디오",
     "search": "검색...",
-    "typeToSearch": "검색어 입력...",
-    "pressToSearch": "검색하려면 엔터를 입력하세요"
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/nl-be.json b/frontend/src/i18n/nl-be.json
@@ -203,8 +203,7 @@
     "types": "Types",
     "video": "Video",
     "search": "Zoeken...",
-    "typeToSearch": "Typ om te zoeken...",
-    "pressToSearch": "Druk op enter om te zoeken..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "Arabisch",

diff --git a/frontend/src/i18n/pl.json b/frontend/src/i18n/pl.json
@@ -203,8 +203,7 @@
     "types": "Typy",
     "video": "Video",
     "search": "Szukaj...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/pt-br.json b/frontend/src/i18n/pt-br.json
@@ -203,8 +203,7 @@
     "types": "Tipos",
     "video": "Vídeos",
     "search": "Pesquise...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/pt.json b/frontend/src/i18n/pt.json
@@ -203,8 +203,7 @@
     "types": "Tipos",
     "video": "Vídeos",
     "search": "Pesquisar...",
-    "typeToSearch": "Escrever para pesquisar...",
-    "pressToSearch": "Tecla Enter para pesquisar..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "Árabe",

diff --git a/frontend/src/i18n/ro.json b/frontend/src/i18n/ro.json
@@ -203,8 +203,7 @@
     "types": "Tipuri",
     "video": "Video",
     "search": "Caută...",
-    "typeToSearch": "Scrie pentru a căuta...",
-    "pressToSearch": "Apasă enter pentru a căuta..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/ru.json b/frontend/src/i18n/ru.json
@@ -203,8 +203,7 @@
     "types": "Типы",
     "video": "Видео",
     "search": "Поиск...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/sv-se.json b/frontend/src/i18n/sv-se.json
@@ -203,8 +203,7 @@
     "types": "Typ",
     "video": "Video",
     "search": "Sök...",
-    "typeToSearch": "Skriv för att söka....",
-    "pressToSearch": "Tryck på enter för att söka..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/zh-cn.json b/frontend/src/i18n/zh-cn.json
@@ -203,8 +203,7 @@
     "types": "类型",
     "video": "视频",
     "search": "搜索...",
-    "typeToSearch": "输入搜索...",
-    "pressToSearch": "回车搜索..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",

diff --git a/frontend/src/i18n/zh-tw.json b/frontend/src/i18n/zh-tw.json
@@ -203,8 +203,7 @@
     "types": "類型",
     "video": "影片",
     "search": "搜尋...",
-    "typeToSearch": "Type to search...",
-    "pressToSearch": "Press enter to search..."
+    "noResultsFound": "No results found..."
   },
   "languages": {
     "ar": "العربية",