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

Sort related entities by name (#16821)

Browse Source
This commit is contained in:
Paul Bottein 2023-06-08 13:01:46 +02:00 committed by GitHub
parent 31e4166248
commit e3c312feaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/ha-related-items.ts
View File

@ -1,6 +1,10 @@
import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list";
import { mdiDevices, mdiPaletteSwatch, mdiSofa } from "@mdi/js"; import {
import { HassEntity } from "home-assistant-js-websocket"; mdiAlertCircleOutline,
mdiDevices,
mdiPaletteSwatch,
mdiSofa,
} from "@mdi/js";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -11,10 +15,11 @@ import {
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { caseInsensitiveStringCompare } from "../common/string/compare";
import { Blueprints, fetchBlueprints } from "../data/blueprint"; import { Blueprints, fetchBlueprints } from "../data/blueprint";
import { ConfigEntry, getConfigEntries } from "../data/config_entries"; import { ConfigEntry, getConfigEntries } from "../data/config_entries";
import { SceneEntity } from "../data/scene";
import { findRelated, ItemType, RelatedResult } from "../data/search"; import { findRelated, ItemType, RelatedResult } from "../data/search";
import { haStyle } from "../resources/styles"; import { haStyle } from "../resources/styles";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
@ -72,13 +77,55 @@ export class HaRelatedItems extends LitElement {
} }
} }
private _relatedEntities = memoizeOne((entityIds: string[]) =>
this._toEntities(entityIds)
);
private _relatedAutomations = memoizeOne((automationEntityIds: string[]) =>
this._toEntities(automationEntityIds)
);
private _relatedScripts = memoizeOne((scriptEntityIds: string[]) =>
this._toEntities(scriptEntityIds)
);
private _relatedGroups = memoizeOne((groupEntityIds: string[]) =>
this._toEntities(groupEntityIds)
);
private _relatedScenes = memoizeOne((sceneEntityIds: string[]) =>
this._toEntities(sceneEntityIds)
);
private _toEntities = (entityIds: string[]) =>
entityIds
.map((entityId) => this.hass.states[entityId])
.filter((entity) => entity)
.sort((a, b) =>
caseInsensitiveStringCompare(
a.attributes.friendly_name ?? a.entity_id,
b.attributes.friendly_name ?? b.entity_id,
this.hass.language
)
);
protected render() { protected render() {
if (!this._related) { if (!this._related) {
return nothing; return nothing;
} }
if (Object.keys(this._related).length === 0) { if (Object.keys(this._related).length === 0) {
return html` return html`
${this.hass.localize("ui.components.related-items.no_related_found")} <mwc-list>
<ha-list-item hasMeta graphic="icon" noninteractive>
<ha-svg-icon
.path=${mdiAlertCircleOutline}
slot="graphic"
></ha-svg-icon>
${this.hass.localize(
"ui.components.related-items.no_related_found"
)}
</ha-list-item>
</mwc-list>
`; `;
} }
return html` return html`
@ -92,7 +139,7 @@ export class HaRelatedItems extends LitElement {
(configEntry) => configEntry.entry_id === relatedConfigEntryId (configEntry) => configEntry.entry_id === relatedConfigEntryId
); );
if (!entry) { if (!entry) {
return ""; return nothing;
} }
return html` return html`
<a <a
@ -117,7 +164,7 @@ export class HaRelatedItems extends LitElement {
`; `;
})}</mwc-list })}</mwc-list
>` >`
: ""} : nothing}
${this._related.device ${this._related.device
? html`<h3> ? html`<h3>
${this.hass.localize("ui.components.related-items.device")} ${this.hass.localize("ui.components.related-items.device")}
@ -125,7 +172,7 @@ export class HaRelatedItems extends LitElement {
${this._related.device.map((relatedDeviceId) => { ${this._related.device.map((relatedDeviceId) => {
const device = this.hass.devices[relatedDeviceId]; const device = this.hass.devices[relatedDeviceId];
if (!device) { if (!device) {
return ""; return nothing;
} }
return html` return html`
<a <a
@ -144,7 +191,7 @@ export class HaRelatedItems extends LitElement {
`; `;
})} </mwc-list> })} </mwc-list>
` `
: ""} : nothing}
${this._related.area ${this._related.area
? html`<h3> ? html`<h3>
${this.hass.localize("ui.components.related-items.area")} ${this.hass.localize("ui.components.related-items.area")}
@ -153,7 +200,7 @@ export class HaRelatedItems extends LitElement {
>${this._related.area.map((relatedAreaId) => { >${this._related.area.map((relatedAreaId) => {
const area = this.hass.areas[relatedAreaId]; const area = this.hass.areas[relatedAreaId];
if (!area) { if (!area) {
return ""; return nothing;
} }
return html` return html`
<a <a
@ -183,21 +230,16 @@ export class HaRelatedItems extends LitElement {
`; `;
})}</mwc-list })}</mwc-list
>` >`
: ""} : nothing}
${this._related.entity ${this._related.entity
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.entity")}</h3> <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
<mwc-list> <mwc-list>
${this._related.entity.map((entityId) => { ${this._relatedEntities(this._related.entity).map(
const entity: HassEntity | undefined = (entity) => html`
this.hass.states[entityId];
if (!entity) {
return "";
}
return html`
<ha-list-item <ha-list-item
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
.entityId=${entityId} .entityId=${entity.entity_id}
hasMeta hasMeta
graphic="icon" graphic="icon"
> >
@ -208,24 +250,20 @@ export class HaRelatedItems extends LitElement {
${entity.attributes.friendly_name || entity.entity_id} ${entity.attributes.friendly_name || entity.entity_id}
<ha-icon-next slot="meta"></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item> </ha-list-item>
`; `
})} )}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.group ${this._related.group
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.group")}</h3> <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
<mwc-list> <mwc-list>
${this._related.group.map((groupId) => { ${this._relatedGroups(this._related.group).map(
const group: HassEntity | undefined = this.hass.states[groupId]; (group) => html`
if (!group) {
return "";
}
return html`
<ha-list-item <ha-list-item
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
.entityId=${groupId} .entityId=${group.entity_id}
hasMeta hasMeta
graphic="icon" graphic="icon"
> >
@ -236,25 +274,20 @@ export class HaRelatedItems extends LitElement {
${group.attributes.friendly_name || group.entity_id} ${group.attributes.friendly_name || group.entity_id}
<ha-icon-next slot="meta"></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item> </ha-list-item>
`; `
})} )}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.scene ${this._related.scene
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.scene")}</h3> <h3>${this.hass.localize("ui.components.related-items.scene")}</h3>
<mwc-list> <mwc-list>
${this._related.scene.map((sceneId) => { ${this._relatedScenes(this._related.scene).map(
const scene: SceneEntity | undefined = (scene) => html`
this.hass.states[sceneId];
if (!scene) {
return "";
}
return html`
<ha-list-item <ha-list-item
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
.entityId=${sceneId} .entityId=${scene.entity_id}
hasMeta hasMeta
graphic="icon" graphic="icon"
> >
@ -265,11 +298,11 @@ export class HaRelatedItems extends LitElement {
${scene.attributes.friendly_name || scene.entity_id} ${scene.attributes.friendly_name || scene.entity_id}
<ha-icon-next slot="meta"></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item> </ha-list-item>
`; `
})} )}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.automation_blueprint ${this._related.automation_blueprint
? html` ? html`
<h3> <h3>
@ -298,23 +331,18 @@ export class HaRelatedItems extends LitElement {
})} })}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.automation ${this._related.automation
? html` ? html`
<h3> <h3>
${this.hass.localize("ui.components.related-items.automation")} ${this.hass.localize("ui.components.related-items.automation")}
</h3> </h3>
<mwc-list> <mwc-list>
${this._related.automation.map((automationId) => { ${this._relatedAutomations(this._related.automation).map(
const automation: HassEntity | undefined = (automation) => html`
this.hass.states[automationId];
if (!automation) {
return "";
}
return html`
<ha-list-item <ha-list-item
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
.entityId=${automationId} .entityId=${automation.entity_id}
hasMeta hasMeta
graphic="icon" graphic="icon"
> >
@ -326,11 +354,11 @@ export class HaRelatedItems extends LitElement {
automation.entity_id} automation.entity_id}
<ha-icon-next slot="meta"></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item> </ha-list-item>
`; `
})} )}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.script_blueprint ${this._related.script_blueprint
? html` ? html`
<h3> <h3>
@ -359,21 +387,16 @@ export class HaRelatedItems extends LitElement {
})} })}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
${this._related.script ${this._related.script
? html` ? html`
<h3>${this.hass.localize("ui.components.related-items.script")}</h3> <h3>${this.hass.localize("ui.components.related-items.script")}</h3>
<mwc-list> <mwc-list>
${this._related.script.map((scriptId) => { ${this._relatedScripts(this._related.script).map(
const script: HassEntity | undefined = (script) => html`
this.hass.states[scriptId];
if (!script) {
return "";
}
return html`
<ha-list-item <ha-list-item
@click=${this._openMoreInfo} @click=${this._openMoreInfo}
.entityId=${scriptId} .entityId=${script.entity_id}
hasMeta hasMeta
graphic="icon" graphic="icon"
> >
@ -384,11 +407,11 @@ export class HaRelatedItems extends LitElement {
${script.attributes.friendly_name || script.entity_id} ${script.attributes.friendly_name || script.entity_id}
<ha-icon-next slot="meta"></ha-icon-next> <ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item> </ha-list-item>
`; `
})} )}
</mwc-list> </mwc-list>
` `
: ""} : nothing}
`; `;
} }