Merge pull request #331 from GSA-TTS/eoc-167-02

Convert to server-side query: admin panel -> edit user group -> search users
GSA-TTS · Mar 7, 2025 · 4745182 · 4745182
2 parents 0fe4f11 + 56f043d
commit 4745182
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
@@ -7,12 +7,24 @@
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
+	import { searchUsers } from '$lib/apis/users';
+	import { toast } from 'svelte-sonner';
 
 	export let users = [];
 	export let userIds = [];
-
 	let filteredUsers = [];
 
+	const submitSearchHandler = async () => {
+		const res = await searchUsers(localStorage.token, query).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		if (res) {
+			users = res;
+		}
+	};
+
 	$: filteredUsers = users
 		.filter((user) => {
 			if (user?.role === 'admin') {
@@ -23,10 +35,7 @@
 				return true;
 			}
 
-			return (
-				user.name.toLowerCase().includes(query.toLowerCase()) ||
-				user.email.toLowerCase().includes(query.toLowerCase())
-			);
+			return true;
 		})
 		.sort((a, b) => {
 			const aUserIndex = userIds.indexOf(a.id);
@@ -48,26 +57,27 @@
 
 <div>
 	<div class="flex w-full">
-		<div class="flex flex-1">
-			<div class=" self-center mr-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-					class="w-4 h-4"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</div>
-			<input
-				class=" w-full text-sm pr-4 rounded-r-xl outline-none bg-transparent"
-				bind:value={query}
-				placeholder={$i18n.t('Search')}
-			/>
+		<div class="flex flex-1 justify-end pb-2.5 border-b-[lightgrey] border-b border-solid">
+			<form
+				class="flex"
+				on:submit={(e) => {
+					e.preventDefault();
+					submitSearchHandler();
+				}}
+			>
+				<input
+					class=" w-full text-sm pr-4 rounded-r-xl outline-none bg-transparent"
+					bind:value={query}
+					placeholder={$i18n.t('Search users')}
+				/>
+				<Tooltip content={$i18n.t('Search users')}>
+					<button
+						type="submit"
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center break-normal"
+						>Search
+					</button>
+				</Tooltip>
+			</form>
 		</div>
 	</div>
 

diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
@@ -151,7 +151,7 @@
 						<button
 							type="submit"
 							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
-							>search
+							>Search
 						</button>
 					</Tooltip>
 				</form>