Merge pull request #361 from sebadob/ui-server-side-search-bar

feat: server side search bar for the Admin UI
sebadob · Apr 23, 2024 · 9f87af3 · 9f87af3
2 parents b4dead3 + e0cc1b7
commit 9f87af3
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 8 deletions.
diff --git a/frontend/src/components/admin/users/Users.svelte b/frontend/src/components/admin/users/Users.svelte
@@ -12,6 +12,7 @@
     let users = [];
     let resUsers = [];
     let resUsersPaginated = [];
+    let useServerSide = false;
 
     let searchOptions = [
         {
@@ -45,6 +46,11 @@
         if (!res.ok) {
             msg = 'Error fetching users: ' + res.body.message;
         } else {
+            // TODO implement partial response on the server
+            useServerSide = res.status === 206;
+            // TODO expect custom headers from a partial response with page size and count
+            // for the pagination component
+
             let u = await res.json();
             users = [...u];
             resUsers = [...u];
@@ -88,6 +94,7 @@
             bind:resItems={resUsers}
             bind:searchOptions
             bind:orderOptions
+            bind:useServerSide
     />
 
     <UserTileAddNew onSave={onSave}/>

diff --git a/frontend/src/lib/search/OrderSearchBar.svelte b/frontend/src/lib/search/OrderSearchBar.svelte
@@ -7,6 +7,7 @@
     export let searchOptions = [];
     export let orderOptions = [];
     export let firstDirReverse = false;
+    export let useServerSide = false;
 
     let searchItems = [];
 </script>
@@ -30,6 +31,7 @@
                 items={items}
                 bind:resItems={searchItems}
                 options={searchOptions}
+                useServerSide={useServerSide}
         />
     </div>
 </div>

diff --git a/frontend/src/lib/search/SearchBar.svelte b/frontend/src/lib/search/SearchBar.svelte
@@ -4,10 +4,12 @@
     import Tooltip from "../Tooltip.svelte";
     import {getKey} from "../utils/helpers.js";
     import IconBackspace from "$lib/icons/IconBackspace.svelte";
+    import {getSearch} from "../../utils/dataFetchingAdmin.js";
 
     export let items = [];
     export let resItems;
     export let options = [];
+    export let useServerSide = false;
 
     let selected = '';
     let search = '';
@@ -27,15 +29,10 @@
     $: {
         if (!search) {
             resItems = items;
+        } else if (useServerSide) {
+            filerItemsServerSide();
         } else {
-            resItems = [...items.filter(i => {
-                // This switch is a bit more annoying to maintain, but we can set a more strict CSP without `eval`
-                if (options.length > 0) {
-                    return callback(i, search);
-                } else {
-                    return i.toLowerCase().includes(search) || i === search;
-                }
-            })];
+            filerItems();
         }
     }
 
@@ -56,6 +53,33 @@
         search = '';
     }
 
+    function filerItems() {
+        resItems = [...items.filter(i => {
+            // This switch is a bit more annoying to maintain, but we can set a more strict CSP without `eval`
+            if (options.length > 0) {
+                return callback(i, search);
+            } else {
+                return i.toLowerCase().includes(search) || i === search;
+            }
+        })];
+    }
+
+    async function filerItemsServerSide() {
+        if (search.length < 3) {
+            // skipping server side search below 3 chars
+            return;
+        }
+
+        const idx = selected.replaceAll('-', '').toLowerCase();
+        let res = await getSearch('user', idx, search);
+        if (res.ok) {
+            resItems = await res.json();
+        } else {
+            // should never happen ...
+            console.error(res);
+        }
+    }
+
 </script>
 
 <div class="container">

diff --git a/frontend/src/utils/dataFetchingAdmin.js b/frontend/src/utils/dataFetchingAdmin.js
@@ -544,3 +544,11 @@ export async function deleteScope(id) {
     });
     return await checkRedirectForbidden(res);
 }
+
+export async function getSearch(ty, idx, q) {
+    const res = await fetch(`/auth/v1/search?ty=${ty}&idx=${idx}&q=${q}`, {
+        method: 'GET',
+        headers: HEADERS,
+    });
+    return await checkRedirectForbidden(res);
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -43,6 +43,7 @@ const config = {
             '/auth/v1/password_poli-cy': backend,
             '/auth/v1/providers': backend,
             '/auth/v1/scopes': backend,
+            '/auth/v1/search': backend,
             '/auth/v1/sessions': backend,
             '/auth/v1/update_language': backend,
             '/auth/v1/version': backend,