Add close function to edit card dialog (#6423)

src/dialogs/make-dialog-manager.ts

@@ -15,7 +15,8 @@ declare global {
   }
 }
 
-interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]> extends HTMLElement {
+export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
+  extends HTMLElement {
   showDialog(params: T);
   closeDialog?: () => boolean | void;
 }

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<void> {
     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 {
             `
           : ""}
         <div slot="primaryAction" @click=${this._save}>
-          <mwc-button @click=${this._close}>
+          <mwc-button @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
           </mwc-button>
           ${this._cardConfig !== undefined
@@ -214,7 +232,9 @@ export class HuiDialogEditCard extends LitElement {
                           size="small"
                         ></ha-circular-progress>
                       `
-                    : this.hass!.localize("ui.common.save")}
+                    : this._dirty
+                    ? this.hass!.localize("ui.common.save")
+                    : this.hass!.localize("ui.common.close")}
                 </mwc-button>
               `
             : ``}
@@ -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<ConfigChangedEvent>) {
     this._cardConfig = deepFreeze(ev.detail.config);
     this._error = ev.detail.error;
     this._guiModeAvailable = ev.detail.guiModeAvailable;
+    this._dirty = true;
   }
 
   private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): 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<void> {
-    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();
   }
 }
 

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