Extract saving badge config from badge editor

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,
+      saveBadgeConfig: async (config) => {
-      path: containerPath,
+        const newConfig = addBadge(
+          this.lovelace!.config,
+          containerPath,
+          config
+        );
+        await this.lovelace!.saveConfig(newConfig);
+      },
       badgeConfig,
+      isNew: true,
     });
   }
 

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,
+      lovelaceConfig,
-      saveConfig: this._params!.saveConfig,
+      saveBadgeConfig: async (newBadgeConfig) => {
-      path: this._params!.path,
+        const newConfig = addBadge(
+          lovelaceConfig,
+          containerPath,
+          newBadgeConfig
+        );
+        await saveConfig(newConfig);
+      },
       badgeConfig: config,
+      isNew: true,
     });
 
     this.closeDialog();

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.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;
+    try {
-    await this._params!.saveConfig(
+      await this._params!.saveBadgeConfig(this._badgeConfig!);
-      "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();
+    } catch (err: any) {
+      showToast(this, {
+        message: err.message,
+      });
+      this._saving = false;
+    }
   }
 
   static get styles(): CSSResultGroup {

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;
+  saveBadgeConfig: (badge: LovelaceBadgeConfig) => void;
-  path: LovelaceContainerPath;
-} & (
-  | {
-      badgeIndex: number;
-    }
-  | {
   badgeConfig: LovelaceBadgeConfig;
-    }
+  isNew?: boolean;
-);
+}
 
 export const importEditBadgeDialog = () => import("./hui-dialog-edit-badge");
 

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,
+        saveBadgeConfig: async (newBadgeConfig) => {
-        path: [this.index],
+          const newConfig = replaceCard(
-        badgeIndex: cardIndex,
+            this.lovelace!.config,
+            [this.index, cardIndex],
+            newBadgeConfig
+          );
+          await this.lovelace.saveConfig(newConfig);
+        },
+        badgeConfig,
       });
     });
     this._layoutElement.addEventListener("ll-delete-badge", async (ev) => {