web/user: search apps when user typed before apps have loaded

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-09-23 16:34:11 +02:00
parent 64b4e851ce
commit 8f36b49061
1 changed files with 9 additions and 2 deletions

View File

@ -29,6 +29,9 @@ export class LibraryPage extends LitElement {
@property({ attribute: false })
selectedApp?: Application;
@property()
query?: string;
fuse?: Fuse<Application>;
constructor() {
@ -38,6 +41,10 @@ export class LibraryPage extends LitElement {
this.fuse = new Fuse(apps.results, {
keys: ["slug", "name"],
});
if (!this.fuse || !this.query) return;
const matchingApps = this.fuse.search(this.query);
if (matchingApps.length < 1) return;
this.selectedApp = matchingApps[0].item;
});
}
@ -116,9 +123,9 @@ export class LibraryPage extends LitElement {
${config.enabledFeatures.search
? html`<input
@input=${(ev: InputEvent) => {
const query = (ev.target as HTMLInputElement).value;
this.query = (ev.target as HTMLInputElement).value;
if (!this.fuse) return;
const apps = this.fuse.search(query);
const apps = this.fuse.search(this.query);
if (apps.length < 1) return;
this.selectedApp = apps[0].item;
}}