Added search bar at the top of the file manager and filter files and …

src/components/blocks/NavbarBlock.vue

@@ -115,6 +115,21 @@
                     </button>
                 </div>
             </div>
+            <div class="col-4">
+                <div class="d-flex border rounded">
+                    <input
+                        type="text"
+                        class="border-0 form-control search-input"
+                        placeholder="Search files and folders"
+                        :value="search"
+                        @input="setSearch"
+                    />
+
+                    <button class="border-0 mr-2" type="button" @click="setSearch('')">
+                        <i class="bi bi-x navbar-icon"></i>
+                    </button>
+                </div>
+            </div>
             <div class="col-auto text-right">
                 <div class="btn-group" role="group">
                     <button
@@ -247,6 +262,13 @@ export default {
         hiddenFiles() {
             return this.$store.state.fm.settings.hiddenFiles;
         },
+
+        /**
+         * Search string
+         */
+        search() {
+            return this.$store.state.fm[this.activeManager].search;
+        }
     },
     methods: {
         /**
@@ -353,6 +375,15 @@ export default {
 
             this.$store.commit('fm/screenToggle');
         },
+
+        /**
+         * Set search string
+         * @param {any} e
+         */
+        setSearch(e) {
+            let newSearch = e == ''? '' : e.target.value;
+            this.$store.dispatch(`fm/${this.activeManager}/searchFilesOrFolders`, newSearch);
+        },
     },
 };
 </script>
@@ -364,5 +395,10 @@ export default {
     .col-auto > .btn-group:not(:last-child) {
         margin-right: 0.4rem;
     }
+
+    .search-input:focus{
+        outline: none;
+        box-shadow: none;
+    }
 }
 </style>

src/store/manager/actions.js

@@ -87,6 +87,15 @@ export default {
         commit('pointerForward');
     },
 
+    /**
+     * Search files and folders
+     * @param commit
+     * @param newSearch
+     */
+    searchFilesOrFolders({ commit }, newSearch) {
+        commit('setSearch', newSearch);
+    },
+
     /**
      * Sort data by field
      * @param context

src/store/manager/getters.js

@@ -6,11 +6,13 @@ export default {
      * @param rootState
      */
     files(state, getters, rootState) {
+        const files = state.files.filter((item) => item.basename.match(new RegExp(`^.*${state.search}.*`, 'i')));
+
         if (rootState.fm.settings.hiddenFiles) {
-            return state.files;
+            return files;
         }
 
-        return state.files.filter((item) => item.basename.match(/^([^.]).*/i));
+        return files.filter((item) => item.basename.match(/^([^.]).*/i));
     },
 
     /**
@@ -21,11 +23,13 @@ export default {
      * @returns {*}
      */
     directories(state, getters, rootState) {
+        const directories = state.directories.filter((item) => item.basename.match(new RegExp(`^.*${state.search}.*`, 'i')));
+
         if (rootState.fm.settings.hiddenFiles) {
-            return state.directories;
+            return directories;
         }
 
-        return state.directories.filter((item) => item.basename.match(/^([^.]).*/i));
+        return directories.filter((item) => item.basename.match(/^([^.]).*/i));
     },
 
     /**

src/store/manager/mutations.js

@@ -165,6 +165,15 @@ export default {
         state.sort.direction = direction;
     },
 
+    /**
+     * Set search string
+     * @param state
+     * @param newSearch
+     */
+    setSearch(state, newSearch) {
+        state.search = newSearch;
+    },
+
     /**
      * Reset sort settings
      * @param state

src/store/manager/store.js

@@ -38,6 +38,9 @@ export default {
 
             // view type - table or grid - (default - table)
             viewType: 'table',
+
+            // search files and folders
+            search: "",
         };
     },
     mutations,