feat: editable name and category in grocery detail page

2 files changed, 39 insertions, 14 deletions

diff --git a/src/routes/grocery/[id]/+page.server.ts b/src/routes/grocery/[id]/+page.server.ts
index 3c3967a..cf8a949 100644
--- a/src/routes/grocery/[id]/+page.server.ts
+++ b/src/routes/grocery/[id]/+page.server.ts
@@ -2,23 +2,25 @@ import { error, fail, redirect } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
 import { groceries, categories } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
+import { loadAll as loadCategories } from '$lib/server/services/categories';
 import {
 	loadForGrocery,
 	add as addRef,
 	deleteReference,
 } from '$lib/server/services/references';
-import { deleteGrocery } from '$lib/server/services/groceries';
+import { updateGrocery, deleteGrocery } from '$lib/server/services/groceries';
 import {
 	numericId,
 	parseFormString,
 	parseOptionalNumber,
 } from '$lib/server/services/validation';
-import type { Grocery, Reference } from '$lib/server/services/types';
+import type { Category, Grocery, Reference } from '$lib/server/services/types';
 import type { Actions, PageServerLoad } from './$types';
 
 export interface GroceryDetailOutput {
 	item: Grocery & { categoryName: string | null };
 	references: Reference[];
+	categories: Category[];
 }
 
 export const load: PageServerLoad = async ({ params }) => {
@@ -35,6 +37,7 @@ export const load: PageServerLoad = async ({ params }) => {
 		: [null];
 
 	const refs = await loadForGrocery(id);
+	const cats = await loadCategories();
 
 	return {
 		item: {
@@ -42,6 +45,7 @@ export const load: PageServerLoad = async ({ params }) => {
 			categoryName: cat?.name ?? null,
 		},
 		references: refs,
+		categories: cats,
 	};
 };
 
@@ -73,6 +77,21 @@ export const actions: Actions = {
 		return { success: true };
 	},
 
+	update: async ({ request, params }) => {
+		const data = await request.formData();
+		const groceryId = numericId(params.id);
+		const name = parseFormString(data.get('name'));
+		const rawCategoryId = parseOptionalNumber(data.get('category_id'));
+		const categoryId = rawCategoryId === -1 ? null : rawCategoryId;
+
+		if (!name) {
+			return fail(400, { error: 'Le nom est requis' });
+		}
+
+		await updateGrocery(groceryId, name, categoryId);
+		return { success: true };
+	},
+
 	deleteItem: async ({ params }) => {
 		const groceryId = numericId(params.id);
 		await deleteGrocery(groceryId);
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index a49d037..a7e0bc9 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -2,17 +2,30 @@
 	import { enhance } from '$app/forms';
 
 	let { data, form } = $props();
+	let name = $state(data.item.name);
+	let categoryId = $state(data.item.categoryId ?? -1);
 	let reference = $state('');
 	let price = $state('');
 	let unit = $state('€/kg');
 	let qualityScore = $state('');
 </script>
 
-<h1>{data.item.name}</h1>
-
-{#if data.item.categoryName}
-	<p class="category">{data.item.categoryName}</p>
-{/if}
+<form class="form-card" method="POST" action="?/update" use:enhance>
+	<label>
+		<span class="form-label">Nom</span>
+		<input class="form-input" type="text" name="name" bind:value={name} />
+	</label>
+	<label>
+		<span class="form-label">Catégorie</span>
+		<select class="form-select" name="category_id" bind:value={categoryId}>
+			<option value={-1}>—</option>
+			{#each data.categories as cat (cat.id)}
+				<option value={cat.id}>{cat.name}</option>
+			{/each}
+		</select>
+	</label>
+	<button class="btn-primary" type="submit">Enregistrer</button>
+</form>
 
 <hr />
 
@@ -110,13 +123,6 @@
 <a href="/" class="back-link">&larr; Retour à la liste</a>
 
 <style>
-	.category {
-		color: var(--text-secondary);
-		font-size: 0.9375rem;
-		font-weight: 500;
-		margin-top: 0.25rem;
-	}
-
 	.ref-row {
 		display: flex;
 		gap: 0.75rem;