feat/refac: group members db table (#19239)

* refac: group members table db migration

* refac: group members backend

* refac: group members frontend

* refac: group members frontend integration

* refac: styling

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

@@ -19,7 +19,6 @@
 	export let show = false;
 	export let edit = false;
 
-	export let users = [];
 	export let group = null;
 	export let defaultPermissions = {};
 
@@ -31,6 +30,8 @@
 	let loading = false;
 	let showDeleteConfirmDialog = false;
 
+	let userCount = 0;
+
 	export let name = '';
 	export let description = '';
 
@@ -83,7 +84,6 @@
 			notes: true
 		}
 	};
-	export let userIds = [];
 
 	const submitHandler = async () => {
 		loading = true;
@@ -91,8 +91,7 @@
 		const group = {
 			name,
 			description,
-			permissions,
-			user_ids: userIds
+			permissions
 		};
 
 		await onSubmit(group);
@@ -107,7 +106,7 @@
 			description = group.description;
 			permissions = group?.permissions ?? {};
 
-			userIds = group?.user_ids ?? [];
+			userCount = group?.member_count ?? 0;
 		}
 	};
 
@@ -129,7 +128,7 @@
 	}}
 />
 
-<Modal size="md" bind:show>
+<Modal size="lg" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
 			<div class=" text-lg font-medium self-center font-primary">
@@ -228,20 +227,27 @@
 									<div class=" self-center mr-2">
 										<UserPlusSolid />
 									</div>
-									<div class=" self-center">{$i18n.t('Users')} ({userIds.length})</div>
+									<div class=" self-center">{$i18n.t('Users')}</div>
 								</button>
 							{/if}
 						</div>
 
 						<div
-							class="flex-1 mt-1 lg:mt-1 lg:h-[22rem] lg:max-h-[22rem] overflow-y-auto scrollbar-hidden"
+							class="flex-1 mt-1 lg:mt-1 lg:h-[30rem] lg:max-h-[30rem] overflow-y-auto scrollbar-hidden"
 						>
 							{#if selectedTab == 'general'}
-								<Display bind:name bind:description />
+								<Display
+									bind:name
+									bind:description
+									{edit}
+									onDelete={() => {
+										showDeleteConfirmDialog = true;
+									}}
+								/>
 							{:else if selectedTab == 'permissions'}
 								<Permissions bind:permissions {defaultPermissions} />
 							{:else if selectedTab == 'users'}
-								<Users bind:userIds {users} />
+								<Users bind:userCount groupId={group?.id} />
 							{/if}
 						</div>
 					</div>
@@ -295,37 +301,25 @@
 						{/if}
 					</div> -->
 
-					<div class="flex justify-between pt-3 text-sm font-medium gap-1.5">
-						{#if edit}
+					{#if ['general', 'permissions'].includes(selectedTab)}
+						<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
 							<button
-								class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
-								type="button"
-								on:click={() => {
-									showDeleteConfirmDialog = true;
-								}}
+								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 {loading
+									? ' cursor-not-allowed'
+									: ''}"
+								type="submit"
+								disabled={loading}
 							>
-								{$i18n.t('Delete')}
+								{$i18n.t('Save')}
+
+								{#if loading}
+									<div class="ml-2 self-center">
+										<Spinner />
+									</div>
+								{/if}
 							</button>
-						{:else}
-							<div></div>
-						{/if}
-
-						<button
-							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 {loading
-								? ' cursor-not-allowed'
-								: ''}"
-							type="submit"
-							disabled={loading}
-						>
-							{$i18n.t('Save')}
-
-							{#if loading}
-								<div class="ml-2 self-center">
-									<Spinner />
-								</div>
-							{/if}
-						</button>
-					</div>
+						</div>
+					{/if}
 				</form>
 			</div>
 		</div>