From 689d123890ae66a2b06b42b433af41d35bcf356a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 10 May 2023 14:59:24 +0200 Subject: [PATCH] Add search to add-ons page (#16459) --- hassio/src/addon-store/hassio-addon-store.ts | 16 +- hassio/src/dashboard/hassio-addons.ts | 149 +++++++++++-------- hassio/src/dashboard/hassio-dashboard.ts | 25 +++- src/layouts/hass-subpage.ts | 2 +- src/translations/en.json | 3 +- 5 files changed, 126 insertions(+), 69 deletions(-) diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index f6fdb1d6cb..a918c34820 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -70,7 +70,7 @@ export class HassioAddonStore extends LitElement { text: extractApiErrorMessage(err), }); } finally { - await this._loadData(); + this._loadData(); } } @@ -99,10 +99,10 @@ export class HassioAddonStore extends LitElement { slot="trigger" > - ${this.supervisor.localize("store.repositories")} + ${this.supervisor.localize("store.check_updates")} - ${this.supervisor.localize("store.check_updates")} + ${this.supervisor.localize("store.repositories")} ${this.hass.userData?.showAdvanced && atLeastVersion(this.hass.config.version, 0, 117) @@ -177,10 +177,10 @@ export class HassioAddonStore extends LitElement { private _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: - this._manageRepositoriesClicked(); + this.refreshData(); break; case 1: - this.refreshData(); + this._manageRepositoriesClicked(); break; case 2: this._manageRegistries(); @@ -198,18 +198,18 @@ export class HassioAddonStore extends LitElement { this._manageRepositories(); } - private async _manageRepositories(url?: string) { + private _manageRepositories(url?: string) { showRepositoriesDialog(this, { supervisor: this.supervisor, url, }); } - private async _manageRegistries() { + private _manageRegistries() { showRegistriesDialog(this, { supervisor: this.supervisor }); } - private async _loadData() { + private _loadData() { fireEvent(this, "supervisor-collection-refresh", { collection: "addon" }); fireEvent(this, "supervisor-collection-refresh", { collection: "supervisor", diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 87aaa545a3..2f1bb5ea57 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -1,10 +1,13 @@ import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { atLeastVersion } from "../../../src/common/config/version"; import { navigate } from "../../../src/common/navigate"; import { caseInsensitiveStringCompare } from "../../../src/common/string/compare"; import "../../../src/components/ha-card"; +import "../../../src/components/search-input"; +import { HassioAddonInfo } from "../../../src/data/hassio/addon"; import { Supervisor } from "../../../src/data/supervisor/supervisor"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; @@ -17,11 +20,25 @@ class HassioAddons extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; + @property({ type: Boolean }) public narrow!: boolean; + + @state() private _filter?: string; + protected render(): TemplateResult { return html` +
+ + +
${!atLeastVersion(this.hass.config.version, 2021, 12) - ? html`

${this.supervisor.localize("dashboard.addons")}

` + ? html`

${this.supervisor.localize("dashboard.addons")}

` : ""}
${!this.supervisor.addon.addons.length @@ -34,67 +51,73 @@ class HassioAddons extends LitElement {
` - : this.supervisor.addon.addons - .sort((a, b) => - caseInsensitiveStringCompare( - a.name, - b.name, - this.hass.locale.language - ) - ) - .map( - (addon) => html` - -
- -
- - ` - )} + : this._getAddons(this.supervisor.addon.addons, this._filter).map( + (addon) => html` + +
+ +
+ + ` + )}
`; } + private _getAddons = memoizeOne( + (addons: HassioAddonInfo[], filter?: string) => { + if (filter) { + addons = addons.filter((addon) => { + const lowerCaseFilter = filter.toLowerCase(); + return ( + addon.name.toLowerCase().includes(lowerCaseFilter) || + addon.description.toLowerCase().includes(lowerCaseFilter) || + addon.slug.toLowerCase().includes(lowerCaseFilter) + ); + }); + } + return addons.sort((a, b) => + caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language) + ); + } + ); + + private _handleSearchChange(ev: CustomEvent) { + this._filter = ev.detail.value; + } + static get styles(): CSSResultGroup { return [ haStyle, @@ -103,6 +126,16 @@ class HassioAddons extends LitElement { ha-card { cursor: pointer; } + .search { + position: sticky; + top: 0; + z-index: 2; + } + search-input { + display: block; + --mdc-text-field-fill-color: var(--sidebar-background-color); + --mdc-text-field-idle-line-color: var(--divider-color); + } `, ]; } diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts index f1bfb7a329..d60819861c 100644 --- a/hassio/src/dashboard/hassio-dashboard.ts +++ b/hassio/src/dashboard/hassio-dashboard.ts @@ -1,4 +1,4 @@ -import { mdiStorePlus } from "@mdi/js"; +import { mdiStorePlus, mdiUpdate } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { atLeastVersion } from "../../../src/common/config/version"; @@ -10,6 +10,10 @@ import { HomeAssistant, Route } from "../../../src/types"; import { supervisorTabs } from "../hassio-tabs"; import "./hassio-addons"; import "../../../src/layouts/hass-subpage"; +import { reloadHassioAddons } from "../../../src/data/hassio/addon"; +import { extractApiErrorMessage } from "../../../src/data/hassio/common"; +import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box"; +import { fireEvent } from "../../../src/common/dom/fire_event"; @customElement("hassio-dashboard") class HassioDashboard extends LitElement { @@ -36,9 +40,16 @@ class HassioDashboard extends LitElement { back-path="/config" .header=${this.supervisor.localize("panel.addons")} > + `} -
${this.header}
+
${this.header}
diff --git a/src/translations/en.json b/src/translations/en.json index 54ee1e55c3..a038cb3cb4 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5597,7 +5597,8 @@ "addon_running": "Add-on is running", "addon_stopped": "Add-on is stopped", "addons": "Installed add-ons", - "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!" + "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!", + "search_addons": "Search add-ons" }, "store": { "missing_addons": "Missing add-ons? Enable advanced mode in your user profile page",