From 23e63e91fff27650c01dc997f35c85c2ac73c6df Mon Sep 17 00:00:00 2001
From: Milos Stojanovic <alcalbg@gmail.com>
Date: Tue, 25 Feb 2020 11:03:36 +0100
Subject: [PATCH] Search feature

---
 frontend/App.vue                    |  4 --
 frontend/translations/bulgarian.js  |  1 +
 frontend/translations/chinese.js    |  1 +
 frontend/translations/dutch.js      |  1 +
 frontend/translations/english.js    |  1 +
 frontend/translations/french.js     |  1 +
 frontend/translations/german.js     |  1 +
 frontend/translations/indonesian.js |  1 +
 frontend/translations/lithuanian.js |  1 +
 frontend/translations/portuguese.js |  1 +
 frontend/translations/serbian.js    |  1 +
 frontend/translations/spanish.js    |  1 +
 frontend/translations/turkish.js    |  1 +
 frontend/views/Browser.vue          | 22 ++++++-
 frontend/views/partials/Search.vue  | 89 +++++++++++++++++++++++++++++
 15 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 frontend/views/partials/Search.vue

diff --git a/frontend/App.vue b/frontend/App.vue
index 0e4fb87..7bf127a 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -84,10 +84,6 @@ html, body, #wrapper, #inner, .container {
   justify-content: flex-end;
 }
 
