From c2f345a2bb5e1d91a599291c2da3ba230243188c Mon Sep 17 00:00:00 2001
From: rakib6120 <rakibhossain6120@gmail.com>
Date: Wed, 16 Aug 2023 20:41:25 +0600
Subject: [PATCH] Added search bar at the top of the file manager and filter
 files and folders.

---
 package-lock.json                     |  4 +--
 src/components/blocks/NavbarBlock.vue | 36 +++++++++++++++++++++++++++
 src/store/manager/actions.js          |  9 +++++++
 src/store/manager/getters.js          | 12 ++++++---
 src/store/manager/mutations.js        |  9 +++++++
 src/store/manager/store.js            |  3 +++
 6 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 97bf9a8..1e166d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "laravel-file-manager",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "laravel-file-manager",
-      "version": "3.0.2",
+      "version": "3.0.3",
       "license": "MIT",
       "dependencies": {
         "axios": "^0.25.0",
diff --git a/src/components/blocks/NavbarBlock.vue b/src/components/blocks/NavbarBlock.vue
index 07667ca..c601a3b 100644
--- a/src/components/blocks/NavbarBlock.vue
+++ b/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>
diff --git a/src/store/manager/actions.js b/src/store/manager/actions.js
index 8ee8450..d578fd6 100644
--- a/src/store/manager/actions.js
+++ b/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
diff --git a/src/store/manager/getters.js b/src/store/manager/getters.js
index 66a53dc..6597a91 100644
--- a/src/store/manager/getters.js
+++ b/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));
     },
 
     /**
diff --git a/src/store/manager/mutations.js b/src/store/manager/mutations.js
index ca3be10..81dd061 100644
--- a/src/store/manager/mutations.js
+++ b/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
diff --git a/src/store/manager/store.js b/src/store/manager/store.js
index 3846443..d73e7d3 100644
--- a/src/store/manager/store.js
+++ b/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,