diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/grocery/[id]/+page.svelte | 49 |
1 files changed, 44 insertions, 5 deletions
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte index 50c2e0a..c0550fc 100644 --- a/src/routes/grocery/[id]/+page.svelte +++ b/src/routes/grocery/[id]/+page.svelte @@ -5,6 +5,8 @@ let name = $state(data.item.name); let categoryId = $state(data.item.categoryId ?? -1); let saved = $state(false); + let isSubmitting = $state(false); + let formRef: HTMLFormElement; $effect(() => { if (form?.success && form?.type === 'update') { @@ -13,6 +15,17 @@ return () => clearTimeout(t); } }); + + function submitIfChanged() { + if (isSubmitting) return; + const currentCategoryId = data.item.categoryId ?? -1; + if (name === data.item.name && categoryId === currentCategoryId) return; + if (!name.trim()) return; + + isSubmitting = true; + formRef.requestSubmit(); + } + let reference = $state(''); let price = $state(''); let unit = $state('€/kg'); @@ -21,31 +34,50 @@ <main> <form + bind:this={formRef} class="form-card" method="POST" action="?/update" use:enhance={() => { return async ({ update }) => { await update({ reset: false }); + isSubmitting = false; }; }} > <label> <span class="form-label">Nom</span> - <input class="form-input" type="text" name="name" bind:value={name} /> + <input + class="form-input" + type="text" + name="name" + bind:value={name} + onblur={submitIfChanged} + onkeydown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + submitIfChanged(); + } + }} + /> </label> <label> <span class="form-label">Catégorie</span> - <select class="form-select" name="category_id" bind:value={categoryId}> + <select + class="form-select" + name="category_id" + bind:value={categoryId} + onblur={submitIfChanged} + > <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" - >{saved ? '✓ Enregistré' : 'Enregistrer'}</button - > + {#if saved} + <p class="save-status">✓ Enregistré</p> + {/if} </form> <hr /> @@ -223,4 +255,11 @@ background: var(--danger-bg); transform: translateY(-1px); } + + .save-status { + font-size: 0.875rem; + color: var(--success); + font-weight: 500; + margin-top: -0.25rem; + } </style> |