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