fix: prevent form reset after update and show feedback

1 files changed, 20 insertions, 2 deletions

diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index a7e0bc9..a1ac3d6 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -4,13 +4,31 @@
 	let { data, form } = $props();
 	let name = $state(data.item.name);
 	let categoryId = $state(data.item.categoryId ?? -1);
+	let saved = $state(false);
+
+	$effect(() => {
+		if (form?.success) {
+			saved = true;
+			const t = setTimeout(() => (saved = false), 2000);
+			return () => clearTimeout(t);
+		}
+	});
 	let reference = $state('');
 	let price = $state('');
 	let unit = $state('€/kg');
 	let qualityScore = $state('');
 </script>
 
-<form class="form-card" method="POST" action="?/update" use:enhance>
+<form
+	class="form-card"
+	method="POST"
+	action="?/update"
+	use:enhance={() => {
+		return async ({ update }) => {
+			await update({ reset: false });
+		};
+	}}
+>
 	<label>
 		<span class="form-label">Nom</span>
 		<input class="form-input" type="text" name="name" bind:value={name} />
@@ -24,7 +42,7 @@
 			{/each}
 		</select>
 	</label>
-	<button class="btn-primary" type="submit">Enregistrer</button>
+	<button class="btn-primary" type="submit">{saved ? '✓ Enregistré' : 'Enregistrer'}</button>
 </form>
 
 <hr />