Move main function to events on hui-view for custom views to use (#7861)

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

@@ -1,7 +1,8 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-icon-button";
-import "../../../components/ha-button-menu";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -9,21 +10,20 @@ import {
   html,
   LitElement,
   property,
-  TemplateResult,
   queryAssignedNodes,
+  TemplateResult,
 } from "lit-element";
-import { HomeAssistant } from "../../../types";
-import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { swapCard, moveCard, addCard, deleteCard } from "../editor/config-util";
-import { confDeleteCard } from "../editor/delete-card";
-import { Lovelace, LovelaceCard } from "../types";
-import { computeCardSize } from "../common/compute-card-size";
-import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-button-menu";
 import { saveConfig } from "../../../data/lovelace";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../../types";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
+import { computeCardSize } from "../common/compute-card-size";
+import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
+import { addCard, deleteCard, moveCard, swapCard } from "../editor/config-util";
+import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
+import { Lovelace, LovelaceCard } from "../types";
 
 @customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
@@ -168,11 +168,7 @@ export class HuiCardOptions extends LitElement {
   }
 
   private _editCard(): void {
-    showEditCardDialog(this, {
-      lovelaceConfig: this.lovelace!.config,
-      saveConfig: this.lovelace!.saveConfig,
-      path: this.path!,
-    });
+    fireEvent(this, "ll-edit-card", { path: this.path! });
   }
 
   private _cardUp(): void {
@@ -229,7 +225,7 @@ export class HuiCardOptions extends LitElement {
   }
 
   private _deleteCard(): void {
-    confDeleteCard(this, this.hass!, this.lovelace!, this.path!);
+    fireEvent(this, "ll-delete-card", { path: this.path! });
   }
 }
 

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

@@ -8,7 +8,7 @@ export interface CreateCardDialogParams {
   entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
 }
 
-const importCreateCardDialog = () => import("./hui-dialog-create-card");
+export const importCreateCardDialog = () => import("./hui-dialog-create-card");
 
 export const showCreateCardDialog = (
   element: HTMLElement,

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

@@ -6,7 +6,7 @@ export interface DeleteCardDialogParams {
   cardConfig?: LovelaceCardConfig;
 }
 
-const importDeleteCardDialog = () => import("./hui-dialog-delete-card");
+export const importDeleteCardDialog = () => import("./hui-dialog-delete-card");
 
 export const showDeleteCardDialog = (
   element: HTMLElement,

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

@@ -8,7 +8,7 @@ export interface EditCardDialogParams {
   cardConfig?: LovelaceCardConfig;
 }
 
-const importEditCardDialog = () => import("./hui-dialog-edit-card");
+export const importEditCardDialog = () => import("./hui-dialog-edit-card");
 
 export const showEditCardDialog = (
   element: HTMLElement,

src/panels/lovelace/views/default-view-editable.ts

@@ -1,3 +1,10 @@
 // hui-view dependencies for when in edit mode.
 import "../../../components/ha-fab";
 import "../components/hui-card-options";
+import { importCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
+import { importDeleteCardDialog } from "../editor/card-editor/show-delete-card-dialog";
+import { importEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
+
+importCreateCardDialog();
+importDeleteCardDialog();
+importEditCardDialog();

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

@@ -10,6 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/entity/ha-state-label-badge";
@@ -21,7 +22,6 @@ import type {
 import type { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
 import { computeCardSize } from "../common/compute-card-size";
-import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import type { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
 
 let editCodeLoaded = false;
@@ -148,11 +148,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
   }
 
   private _addCard(): void {
-    showCreateCardDialog(this, {
-      lovelaceConfig: this.lovelace!.config,
-      saveConfig: this.lovelace!.saveConfig,
-      path: [this.index!],
-    });
+    fireEvent(this, "ll-create-card");
   }
 
   private async _createColumns() {

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

@@ -20,11 +20,23 @@ import { processConfigEntities } from "../common/process-config-entities";
 import { createBadgeElement } from "../create-element/create-badge-element";
 import { createCardElement } from "../create-element/create-card-element";
 import { createViewElement } from "../create-element/create-view-element";
+import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
+import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
+import { confDeleteCard } from "../editor/delete-card";
 import type { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
 
 const DEFAULT_VIEW_LAYOUT = "masonry";
 const PANEL_VIEW_LAYOUT = "panel";
 
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "ll-create-card": undefined;
+    "ll-edit-card": { path: [number] | [number, number] };
+    "ll-delete-card": { path: [number] | [number, number] };
+  }
+}
+
 @customElement("hui-view")
 export class HUIView extends UpdatingElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -106,6 +118,23 @@ export class HUIView extends UpdatingElement {
 
     if (configChanged && !this._layoutElement) {
       this._layoutElement = createViewElement(viewConfig!);
+      this._layoutElement.addEventListener("ll-create-card", () => {
+        showCreateCardDialog(this, {
+          lovelaceConfig: this.lovelace!.config,
+          saveConfig: this.lovelace!.saveConfig,
+          path: [this.index!],
+        });
+      });
+      this._layoutElement.addEventListener("ll-edit-card", (ev) => {
+        showEditCardDialog(this, {
+          lovelaceConfig: this.lovelace!.config,
+          saveConfig: this.lovelace!.saveConfig,
+          path: ev.detail.path,
+        });
+      });
+      this._layoutElement.addEventListener("ll-delete-card", (ev) => {
+        confDeleteCard(this, this.hass!, this.lovelace!, ev.detail.path);
+      });
     }
 
     if (configChanged) {