dave/calorie-counter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

Improve the autocomplete UX a little

Browse Source
This commit is contained in:
PhatPhuckDave
2024-08-15 18:17:08 +02:00
parent 235a90b0a7
commit 6064d9847c
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/lib/components/Energy/EmptyFoodComp.svelte
View File

@@ -31,11 +31,15 @@
if (!name) { if (!name) {
foodSearch = []; foodSearch = [];
} else { } else {
updateAutocomplete();
}
}
function updateAutocomplete() {
if (!per100Edited) if (!per100Edited)
GetLastPer100(name.trim()).then((res) => { GetLastPer100(name.trim()).then((res) => {
// Prevent search when there's nothing to search // Prevent search when there's nothing to search
// Sometimes we get search results after deleting name // Sometimes we get search results after deleting name
console.log(name.trim(), res);
if (res.success && res.data && name) { if (res.success && res.data && name) {
foodSearch = res.data; foodSearch = res.data;
} else { } else {
@@ -43,7 +47,6 @@
} }
}); });
} }
}
async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) { async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
name = name.trim(); name = name.trim();
@@ -102,7 +105,7 @@
// } // }
function setInputVal(food: main.Food) { function setInputVal(food: main.Food) {
name = food.food; name = food.food;
per100 = String(food.per100) per100 = String(food.per100);
hiLiteIndex = null; hiLiteIndex = null;
foodSearch = []; foodSearch = [];
} }
@@ -133,6 +136,8 @@
contenteditable="true" contenteditable="true"
autofocus autofocus
on:keydown={update} on:keydown={update}
on:focusin={updateAutocomplete}
on:focusout={() => foodSearch = []}
bind:this={nameElement} bind:this={nameElement}
/> />
<td <td
@@ -162,11 +167,7 @@
{#if foodSearch.length > 0} {#if foodSearch.length > 0}
<ul bind:this={autocompleteList} class="z-50 fixed top-0 left-0 w-3/12 border border-x-gray-800"> <ul bind:this={autocompleteList} class="z-50 fixed top-0 left-0 w-3/12 border border-x-gray-800">
{#each foodSearch as f, i} {#each foodSearch as f, i}
<FoodSearchEntry <FoodSearchEntry itemLabel={f.food} highlighted={i == hiLiteIndex} on:click={() => setInputVal(f)} />
itemLabel={f.food}
highlighted={i == hiLiteIndex}
on:click={() => setInputVal(f)}
/>
{/each} {/each}
</ul> </ul>
{/if} {/if}