From 8ffe6768275f12835381377cf70e2262590f2159 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 5 Sep 2022 04:49:07 -0400 Subject: [PATCH] Move edit description into rename dialog (#13580) --- .../dialog-automation-rename.ts | 125 ++++++++++++++++++ .../show-dialog-automation-rename.ts | 22 +++ .../automation/blueprint-automation-editor.ts | 39 +----- .../config/automation/ha-automation-editor.ts | 117 ++++++---------- .../automation/manual-automation-editor.ts | 12 -- src/translations/en.json | 1 - 6 files changed, 190 insertions(+), 126 deletions(-) create mode 100644 src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts create mode 100644 src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts diff --git a/src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts b/src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts new file mode 100644 index 0000000000..e24ebc9e6c --- /dev/null +++ b/src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts @@ -0,0 +1,125 @@ +import "@material/mwc-button"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { createCloseHeading } from "../../../../components/ha-dialog"; +import { HassDialog } from "../../../../dialogs/make-dialog-manager"; +import { haStyle, haStyleDialog } from "../../../../resources/styles"; +import type { HomeAssistant } from "../../../../types"; +import type { AutomationRenameDialog } from "./show-dialog-automation-rename"; + +@customElement("ha-dialog-automation-rename") +class DialogAutomationRename extends LitElement implements HassDialog { + @property({ attribute: false }) public hass!: HomeAssistant; + + @state() private _opened = false; + + private _params!: AutomationRenameDialog; + + private _newName?: string; + + private _newDescription?: string; + + public showDialog(params: AutomationRenameDialog): void { + this._opened = true; + this._params = params; + this._newName = params.config.alias || ""; + this._newDescription = params.config.description || ""; + } + + public closeDialog(): void { + this._params.onClose(); + + if (this._opened) { + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + this._opened = false; + } + + protected render(): TemplateResult { + if (!this._opened) { + return html``; + } + return html` + + + + + + + ${this.hass.localize("ui.dialogs.generic.cancel")} + + + ${this.hass.localize("ui.panel.config.automation.editor.rename")} + + + `; + } + + private _valueChanged(ev: CustomEvent) { + ev.stopPropagation(); + const target = ev.target as any; + if (target.name === "description") { + this._newDescription = target.value; + } else { + this._newName = target.value; + } + } + + private _save(): void { + this._params.updateAutomation({ + ...this._params.config, + alias: this._newName, + description: this._newDescription, + }); + this.closeDialog(); + } + + static get styles(): CSSResultGroup { + return [ + haStyle, + haStyleDialog, + css` + ha-textfield, + ha-textarea { + display: block; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-dialog-automation-rename": DialogAutomationRename; + } +} diff --git a/src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts b/src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts new file mode 100644 index 0000000000..cf0fd4dd36 --- /dev/null +++ b/src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts @@ -0,0 +1,22 @@ +import { fireEvent } from "../../../../common/dom/fire_event"; +import type { AutomationConfig } from "../../../../data/automation"; + +export const loadAutomationRenameDialog = () => + import("./dialog-automation-rename"); + +export interface AutomationRenameDialog { + config: AutomationConfig; + updateAutomation: (config: AutomationConfig) => void; + onClose: () => void; +} + +export const showAutomationRenameDialog = ( + element: HTMLElement, + dialogParams: AutomationRenameDialog +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "ha-dialog-automation-rename", + dialogImport: loadAutomationRenameDialog, + dialogParams, + }); +}; diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts index be9c0ec9c1..b481754aa1 100644 --- a/src/panels/config/automation/blueprint-automation-editor.ts +++ b/src/panels/config/automation/blueprint-automation-editor.ts @@ -49,26 +49,6 @@ export class HaBlueprintAutomationEditor extends LitElement { protected render() { const blueprint = this._blueprint; return html` -

- ${this.hass.localize("ui.panel.config.automation.editor.introduction")} -

- -
- -
- - ${this._config!.alias || - this.hass.localize( - "ui.panel.config.automation.editor.default_name" - )}` - : ""}
${this._errors}
` : ""} ${this._mode === "gui" - ? html` - ${this.narrow - ? "" - : html` -
-

- ${this._config!.alias || - this.hass.localize( - "ui.panel.config.automation.editor.default_name" - )} -

- -
- `} - ${"use_blueprint" in this._config - ? html` - - ` - : html` - - `} - ` + ? "use_blueprint" in this._config + ? html` + + ` + : html` + + ` : this._mode === "yaml" ? html` ${!this.narrow @@ -559,32 +533,26 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { this._mode = "yaml"; } - private async _promptAutomationAlias(): Promise { - const result = await showPromptDialog(this, { - title: this.hass.localize( - "ui.panel.config.automation.editor.automation_alias" - ), - inputLabel: this.hass.localize("ui.panel.config.automation.editor.alias"), - inputType: "string", - placeholder: this.hass.localize( - "ui.panel.config.automation.editor.default_name" - ), - defaultValue: this._config!.alias, - confirmText: this.hass.localize("ui.common.submit"), + private async _promptAutomationAlias(): Promise { + return new Promise((resolve) => { + showAutomationRenameDialog(this, { + config: this._config!, + updateAutomation: (config) => { + this._config = config; + this._dirty = true; + this.requestUpdate(); + resolve(); + }, + onClose: () => resolve(), + }); }); - if (result) { - this._config!.alias = result; - this._dirty = true; - this.requestUpdate(); - } - return result; } private async _saveAutomation(): Promise { const id = this.automationId || String(Date.now()); if (!this._config!.alias) { - const alias = await this._promptAutomationAlias(); - if (!alias) { + await this._promptAutomationAlias(); + if (!this._config!.alias) { showAlertDialog(this, { text: this.hass.localize( "ui.panel.config.automation.editor.missing_name" @@ -592,7 +560,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { }); return; } - this._config!.alias = alias; } this.hass!.callApi( diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 2ac1affe3a..3e99317869 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -54,18 +54,6 @@ export class HaManualAutomationEditor extends LitElement { )}
-