From 4d1ad0beb1609fbcd28d578b24728d4b798a9e3d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 13 Apr 2024 23:12:50 -0700
Subject: feat(badges): badge hiding

---
 src/routes/api/badges/+server.ts           |  7 +++--
 src/routes/user/[user]/badges/+page.svelte | 50 ++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 6 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index 20777845..2dc1d7b3 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -78,7 +78,8 @@ export const PUT = async ({ cookies, url, request }) => {
 		image: url.searchParams.get('image') || undefined,
 		description: url.searchParams.get('description') || undefined,
 		time: url.searchParams.get('time') || undefined,
-		category: url.searchParams.get('category') || undefined
+		category: url.searchParams.get('category') || undefined,
+		hidden: url.searchParams.get('hidden') || undefined
 	};
 
 	if (
@@ -86,9 +87,9 @@ export const PUT = async ({ cookies, url, request }) => {
 			(badge) => Number(badge.id) === Number(url.searchParams.get('update'))
 		)
 	) {
-		await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge);
+		await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge as Badge);
 	} else {
-		await addUserBadge(identity.id, badge);
+		await addUserBadge(identity.id, badge as Badge);
 	}
 
 	return await badges(identity.id);
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 1d0896fc..18f014be 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -206,6 +206,7 @@
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
 		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
 		const category = document.querySelector('input[name="category"]') as HTMLInputElement;
+		const hidden = document.querySelector('input[name="hidden"]') as HTMLInputElement;
 
 		if (!imageURL.value) {
 			error = 'Image URL cannot be empty.';
@@ -233,7 +234,7 @@
 					: ''
 			}${
 				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
-			}`,
+			}&hidden=${hidden.value === 'Hidden'}`,
 			{
 				method: 'PUT'
 			}
@@ -244,6 +245,7 @@
 		activityURL.value = '';
 		description.value = '';
 		category.value = '';
+		hidden.value = 'Shown';
 		selectedBadge = undefined;
 	};
 
@@ -441,6 +443,9 @@
 		downloadAnchor.remove();
 		URL.revokeObjectURL(url);
 	};
+
+	const removeHiddenBadges = (badges: Badge[]) =>
+		editMode ? badges : badges.filter((b) => !b.hidden);
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -519,7 +524,9 @@
 
 							<Skeleton grid={true} count={10} width="150px" height="170px" />
 						{:else}
-							{@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))}
+							{@const groupedBadges = Object.entries(
+								groupBadges(removeHiddenBadges(ungroupedBadges))
+							)}
 
 							{#if isOwner}
 								<div class="card">
@@ -631,6 +638,36 @@
 												/>
 											</span>
 										</Dropdown>
+										<Dropdown
+											items={[false, true].map((hidden) => ({
+												name: hidden ? 'Hidden' : 'Shown',
+												url: '#',
+												onClick: () => {
+													const hiddenInput = document.querySelector('input[name="hidden"]');
+
+													if (hiddenInput instanceof HTMLInputElement)
+														hiddenInput.value = hidden ? 'Hidden' : 'Shown';
+												}
+											}))}
+											header={false}
+											center={false}
+										>
+											<span slot="title">
+												<input
+													type="text"
+													placeholder="Shown"
+													name="hidden"
+													minlength="1"
+													maxlength="1000"
+													size="15"
+													value={selectedBadge
+														? selectedBadge.hidden
+															? 'Hidden'
+															: 'Shown'
+														: 'Shown'}
+												/>
+											</span>
+										</Dropdown>
 										<button class="button-lined" on:click={submitBadge}
 											>{selectedBadge
 												? $locale().user.badges.editMode.update
@@ -682,7 +719,14 @@
 											{#if editMode}
 												<a
 													href={`#`}
-													on:click={() => (selectedBadge = badge)}
+													on:click={() => {
+														selectedBadge = badge;
+
+														const hiddenInput = document.querySelector('input[name="hidden"]');
+
+														if (hiddenInput instanceof HTMLInputElement)
+															hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+													}}
 													id={`badge-${badge.id}`}
 													title={`${
 														badge.time
-- 
cgit v1.2.3