Add delete card func (#2116)

* Add delete card button

* Add delete card button

* fix the non-sense

* lovelace data was moved

src/data/lovelace.ts

@@ -62,3 +62,12 @@ export const updateCardConfig = (
     card_config: config,
     format: configFormat,
   });
+
+export const deleteCard = (
+  hass: HomeAssistant,
+  cardId: string
+): Promise<void> =>
+  hass.callWS({
+    type: "lovelace/config/card/delete",
+    card_id: cardId,
+  });

src/panels/lovelace/components/hui-card-options.ts

@@ -5,6 +5,8 @@ import {
   showEditCardDialog,
   registerEditCardDialog,
 } from "../editor/hui-dialog-edit-card";
+
+import { confDeleteCard } from "../editor/delete-card";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 
@@ -52,17 +54,39 @@ export class HuiCardOptions extends LitElement {
           color: var(--primary-color);
           font-weight: 500;
         }
+        paper-button.warning:not([disabled]) {
+          color: var(--google-red-500);
+        }
       </style>
       <slot></slot>
-      <div><paper-button @click="${this._editCard}">EDIT</paper-button></div>
+      <div>
+        <paper-button class="warning" @click="${this._deleteCard}"
+          >DELETE</paper-button
+        ><paper-button @click="${this._editCard}">EDIT</paper-button>
+      </div>
     `;
   }
-  private _editCard() {
+  private _editCard(): void {
+    if (!this.cardConfig) {
+      return;
+    }
     showEditCardDialog(this, {
-      cardConfig: this.cardConfig!,
+      cardConfig: this.cardConfig,
       reloadLovelace: () => fireEvent(this, "config-refresh"),
     });
   }
+  private _deleteCard(): void {
+    if (!this.cardConfig) {
+      return;
+    }
+    if (!this.cardConfig.id) {
+      this._editCard();
+      return;
+    }
+    confDeleteCard(this.hass!, this.cardConfig.id, () =>
+      fireEvent(this, "config-refresh")
+    );
+  }
 }
 
 declare global {

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

@@ -0,0 +1,18 @@
+import { deleteCard } from "../../../data/lovelace";
+import { HomeAssistant } from "../../../types";
+
+export async function confDeleteCard(
+  hass: HomeAssistant,
+  cardId: string,
+  reloadLovelace: () => void
+): Promise<void> {
+  if (!confirm("Are you sure you want to delete this card?")) {
+    return;
+  }
+  try {
+    await deleteCard(hass, cardId);
+    reloadLovelace();
+  } catch (err) {
+    alert(`Deleting failed: ${err.message}`);
+  }
+}

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

@@ -46,7 +46,7 @@ export class HuiDialogEditCard extends LitElement {
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      _cardConfig: {},
+      _params: {},
     };
   }
 

src/panels/lovelace/editor/hui-migrate-config.ts

@@ -95,6 +95,7 @@ export class HuiMigrateConfig extends hassLocalizeLitMixin(LitElement) {
     try {
       await migrateConfig(this.hass!);
       this._closeDialog();
+      this._migrating = false;
       fireEvent(this, "reload-lovelace");
     } catch (err) {
       alert(`Migration failed: ${err.message}`);