mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Move edit description into rename dialog (#13580)
This commit is contained in:
parent
f032d0dbcf
commit
8ffe676827
@ -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`
|
||||
<ha-dialog
|
||||
open
|
||||
@closed=${this.closeDialog}
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize("ui.panel.config.automation.editor.rename")
|
||||
)}
|
||||
>
|
||||
<ha-textfield
|
||||
dialogInitialFocus
|
||||
value=${this._newName}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
)}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.alias"
|
||||
)}
|
||||
type="string"
|
||||
@change=${this._valueChanged}
|
||||
></ha-textfield>
|
||||
|
||||
<ha-textarea
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.label"
|
||||
)}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.placeholder"
|
||||
)}
|
||||
name="description"
|
||||
autogrow
|
||||
.value=${this._newDescription}
|
||||
@change=${this._valueChanged}
|
||||
></ha-textarea>
|
||||
|
||||
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
|
||||
${this.hass.localize("ui.dialogs.generic.cancel")}
|
||||
</mwc-button>
|
||||
<mwc-button @click=${this._save} slot="primaryAction">
|
||||
${this.hass.localize("ui.panel.config.automation.editor.rename")}
|
||||
</mwc-button>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
@ -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,
|
||||
});
|
||||
};
|
@ -49,26 +49,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
protected render() {
|
||||
const blueprint = this._blueprint;
|
||||
return html`
|
||||
<p class="introduction">
|
||||
${this.hass.localize("ui.panel.config.automation.editor.introduction")}
|
||||
</p>
|
||||
<ha-card outlined>
|
||||
<div class="card-content">
|
||||
<ha-textarea
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.label"
|
||||
)}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.placeholder"
|
||||
)}
|
||||
name="description"
|
||||
autogrow
|
||||
.value=${this.config.description || ""}
|
||||
@change=${this._valueChanged}
|
||||
></ha-textarea>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card
|
||||
outlined
|
||||
class="blueprint"
|
||||
@ -198,22 +178,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const target = ev.target as any;
|
||||
const name = target.name;
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
const newVal = target.value;
|
||||
if ((this.config![name] || "") === newVal) {
|
||||
return;
|
||||
}
|
||||
fireEvent(this, "value-changed", {
|
||||
value: { ...this.config!, [name]: newVal },
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
@ -222,7 +186,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
ha-card.blueprint {
|
||||
margin: 24px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.padding {
|
||||
padding: 16px;
|
||||
@ -233,7 +197,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
|
||||
.blueprint-picker-container {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
ha-textarea,
|
||||
ha-textfield,
|
||||
ha-blueprint-picker {
|
||||
display: block;
|
||||
|
@ -6,7 +6,6 @@ import {
|
||||
mdiDelete,
|
||||
mdiDotsVertical,
|
||||
mdiInformationOutline,
|
||||
mdiPencil,
|
||||
mdiPlay,
|
||||
mdiPlayCircleOutline,
|
||||
mdiRenameBox,
|
||||
@ -48,7 +47,6 @@ import {
|
||||
import {
|
||||
showAlertDialog,
|
||||
showConfirmationDialog,
|
||||
showPromptDialog,
|
||||
} from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/ha-app-layout";
|
||||
import "../../../layouts/hass-subpage";
|
||||
@ -57,7 +55,7 @@ import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { showToast } from "../../../util/toast";
|
||||
import "../ha-config-section";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
|
||||
import "./blueprint-automation-editor";
|
||||
import "./manual-automation-editor";
|
||||
|
||||
@ -118,7 +116,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.backCallback=${this._backTapped}
|
||||
.tabs=${configSections.automations}
|
||||
.header=${!this._config
|
||||
? ""
|
||||
: this._config.alias ||
|
||||
this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
)}
|
||||
>
|
||||
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
|
||||
<ha-icon-button
|
||||
@ -234,14 +237,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
|
||||
${this._config
|
||||
? html`
|
||||
${this.narrow
|
||||
? html`<span slot="header"
|
||||
>${this._config!.alias ||
|
||||
this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
)}</span
|
||||
>`
|
||||
: ""}
|
||||
<div
|
||||
class="content ${classMap({
|
||||
"yaml-mode": this._mode === "yaml",
|
||||
@ -252,48 +247,27 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
? html`<div class="errors">${this._errors}</div>`
|
||||
: ""}
|
||||
${this._mode === "gui"
|
||||
? html`
|
||||
${this.narrow
|
||||
? ""
|
||||
: html`
|
||||
<div class="header-name">
|
||||
<h1>
|
||||
${this._config!.alias ||
|
||||
this.hass.localize(
|
||||
"ui.panel.config.automation.editor.default_name"
|
||||
)}
|
||||
</h1>
|
||||
<ha-icon-button
|
||||
.path=${mdiPencil}
|
||||
@click=${this._promptAutomationAlias}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.rename"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`}
|
||||
${"use_blueprint" in this._config
|
||||
? html`
|
||||
<blueprint-automation-editor
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
.stateObj=${stateObj}
|
||||
.config=${this._config}
|
||||
@value-changed=${this._valueChanged}
|
||||
></blueprint-automation-editor>
|
||||
`
|
||||
: html`
|
||||
<manual-automation-editor
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
.stateObj=${stateObj}
|
||||
.config=${this._config}
|
||||
@value-changed=${this._valueChanged}
|
||||
></manual-automation-editor>
|
||||
`}
|
||||
`
|
||||
? "use_blueprint" in this._config
|
||||
? html`
|
||||
<blueprint-automation-editor
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
.stateObj=${stateObj}
|
||||
.config=${this._config}
|
||||
@value-changed=${this._valueChanged}
|
||||
></blueprint-automation-editor>
|
||||
`
|
||||
: html`
|
||||
<manual-automation-editor
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
.stateObj=${stateObj}
|
||||
.config=${this._config}
|
||||
@value-changed=${this._valueChanged}
|
||||
></manual-automation-editor>
|
||||
`
|
||||
: this._mode === "yaml"
|
||||
? html`
|
||||
${!this.narrow
|
||||
@ -559,32 +533,26 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
this._mode = "yaml";
|
||||
}
|
||||
|
||||
private async _promptAutomationAlias(): Promise<string | null> {
|
||||
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<void> {
|
||||
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<void> {
|
||||
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(
|
||||
|
@ -54,18 +54,6 @@ export class HaManualAutomationEditor extends LitElement {
|
||||
)}
|
||||
</h3>
|
||||
<div class="card-content">
|
||||
<ha-textarea
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.label"
|
||||
)}
|
||||
.placeholder=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.description.placeholder"
|
||||
)}
|
||||
name="description"
|
||||
autogrow
|
||||
.value=${this.config.description || ""}
|
||||
@change=${this._valueChanged}
|
||||
></ha-textarea>
|
||||
<ha-select
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.modes.label"
|
||||
|
@ -1825,7 +1825,6 @@
|
||||
"rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
|
||||
"show_trace": "Traces",
|
||||
"show_info": "Information",
|
||||
"introduction": "Use automations to bring your home to life.",
|
||||
"default_name": "New Automation",
|
||||
"missing_name": "Cannot save automation without a name",
|
||||
"load_error_not_editable": "Only automations in automations.yaml are editable.",
|
||||
|
Loading…
x
Reference in New Issue
Block a user