Add search to device and entity filters (#20341)
This commit is contained in:
Bram Kragten
GitHub
parent
5b86b1277f
commit
1e2c1d1464
|
|
@ -13,10 +13,11 @@ import { stringCompare } from "../common/string/compare";
|
|||
import { computeDeviceName } from "../data/device_registry";
|
||||
import { findRelated, RelatedResult } from "../data/search";
|
||||
import { haStyleScrollbar } from "../resources/styles";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-expansion-panel";
|
||||
import "./ha-check-list-item";
|
||||
import { loadVirtualizer } from "../resources/virtualizer";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-check-list-item";
|
||||
import "./ha-expansion-panel";
|
||||
import "./search-input-outlined";
|
||||
|
||||
@customElement("ha-filter-devices")
|
||||
export class HaFilterDevices extends LitElement {
|
||||
|
|
@ -32,6 +33,8 @@ export class HaFilterDevices extends LitElement {
|
|||
|
||||
@state() private _shouldRender = false;
|
||||
|
||||
@state() private _filter?: string;
|
||||
|
||||
public willUpdate(properties: PropertyValues) {
|
||||
super.willUpdate(properties);
|
||||
|
||||
|
|
@ -55,15 +58,25 @@ export class HaFilterDevices extends LitElement {
|
|||
: nothing}
|
||||
</div>
|
||||
${this._shouldRender
|
||||
? html`<mwc-list class="ha-scrollbar">
|
||||
<lit-virtualizer
|
||||
.items=${this._devices(this.hass.devices, this.value)}
|
||||
.keyFunction=${this._keyFunction}
|
||||
.renderItem=${this._renderItem}
|
||||
@click=${this._handleItemClick}
|
||||
? html`<search-input-outlined
|
||||
.hass=${this.hass}
|
||||
.filter=${this._filter}
|
||||
@value-changed=${this._handleSearchChange}
|
||||
>
|
||||
</lit-virtualizer>
|
||||
</mwc-list>`
|
||||
</search-input-outlined>
|
||||
<mwc-list class="ha-scrollbar">
|
||||
<lit-virtualizer
|
||||
.items=${this._devices(
|
||||
this.hass.devices,
|
||||
this._filter || "",
|
||||
this.value
|
||||
)}
|
||||
.keyFunction=${this._keyFunction}
|
||||
.renderItem=${this._renderItem}
|
||||
@click=${this._handleItemClick}
|
||||
>
|
||||
</lit-virtualizer>
|
||||
</mwc-list>`
|
||||
: nothing}
|
||||
</ha-expansion-panel>
|
||||
`;
|
||||
|
|
@ -72,12 +85,14 @@ export class HaFilterDevices extends LitElement {
|
|||
private _keyFunction = (device) => device?.id;
|
||||
|
||||
private _renderItem = (device) =>
|
||||
html`<ha-check-list-item
|
||||
.value=${device.id}
|
||||
.selected=${this.value?.includes(device.id)}
|
||||
>
|
||||
${computeDeviceName(device, this.hass)}
|
||||
</ha-check-list-item>`;
|
||||
!device
|
||||
? nothing
|
||||
: html`<ha-check-list-item
|
||||
.value=${device.id}
|
||||
.selected=${this.value?.includes(device.id)}
|
||||
>
|
||||
${computeDeviceName(device, this.hass)}
|
||||
</ha-check-list-item>`;
|
||||
|
||||
private _handleItemClick(ev) {
|
||||
const listItem = ev.target.closest("ha-check-list-item");
|
||||
|
|
@ -99,7 +114,7 @@ export class HaFilterDevices extends LitElement {
|
|||
setTimeout(() => {
|
||||
if (!this.expanded) return;
|
||||
this.renderRoot.querySelector("mwc-list")!.style.height =
|
||||
`${this.clientHeight - 49}px`;
|
||||
`${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
|
@ -112,16 +127,28 @@ export class HaFilterDevices extends LitElement {
|
|||
this.expanded = ev.detail.expanded;
|
||||
}
|
||||
|
||||
private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
|
||||
const values = Object.values(devices);
|
||||
return values.sort((a, b) =>
|
||||
stringCompare(
|
||||
a.name_by_user || a.name || "",
|
||||
b.name_by_user || b.name || "",
|
||||
this.hass.locale.language
|
||||
)
|
||||
);
|
||||
});
|
||||
private _handleSearchChange(ev: CustomEvent) {
|
||||
this._filter = ev.detail.value.toLowerCase();
|
||||
}
|
||||
|
||||
private _devices = memoizeOne(
|
||||
(devices: HomeAssistant["devices"], filter: string, _value) => {
|
||||
const values = Object.values(devices);
|
||||
return values
|
||||
.filter(
|
||||
(device) =>
|
||||
!filter ||
|
||||
computeDeviceName(device, this.hass).toLowerCase().includes(filter)
|
||||
)
|
||||
.sort((a, b) =>
|
||||
stringCompare(
|
||||
computeDeviceName(a, this.hass),
|
||||
computeDeviceName(b, this.hass),
|
||||
this.hass.locale.language
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
private async _findRelated() {
|
||||
const relatedPromises: Promise<RelatedResult>[] = [];
|
||||
|
|
@ -197,6 +224,10 @@ export class HaFilterDevices extends LitElement {
|
|||
ha-check-list-item {
|
||||
width: 100%;
|
||||
}
|
||||
search-input-outlined {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,11 @@ import { computeStateName } from "../common/entity/compute_state_name";
|
|||
import { stringCompare } from "../common/string/compare";
|
||||
import { findRelated, RelatedResult } from "../data/search";
|
||||
import { haStyleScrollbar } from "../resources/styles";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-state-icon";
|
||||
import "./ha-check-list-item";
|
||||
import { loadVirtualizer } from "../resources/virtualizer";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./ha-check-list-item";
|
||||
import "./ha-state-icon";
|
||||
import "./search-input-outlined";
|
||||
|
||||
@customElement("ha-filter-entities")
|
||||
export class HaFilterEntities extends LitElement {
|
||||
|
|
@ -33,6 +34,8 @@ export class HaFilterEntities extends LitElement {
|
|||
|
||||
@state() private _shouldRender = false;
|
||||
|
||||
@state() private _filter?: string;
|
||||
|
||||
public willUpdate(properties: PropertyValues) {
|
||||
super.willUpdate(properties);
|
||||
|
||||
|
|
@ -57,11 +60,18 @@ export class HaFilterEntities extends LitElement {
|
|||
</div>
|
||||
${this._shouldRender
|
||||
? html`
|
||||
<search-input-outlined
|
||||
.hass=${this.hass}
|
||||
.filter=${this._filter}
|
||||
@value-changed=${this._handleSearchChange}
|
||||
>
|
||||
</search-input-outlined>
|
||||
<mwc-list class="ha-scrollbar">
|
||||
<lit-virtualizer
|
||||
.items=${this._entities(
|
||||
this.hass.states,
|
||||
this.type,
|
||||
this._filter || "",
|
||||
this.value
|
||||
)}
|
||||
.keyFunction=${this._keyFunction}
|
||||
|
|
@ -81,7 +91,7 @@ export class HaFilterEntities extends LitElement {
|
|||
setTimeout(() => {
|
||||
if (!this.expanded) return;
|
||||
this.renderRoot.querySelector("mwc-list")!.style.height =
|
||||
`${this.clientHeight - 49}px`;
|
||||
`${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
|
@ -89,18 +99,20 @@ export class HaFilterEntities extends LitElement {
|
|||
private _keyFunction = (entity) => entity?.entity_id;
|
||||
|
||||
private _renderItem = (entity) =>
|
||||
html`<ha-check-list-item
|
||||
.value=${entity.entity_id}
|
||||
.selected=${this.value?.includes(entity.entity_id)}
|
||||
graphic="icon"
|
||||
>
|
||||
<ha-state-icon
|
||||
slot="graphic"
|
||||
.hass=${this.hass}
|
||||
.stateObj=${entity}
|
||||
></ha-state-icon>
|
||||
${computeStateName(entity)}
|
||||
</ha-check-list-item>`;
|
||||
!entity
|
||||
? nothing
|
||||
: html`<ha-check-list-item
|
||||
.value=${entity.entity_id}
|
||||
.selected=${this.value?.includes(entity.entity_id)}
|
||||
graphic="icon"
|
||||
>
|
||||
<ha-state-icon
|
||||
slot="graphic"
|
||||
.hass=${this.hass}
|
||||
.stateObj=${entity}
|
||||
></ha-state-icon>
|
||||
${computeStateName(entity)}
|
||||
</ha-check-list-item>`;
|
||||
|
||||
private _handleItemClick(ev) {
|
||||
const listItem = ev.target.closest("ha-check-list-item");
|
||||
|
|
@ -125,12 +137,27 @@ export class HaFilterEntities extends LitElement {
|
|||
this.expanded = ev.detail.expanded;
|
||||
}
|
||||
|
||||
private _handleSearchChange(ev: CustomEvent) {
|
||||
this._filter = ev.detail.value.toLowerCase();
|
||||
}
|
||||
|
||||
private _entities = memoizeOne(
|
||||
(states: HomeAssistant["states"], type: this["type"], _value) => {
|
||||
(
|
||||
states: HomeAssistant["states"],
|
||||
type: this["type"],
|
||||
filter: string,
|
||||
_value
|
||||
) => {
|
||||
const values = Object.values(states);
|
||||
return values
|
||||
.filter(
|
||||
(entityState) => !type || computeStateDomain(entityState) !== type
|
||||
(entityState) =>
|
||||
(!type || computeStateDomain(entityState) !== type) &&
|
||||
(!filter ||
|
||||
entityState.entity_id.toLowerCase().includes(filter) ||
|
||||
entityState.attributes.friendly_name
|
||||
?.toLowerCase()
|
||||
.includes(filter))
|
||||
)
|
||||
.sort((a, b) =>
|
||||
stringCompare(
|
||||
|
|
@ -216,6 +243,10 @@ export class HaFilterEntities extends LitElement {
|
|||
--mdc-list-item-graphic-margin: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
search-input-outlined {
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue