jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add search to integration filter (#20367)

Browse Source
This commit is contained in:
Bram Kragten 2024-04-03 12:03:35 +02:00 committed by GitHub
parent 82a3b9d80f
commit 5315545a4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ha-filter-integrations.ts
View File

@ -13,6 +13,7 @@ import {
import { haStyleScrollbar } from "../resources/styles"; import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-domain-icon"; import "./ha-domain-icon";
import "./search-input-outlined";
@customElement("ha-filter-integrations") @customElement("ha-filter-integrations")
export class HaFilterIntegrations extends LitElement { export class HaFilterIntegrations extends LitElement {
@ -28,6 +29,8 @@ export class HaFilterIntegrations extends LitElement {
@state() private _shouldRender = false; @state() private _shouldRender = false;
@state() private _filter?: string;
protected render() { protected render() {
return html` return html`
<ha-expansion-panel <ha-expansion-panel
@ -47,14 +50,19 @@ export class HaFilterIntegrations extends LitElement {
: nothing} : nothing}
</div> </div>
${this._manifests && this._shouldRender ${this._manifests && this._shouldRender
? html` ? html`<search-input-outlined
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
>
</search-input-outlined>
<mwc-list <mwc-list
@selected=${this._integrationsSelected} @selected=${this._integrationsSelected}
multi multi
class="ha-scrollbar" class="ha-scrollbar"
> >
${repeat( ${repeat(
this._integrations(this._manifests, this.value), this._integrations(this._manifests, this._filter, this.value),
(i) => i.domain, (i) => i.domain,
(integration) => (integration) =>
html`<ha-check-list-item html`<ha-check-list-item
@ -73,8 +81,7 @@ export class HaFilterIntegrations extends LitElement {
${integration.name || integration.domain} ${integration.name || integration.domain}
</ha-check-list-item>` </ha-check-list-item>`
)} )}
</mwc-list> </mwc-list> `
`
: nothing} : nothing}
</ha-expansion-panel> </ha-expansion-panel>
`; `;
@ -103,12 +110,17 @@ export class HaFilterIntegrations extends LitElement {
} }
private _integrations = memoizeOne( private _integrations = memoizeOne(
(manifest: IntegrationManifest[], _value) => (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
manifest manifest
.filter( .filter(
(mnfst) => (mnfst) =>
!mnfst.integration_type || (!mnfst.integration_type ||
!["entity", "system", "hardware"].includes(mnfst.integration_type) !["entity", "system", "hardware"].includes(
mnfst.integration_type
)) &&
(!filter ||
mnfst.name.toLowerCase().includes(filter) ||
mnfst.domain.toLowerCase().includes(filter))
) )
.sort((a, b) => .sort((a, b) =>
stringCompare( stringCompare(
@ -122,7 +134,11 @@ export class HaFilterIntegrations extends LitElement {
private async _integrationsSelected( private async _integrationsSelected(
ev: CustomEvent<SelectedDetail<Set<number>>> ev: CustomEvent<SelectedDetail<Set<number>>>
) { ) {
const integrations = this._integrations(this._manifests!, this.value); const integrations = this._integrations(
this._manifests!,
this._filter,
this.value
);
if (!ev.detail.index.size) { if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", { 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 { static get styles(): CSSResultGroup {
return [ return [
haStyleScrollbar, haStyleScrollbar,
@ -195,6 +215,10 @@ export class HaFilterIntegrations extends LitElement {
padding: 0px 2px; padding: 0px 2px;
color: var(--text-primary-color); color: var(--text-primary-color);
} }
search-input-outlined {
display: block;
padding: 0 8px;
}
`, `,
]; ];
} }