-.animation-content {
-  width: 100%;
-}
-
 @media all and (max-width: 1088px) {
   .container {
     padding: 20px;
diff --git a/frontend/translations/bulgarian.js b/frontend/translations/bulgarian.js
index e9c0d44..450af4e 100644
--- a/frontend/translations/bulgarian.js
+++ b/frontend/translations/bulgarian.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'изтрити',
   'Your file is ready': 'Вашия файл е готов',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/chinese.js b/frontend/translations/chinese.js
index 7e2dee5..ef65e3f 100644
--- a/frontend/translations/chinese.js
+++ b/frontend/translations/chinese.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': '已删除',
   'Your file is ready': '您的文件已备妥',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/dutch.js b/frontend/translations/dutch.js
index fba76d6..ef0c17d 100644
--- a/frontend/translations/dutch.js
+++ b/frontend/translations/dutch.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Verwijderd',
   'Your file is ready': 'Uw bestand is verwerkt',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/english.js b/frontend/translations/english.js
index c47a7d1..8903676 100644
--- a/frontend/translations/english.js
+++ b/frontend/translations/english.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Deleted',
   'Your file is ready': 'Your file is ready',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/french.js b/frontend/translations/french.js
index 423cc57..88c2989 100644
--- a/frontend/translations/french.js
+++ b/frontend/translations/french.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Supprimé',
   'Your file is ready': 'Votre fichier est prêt',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/german.js b/frontend/translations/german.js
index 211228e..6844222 100644
--- a/frontend/translations/german.js
+++ b/frontend/translations/german.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Gelöscht',
   'Your file is ready': 'Deine Datei ist fertig',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/indonesian.js b/frontend/translations/indonesian.js
index 18ce81c..3ae93c1 100644
--- a/frontend/translations/indonesian.js
+++ b/frontend/translations/indonesian.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Dihapus',
   'Your file is ready': 'File Anda sudah siap',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/lithuanian.js b/frontend/translations/lithuanian.js
index 48d736a..dfc48c7 100644
--- a/frontend/translations/lithuanian.js
+++ b/frontend/translations/lithuanian.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Ištrintas',
   'Your file is ready': 'Jūsų failas paruoštas',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/portuguese.js b/frontend/translations/portuguese.js
index 15f99a0..bda0d7d 100644
--- a/frontend/translations/portuguese.js
+++ b/frontend/translations/portuguese.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Excluido',
   'Your file is ready': 'Seu arquivo está pronto',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/serbian.js b/frontend/translations/serbian.js
index c15e3e3..b1caa60 100644
--- a/frontend/translations/serbian.js
+++ b/frontend/translations/serbian.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Obrisano',
   'Your file is ready': 'Vaš fajl je spreman',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/spanish.js b/frontend/translations/spanish.js
index 6214286..a1000cc 100644
--- a/frontend/translations/spanish.js
+++ b/frontend/translations/spanish.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Eliminado',
   'Your file is ready': 'Su fichero está listo',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/translations/turkish.js b/frontend/translations/turkish.js
index edc3ce6..d3917a7 100644
--- a/frontend/translations/turkish.js
+++ b/frontend/translations/turkish.js
@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'Silindi',
   'Your file is ready': 'Dosyanız Hazır',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data
diff --git a/frontend/views/Browser.vue b/frontend/views/Browser.vue
index 5b81266..b12c92d 100644
--- a/frontend/views/Browser.vue
+++ b/frontend/views/Browser.vue
@@ -25,8 +25,11 @@
             </ul>
           </div>
           <div>
-            <a id="sitemap" class="is-paddingless" @click="selectDir">
-              <b-icon icon="sitemap" class="is-marginless" size="is-small" />
+            <a class="search-btn" @click="search">
+              <b-icon icon="search" size="is-small" />
+            </a>
+            <a class="is-paddingless" @click="selectDir">
+              <b-icon icon="sitemap" size="is-small" />
             </a>
           </div>
         </div>
@@ -156,6 +159,7 @@ import Menu from './partials/Menu'
 import Tree from './partials/Tree'
 import Editor from './partials/Editor'
 import Gallery from './partials/Gallery'
+import Search from './partials/Search'
 import Pagination from './partials/Pagination'
 import Upload from './partials/Upload'
 import api from '../api/api'
@@ -345,7 +349,16 @@ export default {
       window.open(this.getDownloadLink(item.path), '_blank')
     },
     search() {
-      // TODO: create search logic
+      this.$modal.open({
+        parent: this,
+        hasModalCard: true,
+        component: Search,
+        events: {
+          selected: item => {
+            this.goTo(item.dir)
+          }
+        },
+      })
     },
     preview(item) {
       let modal = null
@@ -575,4 +588,7 @@ export default {
 .drop-info {
   margin: 20% auto;
 }
+.search-btn {
+  margin-right: 10px;
+}
 </style>
diff --git a/frontend/views/partials/Search.vue b/frontend/views/partials/Search.vue
new file mode 100644
index 0000000..7b47477
--- /dev/null
+++ b/frontend/views/partials/Search.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">
+        {{ lang('Search') }}
+      </p>
+    </header>
+    <section class="modal-card-body">
+      <b-input ref="input" v-model="term" @input="searchFiles" :placeholder="lang('Name')" />
+      <br>
+      <b-loading :is-full-page="false" :active.sync="searching"></b-loading>
+      <ul ref="results">
+        <li v-for="(item, index) in results" :key="index">
+          <a @click="select(item)">{{ item.file.path }}</a>
+        </li>
+      </ul>
+    </section>
+    <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">
+        {{ lang('Close') }}
+      </button>
+    </footer>
+  </div>
+</template>
+
+<script>
+import api from '../../api/api'
+import _ from 'lodash'
+
+export default {
+  name: 'Search',
+  data() {
+    return {
+      active: false,
+      searching: false,
+      term: '',
+      results: [],
+    }
+  },
+  mounted() {
+    this.active = true
+    this.searching = false
+    this.$refs.input.focus()
+  },
+  beforeDestroy() {
+    this.active = false
+    this.searching = false
+  },
+  methods: {
+    select(item) {
+      this.$emit('selected', item)
+      this.$parent.close()
+    },
+    searchFiles: _.debounce(function(val) {
+      this.results = []
+      if (val.length > 0) {
+        this.searching = true
+        this.getDir('/')
+      }
+    }, 1000),
+    getDir(path) {
+      if (!this.active) return
+      this.searching = true
+      api.getDir({
+        dir: path
+      })
+        .then(ret => {
+          this.searching = false
+          _.forEach(ret.files, item => {
+            if (item.name.toLowerCase().indexOf(this.term.toLowerCase()) > -1) {
+              this.results.push({
+                file: item,
+                dir: path,
+              })
+            }
+          })
+          _.forEach(_.filter(ret.files, ['type', 'dir']), subdir => {
+            this.getDir(subdir.path)
+          })
+        })
+        .catch(error => this.handleError(error))
+
+    },
+  },
+}
+</script>
+
+<style>
+</style>