From 74080ffceba8ac3490ff2dd4d9f20bf5357beb60 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Tue, 7 Jan 2025 15:05:40 +0100
Subject: [PATCH] feat: task page

---
 packages/web/src/routes/progress/+page.svelte | 23 +++++++++++++++----
 .../src/routes/progress/[id]/+page.server.ts  |  8 +++++++
 .../web/src/routes/progress/[id]/+page.svelte |  5 ++++
 .../routes/progress/create/+page.server.ts    |  4 ++--
 .../src/routes/progress/create/+page.svelte   |  2 +-
 5 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 packages/web/src/routes/progress/[id]/+page.server.ts
 create mode 100644 packages/web/src/routes/progress/[id]/+page.svelte

diff --git a/packages/web/src/routes/progress/+page.svelte b/packages/web/src/routes/progress/+page.svelte
index 39dfa6d..6398f5d 100644
--- a/packages/web/src/routes/progress/+page.svelte
+++ b/packages/web/src/routes/progress/+page.svelte
@@ -21,10 +21,25 @@
 	<tbody>
 		{#each data.tasks as task}
 			<tr>
-				<td>{task.id}</td>
-				<td>{task.name}</td>
-				<td>{task.progress}</td>
-				<td><button>Delete</button></td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						{task.id}
+					</a>
+				</td><td>
+					<a href={'/progress/' + task.id}>
+						{task.name}
+					</a>
+				</td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						{task.progress}
+					</a>
+				</td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						<button>Delete</button>
+					</a>
+				</td>
 			</tr>
 		{/each}</tbody
 	>
diff --git a/packages/web/src/routes/progress/[id]/+page.server.ts b/packages/web/src/routes/progress/[id]/+page.server.ts
new file mode 100644
index 0000000..b8323fd
--- /dev/null
+++ b/packages/web/src/routes/progress/[id]/+page.server.ts
@@ -0,0 +1,8 @@
+import { db, tasks } from "$lib/db/schema"
+import { eq } from "drizzle-orm"
+
+export const load = async ({ params }) => {
+	return {
+		task: (await db.select().from(tasks).where(eq(tasks.id, params.id)))[0]
+	}
+}
diff --git a/packages/web/src/routes/progress/[id]/+page.svelte b/packages/web/src/routes/progress/[id]/+page.svelte
new file mode 100644
index 0000000..d6eda4a
--- /dev/null
+++ b/packages/web/src/routes/progress/[id]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.task.name}</h1>
diff --git a/packages/web/src/routes/progress/create/+page.server.ts b/packages/web/src/routes/progress/create/+page.server.ts
index e7c7f95..f90e503 100644
--- a/packages/web/src/routes/progress/create/+page.server.ts
+++ b/packages/web/src/routes/progress/create/+page.server.ts
@@ -5,8 +5,8 @@ export const actions = {
 	default: async ({ request }) => {
 		const data = await request.formData()
 
-		await db.insert(tasks).values({ name: data.get('name') })
+		const task = await db.insert(tasks).values({ name: data.get('name') }).returning()
 
-		redirect(303, '/progress')
+		redirect(303, '/progress/' + task[0].id)
 	}
 }
diff --git a/packages/web/src/routes/progress/create/+page.svelte b/packages/web/src/routes/progress/create/+page.svelte
index 4671bf3..c42b685 100644
--- a/packages/web/src/routes/progress/create/+page.svelte
+++ b/packages/web/src/routes/progress/create/+page.svelte
@@ -3,7 +3,7 @@
 
 	<div class="flex gap-4">
 		<label for="name">Name: </label>
-		<input type="text" id="name" class="border rounded" />
+		<input type="text" name="name" class="border rounded" />
 	</div>
 
 	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>