Merge pull request #430 from sebadob/408-fix-search-reset-on-save

fix: reset the search input on any site if data is being refetched
sebadob · May 10, 2024 · 033db25 · 033db25
2 parents 5008438 + 8c5397b
commit 033db25
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 3 deletions.
diff --git a/frontend/src/components/admin/clients/Clients.svelte b/frontend/src/components/admin/clients/Clients.svelte
@@ -12,6 +12,7 @@
     let clients = [];
     let resClients = [];
     let resClientsPaginated = [];
+    let search = '';
 
     let searchOptions = [
         {
@@ -55,6 +56,7 @@
     function onSave() {
         fetchClients();
         fetchScopes();
+        search = '';
     }
 </script>
 
@@ -66,6 +68,7 @@
             bind:resItems={resClients}
             searchOptions={searchOptions}
             orderOptions={orderOptions}
+            bind:search
     />
 
     <ClientTileAddNew onSave={onSave}/>

diff --git a/frontend/src/components/admin/roles/Roles.svelte b/frontend/src/components/admin/roles/Roles.svelte
@@ -10,6 +10,7 @@
     let roles = [];
     let resRoles = [];
     let resRolesPaginated = [];
+    let search = '';
 
     let searchOptions = [
         {
@@ -48,6 +49,7 @@
 
     function onSave() {
         fetchData();
+        search = '';
     }
 
 </script>
@@ -60,6 +62,7 @@
             bind:resItems={resRoles}
             searchOptions={searchOptions}
             orderOptions={orderOptions}
+            bind:search
     />
 
     <RoleTileAddNew onSave={onSave}/>

diff --git a/frontend/src/components/admin/scopes/Scopes.svelte b/frontend/src/components/admin/scopes/Scopes.svelte
@@ -12,6 +12,7 @@
     let resScopes = [];
     let resScopesPaginated = [];
     let refresh;
+    let search = '';
 
     let searchOptions = [
         {
@@ -37,6 +38,7 @@
     onMount(() => {
         fetchScopes();
         fetchAttr();
+        search = '';
     });
 
     async function fetchAttr() {
@@ -73,6 +75,7 @@
             bind:resItems={resScopes}
             searchOptions={searchOptions}
             orderOptions={orderOptions}
+            bind:search
     />
 
     <ScopeTileAddNew onSave={onSave}/>

diff --git a/frontend/src/components/admin/userAttr/Attr.svelte b/frontend/src/components/admin/userAttr/Attr.svelte
@@ -10,6 +10,7 @@
     let attr = [];
     let resAttr = [];
     let resAttrPaginated = [];
+    let search = '';
 
     let searchOptions = [
         {
@@ -40,6 +41,7 @@
 
     function onSave() {
         fetchAttr();
+        search = '';
     }
 
 </script>
@@ -52,6 +54,7 @@
             bind:resItems={resAttr}
             searchOptions={searchOptions}
             orderOptions={orderOptions}
+            bind:search
     />
 
     <UserAttrTileAddNew onSave={onSave}/>

diff --git a/frontend/src/components/admin/users/Users.svelte b/frontend/src/components/admin/users/Users.svelte
@@ -16,6 +16,7 @@
     let resUsersPaginated = [];
     let useServerSideIdx = '';
     let isSearchFiltered = false;
+    let search = '';
 
     let usersCountTotal = 0;
     let sspPageSize = 15;
@@ -135,6 +136,7 @@
         fetchUsers();
         fetchRoles();
         fetchGroups();
+        search = '';
     }
 </script>
 
@@ -148,6 +150,7 @@
             bind:orderOptions
             bind:useServerSideIdx
             bind:isSearchFiltered
+            bind:search
     />
 
     <UserTileAddNew onSave={onSave}/>

diff --git a/frontend/src/lib/search/OrderSearchBar.svelte b/frontend/src/lib/search/OrderSearchBar.svelte
@@ -9,6 +9,7 @@
     export let firstDirReverse = false;
     export let useServerSideIdx = '';
     export let isSearchFiltered = false;
+    export let search = '';
 
     let searchItems = [];
 </script>
@@ -34,6 +35,7 @@
                 options={searchOptions}
                 bind:useServerSideIdx
                 bind:isSearchFiltered
+                bind:search
         />
     </div>
 </div>

diff --git a/frontend/src/lib/search/SearchBar.svelte b/frontend/src/lib/search/SearchBar.svelte
@@ -2,7 +2,6 @@
     import IconMagnify from "$lib/icons/IconMagnify.svelte";
     import {onMount} from "svelte";
     import Tooltip from "../Tooltip.svelte";
-    import {getKey} from "../utils/helpers.js";
     import IconBackspace from "$lib/icons/IconBackspace.svelte";
     import {getSearch} from "../../utils/dataFetchingAdmin.js";
     import {SERVER_SIDE_SEARCH_THRES} from "../../utils/constants.js";
@@ -13,8 +12,8 @@
     export let useServerSideIdx = '';
     export let isSearchFiltered = false;
 
+    export let search = '';
     let selected = '';
-    let search = '';
     let callback;
 
     onMount(() => {
@@ -104,7 +103,6 @@
         <input
                 class="input"
                 type="text"
-                name={getKey()}
                 bind:value={search}
                 placeholder="Search"
                 autocomplete="off"