diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e4f78c5..a151a9b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -9,7 +9,6 @@ // eslint-disable-next-line svelte/prefer-writable-derived let localItems = $state(data?.items ?? []); let addError = $state(''); - // Sync local list with server data when it changes externally (toggle, navigation) $effect(() => { localItems = data?.items ?? []; @@ -81,13 +80,29 @@ bind:value={name} placeholder="Ajouter un article..." autocomplete="off" + list="item-suggestions" onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAdd(false); } }} + oninput={(e) => { + const val = e.currentTarget.value.trim().toLowerCase(); + const match = data.catalog.find( + (item) => item.name.toLowerCase() === val, + ); + if (match) { + name = match.name; + handleAdd(false); + } + }} /> + <datalist id="item-suggestions"> + {#each data.catalog as item (item.id)} + <option value={item.name}></option> + {/each} + </datalist> <button type="button" aria-label="Ajouter" onclick={() => handleAdd(false)} >+</button > @@ -123,7 +138,8 @@ <span class="best-ref" >{item.bestRef.reference} {#if item.bestRef.price && item.bestRef.unit} - {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {item.bestRef.price.toFixed(2)} + {item.bestRef.unit} {/if} {#if item.bestRef.qualityScore != null} ({item.bestRef.qualityScore}/100) @@ -175,25 +191,25 @@ transition: all 0.2s ease; } - .add-bar button:nth-child(2) { + .add-bar > button:nth-of-type(1) { background: var(--accent); color: var(--white); box-shadow: 0 1px 2px var(--shadow); } - .add-bar button:nth-child(2):hover { + .add-bar > button:nth-of-type(1):hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 8px var(--shadow-accent-lg); } - .add-bar button:nth-child(3) { + .add-bar > button:nth-of-type(2) { background: var(--surface); color: var(--text-secondary); border: 1.5px solid var(--border); } - .add-bar button:nth-child(3):hover { + .add-bar > button:nth-of-type(2):hover { border-color: var(--accent); color: var(--text); } |