Merge pull request #17843 from Classic298/feat/clone-default-group-permissions

feat/chore: Clone default group permissions for new groups and remove redundant modal

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

@@ -19,10 +19,9 @@
 	import Search from '$lib/components/icons/Search.svelte';
 	import User from '$lib/components/icons/User.svelte';
 	import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
-	import GroupModal from './Groups/EditGroupModal.svelte';
+	import EditGroupModal from './Groups/EditGroupModal.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import GroupItem from './Groups/GroupItem.svelte';
-	import AddGroupModal from './Groups/AddGroupModal.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
 	import {
 		getUserDefaultPermissions,
@@ -94,7 +93,7 @@
 		}
 	};
 
-	let showCreateGroupModal = false;
+	let showAddGroupModal = false;
 	let showDefaultPermissionsModal = false;
 
 	const setGroups = async () => {
@@ -153,7 +152,13 @@
 </script>
 
 {#if loaded}
-	<AddGroupModal bind:show={showCreateGroupModal} onSubmit={addGroupHandler} />
+	<EditGroupModal
+		bind:show={showAddGroupModal}
+		edit={false}
+		permissions={defaultPermissions}
+		onSubmit={addGroupHandler}
+	/>
+
 	<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
 		<div class="flex md:self-center text-lg font-medium px-0.5">
 			{$i18n.t('Groups')}
@@ -180,7 +185,7 @@
 						<button
 							class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
 							on:click={() => {
-								showCreateGroupModal = !showCreateGroupModal;
+								showAddGroupModal = !showAddGroupModal;
 							}}
 						>
 							<Plus className="size-3.5" />
@@ -207,7 +212,7 @@
 						class=" px-4 py-1.5 text-sm rounded-full bg-black hover:bg-gray-800 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition font-medium flex items-center space-x-1"
 						aria-label={$i18n.t('Create Group')}
 						on:click={() => {
-							showCreateGroupModal = true;
+							showAddGroupModal = true;
 						}}
 					>
 						{$i18n.t('Create Group')}
@@ -234,7 +239,7 @@
 
 		<hr class="mb-2 border-gray-100 dark:border-gray-850" />
 
-		<GroupModal
+		<EditGroupModal
 			bind:show={showDefaultPermissionsModal}
 			tabs={['permissions']}
 			bind:permissions={defaultPermissions}

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

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { toast } from 'svelte-sonner';
-	import { getContext, onMount } from 'svelte';
-	const i18n = getContext('i18n');
-
-	import Spinner from '$lib/components/common/Spinner.svelte';
-	import Modal from '$lib/components/common/Modal.svelte';
-	import Textarea from '$lib/components/common/Textarea.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	export let onSubmit: Function = () => {};
-	export let show = false;
-
-	let name = '';
-	let description = '';
-	let userIds = [];
-
-	let loading = false;
-
-	const submitHandler = async () => {
-		loading = true;
-
-		const group = {
-			name,
-			description
-		};
-
-		await onSubmit(group);
-
-		loading = false;
-		show = false;
-
-		name = '';
-		description = '';
-		userIds = [];
-	};
-</script>
-
-<Modal size="sm" 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">
-				{$i18n.t('Add User Group')}
-			</div>
-			<button
-				class="self-center"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<XMark className={'size-5'} />
-			</button>
-		</div>
-
-		<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
-			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
-				<form
-					class="flex flex-col w-full"
-					on:submit={(e) => {
-						e.preventDefault();
-						submitHandler();
-					}}
-				>
-					<div class="px-1 flex flex-col w-full">
-						<div class="flex gap-2">
-							<div class="flex flex-col w-full">
-								<div class=" mb-0.5 text-xs text-gray-500">{$i18n.t('Name')}</div>
-
-								<div class="flex-1">
-									<input
-										class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
-										type="text"
-										bind:value={name}
-										placeholder={$i18n.t('Group Name')}
-										autocomplete="off"
-										required
-									/>
-								</div>
-							</div>
-						</div>
-
-						<div class="flex flex-col w-full mt-2">
-							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Description')}</div>
-
-							<div class="flex-1">
-								<Textarea
-									className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden resize-none"
-									rows={2}
-									bind:value={description}
-									placeholder={$i18n.t('Group Description')}
-								/>
-							</div>
-						</div>
-					</div>
-
-					<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 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('Create')}
-
-							{#if loading}
-								<div class="ml-2 self-center">
-									<Spinner />
-								</div>
-							{/if}
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-</Modal>