design: used toggle instead of checkbox for permission management on …

…sharing projects
FoHoOV · Feb 21, 2024 · 8112513 · 8112513
1 parent e969842
commit 8112513
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/frontend/src/lib/components/forms/FormInput.svelte b/frontend/src/lib/components/forms/FormInput.svelte
@@ -8,7 +8,7 @@
 				value?: string | number | undefined;
 		  } & Partial<Exclude<HTMLInputAttributes, 'class' | 'placeholder' | 'id'>>)
 		| ({
-				type?: HTMLInputAttributes['type'];
+				type?: HTMLInputAttributes['type'] | 'toggle';
 				value?: string | boolean | number | undefined;
 		  } & Partial<Exclude<HTMLInputAttributes, 'type' | 'class' | 'placeholder' | 'id'>>)
 	) & {
@@ -52,12 +52,23 @@
 
 		return errors?.at?.(0);
 	});
+	const defaultInputClasses = $derived.by(() => {
+		if (type == 'checkbox') {
+			return 'checkbox';
+		} else if (type == 'text-area') {
+			return 'text-area w-full';
+		} else if (type == 'toggle') {
+			return 'toggle';
+		} else {
+			return 'input input-bordered w-full';
+		}
+	});
 </script>
 
 <div class="flex flex-col {wrapperClasses}">
 	<label
-		class="flex items-start {labelClasses} {type == 'checkbox'
-			? 'max-w-full cursor-pointer flex-row items-center justify-between gap-2 rounded-md p-3'
+		class="flex items-start {labelClasses} {type == 'checkbox' || type == 'toggle'
+			? 'max-w-full cursor-pointer flex-row items-center justify-between gap-2 rounded-md p-2'
 			: 'flex-col'}"
 		for={restProps.id ?? name}
 	>
@@ -70,18 +81,18 @@
 				id={restProps.id ?? name}
 				{name}
 				placeholder={label}
-				class="textarea w-full {inputClasses}"
+				class="{defaultInputClasses} {inputClasses}"
 				value={value?.toString()}
 				{...restProps as HTMLTextareaAttributes}
 			/>
 		{:else}
 			<input
 				bind:this={input}
-				{type}
+				type={type == 'toggle' ? 'checkbox' : type}
 				id={restProps.id ?? name}
 				{name}
 				placeholder={label}
-				class="{type == 'checkbox' ? 'checkbox' : 'input input-bordered w-full'}  {inputClasses}"
+				class="{defaultInputClasses} {inputClasses}"
 				{value}
 				{...restProps}
 			/>

diff --git a/frontend/src/routes/user/projects/AttachToUser.svelte b/frontend/src/routes/user/projects/AttachToUser.svelte
@@ -18,21 +18,23 @@
 	const { form, project } = $props<Props>();
 
 	const projectsStore = getProjectsStoreFromContext();
-	let allowAllAccessRights = $state<boolean>(false);
+	let allowAllAccessRights = $state<boolean>(true);
 </script>
 
 <EnhancedForm
 	action="/user/projects?/attach"
 	enhancerConfig={{
 		validator: { schema: attachProjectSchema },
 		form: form,
-		action: 'attach'
+		action: 'attach',
+		resetOnSubmit: false
 	}}
 	onSubmitSucceeded={async (event) => {
 		projectsStore?.addAssociation(project, {
 			username: event.formData.username,
 			id: event.response.user_id
 		});
+		allowAllAccessRights = true;
 	}}
 	successfulMessage="Project is now shared with the specified user"
 >
@@ -42,15 +44,16 @@
 			id="permissions:{Permission.All}"
 			name="permissions[]"
 			value={Permission.All}
+			checked={allowAllAccessRights}
 			label="Allow all permissions"
-			type="checkbox"
-			inputClasses="checkbox-warning"
+			type="toggle"
+			inputClasses="toggle toggle-success"
 			labelClasses="border border-info"
 			onchange={(e)=>{
 				allowAllAccessRights = (e.target as HTMLInputElement).checked;
 			}}
 		></FormInput>
-		<div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+		<div class="grid grid-cols-1 gap-2 lg:grid-cols-2" class:hidden={allowAllAccessRights}>
 			{#each Object.values(Permission).filter((value) => value !== Permission.All) as permission}
 				<FormInput
 					id="permissions:{permission}"