diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index a74acde408..a921a130d7 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/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! }); } } diff --git a/src/panels/lovelace/editor/card-editor/show-create-card-dialog.ts b/src/panels/lovelace/editor/card-editor/show-create-card-dialog.ts index 9ce58c1251..2aeec60aa0 100644 --- a/src/panels/lovelace/editor/card-editor/show-create-card-dialog.ts +++ b/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, diff --git a/src/panels/lovelace/editor/card-editor/show-delete-card-dialog.ts b/src/panels/lovelace/editor/card-editor/show-delete-card-dialog.ts index 53fe8b1368..47395bfd95 100644 --- a/src/panels/lovelace/editor/card-editor/show-delete-card-dialog.ts +++ b/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, diff --git a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts b/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts index 4f874a5d78..0636650ba0 100644 --- a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts +++ b/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, diff --git a/src/panels/lovelace/views/default-view-editable.ts b/src/panels/lovelace/views/default-view-editable.ts index d32e0774b4..b839edef98 100644 --- a/src/panels/lovelace/views/default-view-editable.ts +++ b/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(); diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index b123d3060a..42914224af 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/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() { diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 39b2cb3d44..0a56d3ff7f 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/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) {