From 41cb4ead468b12d9e8537ede548f5087b0792527 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Wed, 12 Apr 2023 17:25:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Refactor=20user=20and=20project?=
 =?UTF-8?q?=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update user and project profile settings
- Add validations for user name and profile picture
- Add input fields for project name and description

[src/routes/users/+page.svelte]
- Raise `userNameInput` variable and bind it to the input field
- Add `pictureChanged` variable to track if the picture has been changed
- Add a condition to the form submit button to check if `userNameInput` and `pictureChanged` are valid
- Add a placeholder to the name input field
- Add a valid file type check before setting `userPicture`
- Update the API call to include `userNameInput` and `pictureChanged`
-
[src/routes/projects/[projectId]/settings/+page.svelte]
- Add input fields for project name and description
- Add placeholder for project name
- Bind project name and description inputs to fields
- Disable update button if no changes are made
- Change button label from "Update profile" to "Update profile"
---
 .../[projectId]/settings/+page.svelte         | 18 ++++++++++++---
 src/routes/users/+page.svelte                 | 23 +++++++++++++++----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/routes/projects/[projectId]/settings/+page.svelte b/src/routes/projects/[projectId]/settings/+page.svelte
index f30271b04..bea34f219 100644
--- a/src/routes/projects/[projectId]/settings/+page.svelte
+++ b/src/routes/projects/[projectId]/settings/+page.svelte
@@ -44,6 +44,13 @@
 		}
 	};
 
+	let projectNameInput = $project?.title;
+	let projectDescriptionInput = $project?.api?.description;
+	$: canTriggerUpdate =
+		(projectNameInput !== $project?.title ||
+			projectDescriptionInput !== $project?.api?.description) &&
+		projectNameInput;
+
 	$: saving = false;
 	const onSubmit = async (e: SubmitEvent) => {
 		if (!$project) return;
@@ -72,6 +79,8 @@
 			toasts.error('Failed to update project');
 		}
 
+		projectNameInput = $project?.title;
+		projectDescriptionInput = $project?.api?.description;
 		saving = false;
 	};
 </script>
@@ -167,7 +176,8 @@
 							name="name"
 							type="text"
 							class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-300"
-							value={$project?.title}
+							placeholder="Project name can't be empty"
+							bind:value={projectNameInput}
 							required
 						/>
 					</div>
@@ -178,13 +188,15 @@
 							name="description"
 							rows="3"
 							class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-300"
-							value={$project?.api?.description}
+							bind:value={projectDescriptionInput}
 						/>
 					</div>
 				</fieldset>
 
 				<footer>
-					<Button loading={saving} role="primary" type="submit">Update profile</Button>
+					<Button disabled={!canTriggerUpdate} loading={saving} role="primary" type="submit"
+						>Update profile</Button
+					>
 				</footer>
 			</form>
 		</div>
diff --git a/src/routes/users/+page.svelte b/src/routes/users/+page.svelte
index 3de4b430d..75c5a6fe8 100644
--- a/src/routes/users/+page.svelte
+++ b/src/routes/users/+page.svelte
@@ -8,7 +8,15 @@
 
 	$: saving = false;
 
-	$: userName = $user?.name;
+	let userNameInput = $user?.name;
+	let pictureChanged = false;
+	user.subscribe((user) => {
+		if (user) {
+			userNameInput = user.name;
+		}
+	});
+	$: canTriggerUpdate = (userNameInput !== $user?.name || pictureChanged) && userNameInput;
+
 	$: userPicture = $user?.picture;
 
 	const fileTypes = ['image/jpeg', 'image/png'];
@@ -23,6 +31,7 @@
 
 		if (file && validFileType(file)) {
 			userPicture = URL.createObjectURL(file);
+			pictureChanged = true;
 		} else {
 			userPicture = $user?.picture;
 			toasts.error('Please use a valid image file');
@@ -35,12 +44,11 @@
 
 		const target = e.target as HTMLFormElement;
 		const formData = new FormData(target);
-		const name = formData.get('name') as string | undefined;
 		const picture = formData.get('picture') as File | undefined;
 
 		try {
 			$user = await api.user.update($user.access_token, {
-				name,
+				name: userNameInput,
 				picture: picture
 			});
 			toasts.success('Profile updated');
@@ -49,6 +57,8 @@
 			toasts.error('Failed to update user');
 		}
 
+		userNameInput = $user?.name;
+		pictureChanged = false;
 		saving = false;
 	};
 </script>
@@ -101,9 +111,10 @@
 							<input
 								id="name"
 								name="name"
-								bind:value={userName}
+								bind:value={userNameInput}
 								type="text"
 								class="w-full rounded border border-zinc-600 bg-zinc-700 px-4 py-2 text-zinc-300"
+								placeholder="Name can't be empty"
 								required
 							/>
 						</div>
@@ -121,7 +132,9 @@
 						</div>
 
 						<footer class="flex justify-end pt-4">
-							<Button loading={saving} role="primary" type="submit">Update profile</Button>
+							<Button disabled={!canTriggerUpdate} loading={saving} role="primary" type="submit"
+								>Update profile</Button
+							>
 						</footer>
 					</fields>
 				</form>