Add ability to edit panel view cards (#5257)

* Add ability to edit panel view cards

* Localize and fix some styling

src/panels/lovelace/cards/hui-iframe-card.ts

@@ -32,6 +32,8 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
   }
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
+  @property({ type: Boolean, reflect: true })
+  public editMode = false;
   @property() protected _config?: IframeCardConfig;
 
   public getCardSize(): number {
@@ -88,6 +90,10 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         height: 100%;
       }
 
+      :host([ispanel][editMode]) ha-card {
+        height: calc(100% - 51px);
+      }
+
       ha-card {
         overflow: hidden;
       }

src/panels/lovelace/cards/hui-map-card.ts

@@ -63,6 +63,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
+  @property({ type: Boolean, reflect: true })
+  public editMode = false;
 
   @property()
   private _config?: MapCardConfig;
@@ -460,6 +462,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         height: 100%;
       }
 
+      :host([ispanel][editMode]) ha-card {
+        height: calc(100% - 51px);
+      }
+
       ha-card {
         overflow: hidden;
       }

src/panels/lovelace/hui-root.ts

@@ -701,6 +701,8 @@ class HUIRoot extends LitElement {
       if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
         view = document.createElement("hui-panel-view");
         view.config = viewConfig;
+        view.lovelace = this.lovelace;
+        view.index = viewIndex;
       } else {
         view = document.createElement("hui-view");
         view.lovelace = this.lovelace;

src/panels/lovelace/types.ts

@@ -33,6 +33,7 @@ export interface LovelaceBadge extends HTMLElement {
 export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   isPanel?: boolean;
+  editMode?: boolean;
   getCardSize(): number;
   setConfig(config: LovelaceCardConfig): void;
 }

src/panels/lovelace/views/hui-panel-view.ts

@@ -8,14 +8,18 @@ import {
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 import { HomeAssistant } from "../../../types";
-import { LovelaceCard } from "../types";
+import { LovelaceCard, Lovelace } from "../types";
 import { createCardElement } from "../create-element/create-card-element";
 import { LovelaceViewConfig } from "../../../data/lovelace";
 
+let editCodeLoaded = false;
+
 @customElement("hui-panel-view")
 export class HUIPanelView extends UpdatingElement {
   @property() public hass?: HomeAssistant;
+  @property() public lovelace?: Lovelace;
   @property() public config?: LovelaceViewConfig;
+  @property({ type: Number }) public index!: number;
 
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
@@ -26,11 +30,25 @@ export class HUIPanelView extends UpdatingElement {
     super.update(changedProperties);
 
     const hass = this.hass!;
+    const lovelace = this.lovelace!;
     const hassChanged = changedProperties.has("hass");
     const oldHass = changedProperties.get("hass") as this["hass"] | undefined;
     const configChanged = changedProperties.has("config");
 
-    if (configChanged) {
+    if (lovelace.editMode && !editCodeLoaded) {
+      editCodeLoaded = true;
+      import(/* webpackChunkName: "hui-view-editable" */ "./hui-view-editable");
+    }
+
+    let editModeChanged = false;
+
+    if (changedProperties.has("lovelace")) {
+      const oldLovelace = changedProperties.get("lovelace") as Lovelace;
+      editModeChanged =
+        !oldLovelace || lovelace.editMode !== oldLovelace.editMode;
+    }
+
+    if (editModeChanged || configChanged) {
       this._createCard();
     } else if (hassChanged) {
       (this.lastChild! as LovelaceCard).hass = this.hass;
@@ -48,14 +66,37 @@ export class HUIPanelView extends UpdatingElement {
   }
 
   private _createCard(): void {
-    if (this.lastChild) {
+    while (this.lastChild) {
       this.removeChild(this.lastChild);
     }
 
     const card: LovelaceCard = createCardElement(this.config!.cards![0]);
     card.hass = this.hass;
     card.isPanel = true;
+
+    if (!this.lovelace!.editMode) {
       this.appendChild(card);
+      return;
+    }
+
+    const wrapper = document.createElement("hui-card-options");
+    wrapper.hass = this.hass;
+    wrapper.lovelace = this.lovelace;
+    wrapper.path = [this.index, 0];
+    card.editMode = true;
+    wrapper.appendChild(card);
+    this.appendChild(wrapper);
+    if (this.config!.cards!.length > 1) {
+      const warning = document.createElement("hui-warning");
+      warning.setAttribute(
+        "style",
+        "position: absolute; top: 0; width: 100%; box-sizing: border-box;"
+      );
+      warning.innerText = this.hass!.localize(
+        "ui.panel.lovelace.editor.view.panel_mode.warning_multiple_cards"
+      );
+      this.appendChild(warning);
+    }
   }
 }
 

src/panels/lovelace/views/hui-view.ts

@@ -298,6 +298,7 @@ export class HUIView extends LitElement {
       wrapper.hass = this.hass;
       wrapper.lovelace = this.lovelace;
       wrapper.path = [this.index!, cardIndex];
+      element.editMode = true;
       wrapper.appendChild(element);
       elementsToAppend.push(wrapper);
     });

src/translations/en.json

@@ -2137,7 +2137,8 @@
           "view": {
             "panel_mode": {
               "title": "Panel Mode?",
-              "description": "This renders the first card at full width; other cards in this view will not be rendered."
+              "description": "This renders the first card at full width; other cards in this view will not be rendered.",
+              "warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card."
             }
           }
         },
@@ -2393,11 +2394,6 @@
         "tabs": {
           "info": {
             "title": "Info",
-            "remove": "Remove",
-            "set": "Set",
-            "default_ui": "{action} {name} as default page on this device",
-            "lovelace_ui": "Go to the Lovelace UI",
-            "states_ui": "Go to the states UI",
             "home_assistant_logo": "Home Assistant logo",
             "path_configuration": "Path to configuration.yaml: {path}",
             "developed_by": "Developed by a bunch of awesome people.",