From 3b7f9309676d54a0b86976a51c4dd92a8f78e4cb Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 9 Dec 2024 18:17:25 +0800
Subject: [PATCH 01/24] Scaffolding

---
 src/components/Leaderboard.vue | 185 +++++++++++++++++++++++++++++++++
 src/main.ts                    |   6 ++
 2 files changed, 191 insertions(+)
 create mode 100644 src/components/Leaderboard.vue

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
new file mode 100644
index 0000000..cc7873d
--- /dev/null
+++ b/src/components/Leaderboard.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { useAsyncState, useConfirmDialog } from '@vueuse/core'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Leaderboards } from '../lib/api/Leaderboards'
+
+const router = useRouter()
+const route = useRoute()
+
+const leaderboards = new Leaderboards({
+	baseUrl: import.meta.env.VITE_BACKEND_URL
+})
+
+const id = computed(() => {
+	const { id } = route.params
+
+	if (Array.isArray(id)) {
+		return null
+	}
+
+	const parsed = parseInt(id, 10)
+
+	if (isNaN(parsed)) {
+		return null
+	}
+
+	return parsed
+})
+
+const {state: board, error, isLoading, execute} = useAsyncState(async () => {
+	if (id.value === null) {
+		// TODO: Handle appropriately
+		throw new Error('Leaderboard does not exist')
+	}
+
+	// TODO: Add param in BE that allows also fetching deleted boards
+	const resp = await leaderboards.getLeaderboard(id.value)
+
+	return resp.data
+}, null)
+
+const {
+	reveal: revealDelete,
+	isRevealed: isRevealedDelete,
+	cancel: cancelDelete
+} = useConfirmDialog()
+
+const {
+	reveal: revealRestore,
+	isRevealed: isRevealedRestore,
+	cancel: cancelRestore
+} = useConfirmDialog()
+
+async function confirmDeleteBoard() {
+	if (id.value === null) {
+		return
+	}
+
+	// TODO: Error-handling
+	await leaderboards.deleteLeaderboard(id.value)
+
+	router.go(0)
+}
+
+async function confirmRestoreBoard() {
+	if (id.value === null) {
+		return
+	}
+
+	// TODO: Error-handling
+	await leaderboards.restoreLeaderboard(id.value)
+
+	router.go(0)
+}
+</script>
+
+<template>
+	<div class="container">
+		<div v-if="isLoading">Loading...</div>
+		<div v-else-if="error" class="error-container">
+			{{ error }}
+			<button @click="execute()" class="button">Reload</button>
+			<!-- TODO: Add button to go back to the List page -->
+		</div>
+
+		<div v-else class="main-content">
+			<!-- Deletion confirmation -->
+			<div v-if="isRevealedDelete" class="delete-confirmation-container">
+				<button @click="cancelDelete">Cancel</button>
+				<button @click="confirmDeleteBoard">Confirm</button>
+			</div>
+
+			<!-- Restoration confirmation -->
+			<div v-if="isRevealedRestore" class="delete-confirmation-container">
+				<button @click="cancelRestore">Cancel</button>
+				<button @click="confirmRestoreBoard">Confirm</button>
+			</div>
+
+			<!-- <RouterLink :to="{ name: 'leaderboards' }">
+				<button class="back-button">← Leaderboards</button>
+			</RouterLink> -->
+			<button class="back-button">Temp</button>
+			<div class="action-button-container">
+				<!-- TODO: Create Edit page, and then add this link to it -->
+				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
+				<button v-if="board?.deletedAt === null" class="action-button delete-button" @click="revealDelete">🗑️</button>
+				<button v-else class="action-button" @click="revealRestore">Restore</button>
+			</div>
+
+			<div class="table">
+				<span class="table-header">ID:</span>
+				<span>{{ board?.id }}</span>
+				<span class="table-header">Name:</span>
+				<span>{{ board?.name }}</span>
+				<span class="table-header">Slug:</span>
+				<span>{{ board?.slug }}</span>
+				<span class="table-header">Created:</span>
+				<span>{{ board?.createdAt }}</span>
+				<span class="table-header">Deleted:</span>
+				<span>{{ board?.deletedAt ?? 'Not deleted' }}</span>
+				<span class="table-header">Categories:</span>
+				<span>{{ board?.categories }}</span>
+				<span class="table-header">Info:</span>
+				<span>{{ board?.info ?? '-' }}</span>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<style lang="css" scoped>
+.container {
+	padding: 1rem;
+}
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: start;
+}
+
+.main-content {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	margin-top: 1rem;
+	row-gap: 1rem;
+}
+
+.back-button {
+	justify-self: start;
+	padding: 0.5rem;
+}
+
+.delete-confirmation-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.action-button-container {
+	display: flex;
+	gap: 0.5rem;
+	justify-self: end;
+}
+
+.action-button {
+	width: 3rem;
+	height: 3rem;
+}
+
+.delete-button:hover {
+	background: red;
+}
+
+.table {
+	grid-column: span 2 / span 2;
+	display: grid;
+	column-gap: 1rem;
+	grid-template-columns: max-content 1fr;
+}
+
+.table-header {
+	font-weight: bold;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index bfa4ea3..ebf2790 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
+import Leaderboard from './components/Leaderboard.vue'
 import Leaderboards from './components/Leaderboards.vue'
 import Main from './components/Main.vue'
 import './style.css'
@@ -11,6 +12,11 @@ const routes = [
 		name: 'home',
 		component: Main,
 	},
+	{
+		path: '/leaderboard/:id',
+		name: 'leaderboard',
+		component: Leaderboard,
+	},
 	{
 		path: '/leaderboards',
 		name: 'leaderboardsList',

From 5b2a67ffc1b8dd443b712f72ecf042a13faf7ab7 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:22:53 -0500
Subject: [PATCH 02/24] Pass LB id as prop.

---
 src/components/Leaderboard.vue | 41 +++++-----------------------------
 src/main.ts                    | 37 +++++++++++++++---------------
 2 files changed, 24 insertions(+), 54 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index cc7873d..57e2fab 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -5,37 +5,17 @@ import { useRoute, useRouter } from 'vue-router'
 import { Leaderboards } from '../lib/api/Leaderboards'
 
 const router = useRouter()
-const route = useRoute()
+const props = defineProps<{
+	id: number
+}>()
 
 const leaderboards = new Leaderboards({
 	baseUrl: import.meta.env.VITE_BACKEND_URL
 })
 
-const id = computed(() => {
-	const { id } = route.params
-
-	if (Array.isArray(id)) {
-		return null
-	}
-
-	const parsed = parseInt(id, 10)
-
-	if (isNaN(parsed)) {
-		return null
-	}
-
-	return parsed
-})
-
 const {state: board, error, isLoading, execute} = useAsyncState(async () => {
-	if (id.value === null) {
-		// TODO: Handle appropriately
-		throw new Error('Leaderboard does not exist')
-	}
-
 	// TODO: Add param in BE that allows also fetching deleted boards
-	const resp = await leaderboards.getLeaderboard(id.value)
-
+	const resp = await leaderboards.getLeaderboard(props.id)
 	return resp.data
 }, null)
 
@@ -52,24 +32,15 @@ const {
 } = useConfirmDialog()
 
 async function confirmDeleteBoard() {
-	if (id.value === null) {
-		return
-	}
 
 	// TODO: Error-handling
-	await leaderboards.deleteLeaderboard(id.value)
-
+	await leaderboards.deleteLeaderboard(props.id)
 	router.go(0)
 }
 
 async function confirmRestoreBoard() {
-	if (id.value === null) {
-		return
-	}
-
 	// TODO: Error-handling
-	await leaderboards.restoreLeaderboard(id.value)
-
+	await leaderboards.restoreLeaderboard(props.id)
 	router.go(0)
 }
 </script>
diff --git a/src/main.ts b/src/main.ts
index ebf2790..9b174b5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,27 +6,26 @@ import Leaderboards from './components/Leaderboards.vue'
 import Main from './components/Main.vue'
 import './style.css'
 
-const routes = [
-	{
-		path: '/',
-		name: 'home',
-		component: Main,
-	},
-	{
-		path: '/leaderboard/:id',
-		name: 'leaderboard',
-		component: Leaderboard,
-	},
-	{
-		path: '/leaderboards',
-		name: 'leaderboardsList',
-		component: Leaderboards,
-	},
-]
-
 const router = createRouter({
 	history: createWebHistory(),
-	routes,
+	routes: [
+		{
+			path: '/',
+			name: '/home',
+			component: Main,
+		},
+		{
+			path: '/leaderboard/:id(\\d+)',
+			name: 'leaderboard',
+			component: Leaderboard,
+			props: (route) => ({ id: Number.parseInt(route.params.id.toString()) }),
+		},
+		{
+			path: '/leaderboards',
+			name: 'leaderboardsList',
+			component: Leaderboards,
+		},
+	],
 })
 
 createApp(App).use(router).mount('#app')

From a45ebf11ddebeec77ad3387a570ec559a4d84162 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:24:38 -0500
Subject: [PATCH 03/24] Refetch LB instead of refreshing page.

---
 src/components/Leaderboard.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 57e2fab..707e4cd 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { useAsyncState, useConfirmDialog } from '@vueuse/core'
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import { Leaderboards } from '../lib/api/Leaderboards'
 
-const router = useRouter()
 const props = defineProps<{
 	id: number
 }>()
@@ -32,16 +29,15 @@ const {
 } = useConfirmDialog()
 
 async function confirmDeleteBoard() {
-
 	// TODO: Error-handling
 	await leaderboards.deleteLeaderboard(props.id)
-	router.go(0)
+	execute()
 }
 
 async function confirmRestoreBoard() {
 	// TODO: Error-handling
 	await leaderboards.restoreLeaderboard(props.id)
-	router.go(0)
+	execute()
 }
 </script>
 

From ddd39b8637b65d7f135d45992052692c698db88f Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:24:51 -0500
Subject: [PATCH 04/24] Assert type of id route param.

---
 src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 9b174b5..8a27b77 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,7 +18,7 @@ const router = createRouter({
 			path: '/leaderboard/:id(\\d+)',
 			name: 'leaderboard',
 			component: Leaderboard,
-			props: (route) => ({ id: Number.parseInt(route.params.id.toString()) }),
+			props: (route) => ({ id: Number.parseInt(route.params.id as string) }),
 		},
 		{
 			path: '/leaderboards',

From 4bfd6b36753b3289f3ebf849a650d8dffe6e1522 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:29:06 -0500
Subject: [PATCH 05/24] Use auth for deleting and restoring LB.

---
 src/components/Leaderboard.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 707e4cd..8e118ec 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { useAsyncState, useConfirmDialog } from '@vueuse/core'
 import { Leaderboards } from '../lib/api/Leaderboards'
+import { useSessionToken } from '../composables/useSessionToken';
+import { useAuth } from '../composables/useAuth';
 
 const props = defineProps<{
 	id: number
 }>()
 
+const token = useSessionToken()
+
 const leaderboards = new Leaderboards({
 	baseUrl: import.meta.env.VITE_BACKEND_URL
 })
@@ -30,13 +34,13 @@ const {
 
 async function confirmDeleteBoard() {
 	// TODO: Error-handling
-	await leaderboards.deleteLeaderboard(props.id)
+	await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
 	execute()
 }
 
 async function confirmRestoreBoard() {
 	// TODO: Error-handling
-	await leaderboards.restoreLeaderboard(props.id)
+	await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
 	execute()
 }
 </script>

From 0a9cbc6f5955d535449f211497ba9b0c06096d46 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 18:28:26 -0500
Subject: [PATCH 06/24] Use global state for user details.

---
 src/App.vue                       | 28 +++++++++++++++-----
 src/components/Login.vue          |  2 +-
 src/components/Navbar.vue         |  2 +-
 src/composables/useUserDetails.ts | 44 +++++++++++++++++++------------
 4 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 29786b0..a079803 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,17 +4,24 @@ import Login from './components/Login.vue'
 import Navbar from './components/Navbar.vue'
 import { useUserDetails } from './composables/useUserDetails'
 
-const user = useUserDetails()
-const loggedIn = computed(() => user.value?.role === 'Administrator')
+const { state, isLoading, isReady } = useUserDetails()
+const loggedIn = computed(
+	() => state.value?.role === 'Administrator'
+)
 </script>
 
 <template>
 	<div class="root">
-		<div v-if="loggedIn">
-			<Navbar />
-			<RouterView />
+		<Teleport to="body" v-if="isLoading">
+			<div class="loader"><p>Loading...</p></div>
+		</Teleport>
+		<div v-show="isReady">
+			<template v-if="loggedIn">
+				<Navbar />
+				<RouterView />
+			</template>
+			<Login v-else />
 		</div>
-		<Login v-else />
 	</div>
 </template>
 
@@ -22,4 +29,13 @@ const loggedIn = computed(() => user.value?.role === 'Administrator')
 .root {
 	width: 100%;
 }
+
+.loader {
+	position: fixed;
+	z-index: 999;
+	top: 45%;
+	left: 50%;
+	padding: 1rem;
+	background-color: black;
+}
 </style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 01cb402..02265db 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -11,7 +11,7 @@ const password = ref('')
 const loginError = ref(false)
 const submitted = ref(false)
 const token = useSessionToken()
-const user = useUserDetails()
+const { state: user } = useUserDetails()
 const loginFailed = computed(
 	() =>
 		loginError.value ||
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 56c3181..eceac57 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -11,7 +11,7 @@ function logoutClicked() {
 	token.value = ''
 }
 
-const user = useUserDetails()
+const { state: user } = useUserDetails()
 </script>
 
 <template>
diff --git a/src/composables/useUserDetails.ts b/src/composables/useUserDetails.ts
index 485acdc..8572d55 100644
--- a/src/composables/useUserDetails.ts
+++ b/src/composables/useUserDetails.ts
@@ -1,26 +1,36 @@
-import { shallowRef, watchEffect } from 'vue'
+import { createGlobalState, useAsyncState } from '@vueuse/core'
+import { watchEffect } from 'vue'
 import { Users } from '../lib/api/Users'
-import type { UserViewModel } from '../lib/api/data-contracts'
 import { useAuth } from './useAuth'
 import { useSessionToken } from './useSessionToken'
 
-export function useUserDetails() {
-	const userDetails = shallowRef<UserViewModel | null>(null)
+export const useUserDetails = createGlobalState(() => {
+	const users = new Users({
+		baseUrl: import.meta.env.VITE_BACKEND_URL,
+	})
+
 	const token = useSessionToken()
 
-	watchEffect(async () => {
-		if (!token.value) {
-			userDetails.value = null
-			return
-		}
+	const state = useAsyncState(
+		async (authToken: string) => {
+			if (!authToken) {
+				return null
+			}
 
-		const users = new Users({
-			baseUrl: import.meta.env.VITE_BACKEND_URL,
-		})
+			const res = await users.me(useAuth(authToken))
+			return res.data
+		},
+		null,
+		{
+			immediate: false,
+			resetOnExecute: false,
+			onError: () => {
+				token.value = ''
+			},
+		},
+	)
 
-		const me = await users.me(useAuth(token.value))
-		userDetails.value = me.data
-	})
+	watchEffect(() => state.execute(0, token.value))
 
-	return userDetails
-}
+	return state
+})

From 0c6255c11c1387df678674ee3c2129a9460ff39c Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 18:29:07 -0500
Subject: [PATCH 07/24] Don't show categories.

---
 src/components/Leaderboard.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 8e118ec..34f001c 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -89,8 +89,6 @@ async function confirmRestoreBoard() {
 				<span>{{ board?.createdAt }}</span>
 				<span class="table-header">Deleted:</span>
 				<span>{{ board?.deletedAt ?? 'Not deleted' }}</span>
-				<span class="table-header">Categories:</span>
-				<span>{{ board?.categories }}</span>
 				<span class="table-header">Info:</span>
 				<span>{{ board?.info ?? '-' }}</span>
 			</div>

From 2ffed2e231280e0161ffb0b9c045ee510207fec9 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 18:58:08 -0500
Subject: [PATCH 08/24] Use an actual table.

---
 src/components/Leaderboard.vue | 55 +++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 34f001c..49c151c 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -78,20 +78,35 @@ async function confirmRestoreBoard() {
 				<button v-else class="action-button" @click="revealRestore">Restore</button>
 			</div>
 
-			<div class="table">
-				<span class="table-header">ID:</span>
-				<span>{{ board?.id }}</span>
-				<span class="table-header">Name:</span>
-				<span>{{ board?.name }}</span>
-				<span class="table-header">Slug:</span>
-				<span>{{ board?.slug }}</span>
-				<span class="table-header">Created:</span>
-				<span>{{ board?.createdAt }}</span>
-				<span class="table-header">Deleted:</span>
-				<span>{{ board?.deletedAt ?? 'Not deleted' }}</span>
-				<span class="table-header">Info:</span>
-				<span>{{ board?.info ?? '-' }}</span>
-			</div>
+			<table>
+				<tbody>
+					<tr>
+						<th>ID:</th>
+						<td>{{ board?.id }}</td>
+					</tr>
+					<tr>
+						<th>Name:</th>
+						<td>{{ board?.name }}</td>
+					</tr>
+					<tr>
+						<th>Slug:</th>
+						<td>/{{ board?.slug }}</td>
+					</tr>
+					<tr>
+						<th>Created:</th>
+						<td>{{ board?.createdAt }}</td>
+					</tr>
+					<tr>
+						<th>Deleted:</th>
+						<td>{{ board?.deletedAt ?? 'Not deleted' }}</td>
+					</tr>
+					<tr>
+						<th>Info:</th>
+						<td v-if="board?.info">{{ board?.info }}</td>
+						<td v-else class="dim">&lt;none&gt;</td>
+					</tr>
+				</tbody>
+			</table>
 		</div>
 	</div>
 
@@ -141,14 +156,12 @@ async function confirmRestoreBoard() {
 	background: red;
 }
 
-.table {
-	grid-column: span 2 / span 2;
-	display: grid;
-	column-gap: 1rem;
-	grid-template-columns: max-content 1fr;
-}
-
 .table-header {
 	font-weight: bold;
 }
+
+.dim {
+	color: grey;
+	font-style: italic;
+}
 </style>

From 1fe035a7429712842079e2466d30d59dcb1f8a06 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 18:58:59 -0500
Subject: [PATCH 09/24] Make delete button always red.

---
 src/components/Leaderboard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 49c151c..b33b6bc 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -152,7 +152,7 @@ async function confirmRestoreBoard() {
 	height: 3rem;
 }
 
-.delete-button:hover {
+.delete-button {
 	background: red;
 }
 

From e3c34063b5ac2dda3f1fb3b935f7d1f075014a1d Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 18:59:03 -0500
Subject: [PATCH 10/24] formatting

---
 src/App.vue                    |  4 +---
 src/components/Leaderboard.vue | 26 +++++++++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a079803..d59ad55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,7 @@ import Navbar from './components/Navbar.vue'
 import { useUserDetails } from './composables/useUserDetails'
 
 const { state, isLoading, isReady } = useUserDetails()
-const loggedIn = computed(
-	() => state.value?.role === 'Administrator'
-)
+const loggedIn = computed(() => state.value?.role === 'Administrator')
 </script>
 
 <template>
diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index b33b6bc..5d99d94 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useAsyncState, useConfirmDialog } from '@vueuse/core'
 import { Leaderboards } from '../lib/api/Leaderboards'
-import { useSessionToken } from '../composables/useSessionToken';
-import { useAuth } from '../composables/useAuth';
+import { useSessionToken } from '../composables/useSessionToken'
+import { useAuth } from '../composables/useAuth'
 
 const props = defineProps<{
 	id: number
@@ -14,7 +14,12 @@ const leaderboards = new Leaderboards({
 	baseUrl: import.meta.env.VITE_BACKEND_URL
 })
 
-const {state: board, error, isLoading, execute} = useAsyncState(async () => {
+const {
+	state: board,
+	error,
+	isLoading,
+	execute
+} = useAsyncState(async () => {
 	// TODO: Add param in BE that allows also fetching deleted boards
 	const resp = await leaderboards.getLeaderboard(props.id)
 	return resp.data
@@ -49,7 +54,7 @@ async function confirmRestoreBoard() {
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
 		<div v-else-if="error" class="error-container">
-			{{ error }}
+			<p>Error</p>
 			<button @click="execute()" class="button">Reload</button>
 			<!-- TODO: Add button to go back to the List page -->
 		</div>
@@ -74,8 +79,16 @@ async function confirmRestoreBoard() {
 			<div class="action-button-container">
 				<!-- TODO: Create Edit page, and then add this link to it -->
 				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
-				<button v-if="board?.deletedAt === null" class="action-button delete-button" @click="revealDelete">🗑️</button>
-				<button v-else class="action-button" @click="revealRestore">Restore</button>
+				<button
+					v-if="board?.deletedAt === null"
+					class="action-button delete-button"
+					@click="revealDelete"
+				>
+					Delete
+				</button>
+				<button v-else class="action-button" @click="revealRestore">
+					Restore
+				</button>
 			</div>
 
 			<table>
@@ -109,7 +122,6 @@ async function confirmRestoreBoard() {
 			</table>
 		</div>
 	</div>
-
 </template>
 
 <style lang="css" scoped>

From 19f6bd8a62cc9984c786b92820bc9996e498225b Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:00:41 -0500
Subject: [PATCH 11/24] Rename route to leaderboardView

---
 src/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 8a27b77..0923a57 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,7 +16,7 @@ const router = createRouter({
 		},
 		{
 			path: '/leaderboard/:id(\\d+)',
-			name: 'leaderboard',
+			name: 'leaderboardView',
 			component: Leaderboard,
 			props: (route) => ({ id: Number.parseInt(route.params.id as string) }),
 		},

From 97e6a3202c1aaca30cc64a6cf6d6113daf1e9056 Mon Sep 17 00:00:00 2001
From: Ted Wollman <25165500+TheTedder@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:09:12 -0500
Subject: [PATCH 12/24] Implement Back button.

---
 src/components/Leaderboard.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 5d99d94..2a6d99c 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -72,10 +72,7 @@ async function confirmRestoreBoard() {
 				<button @click="confirmRestoreBoard">Confirm</button>
 			</div>
 
-			<!-- <RouterLink :to="{ name: 'leaderboards' }">
-				<button class="back-button">← Leaderboards</button>
-			</RouterLink> -->
-			<button class="back-button">Temp</button>
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
 			<div class="action-button-container">
 				<!-- TODO: Create Edit page, and then add this link to it -->
 				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
@@ -143,7 +140,7 @@ async function confirmRestoreBoard() {
 	row-gap: 1rem;
 }
 
-.back-button {
+.back-link {
 	justify-self: start;
 	padding: 0.5rem;
 }

From 14caccf154170674c69b181d6ea0beee347c1451 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Tue, 10 Dec 2024 18:15:07 +0800
Subject: [PATCH 13/24] Autofocus email input in Login

---
 src/components/Login.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 02265db..f5f6e9e 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -47,7 +47,7 @@ async function submit() {
 			<h2>Admin Panel Login</h2>
 			<form class="loginForm" @submit.prevent="submit">
 				<label for="email">Email</label>
-				<input v-model="email" id="email" type="text" />
+				<input v-model="email" id="email" type="text" autofocus />
 				<label for="password">Password</label>
 				<input v-model="password" id="password" type="password" />
 				<input type="submit" value="Login" />

From 46ebb4ba54a2fe8a063f7e76101955fceec0754d Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Tue, 10 Dec 2024 18:15:45 +0800
Subject: [PATCH 14/24] Modalify confirmation prompts

---
 src/components/Leaderboard.vue | 48 +++++++++++++++++++++++-----------
 src/components/Modal.vue       | 25 ++++++++++++++++++
 2 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Modal.vue

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 2a6d99c..95b1fdb 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useAsyncState, useConfirmDialog } from '@vueuse/core'
-import { Leaderboards } from '../lib/api/Leaderboards'
-import { useSessionToken } from '../composables/useSessionToken'
 import { useAuth } from '../composables/useAuth'
+import { useSessionToken } from '../composables/useSessionToken'
+import { Leaderboards } from '../lib/api/Leaderboards'
+import Modal from './Modal.vue'
 
 const props = defineProps<{
 	id: number
@@ -28,7 +29,7 @@ const {
 const {
 	reveal: revealDelete,
 	isRevealed: isRevealedDelete,
-	cancel: cancelDelete
+	cancel: cancelDelete,
 } = useConfirmDialog()
 
 const {
@@ -61,16 +62,22 @@ async function confirmRestoreBoard() {
 
 		<div v-else class="main-content">
 			<!-- Deletion confirmation -->
-			<div v-if="isRevealedDelete" class="delete-confirmation-container">
-				<button @click="cancelDelete">Cancel</button>
-				<button @click="confirmDeleteBoard">Confirm</button>
-			</div>
+			<Modal :show="isRevealedDelete" @hide="cancelDelete">
+				<div class="confirmation-container">
+					<span class="confirmation-message">Really delete this leaderboard? (This action can be reversed)</span>
+					<button @click="cancelDelete">No</button>
+					<button @click="confirmDeleteBoard">Yes</button>
+				</div>
+			</Modal>
 
 			<!-- Restoration confirmation -->
-			<div v-if="isRevealedRestore" class="delete-confirmation-container">
-				<button @click="cancelRestore">Cancel</button>
-				<button @click="confirmRestoreBoard">Confirm</button>
-			</div>
+			<Modal :show="isRevealedRestore" @hide="cancelRestore">
+				<div class="confirmation-container">
+					<span class="confirmation-message">Really restore this leaderboard? (This action can be reversed)</span>
+					<button @click="cancelRestore">No</button>
+					<button @click="confirmRestoreBoard">Yes</button>
+				</div>
+			</Modal>
 
 			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
 			<div class="action-button-container">
@@ -100,6 +107,7 @@ async function confirmRestoreBoard() {
 					</tr>
 					<tr>
 						<th>Slug:</th>
+						<!-- TODO: Convert this to a link to the board on the main site -->
 						<td>/{{ board?.slug }}</td>
 					</tr>
 					<tr>
@@ -108,7 +116,8 @@ async function confirmRestoreBoard() {
 					</tr>
 					<tr>
 						<th>Deleted:</th>
-						<td>{{ board?.deletedAt ?? 'Not deleted' }}</td>
+						<td v-if="board?.deletedAt">{{ board?.deletedAt }}</td>
+						<td v-else class="dim">&lt;Not deleted&gt;</td>
 					</tr>
 					<tr>
 						<th>Info:</th>
@@ -145,9 +154,18 @@ async function confirmRestoreBoard() {
 	padding: 0.5rem;
 }
 
-.delete-confirmation-container {
-	display: flex;
-	justify-content: space-between;
+.confirmation-container {
+	padding: 1rem;
+	border: solid 1px gray;
+	border-radius: 5px;
+	background-color: black;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 1rem;
+}
+
+.confirmation-message {
+	grid-column: span 2 / span 2;
 }
 
 .action-button-container {
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..f0a8c2c
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+	show: boolean,
+}>()
+</script>
+
+<template>
+	<Teleport to="body" v-if="props.show">
+		<div class="container" @click.self="$emit('hide')">
+			<slot></slot>
+		</div>
+	</Teleport>
+</template>
+
+<style lang="css" scoped>
+	.container {
+		position: fixed;
+		inset: 0;
+		z-index: 999;
+		backdrop-filter: blur(5px);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

From 224a9c6b1548adab6733d2ffb0e66f0eedd169c2 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Tue, 10 Dec 2024 22:42:01 +0800
Subject: [PATCH 15/24] Add deletion and restoration error UI

---
 src/components/Leaderboard.vue | 68 +++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 95b1fdb..af51009 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAsyncState, useConfirmDialog } from '@vueuse/core'
+import { ref } from 'vue'
 import { useAuth } from '../composables/useAuth'
 import { useSessionToken } from '../composables/useSessionToken'
 import { Leaderboards } from '../lib/api/Leaderboards'
@@ -30,34 +31,65 @@ const {
 	reveal: revealDelete,
 	isRevealed: isRevealedDelete,
 	cancel: cancelDelete,
+	confirm: confirmDelete,
+	onCancel: onCancelDelete,
 } = useConfirmDialog()
 
 const {
 	reveal: revealRestore,
 	isRevealed: isRevealedRestore,
-	cancel: cancelRestore
+	cancel: cancelRestore,
+	confirm: confirmRestore,
+	onCancel: onCancelRestore,
 } = useConfirmDialog()
 
+const isDisabled = ref(false)
+const modalError = ref<string | null>(null)
+
 async function confirmDeleteBoard() {
-	// TODO: Error-handling
-	await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
-	execute()
+	isDisabled.value = true
+	modalError.value = null
+	try {
+		await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
+		confirmDelete()
+		execute()
+	} catch (error: unknown) {
+		modalError.value = (error as Response).status.toString(10)
+	} finally {
+		isDisabled.value = false
+	}
 }
 
 async function confirmRestoreBoard() {
-	// TODO: Error-handling
-	await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
-	execute()
+	isDisabled.value = true
+	modalError.value = null
+	try {
+		await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
+		confirmRestore()
+		execute()
+	} catch (error: unknown) {
+		modalError.value = (error as Response).status.toString(10)
+	} finally {
+		isDisabled.value = false
+	}
 }
+
+onCancelDelete(() => {
+	modalError.value = null
+})
+
+onCancelRestore(() => {
+	modalError.value = null
+})
 </script>
 
 <template>
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
 		<div v-else-if="error" class="error-container">
-			<p>Error</p>
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+			<p>{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
-			<!-- TODO: Add button to go back to the List page -->
 		</div>
 
 		<div v-else class="main-content">
@@ -65,8 +97,9 @@ async function confirmRestoreBoard() {
 			<Modal :show="isRevealedDelete" @hide="cancelDelete">
 				<div class="confirmation-container">
 					<span class="confirmation-message">Really delete this leaderboard? (This action can be reversed)</span>
-					<button @click="cancelDelete">No</button>
-					<button @click="confirmDeleteBoard">Yes</button>
+					<button @click="cancelDelete" :disabled="isDisabled" :class="{ disabled: isDisabled }">No</button>
+					<button @click="confirmDeleteBoard" :disabled="isDisabled" :class="{ disabled: isDisabled }">Yes</button>
+					<span class="modal-error" :style="{ visibility: modalError ? 'visible' : 'hidden' }">Deletion failed: {{ modalError }}</span>
 				</div>
 			</Modal>
 
@@ -74,8 +107,9 @@ async function confirmRestoreBoard() {
 			<Modal :show="isRevealedRestore" @hide="cancelRestore">
 				<div class="confirmation-container">
 					<span class="confirmation-message">Really restore this leaderboard? (This action can be reversed)</span>
-					<button @click="cancelRestore">No</button>
-					<button @click="confirmRestoreBoard">Yes</button>
+					<button @click="cancelRestore" :disabled="isDisabled" :class="{ disabled: isDisabled }">No</button>
+					<button @click="confirmRestoreBoard" :disabled="isDisabled" :class="{ disabled: isDisabled }">Yes</button>
+					<span class="modal-error" :style="{ visibility: modalError ? 'visible' : 'hidden' }">Restoration failed: {{ modalError }}</span>
 				</div>
 			</Modal>
 
@@ -168,6 +202,14 @@ async function confirmRestoreBoard() {
 	grid-column: span 2 / span 2;
 }
 
+.modal-error {
+	color: red;
+}
+
+button.disabled {
+	color: gray;
+}
+
 .action-button-container {
 	display: flex;
 	gap: 0.5rem;

From afefe40cc8cf83a3053067c0bec2a85a154b877c Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Sun, 15 Dec 2024 12:44:09 +0800
Subject: [PATCH 16/24] Drop Modal

---
 src/components/Leaderboard.vue | 111 +++++----------------------------
 src/components/Modal.vue       |  25 --------
 2 files changed, 17 insertions(+), 119 deletions(-)
 delete mode 100644 src/components/Modal.vue

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index af51009..75445fb 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { useAsyncState, useConfirmDialog } from '@vueuse/core'
-import { ref } from 'vue'
+import { useAsyncState } from '@vueuse/core'
 import { useAuth } from '../composables/useAuth'
 import { useSessionToken } from '../composables/useSessionToken'
 import { Leaderboards } from '../lib/api/Leaderboards'
-import Modal from './Modal.vue'
 
 const props = defineProps<{
 	id: number
@@ -27,60 +25,27 @@ const {
 	return resp.data
 }, null)
 
-const {
-	reveal: revealDelete,
-	isRevealed: isRevealedDelete,
-	cancel: cancelDelete,
-	confirm: confirmDelete,
-	onCancel: onCancelDelete,
-} = useConfirmDialog()
-
-const {
-	reveal: revealRestore,
-	isRevealed: isRevealedRestore,
-	cancel: cancelRestore,
-	confirm: confirmRestore,
-	onCancel: onCancelRestore,
-} = useConfirmDialog()
-
-const isDisabled = ref(false)
-const modalError = ref<string | null>(null)
-
-async function confirmDeleteBoard() {
-	isDisabled.value = true
-	modalError.value = null
-	try {
-		await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
-		confirmDelete()
-		execute()
-	} catch (error: unknown) {
-		modalError.value = (error as Response).status.toString(10)
-	} finally {
-		isDisabled.value = false
+async function revealDelete() {
+	if (confirm('Really delete this leaderboard? (This action can be reversed)')) {
+		try {
+			await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
+			execute()
+		} catch (error: unknown) {
+			alert('Failed to delete: ' + (error as Response).status.toString(10))
+		}
 	}
 }
 
-async function confirmRestoreBoard() {
-	isDisabled.value = true
-	modalError.value = null
-	try {
-		await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
-		confirmRestore()
-		execute()
-	} catch (error: unknown) {
-		modalError.value = (error as Response).status.toString(10)
-	} finally {
-		isDisabled.value = false
+async function revealRestore() {
+	if (confirm('Really restore this leaderboard? (This action can be reversed)')) {
+		try {
+			await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
+			execute()
+		} catch (error: unknown) {
+			alert('Failed to restore: ' + (error as Response).status.toString(10))
+		}
 	}
 }
-
-onCancelDelete(() => {
-	modalError.value = null
-})
-
-onCancelRestore(() => {
-	modalError.value = null
-})
 </script>
 
 <template>
@@ -93,26 +58,6 @@ onCancelRestore(() => {
 		</div>
 
 		<div v-else class="main-content">
-			<!-- Deletion confirmation -->
-			<Modal :show="isRevealedDelete" @hide="cancelDelete">
-				<div class="confirmation-container">
-					<span class="confirmation-message">Really delete this leaderboard? (This action can be reversed)</span>
-					<button @click="cancelDelete" :disabled="isDisabled" :class="{ disabled: isDisabled }">No</button>
-					<button @click="confirmDeleteBoard" :disabled="isDisabled" :class="{ disabled: isDisabled }">Yes</button>
-					<span class="modal-error" :style="{ visibility: modalError ? 'visible' : 'hidden' }">Deletion failed: {{ modalError }}</span>
-				</div>
-			</Modal>
-
-			<!-- Restoration confirmation -->
-			<Modal :show="isRevealedRestore" @hide="cancelRestore">
-				<div class="confirmation-container">
-					<span class="confirmation-message">Really restore this leaderboard? (This action can be reversed)</span>
-					<button @click="cancelRestore" :disabled="isDisabled" :class="{ disabled: isDisabled }">No</button>
-					<button @click="confirmRestoreBoard" :disabled="isDisabled" :class="{ disabled: isDisabled }">Yes</button>
-					<span class="modal-error" :style="{ visibility: modalError ? 'visible' : 'hidden' }">Restoration failed: {{ modalError }}</span>
-				</div>
-			</Modal>
-
 			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
 			<div class="action-button-container">
 				<!-- TODO: Create Edit page, and then add this link to it -->
@@ -188,28 +133,6 @@ onCancelRestore(() => {
 	padding: 0.5rem;
 }
 
-.confirmation-container {
-	padding: 1rem;
-	border: solid 1px gray;
-	border-radius: 5px;
-	background-color: black;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 1rem;
-}
-
-.confirmation-message {
-	grid-column: span 2 / span 2;
-}
-
-.modal-error {
-	color: red;
-}
-
-button.disabled {
-	color: gray;
-}
-
 .action-button-container {
 	display: flex;
 	gap: 0.5rem;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
deleted file mode 100644
index f0a8c2c..0000000
--- a/src/components/Modal.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-	show: boolean,
-}>()
-</script>
-
-<template>
-	<Teleport to="body" v-if="props.show">
-		<div class="container" @click.self="$emit('hide')">
-			<slot></slot>
-		</div>
-	</Teleport>
-</template>
-
-<style lang="css" scoped>
-	.container {
-		position: fixed;
-		inset: 0;
-		z-index: 999;
-		backdrop-filter: blur(5px);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-</style>

From 63c79f0d19bc1924467889363ff5da37a281e5be Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Sun, 15 Dec 2024 13:04:53 +0800
Subject: [PATCH 17/24] Print error on update board error instead of using
 alerts

---
 src/components/Leaderboard.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 75445fb..1a77124 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
+import { ref } from 'vue'
 import { useAuth } from '../composables/useAuth'
 import { useSessionToken } from '../composables/useSessionToken'
 import { Leaderboards } from '../lib/api/Leaderboards'
@@ -8,6 +9,8 @@ const props = defineProps<{
 	id: number
 }>()
 
+const updateError = ref<string | null>(null)
+
 const token = useSessionToken()
 
 const leaderboards = new Leaderboards({
@@ -25,13 +28,14 @@ const {
 	return resp.data
 }, null)
 
+
 async function revealDelete() {
 	if (confirm('Really delete this leaderboard? (This action can be reversed)')) {
 		try {
 			await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
 			execute()
 		} catch (error: unknown) {
-			alert('Failed to delete: ' + (error as Response).status.toString(10))
+			updateError.value = 'Failed to delete: ' + (error as Response).status.toString(10)
 		}
 	}
 }
@@ -42,7 +46,7 @@ async function revealRestore() {
 			await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
 			execute()
 		} catch (error: unknown) {
-			alert('Failed to restore: ' + (error as Response).status.toString(10))
+			updateError.value = 'Failed to restore: ' + (error as Response).status.toString(10)
 		}
 	}
 }
@@ -53,7 +57,7 @@ async function revealRestore() {
 		<div v-if="isLoading">Loading...</div>
 		<div v-else-if="error" class="error-container">
 			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
-			<p>{{ error }}</p>
+			<p class="errorText">{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
 		</div>
 
@@ -74,6 +78,8 @@ async function revealRestore() {
 				</button>
 			</div>
 
+			<span v-if="updateError !== null" class="errorText">{{ updateError }}</span>
+
 			<table>
 				<tbody>
 					<tr>
@@ -145,13 +151,18 @@ async function revealRestore() {
 }
 
 .delete-button {
-	background: red;
+	background: crimson;
 }
 
 .table-header {
 	font-weight: bold;
 }
 
+.errorText {
+	grid-column: span 2 / span 2;
+	color: crimson;
+}
+
 .dim {
 	color: grey;
 	font-style: italic;

From 10bb77cb08bb5b09a2f92e7506d662055032c77c Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Sun, 15 Dec 2024 13:07:36 +0800
Subject: [PATCH 18/24] Change class casings to match those in other components

---
 src/components/Leaderboard.vue | 32 ++++++++++++++------------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 1a77124..fa1e12f 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -55,25 +55,25 @@ async function revealRestore() {
 <template>
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
-		<div v-else-if="error" class="error-container">
-			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+		<div v-else-if="error" class="errorContainer">
+			<RouterLink class="backLink" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
 			<p class="errorText">{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
 		</div>
 
-		<div v-else class="main-content">
-			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
-			<div class="action-button-container">
+		<div v-else class="mainContent">
+			<RouterLink class="backLink" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+			<div class="actionButtonContainer">
 				<!-- TODO: Create Edit page, and then add this link to it -->
-				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
+				<!-- <RouterLink to="/edit"><button class="actionButton">✎</button></RouterLink> -->
 				<button
 					v-if="board?.deletedAt === null"
-					class="action-button delete-button"
+					class="actionButton deleteButton"
 					@click="revealDelete"
 				>
 					Delete
 				</button>
-				<button v-else class="action-button" @click="revealRestore">
+				<button v-else class="actionButton" @click="revealRestore">
 					Restore
 				</button>
 			</div>
@@ -120,44 +120,40 @@ async function revealRestore() {
 	padding: 1rem;
 }
 
-.error-container {
+.errorContainer {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 	align-items: start;
 }
 
-.main-content {
+.mainContent {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	margin-top: 1rem;
 	row-gap: 1rem;
 }
 
-.back-link {
+.backLink {
 	justify-self: start;
 	padding: 0.5rem;
 }
 
-.action-button-container {
+.actionButtonContainer {
 	display: flex;
 	gap: 0.5rem;
 	justify-self: end;
 }
 
-.action-button {
+.actionButton {
 	width: 3rem;
 	height: 3rem;
 }
 
-.delete-button {
+.deleteButton {
 	background: crimson;
 }
 
-.table-header {
-	font-weight: bold;
-}
-
 .errorText {
 	grid-column: span 2 / span 2;
 	color: crimson;

From c8eb8dd8665e4e59d3ccd60fc125b201e0688bf1 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 08:25:53 +0800
Subject: [PATCH 19/24] Revert "Change class casings to match those in other
 components"

This reverts commit 10bb77cb08bb5b09a2f92e7506d662055032c77c.
---
 src/components/Leaderboard.vue | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index fa1e12f..1a77124 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -55,25 +55,25 @@ async function revealRestore() {
 <template>
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
-		<div v-else-if="error" class="errorContainer">
-			<RouterLink class="backLink" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+		<div v-else-if="error" class="error-container">
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
 			<p class="errorText">{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
 		</div>
 
-		<div v-else class="mainContent">
-			<RouterLink class="backLink" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
-			<div class="actionButtonContainer">
+		<div v-else class="main-content">
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+			<div class="action-button-container">
 				<!-- TODO: Create Edit page, and then add this link to it -->
-				<!-- <RouterLink to="/edit"><button class="actionButton">✎</button></RouterLink> -->
+				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
 				<button
 					v-if="board?.deletedAt === null"
-					class="actionButton deleteButton"
+					class="action-button delete-button"
 					@click="revealDelete"
 				>
 					Delete
 				</button>
-				<button v-else class="actionButton" @click="revealRestore">
+				<button v-else class="action-button" @click="revealRestore">
 					Restore
 				</button>
 			</div>
@@ -120,40 +120,44 @@ async function revealRestore() {
 	padding: 1rem;
 }
 
-.errorContainer {
+.error-container {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 	align-items: start;
 }
 
-.mainContent {
+.main-content {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	margin-top: 1rem;
 	row-gap: 1rem;
 }
 
-.backLink {
+.back-link {
 	justify-self: start;
 	padding: 0.5rem;
 }
 
-.actionButtonContainer {
+.action-button-container {
 	display: flex;
 	gap: 0.5rem;
 	justify-self: end;
 }
 
-.actionButton {
+.action-button {
 	width: 3rem;
 	height: 3rem;
 }
 
-.deleteButton {
+.delete-button {
 	background: crimson;
 }
 
+.table-header {
+	font-weight: bold;
+}
+
 .errorText {
 	grid-column: span 2 / span 2;
 	color: crimson;

From 9f0ea449ddfcb5401178c2a41731c979d1bebee2 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 08:33:48 +0800
Subject: [PATCH 20/24] Implement comments

---
 src/components/Leaderboard.vue | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index 1a77124..c19f7ee 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -4,12 +4,13 @@ import { ref } from 'vue'
 import { useAuth } from '../composables/useAuth'
 import { useSessionToken } from '../composables/useSessionToken'
 import { Leaderboards } from '../lib/api/Leaderboards'
+import { useApi } from '../composables/useApi'
 
 const props = defineProps<{
 	id: number
 }>()
 
-const updateError = ref<string | null>(null)
+const updateError = ref('')
 
 const token = useSessionToken()
 
@@ -31,23 +32,25 @@ const {
 
 async function revealDelete() {
 	if (confirm('Really delete this leaderboard? (This action can be reversed)')) {
-		try {
-			await leaderboards.deleteLeaderboard(props.id, useAuth(token.value))
-			execute()
-		} catch (error: unknown) {
-			updateError.value = 'Failed to delete: ' + (error as Response).status.toString(10)
-		}
+		useApi(
+			() => leaderboards.deleteLeaderboard(props.id, useAuth(token.value)),
+			() => execute(),
+			(error) => {
+				updateError.value = 'Failed to delete: ' + (error as Response).status.toString(10)
+			}
+		)
 	}
 }
 
 async function revealRestore() {
 	if (confirm('Really restore this leaderboard? (This action can be reversed)')) {
-		try {
-			await leaderboards.restoreLeaderboard(props.id, useAuth(token.value))
-			execute()
-		} catch (error: unknown) {
-			updateError.value = 'Failed to restore: ' + (error as Response).status.toString(10)
-		}
+		useApi(
+			() => leaderboards.restoreLeaderboard(props.id, useAuth(token.value)),
+			() => execute(),
+			(error) => {
+				updateError.value = 'Failed to restore: ' + (error as Response).status.toString(10)
+			}
+		)
 	}
 }
 </script>
@@ -78,7 +81,7 @@ async function revealRestore() {
 				</button>
 			</div>
 
-			<span v-if="updateError !== null" class="errorText">{{ updateError }}</span>
+			<p v-if="updateError" class="error-text">{{ updateError }}</p>
 
 			<table>
 				<tbody>
@@ -158,7 +161,7 @@ async function revealRestore() {
 	font-weight: bold;
 }
 
-.errorText {
+.error-text {
 	grid-column: span 2 / span 2;
 	color: crimson;
 }

From e0ffa7b423025a174932da6ef99d38b620c48e63 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 08:33:57 +0800
Subject: [PATCH 21/24] Format files

---
 src/components/Leaderboard.vue | 23 ++++++++++++++++-------
 src/components/Navbar.vue      |  4 +++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index c19f7ee..dda4c07 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -29,26 +29,31 @@ const {
 	return resp.data
 }, null)
 
-
 async function revealDelete() {
-	if (confirm('Really delete this leaderboard? (This action can be reversed)')) {
+	if (
+		confirm('Really delete this leaderboard? (This action can be reversed)')
+	) {
 		useApi(
 			() => leaderboards.deleteLeaderboard(props.id, useAuth(token.value)),
 			() => execute(),
 			(error) => {
-				updateError.value = 'Failed to delete: ' + (error as Response).status.toString(10)
+				updateError.value =
+					'Failed to delete: ' + (error as Response).status.toString(10)
 			}
 		)
 	}
 }
 
 async function revealRestore() {
-	if (confirm('Really restore this leaderboard? (This action can be reversed)')) {
+	if (
+		confirm('Really restore this leaderboard? (This action can be reversed)')
+	) {
 		useApi(
 			() => leaderboards.restoreLeaderboard(props.id, useAuth(token.value)),
 			() => execute(),
 			(error) => {
-				updateError.value = 'Failed to restore: ' + (error as Response).status.toString(10)
+				updateError.value =
+					'Failed to restore: ' + (error as Response).status.toString(10)
 			}
 		)
 	}
@@ -59,13 +64,17 @@ async function revealRestore() {
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
 		<div v-else-if="error" class="error-container">
-			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }"
+				>&lt; Back</RouterLink
+			>
 			<p class="errorText">{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
 		</div>
 
 		<div v-else class="main-content">
-			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }">&lt; Back</RouterLink>
+			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }"
+				>&lt; Back</RouterLink
+			>
 			<div class="action-button-container">
 				<!-- TODO: Create Edit page, and then add this link to it -->
 				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index eceac57..c72a5b4 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -18,7 +18,9 @@ const { state: user } = useUserDetails()
 	<div class="navbar">
 		<div class="navbar-left">
 			<p class="title select-none">Leaderboards.gg Admin Panel</p>
-			<RouterLink class="navlink" :to="{ name: 'leaderboardsList' }">Leaderboards</RouterLink>
+			<RouterLink class="navlink" :to="{ name: 'leaderboardsList' }"
+				>Leaderboards</RouterLink
+			>
 		</div>
 		<div class="navbar-right">
 			<p>Signed in as {{ user?.username }}</p>

From 07779dfde240d0b88659dcbea9e6a3d05f53840a Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 14:49:28 +0800
Subject: [PATCH 22/24] Drop link to List Page

---
 src/components/Leaderboard.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index dda4c07..c923fd3 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -64,9 +64,6 @@ async function revealRestore() {
 	<div class="container">
 		<div v-if="isLoading">Loading...</div>
 		<div v-else-if="error" class="error-container">
-			<RouterLink class="back-link" :to="{ name: 'leaderboardsList' }"
-				>&lt; Back</RouterLink
-			>
 			<p class="errorText">{{ error }}</p>
 			<button @click="execute()" class="button">Reload</button>
 		</div>

From e04a15d8e417c8db2eb2d5e34e8309a2a838ba92 Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 16:00:25 +0800
Subject: [PATCH 23/24] Create Edit Page

---
 src/components/Edit.vue        | 138 +++++++++++++++++++++++++++++++++
 src/components/Leaderboard.vue |   7 +-
 src/main.ts                    |   9 ++-
 3 files changed, 147 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Edit.vue

diff --git a/src/components/Edit.vue b/src/components/Edit.vue
new file mode 100644
index 0000000..7d14384
--- /dev/null
+++ b/src/components/Edit.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { useAsyncState } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useApi } from '../composables/useApi'
+import { useAuth } from '../composables/useAuth'
+import { useSessionToken } from '../composables/useSessionToken'
+import { Leaderboards } from '../lib/api/Leaderboards'
+import { UpdateLeaderboardRequest } from '../lib/api/data-contracts'
+
+const props = defineProps<{
+	id: number
+}>()
+
+const updateError = ref('')
+
+const token = useSessionToken()
+
+const leaderboards = new Leaderboards({
+	baseUrl: import.meta.env.VITE_BACKEND_URL
+})
+
+const {
+	state: board,
+	error,
+	isLoading,
+	execute
+} = useAsyncState(async () => {
+	// TODO: Add param in BE that allows also fetching deleted boards
+	const resp = await leaderboards.getLeaderboard(props.id)
+	return resp.data
+}, null)
+
+const updateRequest = computed<UpdateLeaderboardRequest>(() => ({
+	name: board.value?.name,
+	info: board.value?.info,
+	slug: board.value?.slug,
+}))
+
+async function submit() {
+	useApi(
+		() => leaderboards.updateLeaderboard(props.id, updateRequest.value, useAuth(token.value)),
+		async (data) => {
+			console.log(await data.json())
+			execute()
+		},
+		(error) => {
+			updateError.value =
+				'Failed to update: ' + (error as Response).status.toString(10)
+		}
+	)
+}
+</script>
+
+<template>
+	<div class="container">
+		<div v-if="isLoading">Loading...</div>
+		<div v-else-if="error" class="error-container">
+			<p class="errorText">{{ error }}</p>
+			<button @click="execute()" class="button">Reload</button>
+		</div>
+
+		<div v-else class="main-content">
+			<RouterLink class="back-link" :to="{ name: 'leaderboardView', params: { id } }"
+				>&lt; Back</RouterLink
+			>
+
+			<p v-if="updateError" class="error-text">{{ updateError }}</p>
+
+			<form @submit.prevent="submit">
+				<table>
+					<tbody>
+						<tr>
+							<th>ID:</th>
+							<td>{{ board?.id }}</td>
+						</tr>
+						<tr>
+							<th><label for="name">Name:</label></th>
+							<input v-model="updateRequest.name" id="name" />
+						</tr>
+						<tr>
+							<th><label for="slug">Slug:</label></th>
+							<input v-model="updateRequest.slug" id="slug" />
+						</tr>
+						<tr>
+							<th>Created:</th>
+							<td>{{ board?.createdAt }}</td>
+						</tr>
+						<tr>
+							<th>Deleted:</th>
+							<td v-if="board?.deletedAt">{{ board?.deletedAt }}</td>
+							<td v-else class="dim">&lt;Not deleted&gt;</td>
+						</tr>
+						<tr>
+							<th><label for="info">Info:</label></th>
+							<input v-model="updateRequest.info" id="info" />
+						</tr>
+					</tbody>
+					<button>Submit</button>
+				</table>
+			</form>
+		</div>
+	</div>
+</template>
+
+<style lang="css" scoped>
+.container {
+	padding: 1rem;
+}
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	align-items: start;
+}
+
+.main-content {
+	display: flex;
+	flex-direction: column;
+	margin-top: 1rem;
+	row-gap: 1rem;
+}
+
+.back-link {
+	justify-self: start;
+	padding: 0.5rem;
+}
+
+.error-text {
+	grid-column: span 2 / span 2;
+	color: crimson;
+}
+
+.dim {
+	color: grey;
+	font-style: italic;
+}
+</style>
diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
index c923fd3..47acd7d 100644
--- a/src/components/Leaderboard.vue
+++ b/src/components/Leaderboard.vue
@@ -73,8 +73,7 @@ async function revealRestore() {
 				>&lt; Back</RouterLink
 			>
 			<div class="action-button-container">
-				<!-- TODO: Create Edit page, and then add this link to it -->
-				<!-- <RouterLink to="/edit"><button class="action-button">✎</button></RouterLink> -->
+				<RouterLink :to="{ name: 'leaderboardEdit', params: { id } }"><button class="action-button">✎</button></RouterLink>
 				<button
 					v-if="board?.deletedAt === null"
 					class="action-button delete-button"
@@ -163,10 +162,6 @@ async function revealRestore() {
 	background: crimson;
 }
 
-.table-header {
-	font-weight: bold;
-}
-
 .error-text {
 	grid-column: span 2 / span 2;
 	color: crimson;
diff --git a/src/main.ts b/src/main.ts
index 0923a57..2c43628 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
+import Edit from './components/Edit.vue'
 import Leaderboard from './components/Leaderboard.vue'
 import Leaderboards from './components/Leaderboards.vue'
 import Main from './components/Main.vue'
@@ -18,7 +19,13 @@ const router = createRouter({
 			path: '/leaderboard/:id(\\d+)',
 			name: 'leaderboardView',
 			component: Leaderboard,
-			props: (route) => ({ id: Number.parseInt(route.params.id as string) }),
+			props: (route) => ({ id: Number.parseInt(route.params.id as string, 10) }),
+		},
+		{
+			path: '/leaderboard/:id(\\d+)/edit',
+			name: 'leaderboardEdit',
+			component: Edit,
+			props: (route) => ({ id: Number.parseInt(route.params.id as string, 10) }),
 		},
 		{
 			path: '/leaderboards',

From eb8c4d39e27d62f1e12f4b204c4ad2f2dad404bb Mon Sep 17 00:00:00 2001
From: zysim <emailmeloh@gmail.com>
Date: Mon, 16 Dec 2024 16:19:21 +0800
Subject: [PATCH 24/24] Move button element out of table

---
 src/components/Edit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Edit.vue b/src/components/Edit.vue
index 7d14384..0bf7df2 100644
--- a/src/components/Edit.vue
+++ b/src/components/Edit.vue
@@ -95,8 +95,8 @@ async function submit() {
 							<input v-model="updateRequest.info" id="info" />
 						</tr>
 					</tbody>
-					<button>Submit</button>
 				</table>
+				<button>Submit</button>
 			</form>
 		</div>
 	</div>