jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-06-22 18:16:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add aliases dialog to entity registry settings (#14860)

Browse Source
This commit is contained in:
Paul Bottein 2022-12-27 21:36:08 +01:00 committed by GitHub
parent 5eb45209e8
commit 2575d35f2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 301 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/ha-demo.ts
View File

@ -71,6 +71,7 @@ class HaDemo extends HomeAssistantAppEl {
entity_category: null,
has_entity_name: false,
unique_id: "co2_intensity",
aliases: [],
},
{
config_entry_id: "co2signal",
@ -86,6 +87,7 @@ class HaDemo extends HomeAssistantAppEl {
entity_category: null,
has_entity_name: false,
unique_id: "grid_fossil_fuel_percentage",
aliases: [],
},
]);

1
gallery/src/pages/misc/integration-card.ts
View File

@ -197,6 +197,7 @@ const createEntityRegistryEntries = (
platform: "updater",
has_entity_name: false,
unique_id: "updater",
aliases: [],
},
];

2
src/data/entity_registry.ts
View File

@ -22,6 +22,7 @@ export interface EntityRegistryEntry {
original_name?: string;
unique_id: string;
translation_key?: string;
aliases: string[];
}
export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
@ -63,6 +64,7 @@ export interface EntityRegistryEntryUpdateParams {
new_entity_id?: string;
options_domain?: string;
options?: SensorEntityOptions | NumberEntityOptions | WeatherEntityOptions;
aliases?: string[];
}
export const findBatteryEntity = (

200
src/panels/config/entities/entity-aliases/dialog-entity-aliases.ts Normal file
View File

@ -0,0 +1,200 @@
import "@material/mwc-button/mwc-button";
import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { EntityAliasesDialogParams } from "./show-dialog-entity-aliases";
@customElement("dialog-entity-aliases")
class DialogEntityAliases extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _error?: string;
@state() private _params?: EntityAliasesDialogParams;
@state() private _aliases!: string[];
@state() private _submitting = false;
public async showDialog(params: EntityAliasesDialogParams): Promise<void> {
this._params = params;
this._error = undefined;
this._aliases =
this._params.entity.aliases?.length > 0
? this._params.entity.aliases
: [""];
await this.updateComplete;
}
public closeDialog(): void {
this._error = "";
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._params) {
return html``;
}
const entityId = this._params.entity.entity_id;
const stateObj = entityId ? this.hass.states[entityId] : undefined;
const name = (stateObj && computeStateName(stateObj)) || entityId;
return html`
<ha-dialog
open
@closed=${this.closeDialog}
.heading=${this.hass.localize(
"ui.dialogs.entity_registry.editor.aliases.heading",
{ name }
)}
>
<div>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
: ""}
<div class="form">
${this._aliases.map(
(alias, index) => html`
<div class="layout horizontal center-center row">
<ha-textfield
dialogInitialFocus=${index}
.index=${index}
class="flex-auto"
label="Alias"
.value=${alias}
?data-last=${index === this._aliases.length - 1}
@change=${this._editAlias}
></ha-textfield>
<ha-icon-button
.index=${index}
slot="navigationIcon"
label=${this.hass!.localize(
"ui.dialogs.entity_registry.editor.aliases.remove_alias"
)}
@click=${this._removeAlias}
.path=${mdiDeleteOutline}
></ha-icon-button>
</div>
`
)}
<div class="layout horizontal center-center">
<mwc-button @click=${this._addAlias}>
${this.hass!.localize(
"ui.dialogs.entity_registry.editor.aliases.add_alias"
)}
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</mwc-button>
</div>
</div>
</div>
<mwc-button
slot="secondaryAction"
@click=${this.closeDialog}
.disabled=${this._submitting}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${this._submitting}
>
${this.hass.localize(
"ui.dialogs.entity_registry.editor.aliases.save"
)}
</mwc-button>
</ha-dialog>
`;
}
private async _addAlias() {
this._aliases = [...this._aliases, ""];
await this.updateComplete;
const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
| HaTextField
| undefined;
field?.focus();
}
private async _editAlias(ev: Event) {
const index = (ev.target as any).index;
this._aliases[index] = (ev.target as any).value;
}
private async _removeAlias(ev: Event) {
const index = (ev.target as any).index;
const aliases = [...this._aliases];
aliases.splice(index, 1);
this._aliases = aliases;
}
private async _updateEntry(): Promise<void> {
this._submitting = true;
const noEmptyAliases = this._aliases
.map((alias) => alias.trim())
.filter((alias) => alias);
try {
await this._params!.updateEntry({
aliases: noEmptyAliases,
});
this.closeDialog();
} catch (err: any) {
this._error =
err.message ||
this.hass.localize(
"ui.dialogs.entity_registry.editor.aliases.unknown_error"
);
} finally {
this._submitting = false;
}
}
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,
css`
.row {
margin-bottom: 8px;
}
ha-textfield {
display: block;
}
ha-icon-button {
display: block;
}
mwc-button {
margin-left: 8px;
}
#alias_input {
margin-top: 8px;
}
.alias {
border: 1px solid var(--divider-color);
border-radius: 4px;
margin-top: 4px;
--mdc-icon-button-size: 24px;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-entity-aliases": DialogEntityAliases;
}
}

25
src/panels/config/entities/entity-aliases/show-dialog-entity-aliases.ts Normal file
View File

@ -0,0 +1,25 @@
import { fireEvent } from "../../../../common/dom/fire_event";
import {
EntityRegistryEntry,
EntityRegistryEntryUpdateParams,
} from "../../../../data/entity_registry";
export interface EntityAliasesDialogParams {
entity: EntityRegistryEntry;
updateEntry: (
updates: Partial<EntityRegistryEntryUpdateParams>
) => Promise<unknown>;
}
export const loadEntityAliasesDialog = () => import("./dialog-entity-aliases");
export const showEntityAliasesDialog = (
element: HTMLElement,
entityAliasesParams: EntityAliasesDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-entity-aliases",
dialogImport: loadEntityAliasesDialog,
dialogParams: entityAliasesParams,
});
};

60
src/panels/config/entities/entity-registry-settings.ts
View File

@ -1,6 +1,7 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-formfield/mwc-formfield";
import "@material/mwc-list/mwc-list-item";
import { mdiPencil } from "@mdi/js";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -26,6 +27,7 @@ import {
import "../../../components/ha-alert";
import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon";
import "../../../components/ha-icon-picker";
import "../../../components/ha-radio";
import "../../../components/ha-select";
@ -75,6 +77,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
import { showEntityAliasesDialog } from "./entity-aliases/show-dialog-entity-aliases";
const OVERRIDE_DEVICE_CLASSES = {
cover: [
@ -673,7 +676,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
<div class="label">
${this.hass.localize(
"ui.dialogs.entity_registry.editor.entity_status"
)}:
)}
</div>
<div class="secondary">
${this._disabledBy &&
@ -760,12 +763,43 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
</div>
`
: ""}
<div class="label">
${this.hass.localize(
"ui.dialogs.entity_registry.editor.aliases_section"
)}
</div>
<mwc-list class="aliases">
<mwc-list-item
.twoline=${this.entry.aliases.length > 0}
hasMeta
@click=${this._openAliasesSettings}
>
<span>
${this.entry.aliases.length > 0
? this.hass.localize(
"ui.dialogs.entity_registry.editor.configured_aliases",
{ count: this.entry.aliases.length }
)
: this.hass.localize(
"ui.dialogs.entity_registry.editor.no_aliases"
)}
</span>
<span slot="secondary">${this.entry.aliases.join(", ")}</span>
<ha-svg-icon slot="meta" .path=${mdiPencil}></ha-svg-icon>
</mwc-list-item>
</mwc-list>
<div class="secondary">
${this.hass.localize(
"ui.dialogs.entity_registry.editor.aliases.description"
)}
</div>
${this.entry.device_id
? html`
<div class="label">
${this.hass.localize(
"ui.dialogs.entity_registry.editor.change_area"
)}:
)}
</div>
<ha-area-picker
.hass=${this.hass}
@ -943,6 +977,20 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
});
}
private _openAliasesSettings() {
showEntityAliasesDialog(this, {
entity: this.entry!,
updateEntry: async (updates) => {
const result = await updateEntityRegistryEntry(
this.hass,
this.entry.entity_id,
updates
);
fireEvent(this, "entity-entry-updated", result.entity_entry);
},
});
}
private async _enableEntry() {
this._error = undefined;
this._submitting = true;
@ -1212,7 +1260,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
}
.secondary {
margin: 8px 0;
width: 340px;
}
li[divider] {
border-bottom-color: var(--divider-color);
@ -1220,6 +1267,13 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
ha-alert mwc-button {
width: max-content;
}
.aliases {
border-radius: 4px;
margin-top: 4px;
margin-bottom: 4px;
--mdc-icon-button-size: 24px;
overflow: hidden;
}
`,
];
}

1
src/panels/config/entities/ha-config-entities.ts
View File

@ -728,6 +728,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
selectable: false,
entity_category: null,
has_entity_name: false,
aliases: [],
});
}
if (changed) {

13
src/translations/en.json
View File

@ -961,6 +961,19 @@
"stream_orientation_6": "Rotate left",
"stream_orientation_7": "Rotate right and flip",
"stream_orientation_8": "Rotate right"
},
"aliases_section": "Aliases",
"no_aliases": "No configured aliases",
"configured_aliases": "{count} configured {count, plural,\n one {alias}\n other {aliases}\n}",
"aliases": {
"heading": "{name} aliases",
"description": "Aliases are alternative names used in voice assistants to refer to this entity.",
"remove_alias": "Remove alias",
"save": "Save",
"add_alias": "Add alias",
"no_aliases": "No aliases have been added yet",
"update": "Update",
"unknown_error": "Unknown error"
}
}
},