diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index 2f8b6f3cf0..cab9726f44 100644 --- a/src/components/ha-filter-integrations.ts +++ b/src/components/ha-filter-integrations.ts @@ -13,6 +13,7 @@ import { import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-domain-icon"; +import "./search-input-outlined"; @customElement("ha-filter-integrations") export class HaFilterIntegrations extends LitElement { @@ -28,6 +29,8 @@ export class HaFilterIntegrations extends LitElement { @state() private _shouldRender = false; + @state() private _filter?: string; + protected render() { return html` ${this._manifests && this._shouldRender - ? html` + ? html` + ${repeat( - this._integrations(this._manifests, this.value), + this._integrations(this._manifests, this._filter, this.value), (i) => i.domain, (integration) => html`` )} - - ` + ` : nothing} `; @@ -103,12 +110,17 @@ export class HaFilterIntegrations extends LitElement { } private _integrations = memoizeOne( - (manifest: IntegrationManifest[], _value) => + (manifest: IntegrationManifest[], filter: string | undefined, _value) => manifest .filter( (mnfst) => - !mnfst.integration_type || - !["entity", "system", "hardware"].includes(mnfst.integration_type) + (!mnfst.integration_type || + !["entity", "system", "hardware"].includes( + mnfst.integration_type + )) && + (!filter || + mnfst.name.toLowerCase().includes(filter) || + mnfst.domain.toLowerCase().includes(filter)) ) .sort((a, b) => stringCompare( @@ -122,7 +134,11 @@ export class HaFilterIntegrations extends LitElement { private async _integrationsSelected( ev: CustomEvent>> ) { - const integrations = this._integrations(this._manifests!, this.value); + const integrations = this._integrations( + this._manifests!, + this._filter, + this.value + ); if (!ev.detail.index.size) { fireEvent(this, "data-table-filter-changed", { @@ -156,6 +172,10 @@ export class HaFilterIntegrations extends LitElement { }); } + private _handleSearchChange(ev: CustomEvent) { + this._filter = ev.detail.value.toLowerCase(); + } + static get styles(): CSSResultGroup { return [ haStyleScrollbar, @@ -195,6 +215,10 @@ export class HaFilterIntegrations extends LitElement { padding: 0px 2px; color: var(--text-primary-color); } + search-input-outlined { + display: block; + padding: 0 8px; + } `, ]; }