Search feature

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>