Delete Card: Add Card Preview to Dialog (#5325)

* Delete Card Dialog

* Update with to be the max for a column

* Comments

* remove open and wait for render to resize I think

* Review

* fire event from dialog

src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts

@@ -0,0 +1,111 @@
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultArray,
+  customElement,
+  property,
+  query,
+} from "lit-element";
+
+import "./hui-card-preview";
+import "../../../../components/dialog/ha-paper-dialog";
+
+import deepFreeze from "deep-freeze";
+
+// tslint:disable-next-line: no-duplicate-imports
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCardConfig } from "../../../../data/lovelace";
+import { haStyleDialog } from "../../../../resources/styles";
+import { DeleteCardDialogParams } from "./show-delete-card-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+@customElement("hui-dialog-delete-card")
+export class HuiDialogDeleteCard extends LitElement {
+  @property() protected hass!: HomeAssistant;
+  @property() private _params?: DeleteCardDialogParams;
+  @property() private _cardConfig?: LovelaceCardConfig;
+  @query("ha-paper-dialog") private _dialog!: HaPaperDialog;
+
+  public async showDialog(params: DeleteCardDialogParams): Promise<void> {
+    this._params = params;
+    this._cardConfig = params.cardConfig;
+    if (!Object.isFrozen(this._cardConfig)) {
+      this._cardConfig = deepFreeze(this._cardConfig);
+    }
+    await this.updateComplete;
+    fireEvent(this._dialog as HTMLElement, "iron-resize");
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+
+    return html`
+      <ha-paper-dialog with-backdrop opened>
+        <h2>
+          ${this.hass.localize("ui.panel.lovelace.cards.confirm_delete")}
+        </h2>
+        <paper-dialog-scrollable>
+          ${this._cardConfig
+            ? html`
+                <div class="element-preview">
+                  <hui-card-preview
+                    .hass=${this.hass}
+                    .config="${this._cardConfig}"
+                  ></hui-card-preview>
+                </div>
+              `
+            : ""}
+        </paper-dialog-scrollable>
+        <div class="paper-dialog-buttons">
+          <mwc-button @click="${this._close}">
+            ${this.hass!.localize("ui.common.cancel")}
+          </mwc-button>
+          <mwc-button class="warning" @click="${this._delete}">
+            ${this.hass!.localize("ui.common.delete")}
+          </mwc-button>
+        </div>
+      </ha-paper-dialog>
+    `;
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyleDialog,
+      css`
+        .element-preview {
+          position: relative;
+        }
+        hui-card-preview {
+          margin: 4px auto;
+          max-width: 500px;
+          display: block;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+
+  private _close(): void {
+    this._params = undefined;
+    this._cardConfig = undefined;
+  }
+
+  private _delete(): void {
+    if (!this._params?.deleteCard) {
+      return;
+    }
+    this._params.deleteCard();
+    this._close();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-delete-card": HuiDialogDeleteCard;
+  }
+}

src/panels/lovelace/editor/card-editor/show-delete-card-dialog.ts

@@ -0,0 +1,23 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { LovelaceCardConfig } from "../../../../data/lovelace";
+
+export interface DeleteCardDialogParams {
+  deleteCard: () => void;
+  cardConfig?: LovelaceCardConfig;
+}
+
+const importDeleteCardDialog = () =>
+  import(
+    /* webpackChunkName: "hui-dialog-delete-card" */ "./hui-dialog-delete-card"
+  );
+
+export const showDeleteCardDialog = (
+  element: HTMLElement,
+  deleteCardDialogParams: DeleteCardDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "hui-dialog-delete-card",
+    dialogImport: importDeleteCardDialog,
+    dialogParams: deleteCardDialogParams,
+  });
+};

src/panels/lovelace/editor/delete-card.ts

@@ -1,10 +1,9 @@
 import { Lovelace } from "../types";
 import { deleteCard } from "./config-util";
-import {
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
+import { showDeleteCardDialog } from "./card-editor/show-delete-card-dialog";
+import { showDeleteSuccessToast } from "../../../util/toast-deleted-success";
 
 export async function confDeleteCard(
   element: HTMLElement,
@@ -12,11 +11,13 @@ export async function confDeleteCard(
   lovelace: Lovelace,
   path: [number, number]
 ): Promise<void> {
-  showConfirmationDialog(element, {
+  const cardConfig = lovelace.config.views[path[0]].cards![path[1]];
-    text: hass.localize("ui.panel.lovelace.cards.confirm_delete"),
+  showDeleteCardDialog(element, {
-    confirm: async () => {
+    cardConfig,
+    deleteCard: async () => {
       try {
         await lovelace.saveConfig(deleteCard(lovelace.config, path));
+        showDeleteSuccessToast(element, hass!);
       } catch (err) {
         showAlertDialog(element, {
           text: `Deleting failed: ${err.message}`,

src/translations/en.json

@@ -519,11 +519,13 @@
     "common": {
       "loading": "Loading",
       "cancel": "Cancel",
+      "delete": "Delete",
       "close": "Close",
       "save": "Save",
       "yes": "Yes",
       "no": "No",
-      "successfully_saved": "Successfully saved"
+      "successfully_saved": "Successfully saved",
+      "successfully_deleted": "Successfully deleted"
     },
     "components": {
       "entity": {

src/util/toast-deleted-success.ts

@@ -0,0 +1,7 @@
+import { showToast } from "./toast";
+import { HomeAssistant } from "../types";
+
+export const showDeleteSuccessToast = (el: HTMLElement, hass: HomeAssistant) =>
+  showToast(el, {
+    message: hass!.localize("ui.common.successfully_deleted"),
+  });