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

Fix clearing of filters (#20288)

Browse Source 
* Fix clearing of filters

* Update ha-filter-integrations.ts

* Update ha-filter-integrations.ts
This commit is contained in:
Bram Kragten 2024-03-30 15:32:34 +01:00 committed by GitHub
parent f3ba6e7996
commit 503a7979d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ha-filter-blueprints.ts
View File

@ -50,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
? nothing ? nothing
: html`<ha-check-list-item : html`<ha-check-list-item
.value=${id} .value=${id}
.selected=${this.value?.includes(id)} .selected=${(this.value || []).includes(id)}
> >
${blueprint.metadata.name || id} ${blueprint.metadata.name || id}
</ha-check-list-item>` </ha-check-list-item>`

7
src/components/ha-filter-devices.ts
View File

@ -57,7 +57,8 @@ export class HaFilterDevices extends LitElement {
${this._shouldRender ${this._shouldRender
? html`<mwc-list class="ha-scrollbar"> ? html`<mwc-list class="ha-scrollbar">
<lit-virtualizer <lit-virtualizer
.items=${this._devices(this.hass.devices)} .items=${this._devices(this.hass.devices, this.value)}
.keyFunction=${this._keyFunction}
.renderItem=${this._renderItem} .renderItem=${this._renderItem}
@click=${this._handleItemClick} @click=${this._handleItemClick}
> >
@ -68,6 +69,8 @@ export class HaFilterDevices extends LitElement {
`; `;
} }
private _keyFunction = (device) => device?.id;
private _renderItem = (device) => private _renderItem = (device) =>
html`<ha-check-list-item html`<ha-check-list-item
.value=${device.id} .value=${device.id}
@ -109,7 +112,7 @@ export class HaFilterDevices extends LitElement {
this.expanded = ev.detail.expanded; this.expanded = ev.detail.expanded;
} }
private _devices = memoizeOne((devices: HomeAssistant["devices"]) => { private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
const values = Object.values(devices); const values = Object.values(devices);
return values.sort((a, b) => return values.sort((a, b) =>
stringCompare( stringCompare(

11
src/components/ha-filter-entities.ts
View File

@ -59,7 +59,12 @@ export class HaFilterEntities extends LitElement {
? html` ? html`
<mwc-list class="ha-scrollbar"> <mwc-list class="ha-scrollbar">
<lit-virtualizer <lit-virtualizer
.items=${this._entities(this.hass.states, this.type)} .items=${this._entities(
this.hass.states,
this.type,
this.value
)}
.keyFunction=${this._keyFunction}
.renderItem=${this._renderItem} .renderItem=${this._renderItem}
@click=${this._handleItemClick} @click=${this._handleItemClick}
> >
@ -81,6 +86,8 @@ export class HaFilterEntities extends LitElement {
} }
} }
private _keyFunction = (entity) => entity?.entity_id;
private _renderItem = (entity) => private _renderItem = (entity) =>
html`<ha-check-list-item html`<ha-check-list-item
.value=${entity.entity_id} .value=${entity.entity_id}
@ -119,7 +126,7 @@ export class HaFilterEntities extends LitElement {
} }
private _entities = memoizeOne( private _entities = memoizeOne(
(states: HomeAssistant["states"], type: this["type"]) => { (states: HomeAssistant["states"], type: this["type"], _value) => {
const values = Object.values(states); const values = Object.values(states);
return values return values
.filter( .filter(

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

@ -1,15 +1,16 @@
import { SelectedDetail } from "@material/mwc-list"; import { SelectedDetail } from "@material/mwc-list";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare"; import { stringCompare } from "../common/string/compare";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import { import {
fetchIntegrationManifests, fetchIntegrationManifests,
IntegrationManifest, IntegrationManifest,
} from "../data/integration"; } from "../data/integration";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-domain-icon"; import "./ha-domain-icon";
@customElement("ha-filter-integrations") @customElement("ha-filter-integrations")
@ -47,11 +48,15 @@ export class HaFilterIntegrations extends LitElement {
multi multi
class="ha-scrollbar" class="ha-scrollbar"
> >
${this._integrations(this._manifests).map( ${repeat(
this._integrations(this._manifests, this.value),
(i) => i.domain,
(integration) => (integration) =>
html`<ha-check-list-item html`<ha-check-list-item
.value=${integration.domain} .value=${integration.domain}
.selected=${this.value?.includes(integration.domain)} .selected=${(this.value || []).includes(
integration.domain
)}
graphic="icon" graphic="icon"
> >
<ha-domain-icon <ha-domain-icon
@ -92,26 +97,27 @@ export class HaFilterIntegrations extends LitElement {
this._manifests = await fetchIntegrationManifests(this.hass); this._manifests = await fetchIntegrationManifests(this.hass);
} }
private _integrations = memoizeOne((manifest: IntegrationManifest[]) => private _integrations = memoizeOne(
manifest (manifest: IntegrationManifest[], _value) =>
.filter( manifest
(mnfst) => .filter(
!mnfst.integration_type || (mnfst) =>
!["entity", "system", "hardware"].includes(mnfst.integration_type) !mnfst.integration_type ||
) !["entity", "system", "hardware"].includes(mnfst.integration_type)
.sort((a, b) => )
stringCompare( .sort((a, b) =>
a.name || a.domain, stringCompare(
b.name || b.domain, a.name || a.domain,
this.hass.locale.language b.name || b.domain,
this.hass.locale.language
)
) )
)
); );
private async _integrationsSelected( private async _integrationsSelected(
ev: CustomEvent<SelectedDetail<Set<number>>> ev: CustomEvent<SelectedDetail<Set<number>>>
) { ) {
const integrations = this._integrations(this._manifests!); const integrations = this._integrations(this._manifests!, this.value);
if (!ev.detail.index.size) { if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", { fireEvent(this, "data-table-filter-changed", {

49
src/components/ha-filter-labels.ts
View File

@ -1,9 +1,10 @@
import { SelectedDetail } from "@material/mwc-list"; import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface"; import "@material/mwc-menu/mwc-menu-surface";
import { mdiPlus } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { mdiPlus } from "@mdi/js"; import { repeat } from "lit/directives/repeat";
import { computeCssColor } from "../common/color/compute-color"; import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { import {
@ -12,13 +13,13 @@ import {
subscribeLabelRegistry, subscribeLabelRegistry,
} from "../data/label_registry"; } from "../data/label_registry";
import { SubscribeMixin } from "../mixins/subscribe-mixin"; import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
import { haStyleScrollbar } from "../resources/styles"; import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "./ha-check-list-item"; import "./ha-check-list-item";
import "./ha-expansion-panel"; import "./ha-expansion-panel";
import "./ha-icon"; import "./ha-icon";
import "./ha-label"; import "./ha-label";
import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
@customElement("ha-filter-labels") @customElement("ha-filter-labels")
export class HaFilterLabels extends SubscribeMixin(LitElement) { export class HaFilterLabels extends SubscribeMixin(LitElement) {
@ -63,26 +64,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
class="ha-scrollbar" class="ha-scrollbar"
multi multi
> >
${this._labels.map((label) => { ${repeat(
const color = label.color this._labels,
? computeCssColor(label.color) (label) => label.label_id,
: undefined; (label) => {
return html`<ha-check-list-item const color = label.color
.value=${label.label_id} ? computeCssColor(label.color)
.selected=${this.value?.includes(label.label_id)} : undefined;
hasMeta return html`<ha-check-list-item
> .value=${label.label_id}
<ha-label style=${color ? `--color: ${color}` : ""}> .selected=${(this.value || []).includes(label.label_id)}
${label.icon hasMeta
? html`<ha-icon >
slot="icon" <ha-label style=${color ? `--color: ${color}` : ""}>
.icon=${label.icon} ${label.icon
></ha-icon>` ? html`<ha-icon
: nothing} slot="icon"
${label.name} .icon=${label.icon}
</ha-label> ></ha-icon>`
</ha-check-list-item>`; : nothing}
})} ${label.name}
</ha-label>
</ha-check-list-item>`;
}
)}
</mwc-list> </mwc-list>
` `
: nothing} : nothing}