refac: group members frontend integration

src/lib/components/admin/Users/Groups/EditGroupModal.svelte

@@ -219,7 +219,7 @@
 									<div class=" self-center mr-2">
 										<UserPlusSolid />
 									</div>
-									<div class=" self-center">{$i18n.t('Users')} ({userCount})</div>
+									<div class=" self-center">{$i18n.t('Users')}</div>
 								</button>
 							{/if}
 						</div>
@@ -232,7 +232,7 @@
 							{:else if selectedTab == 'permissions'}
 								<Permissions bind:permissions {defaultPermissions} />
 							{:else if selectedTab == 'users'}
-								<Users bind:userCount />
+								<Users bind:userCount groupId={group?.id} />
 							{/if}
 						</div>
 					</div>

src/lib/components/admin/Users/Groups/Users.svelte

@@ -2,18 +2,18 @@
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
+	import { getUsers } from '$lib/apis/users';
+	import { toast } from 'svelte-sonner';
+
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import Plus from '$lib/components/icons/Plus.svelte';
-	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Search from '$lib/components/icons/Search.svelte';
-	import { getUsers } from '$lib/apis/users';
-	import { toast } from 'svelte-sonner';
 	import Pagination from '$lib/components/common/Pagination.svelte';
+	import { addUserToGroup, removeUserFromGroup } from '$lib/apis/groups';
 
+	export let groupId: string;
 	export let userCount = 0;
-	let userIds = [];
 
 	let users = [];
 	let total = 0;
@@ -23,7 +23,13 @@
 
 	const getUserList = async () => {
 		try {
-			const res = await getUsers(localStorage.token, query, null, null, page).catch((error) => {
+			const res = await getUsers(
+				localStorage.token,
+				query,
+				`group_id:${groupId}`,
+				null,
+				page
+			).catch((error) => {
 				toast.error(`${error}`);
 				return null;
 			});
@@ -37,6 +43,23 @@
 		}
 	};
 
+	const toggleMember = async (userId, state) => {
+		if (state === 'checked') {
+			await addUserToGroup(localStorage.token, groupId, [userId]).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+		} else {
+			await removeUserFromGroup(localStorage.token, groupId, [userId]).catch((error) => {
+				toast.error(`${error}`);
+				return null;
+			});
+		}
+
+		page = 1;
+		getUserList();
+	};
+
 	$: if (page) {
 		getUserList();
 	}
@@ -50,9 +73,9 @@
 	}
 </script>
 
-<div class=" max-h-full">
-	<div class="flex w-full">
-		<div class="flex flex-1">
+<div class=" max-h-full h-full w-full flex flex-col">
+	<div class="w-full h-fit">
+		<div class="flex flex-1 h-fit">
 			<div class=" self-center mr-3">
 				<Search />
 			</div>
@@ -64,20 +87,16 @@
 		</div>
 	</div>
 
-	<div class="mt-3 overflow-y-auto">
+	<div class="mt-3 overflow-y-auto flex-1">
 		<div class="flex flex-col gap-2.5">
 			{#if users.length > 0}
 				{#each users as user, userIdx (user.id)}
 					<div class="flex flex-row items-center gap-3 w-full text-sm">
 						<div class="flex items-center">
 							<Checkbox
-								state={userIds.includes(user.id) ? 'checked' : 'unchecked'}
+								state={(user?.group_ids ?? []).includes(groupId) ? 'checked' : 'unchecked'}
 								on:change={(e) => {
-									if (e.detail === 'checked') {
-										userIds = [...userIds, user.id];
-									} else {
-										userIds = userIds.filter((id) => id !== user.id);
-									}
+									toggleMember(user.id, e.detail);
 								}}
 							/>
 						</div>
@@ -89,20 +108,12 @@
 								</div>
 							</Tooltip>
 
-							{#if userIds.includes(user.id)}
+							{#if (user?.group_ids ?? []).includes(groupId)}
 								<Badge type="success" content="member" />
 							{/if}
 						</div>
 					</div>
 				{/each}
-
-				{page}
-
-				{total}
-
-				{#if total > 30}
-					<Pagination bind:page count={total} perPage={30} />
-				{/if}
 			{:else}
 				<div class="text-gray-500 text-xs text-center py-2 px-10">
 					{$i18n.t('No users were found.')}
@@ -110,4 +121,8 @@
 			{/if}
 		</div>
 	</div>
+
+	{#if total > 30}
+		<Pagination bind:page count={total} perPage={30} />
+	{/if}
 </div>