Card Editor: Copy Card (#5249)

* Copy Card Feature

* dUplicate

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

@@ -78,6 +78,11 @@ export class HuiCardOptions extends LitElement {
                     "ui.panel.lovelace.editor.edit_card.move"
                   )}</paper-item
                 >
+                <paper-item @tap=${this._duplicateCard}
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.duplicate"
+                  )}</paper-item
+                >
                 <paper-item .class="delete-item" @tap="${this._deleteCard}">
                   ${this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.delete"
@@ -152,6 +157,17 @@ export class HuiCardOptions extends LitElement {
     `;
   }
 
+  private _duplicateCard(): void {
+    const path = this.path!;
+    const cardConfig = this.lovelace!.config.views[path[0]].cards![path[1]];
+    showEditCardDialog(this, {
+      lovelaceConfig: this.lovelace!.config,
+      cardConfig,
+      saveConfig: this.lovelace!.saveConfig,
+      path: [path[0]],
+    });
+  }
+
   private _editCard(): void {
     showEditCardDialog(this, {
       lovelaceConfig: this.lovelace!.config,

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

@@ -56,7 +56,7 @@ export class HuiDialogEditCard extends LitElement {
     const [view, card] = params.path;
     this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
-      card !== undefined ? this._viewConfig.cards![card] : undefined;
+      card !== undefined ? this._viewConfig.cards![card] : params.cardConfig;
     if (this._cardConfig && !Object.isFrozen(this._cardConfig)) {
       this._cardConfig = deepFreeze(this._cardConfig);
     }

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

@@ -1,11 +1,12 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { LovelaceConfig } from "../../../../data/lovelace";
+import { LovelaceConfig, LovelaceCardConfig } from "../../../../data/lovelace";
 
 export interface EditCardDialogParams {
   lovelaceConfig: LovelaceConfig;
   saveConfig: (config: LovelaceConfig) => void;
   path: [number] | [number, number];
   entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
+  cardConfig?: LovelaceCardConfig;
 }
 
 const importEditCardDialog = () =>

src/translations/en.json

@@ -1951,6 +1951,7 @@
             "add": "Add Card",
             "edit": "Edit",
             "delete": "Delete Card",
+            "duplicate": "Duplicate Card",
             "move": "Move to View",
             "options": "More options"
           },