mirror of
https://github.com/ankitects/anki.git
synced 2025-09-18 22:12:21 -04:00
search on return key instead of timeout
This commit is contained in:
parent
62c981190d
commit
48a693f861
1 changed files with 18 additions and 16 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue