Made Achievement Edit Only Available for Admins

Author: Thegamefire

ui/src/lib/components/achievements/AchievementDisplay.svelte

@@ -4,7 +4,7 @@
 	import { type AchievementService, getAchievementServices } from '$lib/globalFunctions-Types';
 	import AchievementEditModal from '$lib/components/achievements/AchievementEditModal.svelte';
 
-	const services = ['tap', 'zodom', 'ledstrip'];
+	let { admin } = $props();
 
 	let query: CreateQueryResult<AchievementService[]> = createQuery({
 			queryKey: [`achievement-services`],
@@ -13,27 +13,26 @@
 		}
 	);
 
-	const editAllowed = true;
 
-	let editModal: AchievementEditModal;
+	let editModal: AchievementEditModal | undefined = $state();
 
 </script>
 
 {#if $query.isSuccess}
 	<div class="flex flex-col items-center w-full md:w-4/5 mx-auto px-10">
 		<div class="flex flex-row justify-end w-full mt-10">
 			<button class="bg-orange-200 hover:bg-orange-300 px-4 py-2 rounded-md font-semibold text-orange-900"
-							onclick={editModal.open}
+							onclick={editModal?.open}
 			>
 				Add Service
 			</button>
 		</div>
 		{#each $query.data as service}
-			<AchievementServiceGroup {service} editAllowed={editAllowed} editModal={editModal} />
+			<AchievementServiceGroup {service} editAllowed={admin} editModal={editModal} />
 		{/each}
 	</div>
 
-	{#if editAllowed}
+	{#if admin}
 		<AchievementEditModal bind:this={editModal} />
 	{/if}
 {/if}

ui/src/lib/globalFunctions-Types.ts

@@ -15,6 +15,7 @@ export type ProfileData = {
 export type CurrentUser = {
 	id: number;
 	username: string;
+	admin: boolean;
 };
 
 export type AchievementService = {

ui/src/routes/achievements/+page.svelte

@@ -15,7 +15,7 @@
 <div class="flex flex-col min-h-screen bg-white">
 	<Navbar username={$query.data?.username || ""} />
 	{#if $query.isSuccess}
-		<AchievementDisplay />
+		<AchievementDisplay admin={$query.data.admin} />
 		<div class="grow"></div>
 	{:else if $query.isLoading}
 		<h1 class="flex flex-row justify-center items-center text-center grow text-5xl">