Merge pull request #2 from loadsys/add-search-bar

add a search bar

Author: GabrieliusJokubauskas

src/components/manager/Manager.vue

@@ -1,7 +1,15 @@
 <template>
     <div class="fm-content d-flex flex-column">
-        <disk-list v-bind:manager="manager"/>
-        <breadcrumb v-bind:manager="manager"/>
+        <div class="fm-search-wrapper">
+            <div class="row align-items-center m-1">
+                <label class="col-3" for="fm-search">Search:</label>
+                <div class="col-9">
+                    <input class="form-control fm-search" v-model="query" @input="debounceSearch" />
+                </div>
+            </div>
+        </div>
+        <disk-list v-bind:manager="manager" />
+        <breadcrumb v-bind:manager="manager" />
         <div class="fm-content-body">
             <table-view v-if="viewType === 'table'" v-bind:manager="manager"/>
             <grid-view v-else v-bind:manager="manager"/>
@@ -15,9 +23,11 @@ import DiskList from './DiskList.vue';
 import Breadcrumb from './Breadcrumb.vue';
 import TableView from './TableView.vue';
 import GridView from './GridView.vue';
+import managerHelper from './mixins/manager';
 
 export default {
   name: 'Manager',
+  mixins: [managerHelper],
   components: {
     DiskList,
     Breadcrumb,
@@ -36,6 +46,25 @@ export default {
       return this.$store.state.fm[this.manager].viewType;
     },
   },
+  watch: {
+    selectedDirectory() {
+      this.query = null;
+    },
+  },
+  data() {
+    return {
+      query: null,
+      debounce: null,
+    };
+  },
+  methods: {
+    debounceSearch() {
+      clearTimeout(this.debounce);
+      this.debounce = setTimeout(() => {
+        this.selectDirectory(this.selectedDirectory, this.query);
+      }, 600);
+    },
+  },
 };
 </script>
 
@@ -48,4 +77,8 @@ export default {
             overflow: auto;
         }
     }
+
+    .fm-search-wrapper {
+      margin-left: auto;
+    }
 </style>

src/components/manager/mixins/manager.js

@@ -62,9 +62,10 @@ export default {
     /**
      * Load selected directory and show files
      * @param path
+     * @param query
      */
-    selectDirectory(path) {
-      this.$store.dispatch(`fm/${this.manager}/selectDirectory`, { path, history: true });
+    selectDirectory(path, query) {
+      this.$store.dispatch(`fm/${this.manager}/selectDirectory`, { path, query, history: true });
     },
 
     /**

src/http/get.js

@@ -32,10 +32,11 @@ export default {
    * Get content (files and folders)
    * @param disk
    * @param path
+   * @param query
    * @returns {*}
    */
-  content(disk, path) {
-    return HTTP.get('content', { params: { disk, path } });
+  content(disk, path, query) {
+    return HTTP.get('content', { params: { disk, path, query } });
   },
 
   /**

src/store/manager/actions.js

@@ -9,15 +9,16 @@ export default {
    * @param dispatch
    * @param rootState
    * @param path
+   * @param query
    * @param history
    * @returns {Promise}
    */
-  selectDirectory({ state, commit, dispatch, rootState }, { path, history }) {
+  selectDirectory({ state, commit, dispatch, rootState }, { path, query, history }) {
     // reset content
     commit('setDirectoryContent', { directories: [], files: [] });
 
     // get content for the selected directory
-    return GET.content(state.selectedDisk, path).then((response) => {
+    return GET.content(state.selectedDisk, path, query).then((response) => {
       if (response.data.result.status === 'success') {
         commit('resetSelected');
         commit('resetSortSettings');