From 43374ef79838b025a7f2701d19b4e5fb4e056833 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 25 Feb 2025 10:30:42 +0100 Subject: [PATCH] Extract saving badge config from badge editor --- .../components/hui-badge-edit-mode.ts | 13 +++- .../badge-editor/hui-dialog-create-badge.ts | 18 +++++- .../badge-editor/hui-dialog-edit-badge.ts | 59 +++++-------------- .../badge-editor/show-edit-badge-dialog.ts | 17 ++---- src/panels/lovelace/views/hui-view.ts | 18 +++++- 5 files changed, 60 insertions(+), 65 deletions(-) diff --git a/src/panels/lovelace/components/hui-badge-edit-mode.ts b/src/panels/lovelace/components/hui-badge-edit-mode.ts index c765b3e8a5..57cff5a971 100644 --- a/src/panels/lovelace/components/hui-badge-edit-mode.ts +++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts @@ -23,6 +23,7 @@ import type { LovelaceCardConfig } from "../../../data/lovelace/config/card"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { showEditBadgeDialog } from "../editor/badge-editor/show-edit-badge-dialog"; +import { addBadge } from "../editor/config-util"; import type { LovelaceCardPath } from "../editor/lovelace-path"; import { findLovelaceItems, @@ -221,11 +222,19 @@ export class HuiBadgeEditMode extends LitElement { const { cardIndex } = parseLovelaceCardPath(this.path!); const containerPath = getLovelaceContainerPath(this.path!); const badgeConfig = ensureBadgeConfig(this._badges![cardIndex]); + showEditBadgeDialog(this, { lovelaceConfig: this.lovelace!.config, - saveConfig: this.lovelace!.saveConfig, - path: containerPath, + saveBadgeConfig: async (config) => { + const newConfig = addBadge( + this.lovelace!.config, + containerPath, + config + ); + await this.lovelace!.saveConfig(newConfig); + }, badgeConfig, + isNew: true, }); } diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts index 58d37b40ed..5dfc5408c0 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts @@ -24,6 +24,7 @@ import "./hui-badge-picker"; import type { CreateBadgeDialogParams } from "./show-create-badge-dialog"; import { showEditBadgeDialog } from "./show-edit-badge-dialog"; import { showSuggestBadgeDialog } from "./show-suggest-badge-dialog"; +import { addBadge } from "../config-util"; declare global { interface HASSDomEvents { @@ -223,11 +224,22 @@ export class HuiCreateDialogBadge } } + const lovelaceConfig = this._params!.lovelaceConfig; + const containerPath = this._params!.path; + const saveConfig = this._params!.saveConfig; + showEditBadgeDialog(this, { - lovelaceConfig: this._params!.lovelaceConfig, - saveConfig: this._params!.saveConfig, - path: this._params!.path, + lovelaceConfig, + saveBadgeConfig: async (newBadgeConfig) => { + const newConfig = addBadge( + lovelaceConfig, + containerPath, + newBadgeConfig + ); + await saveConfig(newConfig); + }, badgeConfig: config, + isNew: true, }); this.closeDialog(); diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index 5b3122fa34..50d9a8c9de 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -11,8 +11,6 @@ import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-icon-button"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; -import { ensureBadgeConfig } from "../../../../data/lovelace/config/badge"; -import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import { getCustomBadgeEntry, isCustomType, @@ -22,13 +20,12 @@ import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog- import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; +import { showToast } from "../../../../util/toast"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; import "../../badges/hui-badge"; import "../../sections/hui-section"; -import { addBadge, replaceBadge } from "../config-util"; import { getBadgeDocumentationURL } from "../get-dashboard-documentation-url"; import type { ConfigChangedEvent } from "../hui-element-editor"; -import { findLovelaceContainer } from "../lovelace-path"; import type { GUIModeChangedEvent } from "../types"; import "./hui-badge-element-editor"; import type { HuiBadgeElementEditor } from "./hui-badge-element-editor"; @@ -58,8 +55,6 @@ export class HuiDialogEditBadge @state() private _badgeConfig?: LovelaceBadgeConfig; - @state() private _containerConfig!: LovelaceViewConfig; - @state() private _saving = false; @state() private _error?: string; @@ -82,24 +77,7 @@ export class HuiDialogEditBadge this._GUImode = true; this._guiModeAvailable = true; - const containerConfig = findLovelaceContainer( - params.lovelaceConfig, - params.path - ); - - if ("strategy" in containerConfig) { - throw new Error("Can't edit strategy"); - } - - this._containerConfig = containerConfig; - - if ("badgeConfig" in params) { - this._badgeConfig = params.badgeConfig; - this._dirty = true; - } else { - const badge = this._containerConfig.badges?.[params.badgeIndex]; - this._badgeConfig = badge != null ? ensureBadgeConfig(badge) : badge; - } + this._badgeConfig = params.badgeConfig; this.large = false; if (this._badgeConfig && !Object.isFrozen(this._badgeConfig)) { @@ -178,13 +156,6 @@ export class HuiDialogEditBadge "ui.panel.lovelace.editor.edit_badge.typed_header", { type: badgeName } ); - } else if (!this._badgeConfig) { - heading = this._containerConfig.title - ? this.hass!.localize( - "ui.panel.lovelace.editor.edit_badge.pick_badge_view_title", - { name: this._containerConfig.title } - ) - : this.hass!.localize("ui.panel.lovelace.editor.edit_badge.pick_badge"); } else { heading = this.hass!.localize( "ui.panel.lovelace.editor.edit_badge.header" @@ -377,20 +348,18 @@ export class HuiDialogEditBadge return; } this._saving = true; - const path = this._params!.path; - await this._params!.saveConfig( - "badgeConfig" in this._params! - ? addBadge(this._params!.lovelaceConfig, path, this._badgeConfig!) - : replaceBadge( - this._params!.lovelaceConfig, - [...path, this._params!.badgeIndex], - this._badgeConfig! - ) - ); - this._saving = false; - this._dirty = false; - showSaveSuccessToast(this, this.hass); - this.closeDialog(); + try { + await this._params!.saveBadgeConfig(this._badgeConfig!); + this._saving = false; + this._dirty = false; + showSaveSuccessToast(this, this.hass); + this.closeDialog(); + } catch (err: any) { + showToast(this, { + message: err.message, + }); + this._saving = false; + } } static get styles(): CSSResultGroup { diff --git a/src/panels/lovelace/editor/badge-editor/show-edit-badge-dialog.ts b/src/panels/lovelace/editor/badge-editor/show-edit-badge-dialog.ts index 4a75b42c26..9ffef7b55b 100644 --- a/src/panels/lovelace/editor/badge-editor/show-edit-badge-dialog.ts +++ b/src/panels/lovelace/editor/badge-editor/show-edit-badge-dialog.ts @@ -1,20 +1,13 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; -import type { LovelaceContainerPath } from "../lovelace-path"; -export type EditBadgeDialogParams = { +export interface EditBadgeDialogParams { lovelaceConfig: LovelaceConfig; - saveConfig: (config: LovelaceConfig) => void; - path: LovelaceContainerPath; -} & ( - | { - badgeIndex: number; - } - | { - badgeConfig: LovelaceBadgeConfig; - } -); + saveBadgeConfig: (badge: LovelaceBadgeConfig) => void; + badgeConfig: LovelaceBadgeConfig; + isNew?: boolean; +} export const importEditBadgeDialog = () => import("./hui-dialog-edit-badge"); diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index f862915c86..b8f5511641 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -302,11 +302,23 @@ export class HUIView extends ReactiveElement { }); this._layoutElement.addEventListener("ll-edit-badge", (ev) => { const { cardIndex } = parseLovelaceCardPath(ev.detail.path); + const viewConfig = this.lovelace!.config.views[this.index]; + if (isStrategyView(viewConfig)) { + return; + } + const badgeConfig = ensureBadgeConfig(viewConfig.badges![cardIndex]); + showEditBadgeDialog(this, { lovelaceConfig: this.lovelace.config, - saveConfig: this.lovelace.saveConfig, - path: [this.index], - badgeIndex: cardIndex, + saveBadgeConfig: async (newBadgeConfig) => { + const newConfig = replaceCard( + this.lovelace!.config, + [this.index, cardIndex], + newBadgeConfig + ); + await this.lovelace.saveConfig(newConfig); + }, + badgeConfig, }); }); this._layoutElement.addEventListener("ll-delete-badge", async (ev) => {