Device page: sort related automations, scenes, scripts (#24742)

* sort related items

* use memoize for sorted _related

* fix for "_entities" & "_getEntitiesSorted"
This commit is contained in:
ildar170975 2025-06-24 07:25:09 +03:00 committed by GitHub
parent c73122d7ee
commit a5005c0840
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -15,6 +15,7 @@ import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import type { HassEntity } from "home-assistant-js-websocket";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const"; import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const";
import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
@ -185,6 +186,27 @@ export class HaConfigDevicePage extends LitElement {
) )
); );
private _getEntitiesSorted = (entities: HassEntity[]) =>
entities.sort((ent1, ent2) =>
stringCompare(
ent1.attributes.friendly_name || `zzz${ent1.entity_id}`,
ent2.attributes.friendly_name || `zzz${ent2.entity_id}`,
this.hass.locale.language
)
);
private _getRelated = memoizeOne((related?: RelatedResult) => ({
automation: this._getEntitiesSorted(
(related?.automation ?? []).map((entityId) => this.hass.states[entityId])
),
scene: this._getEntitiesSorted(
(related?.scene ?? []).map((entityId) => this.hass.states[entityId])
),
script: this._getEntitiesSorted(
(related?.script ?? []).map((entityId) => this.hass.states[entityId])
),
}));
private _deviceIdInList = memoizeOne((deviceId: string) => [deviceId]); private _deviceIdInList = memoizeOne((deviceId: string) => [deviceId]);
private _entityIds = memoizeOne( private _entityIds = memoizeOne(
@ -433,23 +455,25 @@ export class HaConfigDevicePage extends LitElement {
${this._related?.automation?.length ${this._related?.automation?.length
? html` ? html`
<div class="items"> <div class="items">
${this._related.automation.map((automation) => { ${this._getRelated(this._related).automation.map(
const entityState = this.hass.states[automation]; (automation) => {
return entityState const entityState = automation;
? html`<a return entityState
href=${ifDefined( ? html`<a
entityState.attributes.id href=${ifDefined(
? `/config/automation/edit/${encodeURIComponent(entityState.attributes.id)}` entityState.attributes.id
: `/config/automation/show/${entityState.entity_id}` ? `/config/automation/edit/${encodeURIComponent(entityState.attributes.id)}`
)} : `/config/automation/show/${entityState.entity_id}`
> )}
<ha-list-item hasMeta .automation=${entityState}> >
${computeStateName(entityState)} <ha-list-item hasMeta .automation=${entityState}>
<ha-icon-next slot="meta"></ha-icon-next> ${computeStateName(entityState)}
</ha-list-item> <ha-icon-next slot="meta"></ha-icon-next>
</a>` </ha-list-item>
: nothing; </a>`
})} : nothing;
}
)}
</div> </div>
` `
: html` : html`
@ -510,8 +534,8 @@ export class HaConfigDevicePage extends LitElement {
${this._related?.scene?.length ${this._related?.scene?.length
? html` ? html`
<div class="items"> <div class="items">
${this._related.scene.map((scene) => { ${this._getRelated(this._related).scene.map((scene) => {
const entityState = this.hass.states[scene]; const entityState = scene;
return entityState && entityState.attributes.id return entityState && entityState.attributes.id
? html` ? html`
<a <a
@ -598,10 +622,10 @@ export class HaConfigDevicePage extends LitElement {
${this._related?.script?.length ${this._related?.script?.length
? html` ? html`
<div class="items"> <div class="items">
${this._related.script.map((script) => { ${this._getRelated(this._related).script.map((script) => {
const entityState = this.hass.states[script]; const entityState = script;
const entry = this._entityReg.find( const entry = this._entityReg.find(
(e) => e.entity_id === script (e) => e.entity_id === script.entity_id
); );
let url = `/config/script/show/${entityState.entity_id}`; let url = `/config/script/show/${entityState.entity_id}`;
if (entry) { if (entry) {