Search feature

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;

frontend/translations/bulgarian.js

@@ -71,6 +71,7 @@ const data = {
   'Deleted': 'изтрити',
   'Your file is ready': 'Вашия файл е готов',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data

frontend/translations/chinese.js

@@ -71,6 +71,7 @@ const data = {
   'Deleted': '已删除',
   'Your file is ready': '您的文件已备妥',
   'View': 'View',
+  'Search': 'Search',
 }
 
 export default data

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

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

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

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

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

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

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

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

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

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

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>

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>