jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move edit description into rename dialog (#13580)

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-09-05 04:49:07 -04:00 committed by GitHub
parent f032d0dbcf
commit 8ffe676827
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 190 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts Normal file
View File

@ -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;
}
}

22
src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts Normal file
View File

@ -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,
});
};

39
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -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;

117
src/panels/config/automation/ha-automation-editor.ts
View File

@ -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(

12
src/panels/config/automation/manual-automation-editor.ts
View File

@ -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"

1
src/translations/en.json
View File

@ -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.",