search on return key instead of timeout

This commit is contained in:
Damien Elmes 2020-06-22 21:39:16 +10:00
parent 62c981190d
commit 48a693f861

View file

@ -5,8 +5,6 @@
</script> </script>
<script lang="typescript"> <script lang="typescript">
import debounce from "lodash.debounce";
import { assertUnreachable } from "../typing"; import { assertUnreachable } from "../typing";
import pb from "../backend/proto"; import pb from "../backend/proto";
import { getGraphData, GraphRange } from "./graphs"; import { getGraphData, GraphRange } from "./graphs";
@ -25,21 +23,27 @@
let days: number = 31; let days: number = 31;
let search = "deck:current"; let search = "deck:current";
let displayedSearch = search;
const refresh = async () => { const refresh = async () => {
console.log(`search is ${search}`); console.log(`search is ${search}`);
data = await getGraphData(search, days); data = await getGraphData(search, days);
}; };
$: {
// refresh if either of these change
search;
days;
refresh();
}
$: { $: {
switch (searchRange as SearchRange) { switch (searchRange as SearchRange) {
case SearchRange.Deck: case SearchRange.Deck:
search = "deck:current"; search = displayedSearch = "deck:current";
refresh();
break; break;
case SearchRange.Collection: case SearchRange.Collection:
search = ""; search = displayedSearch = "";
refresh();
break; break;
case SearchRange.Custom: case SearchRange.Custom:
break; break;
@ -47,8 +51,7 @@
} }
$: { $: {
const rangeTmp = range as GraphRange; // ts workaround switch (range as GraphRange) {
switch (rangeTmp) {
case GraphRange.Month: case GraphRange.Month:
days = 31; days = 31;
break; break;
@ -58,16 +61,15 @@
case GraphRange.All: case GraphRange.All:
days = 0; days = 0;
break; break;
default:
assertUnreachable(rangeTmp);
} }
console.log("refresh");
refresh();
} }
const scheduleRefresh = debounce(() => { const searchKeyUp = (e: KeyboardEvent) => {
refresh(); // fetch data on enter
}, 1000); if (e.keyCode == 13) {
search = displayedSearch;
}
};
</script> </script>
<div class="range-box"> <div class="range-box">
@ -84,7 +86,7 @@
Custom Custom
</label> </label>
<input type="text" bind:value={search} on:input={scheduleRefresh} /> <input type="text" bind:value={displayedSearch} on:keyup={searchKeyUp} />
</div> </div>