mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 19:26:36 +00:00
Migrate entity settings dialog (#6349)
This commit is contained in:
Bram Kragten
GitHub
parent
efa2b2db27
commit
c9ec4b4e24
@ -1,8 +1,9 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||
import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const";
|
||||
import { computeStateName } from "../../common/entity/compute_state_name";
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "@polymer/paper-tabs/paper-tab";
|
||||
import "@polymer/paper-tabs/paper-tabs";
|
||||
import "@material/mwc-icon-button";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -11,27 +10,26 @@ import {
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
query,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { cache } from "lit-html/directives/cache";
|
||||
import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import "../../../components/dialog/ha-paper-dialog";
|
||||
import type { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
|
||||
import "../../../components/ha-dialog";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-related-items";
|
||||
import {
|
||||
EntityRegistryEntry,
|
||||
ExtEntityRegistryEntry,
|
||||
getExtendedEntityRegistryEntry,
|
||||
} from "../../../data/entity_registry";
|
||||
import type { PolymerChangedEvent } from "../../../polymer-types";
|
||||
import { haStyleDialog } from "../../../resources/styles";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { PLATFORMS_WITH_SETTINGS_TAB } from "./const";
|
||||
import "./entity-registry-settings";
|
||||
import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor";
|
||||
import { mdiClose, mdiTune } from "@mdi/js";
|
||||
|
||||
interface Tabs {
|
||||
[key: string]: Tab;
|
||||
@ -59,8 +57,6 @@ export class DialogEntityEditor extends LitElement {
|
||||
|
||||
@property() private _settingsElementTag?: string;
|
||||
|
||||
@query("ha-paper-dialog") private _dialog!: HaPaperDialog;
|
||||
|
||||
private _curTabIndex = 0;
|
||||
|
||||
public async showDialog(
|
||||
@ -87,91 +83,97 @@ export class DialogEntityEditor extends LitElement {
|
||||
const stateObj: HassEntity | undefined = this.hass.states[entityId];
|
||||
|
||||
return html`
|
||||
<ha-paper-dialog
|
||||
with-backdrop
|
||||
opened
|
||||
@opened-changed=${this._openedChanged}
|
||||
<ha-dialog
|
||||
open
|
||||
.heading=${true}
|
||||
hideActions
|
||||
@closed=${this.closeDialog}
|
||||
@close-dialog=${this.closeDialog}
|
||||
>
|
||||
<app-toolbar>
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.dismiss"
|
||||
)}
|
||||
icon="hass:close"
|
||||
dialog-dismiss
|
||||
></ha-icon-button>
|
||||
<div class="main-title" main-title>
|
||||
${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
|
||||
</div>
|
||||
${stateObj
|
||||
? html`
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.control"
|
||||
)}
|
||||
icon="hass:tune"
|
||||
@click=${this._openMoreInfo}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
<paper-tabs
|
||||
scrollable
|
||||
hide-scroll-buttons
|
||||
.selected=${this._curTabIndex}
|
||||
@selected-item-changed=${this._handleTabSelected}
|
||||
>
|
||||
<paper-tab id="tab-settings">
|
||||
${this.hass.localize("ui.dialogs.entity_registry.settings")}
|
||||
</paper-tab>
|
||||
${Object.entries(this._extraTabs).map(
|
||||
([key, tab]) => html`
|
||||
<paper-tab id=${key}>
|
||||
${this.hass.localize(tab.translationKey) || key}
|
||||
</paper-tab>
|
||||
`
|
||||
)}
|
||||
<paper-tab id="tab-related">
|
||||
${this.hass.localize("ui.dialogs.entity_registry.related")}
|
||||
</paper-tab>
|
||||
</paper-tabs>
|
||||
${cache(
|
||||
this._curTab === "tab-settings"
|
||||
? entry
|
||||
? this._settingsElementTag
|
||||
? html`
|
||||
${dynamicElement(this._settingsElementTag, {
|
||||
hass: this.hass,
|
||||
entry,
|
||||
entityId,
|
||||
dialogElement: this._dialog,
|
||||
})}
|
||||
`
|
||||
: ""
|
||||
: html`
|
||||
<paper-dialog-scrollable>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.no_unique_id"
|
||||
<div slot="heading">
|
||||
<app-toolbar>
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
|
||||
dialogAction="cancel"
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<div class="main-title" main-title>
|
||||
${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
|
||||
</div>
|
||||
${stateObj
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.control"
|
||||
)}
|
||||
</paper-dialog-scrollable>
|
||||
@click=${this._openMoreInfo}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiTune}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: this._curTab === "tab-related"
|
||||
? html`
|
||||
<paper-dialog-scrollable>
|
||||
<ha-related-items
|
||||
.hass=${this.hass}
|
||||
.itemId=${entityId}
|
||||
itemType="entity"
|
||||
></ha-related-items>
|
||||
</paper-dialog-scrollable>
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
<paper-tabs
|
||||
.selected=${this._curTabIndex}
|
||||
@selected-item-changed=${this._handleTabSelected}
|
||||
>
|
||||
<paper-tab id="tab-settings">
|
||||
${this.hass.localize("ui.dialogs.entity_registry.settings")}
|
||||
</paper-tab>
|
||||
${Object.entries(this._extraTabs).map(
|
||||
([key, tab]) => html`
|
||||
<paper-tab id=${key}>
|
||||
${this.hass.localize(tab.translationKey) || key}
|
||||
</paper-tab>
|
||||
`
|
||||
: html``
|
||||
)}
|
||||
</ha-paper-dialog>
|
||||
)}
|
||||
<paper-tab id="tab-related">
|
||||
${this.hass.localize("ui.dialogs.entity_registry.related")}
|
||||
</paper-tab>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
${cache(this._renderTab())}
|
||||
</div>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderTab() {
|
||||
switch (this._curTab) {
|
||||
case "tab-settings":
|
||||
if (this._entry) {
|
||||
if (this._settingsElementTag) {
|
||||
return html`
|
||||
${dynamicElement(this._settingsElementTag, {
|
||||
hass: this.hass,
|
||||
entry: this._entry,
|
||||
entityId: this._params!.entity_id,
|
||||
})}
|
||||
`;
|
||||
}
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<div class="content">
|
||||
${this.hass.localize("ui.dialogs.entity_registry.no_unique_id")}
|
||||
</div>
|
||||
`;
|
||||
case "tab-related":
|
||||
return html`
|
||||
<ha-related-items
|
||||
class="content"
|
||||
.hass=${this.hass}
|
||||
.itemId=${this._params!.entity_id}
|
||||
itemType="entity"
|
||||
></ha-related-items>
|
||||
`;
|
||||
default:
|
||||
return html``;
|
||||
}
|
||||
}
|
||||
|
||||
private async _getEntityReg() {
|
||||
try {
|
||||
this._entry = await getExtendedEntityRegistryEntry(
|
||||
@ -189,12 +191,6 @@ export class DialogEntityEditor extends LitElement {
|
||||
return;
|
||||
}
|
||||
this._curTab = ev.detail.value.id;
|
||||
this._resizeDialog();
|
||||
}
|
||||
|
||||
private async _resizeDialog(): Promise<void> {
|
||||
await this.updateComplete;
|
||||
fireEvent(this._dialog as HTMLElement, "iron-resize");
|
||||
}
|
||||
|
||||
private async _loadPlatformSettingTabs(): Promise<void> {
|
||||
@ -219,12 +215,6 @@ export class DialogEntityEditor extends LitElement {
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
|
||||
if (!(ev.detail as any).value) {
|
||||
this._params = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyleDialog,
|
||||
@ -249,16 +239,23 @@ export class DialogEntityEditor extends LitElement {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
ha-dialog {
|
||||
--dialog-content-padding: 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 451px) and (min-height: 501px) {
|
||||
.main-title {
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
}
|
||||
.wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
ha-paper-dialog {
|
||||
width: 450px;
|
||||
max-height: none !important;
|
||||
.content {
|
||||
display: block;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
/* overrule the ha-style-dialog max-height on small screens */
|
||||
@ -267,28 +264,6 @@ export class DialogEntityEditor extends LitElement {
|
||||
background-color: var(--app-header-background-color);
|
||||
color: var(--app-header-text-color, white);
|
||||
}
|
||||
ha-paper-dialog {
|
||||
height: 100%;
|
||||
max-height: 100% !important;
|
||||
width: 100% !important;
|
||||
border-radius: 0px;
|
||||
position: fixed !important;
|
||||
margin: 0;
|
||||
}
|
||||
ha-paper-dialog::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
paper-dialog-scrollable {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
mwc-button.warning {
|
||||
|
||||
@ -12,7 +12,6 @@ import {
|
||||
import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
|
||||
import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
|
||||
import { fireEvent } from "../../../../../common/dom/fire_event";
|
||||
import { HaPaperDialog } from "../../../../../components/dialog/ha-paper-dialog";
|
||||
import {
|
||||
ExtEntityRegistryEntry,
|
||||
removeEntityRegistryEntry,
|
||||
@ -87,8 +86,6 @@ export class EntityRegistrySettingsHelper extends LitElement {
|
||||
|
||||
@property() public entry!: ExtEntityRegistryEntry;
|
||||
|
||||
@property() public dialogElement!: HaPaperDialog;
|
||||
|
||||
@property() private _error?: string;
|
||||
|
||||
@property() private _item?: Helper | null;
|
||||
@ -120,32 +117,30 @@ export class EntityRegistrySettingsHelper extends LitElement {
|
||||
}
|
||||
const stateObj = this.hass.states[this.entry.entity_id];
|
||||
return html`
|
||||
<paper-dialog-scrollable .dialogElement=${this.dialogElement}>
|
||||
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
|
||||
<div class="form">
|
||||
${!this._componentLoaded
|
||||
? this.hass.localize(
|
||||
"ui.dialogs.helper_settings.platform_not_loaded",
|
||||
"platform",
|
||||
this.entry.platform
|
||||
)
|
||||
: this._item === null
|
||||
? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
|
||||
: html`
|
||||
<div @value-changed=${this._valueChanged}>
|
||||
${dynamicElement(`ha-${this.entry.platform}-form`, {
|
||||
hass: this.hass,
|
||||
item: this._item,
|
||||
entry: this.entry,
|
||||
})}
|
||||
</div>
|
||||
`}
|
||||
<ha-registry-basic-editor
|
||||
.hass=${this.hass}
|
||||
.entry=${this.entry}
|
||||
></ha-registry-basic-editor>
|
||||
</div>
|
||||
</paper-dialog-scrollable>
|
||||
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
|
||||
<div class="form">
|
||||
${!this._componentLoaded
|
||||
? this.hass.localize(
|
||||
"ui.dialogs.helper_settings.platform_not_loaded",
|
||||
"platform",
|
||||
this.entry.platform
|
||||
)
|
||||
: this._item === null
|
||||
? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable")
|
||||
: html`
|
||||
<span @value-changed=${this._valueChanged}>
|
||||
${dynamicElement(`ha-${this.entry.platform}-form`, {
|
||||
hass: this.hass,
|
||||
item: this._item,
|
||||
entry: this.entry,
|
||||
})}
|
||||
</span>
|
||||
`}
|
||||
<ha-registry-basic-editor
|
||||
.hass=${this.hass}
|
||||
.entry=${this.entry}
|
||||
></ha-registry-basic-editor>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<mwc-button
|
||||
class="warning"
|
||||
@ -173,8 +168,6 @@ export class EntityRegistrySettingsHelper extends LitElement {
|
||||
private async _getItem() {
|
||||
const items = await HELPERS[this.entry.platform].fetch(this.hass!);
|
||||
this._item = items.find((item) => item.id === this.entry.unique_id) || null;
|
||||
await this.updateComplete;
|
||||
fireEvent(this.dialogElement as HTMLElement, "iron-resize");
|
||||
}
|
||||
|
||||
private async _updateItem(): Promise<void> {
|
||||
@ -232,7 +225,7 @@ export class EntityRegistrySettingsHelper extends LitElement {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.form {
|
||||
padding-bottom: 24px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
||||
@ -33,8 +33,6 @@ export class EntityRegistrySettings extends LitElement {
|
||||
|
||||
@property() public entry!: ExtEntityRegistryEntry;
|
||||
|
||||
@property() public dialogElement!: HTMLElement;
|
||||
|
||||
@property() private _name!: string;
|
||||
|
||||
@property() private _icon!: string;
|
||||
@ -72,82 +70,76 @@ export class EntityRegistrySettings extends LitElement {
|
||||
computeDomain(this._entityId.trim()) !==
|
||||
computeDomain(this.entry.entity_id);
|
||||
return html`
|
||||
<paper-dialog-scrollable .dialogElement=${this.dialogElement}>
|
||||
${!stateObj
|
||||
? html`
|
||||
<div>
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.unavailable"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
|
||||
<div class="form">
|
||||
<paper-input
|
||||
.value=${this._name}
|
||||
@value-changed=${this._nameChanged}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.name"
|
||||
)}
|
||||
.placeholder=${this.entry.original_name}
|
||||
.disabled=${this._submitting}
|
||||
></paper-input>
|
||||
<ha-icon-input
|
||||
.value=${this._icon}
|
||||
@value-changed=${this._iconChanged}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.icon"
|
||||
)}
|
||||
.placeholder=${this.entry.original_icon}
|
||||
.disabled=${this._submitting}
|
||||
.errorMessage=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.icon_error"
|
||||
)}
|
||||
></ha-icon-input>
|
||||
<paper-input
|
||||
.value=${this._entityId}
|
||||
@value-changed=${this._entityIdChanged}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.entity_id"
|
||||
)}
|
||||
error-message="Domain needs to stay the same"
|
||||
.invalid=${invalidDomainUpdate}
|
||||
.disabled=${this._submitting}
|
||||
></paper-input>
|
||||
<div class="row">
|
||||
<ha-switch
|
||||
.checked=${!this._disabledBy}
|
||||
@change=${this._disabledByChanged}
|
||||
>
|
||||
</ha-switch>
|
||||
${!stateObj
|
||||
? html`
|
||||
<div>
|
||||
<div>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_label"
|
||||
)}
|
||||
</div>
|
||||
<div class="secondary">
|
||||
${this._disabledBy && this._disabledBy !== "user"
|
||||
? this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_cause",
|
||||
"cause",
|
||||
this.hass.localize(
|
||||
`config_entry.disabled_by.${this._disabledBy}`
|
||||
)
|
||||
${this.hass!.localize(
|
||||
"ui.dialogs.entity_registry.editor.unavailable"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
|
||||
<div class="form">
|
||||
<paper-input
|
||||
.value=${this._name}
|
||||
@value-changed=${this._nameChanged}
|
||||
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
|
||||
.placeholder=${this.entry.original_name}
|
||||
.disabled=${this._submitting}
|
||||
></paper-input>
|
||||
<ha-icon-input
|
||||
.value=${this._icon}
|
||||
@value-changed=${this._iconChanged}
|
||||
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
|
||||
.placeholder=${this.entry.original_icon}
|
||||
.disabled=${this._submitting}
|
||||
.errorMessage=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.icon_error"
|
||||
)}
|
||||
></ha-icon-input>
|
||||
<paper-input
|
||||
.value=${this._entityId}
|
||||
@value-changed=${this._entityIdChanged}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.entity_id"
|
||||
)}
|
||||
error-message="Domain needs to stay the same"
|
||||
.invalid=${invalidDomainUpdate}
|
||||
.disabled=${this._submitting}
|
||||
></paper-input>
|
||||
<div class="row">
|
||||
<ha-switch
|
||||
.checked=${!this._disabledBy}
|
||||
@change=${this._disabledByChanged}
|
||||
>
|
||||
</ha-switch>
|
||||
<div>
|
||||
<div>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_label"
|
||||
)}
|
||||
</div>
|
||||
<div class="secondary">
|
||||
${this._disabledBy && this._disabledBy !== "user"
|
||||
? this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_cause",
|
||||
"cause",
|
||||
this.hass.localize(
|
||||
`config_entry.disabled_by.${this._disabledBy}`
|
||||
)
|
||||
: ""}
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_description"
|
||||
)}
|
||||
<br />${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.note"
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
: ""}
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.enabled_description"
|
||||
)}
|
||||
<br />${this.hass.localize(
|
||||
"ui.dialogs.entity_registry.editor.note"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</paper-dialog-scrollable>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<mwc-button
|
||||
class="warning"
|
||||
@ -237,7 +229,7 @@ export class EntityRegistrySettings extends LitElement {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.form {
|
||||
padding-bottom: 24px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user