From 2ae70e9b548528d7a0f43a2a5fc27d610974015d Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 24 Mar 2025 18:57:10 +0100 Subject: [PATCH] Improve strategy editor (#24757) * Add cancel and delete button * Implement delete * Reset gui mode when closing --- .../dialog-dashboard-strategy-editor.ts | 93 ++++++++++++------- .../show-dialog-dashboard-strategy-editor.ts | 2 +- src/panels/lovelace/hui-root.ts | 29 +++++- 3 files changed, 85 insertions(+), 39 deletions(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index 92d192ee25..0937d6c883 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -1,8 +1,8 @@ import { mdiAccountHardHat, mdiClose, - mdiCodeBraces, mdiDotsVertical, + mdiPlaylistEdit, } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -19,11 +19,11 @@ import type { LovelaceStrategyConfig } from "../../../../../data/lovelace/config import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { showSaveSuccessToast } from "../../../../../util/toast-saved-success"; -import "../hui-dashboard-strategy-element-editor"; -import type { HuiDashboardStrategyElementEditor } from "../hui-dashboard-strategy-element-editor"; +import { cleanLegacyStrategyConfig } from "../../../strategies/legacy-strategy"; import type { ConfigChangedEvent } from "../../hui-element-editor"; import type { GUIModeChangedEvent } from "../../types"; -import { cleanLegacyStrategyConfig } from "../../../strategies/legacy-strategy"; +import "../hui-dashboard-strategy-element-editor"; +import type { HuiDashboardStrategyElementEditor } from "../hui-dashboard-strategy-element-editor"; import type { DashboardStrategyEditorDialogParams } from "./show-dialog-dashboard-strategy-editor"; @customElement("dialog-dashboard-strategy-editor") @@ -52,6 +52,8 @@ class DialogDashboardStrategyEditor extends LitElement { public closeDialog(): void { this._params = undefined; this._strategyConfig = undefined; + this._guiModeAvailable = true; + this._GUImode = true; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -67,10 +69,6 @@ class DialogDashboardStrategyEditor extends LitElement { this._guiModeAvailable = ev.detail.guiModeAvailable; } - private _toggleMode(): void { - this._strategyEditorEl?.toggleMode(); - } - private _opened() { this._strategyEditorEl?.focusYamlEditor(); } @@ -84,6 +82,39 @@ class DialogDashboardStrategyEditor extends LitElement { this.closeDialog(); } + private async _delete(ev) { + ev.stopPropagation(); + if (await this._params!.deleteDashboard()) { + this.closeDialog(); + } + } + + private _cancel(ev): void { + ev.stopPropagation(); + this.closeDialog(); + } + + private _handleAction(ev) { + ev.stopPropagation(); + switch (ev.detail.index) { + case 0: + this._toggleMode(); + break; + case 1: + this._takeControl(); + break; + } + } + + private _toggleMode(): void { + this._strategyEditorEl?.toggleMode(); + } + + private _takeControl() { + this._params!.takeControl(); + this.closeDialog(); + } + protected render() { if (!this._params || !this._strategyConfig) { return nothing; @@ -118,6 +149,7 @@ class DialogDashboardStrategyEditor extends LitElement { slot="actionItems" @closed=${stopPropagation} fixed + @action=${this._handleAction} > - ${this.hass.localize( - "ui.panel.lovelace.editor.strategy-editor.raw_configuration_editor" + ${this.hass!.localize( + `ui.panel.lovelace.editor.edit_view.edit_${!this._GUImode ? "ui" : "yaml"}` )} - + - + ${this.hass.localize( "ui.panel.lovelace.editor.strategy-editor.take_control" )} @@ -155,17 +190,11 @@ class DialogDashboardStrategyEditor extends LitElement { > - - ${this.hass!.localize( - !this._strategyEditorEl || this._GUImode - ? "ui.panel.lovelace.editor.strategy-editor.show_code_editor" - : "ui.panel.lovelace.editor.strategy-editor.show_visual_editor" - )} + + ${this.hass!.localize("ui.common.delete")} + + + ${this.hass!.localize("ui.common.cancel")} ${this.hass!.localize("ui.common.save")} @@ -174,18 +203,6 @@ class DialogDashboardStrategyEditor extends LitElement { `; } - private _takeControl(ev) { - ev.stopPropagation(); - this._params!.takeControl(); - this.closeDialog(); - } - - private _showRawConfigEditor(ev) { - ev.stopPropagation(); - this._params!.showRawConfigEditor(); - this.closeDialog(); - } - static get styles(): CSSResultGroup { return [ haStyleDialog, @@ -210,6 +227,10 @@ class DialogDashboardStrategyEditor extends LitElement { --dialog-content-padding: 8px; } } + + .danger { + --mdc-theme-primary: var(--error-color); + } `, ]; } diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/show-dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/show-dialog-dashboard-strategy-editor.ts index 6e8749a431..b2fd7a761d 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/show-dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/show-dialog-dashboard-strategy-editor.ts @@ -5,7 +5,7 @@ export interface DashboardStrategyEditorDialogParams { config: LovelaceDashboardStrategyConfig; saveConfig: (config: LovelaceDashboardStrategyConfig) => void; takeControl: () => void; - showRawConfigEditor: () => void; + deleteDashboard: () => Promise; } export const loadDashboardStrategyEditorDialog = () => diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 8a56f7a9cf..5b39a0f8e8 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -763,6 +763,12 @@ class HUIRoot extends LitElement { }); return; } + + const urlPath = this.route?.prefix.slice(1); + await this.hass.loadFragmentTranslation("config"); + const dashboards = await fetchDashboards(this.hass); + const dashboard = dashboards.find((d) => d.url_path === urlPath); + showDashboardStrategyEditorDialog(this, { config: this.lovelace!.rawConfig, saveConfig: this.lovelace!.saveConfig, @@ -773,8 +779,27 @@ class HUIRoot extends LitElement { narrow: this.narrow!, }); }, - showRawConfigEditor: () => { - this.lovelace!.enableFullEditMode(); + deleteDashboard: async () => { + const confirm = await showConfirmationDialog(this, { + title: this.hass!.localize( + "ui.panel.config.lovelace.dashboards.confirm_delete_title", + { dashboard_title: dashboard!.title } + ), + text: this.hass!.localize( + "ui.panel.config.lovelace.dashboards.confirm_delete_text" + ), + confirmText: this.hass!.localize("ui.common.delete"), + destructive: true, + }); + if (!confirm) { + return false; + } + try { + await deleteDashboard(this.hass!, dashboard!.id); + return true; + } catch (_err: any) { + return false; + } }, }); return;