diff --git a/src/panels/hacs-experimental-panel.ts b/src/panels/hacs-experimental-panel.ts index e84c5d8a..7f883238 100644 --- a/src/panels/hacs-experimental-panel.ts +++ b/src/panels/hacs-experimental-panel.ts @@ -14,17 +14,19 @@ import { import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import memoize from "memoize-one"; import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time"; import { LocalStorage } from "../../homeassistant-frontend/src/common/decorators/local-storage"; import { mainWindow } from "../../homeassistant-frontend/src/common/dom/get_main_window"; +import { stopPropagation } from "../../homeassistant-frontend/src/common/dom/stop_propagation"; import { navigate } from "../../homeassistant-frontend/src/common/navigate"; import type { DataTableColumnContainer } from "../../homeassistant-frontend/src/components/data-table/ha-data-table"; import "../../homeassistant-frontend/src/components/ha-button-menu"; import "../../homeassistant-frontend/src/components/ha-check-list-item"; import "../../homeassistant-frontend/src/components/ha-fab"; +import "../../homeassistant-frontend/src/components/ha-select"; import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu"; import "../../homeassistant-frontend/src/components/ha-menu-button"; import "../../homeassistant-frontend/src/components/ha-svg-icon"; @@ -83,7 +85,8 @@ export class HacsExperimentalPanel extends LitElement { @property({ attribute: false }) public section!: "entry" | "explore"; - @state() activeFilters?: string[]; + @LocalStorage("hacs-table-filters", true, false) + private activeFilters?: string[]; @LocalStorage("hacs-table-columns", true, false) private _tableColumns: TableColumnsOptions = tableColumnDefaults; @@ -183,55 +186,55 @@ export class HacsExperimentalPanel extends LitElement { ].filter((item) => item !== undefined) as IconOverflowMenuItem[]} > + ${!this.narrow + ? html` + + - - - - ${!this.narrow ? html`` : " "} - ${this.narrow && this.activeFilters?.length - ? html` - ${this.hass.localize("ui.components.data-table.filtering_by")} - ${this.activeFilters.join(", ")} Clear - ` - : ""} - ${this.hacs.info.categories.map( - (category) => html` - + filter.startsWith(`${this.hacs.localize(`dialog_custom_repositories.category`)}: `) + ) || ""} > - ${this.hacs.localize(`common.${category}`)} - - ` - )} - ${!this.narrow - ? html` -
- - ${Object.keys(tableColumnDefaults[this.section]).map( - (entry) => html` - - ${this.hacs.localize(`column.${entry}`)} - - ` + ${this.hacs.info.categories.map( + (category) => + html` + + ${this.hacs.localize(`common.${category}`)} + + ` )} - ` - : " "} -
- + +
+ + ${Object.keys(tableColumnDefaults[this.section]).map( + (entry) => html` + + ${this.hacs.localize(`column.${entry}`)} + + ` + )} +
` + : " "} ${this.section === "entry" ? html` @@ -251,7 +254,14 @@ export class HacsExperimentalPanel extends LitElement { ): RepositoryBase[] => repositories .filter((reposiotry) => { - if (activeFilters?.includes(`Hide ${reposiotry.category}`)) { + if ( + activeFilters && + !activeFilters.includes( + `${this.hacs.localize(`dialog_custom_repositories.category`)}: ${this.hacs.localize( + `common.${reposiotry.category}` + )}` + ) + ) { return false; } return (!downloaded && !reposiotry.installed) || (downloaded && reposiotry.installed); @@ -355,7 +365,7 @@ export class HacsExperimentalPanel extends LitElement { html` @@ -370,12 +380,10 @@ export class HacsExperimentalPanel extends LitElement { private _handleCategoryFilterChange(ev: CustomEvent) { ev.stopPropagation(); - const category = `Hide ${(ev.target as any).category}`; - if (ev.detail.selected) { - this.activeFilters = Array.from(new Set([...(this.activeFilters || []), category])); - return; + const categoryFilter = (ev.target as any).value; + if (categoryFilter) { + this.activeFilters = [categoryFilter]; } - this.activeFilters = this.activeFilters?.filter((item) => item !== category); } private _handleColumnChange(ev: CustomEvent) { @@ -420,6 +428,9 @@ export class HacsExperimentalPanel extends LitElement { height: 1px; background-color: var(--divider-color); } + ha-select { + margin: 0 8px; + } `, ]; }