From cddbf460f85d50ec50553e79ff0f07c2bf8f6d3c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 17 Jul 2020 20:29:08 +0200 Subject: [PATCH] Add close function to edit card dialog (#6423) --- src/dialogs/make-dialog-manager.ts | 3 +- .../card-editor/hui-dialog-edit-card.ts | 74 +++++++++++++++---- src/translations/en.json | 2 + 3 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts index 5baf4d3e65..7e975ca204 100644 --- a/src/dialogs/make-dialog-manager.ts +++ b/src/dialogs/make-dialog-manager.ts @@ -15,7 +15,8 @@ declare global { } } -interface HassDialog extends HTMLElement { +export interface HassDialog + extends HTMLElement { showDialog(params: T); closeDialog?: () => boolean | void; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index feac4d8ddc..8f2a96d072 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -11,7 +11,7 @@ import { TemplateResult, PropertyValues, } from "lit-element"; -import type { HASSDomEvent } from "../../../../common/dom/fire_event"; +import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-dialog"; import type { LovelaceCardConfig, @@ -30,6 +30,8 @@ import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; import { getCardDocumentationURL } from "../get-card-documentation-url"; import { mdiHelpCircle } from "@mdi/js"; +import { HassDialog } from "../../../../dialogs/make-dialog-manager"; +import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; declare global { // for fire event @@ -43,7 +45,7 @@ declare global { } @customElement("hui-dialog-edit-card") -export class HuiDialogEditCard extends LitElement { +export class HuiDialogEditCard extends LitElement implements HassDialog { @property() protected hass!: HomeAssistant; @internalProperty() private _params?: EditCardDialogParams; @@ -64,6 +66,8 @@ export class HuiDialogEditCard extends LitElement { @internalProperty() private _documentationURL?: string; + @internalProperty() private _dirty = false; + public async showDialog(params: EditCardDialogParams): Promise { this._params = params; this._GUImode = true; @@ -77,6 +81,20 @@ export class HuiDialogEditCard extends LitElement { } } + public closeDialog(): boolean { + if (this._dirty) { + this._confirmCancel(); + return false; + } + this._params = undefined; + this._cardConfig = undefined; + this._error = undefined; + this._documentationURL = undefined; + this._dirty = false; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + return true; + } + protected updated(changedProps: PropertyValues): void { if ( !this._cardConfig || @@ -122,7 +140,7 @@ export class HuiDialogEditCard extends LitElement { open scrimClickAction @keydown=${this._ignoreKeydown} - @closed=${this._close} + @closed=${this._cancel} @opened=${this._opened} .heading=${html`${heading} ${this._documentationURL !== undefined @@ -197,7 +215,7 @@ export class HuiDialogEditCard extends LitElement { ` : ""}
- + ${this.hass!.localize("ui.common.cancel")} ${this._cardConfig !== undefined @@ -214,7 +232,9 @@ export class HuiDialogEditCard extends LitElement { size="small" > ` - : this.hass!.localize("ui.common.save")} + : this._dirty + ? this.hass!.localize("ui.common.save") + : this.hass!.localize("ui.common.close")} ` : ``} @@ -344,12 +364,14 @@ export class HuiDialogEditCard extends LitElement { } this._cardConfig = deepFreeze(config); this._error = ev.detail.error; + this._dirty = true; } private _handleConfigChanged(ev: HASSDomEvent) { this._cardConfig = deepFreeze(ev.detail.config); this._error = ev.detail.error; this._guiModeAvailable = ev.detail.guiModeAvailable; + this._dirty = true; } private _handleGUIModeChanged(ev: HASSDomEvent): void { @@ -366,13 +388,6 @@ export class HuiDialogEditCard extends LitElement { this._cardEditorEl?.refreshYamlEditor(); } - private _close(): void { - this._params = undefined; - this._cardConfig = undefined; - this._error = undefined; - this._documentationURL = undefined; - } - private get _canSave(): boolean { if (this._saving) { return false; @@ -386,8 +401,38 @@ export class HuiDialogEditCard extends LitElement { return true; } + private async _confirmCancel() { + // Make sure the open state of this dialog is handled before the open state of confirm dialog + await new Promise((resolve) => setTimeout(resolve, 0)); + const confirm = await showConfirmationDialog(this, { + title: this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.unsaved_changes" + ), + text: this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.confirm_cancel" + ), + dismissText: this.hass!.localize("ui.common.no"), + confirmText: this.hass!.localize("ui.common.yes"), + }); + if (confirm) { + this._cancel(); + } + } + + private _cancel(ev?: Event) { + if (ev) { + ev.stopPropagation(); + } + this._dirty = false; + this.closeDialog(); + } + private async _save(): Promise { - if (!this._canSave || this._saving) { + if (!this._canSave) { + return; + } + if (!this._dirty) { + this.closeDialog(); return; } this._saving = true; @@ -405,8 +450,9 @@ export class HuiDialogEditCard extends LitElement { ) ); this._saving = false; + this._dirty = false; showSaveSuccessToast(this, this.hass); - this._close(); + this.closeDialog(); } } diff --git a/src/translations/en.json b/src/translations/en.json index 9dcdeb92e0..0da396dc2f 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1901,6 +1901,8 @@ "pick_card": "Which card would you like to add?", "pick_card_view_title": "Which card would you like to add to your {name} view?", "toggle_editor": "Toggle Editor", + "unsaved_changes": "You have unsaved changes", + "confirm_cancel": "Are you sure you want to cancel?", "show_visual_editor": "Show Visual Editor", "show_code_editor": "Show Code Editor", "add": "Add Card",