Skip to content

Commit

Permalink
Automatically add section to empty section view and improve delete wo…
Browse files Browse the repository at this point in the history 
…rding (#19892)

* Automatically add section to empty section view and improve delete wording

* Update delete dialog

* Update delete dialog
  • Loading branch information
@piitaya
piitaya authored Feb 28, 2024
1 parent 0892ed1 commit f4c932e
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 70 deletions.
84 changes: 46 additions & 38 deletions src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
css,
html,
nothing,
} from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { navigate } from "../../../../common/navigate";
import { deepEqual } from "../../../../common/util/deep-equal";
Expand All @@ -23,6 +23,11 @@ import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
import {
LovelaceViewConfig,
isStrategyView,
} from "../../../../data/lovelace/config/view";
import {
showAlertDialog,
showConfirmationDialog,
Expand All @@ -33,6 +38,7 @@ import "../../components/hui-entity-editor";
import {
DEFAULT_VIEW_LAYOUT,
PANEL_VIEW_LAYOUT,
SECTION_VIEW_LAYOUT,
VIEWS_NO_BADGE_SUPPORT,
} from "../../views/const";
import { addView, deleteView, replaceView } from "../config-util";
Expand All @@ -46,12 +52,6 @@ import {
import "./hui-view-editor";
import "./hui-view-visibility-editor";
import { EditViewDialogParams } from "./show-edit-view-dialog";
import {
LovelaceViewConfig,
isStrategyView,
} from "../../../../data/lovelace/config/view";
import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";

@customElement("hui-dialog-edit-view")
export class HuiDialogEditView extends LitElement {
Expand All @@ -63,8 +63,6 @@ export class HuiDialogEditView extends LitElement {

@state() private _badges?: LovelaceBadgeConfig[];

@state() private _cards?: LovelaceCardConfig[];

@state() private _saving = false;

@state() private _curTab?: string;
Expand Down Expand Up @@ -102,7 +100,6 @@ export class HuiDialogEditView extends LitElement {
if (this._params.viewIndex === undefined) {
this._config = {};
this._badges = [];
this._cards = [];
this._dirty = false;
return;
}
Expand All @@ -112,13 +109,11 @@ export class HuiDialogEditView extends LitElement {
const { strategy, ...viewConfig } = view;
this._config = viewConfig;
this._badges = [];
this._cards = [];
return;
}
const { cards, badges, ...viewConfig } = view;
const { badges, ...viewConfig } = view;
this._config = viewConfig;
this._badges = badges ? processEditorEntities(badges) : [];
this._cards = cards;
}

public closeDialog(): void {
Expand Down Expand Up @@ -181,7 +176,7 @@ export class HuiDialogEditView extends LitElement {
)}
</ha-alert>
`
: ""}
: nothing}
<div class="preview-badges">
${this._badges.map(
(badgeConfig) => html`
Expand All @@ -193,7 +188,7 @@ export class HuiDialogEditView extends LitElement {
)}
</div>
`
: ""}
: nothing}
<hui-entity-editor
.hass=${this.hass}
.entities=${this._badges}
Expand Down Expand Up @@ -297,7 +292,7 @@ export class HuiDialogEditView extends LitElement {
)}</paper-tab
>
</paper-tabs>`
: ""}
: nothing}
</ha-dialog-header>
${content}
${this._params.viewIndex !== undefined
Expand All @@ -312,7 +307,7 @@ export class HuiDialogEditView extends LitElement {
)}
</mwc-button>
`
: ""}
: nothing}
<mwc-button
slot="primaryAction"
?disabled=${!this._config || this._saving || !this._dirty}
Expand All @@ -324,7 +319,7 @@ export class HuiDialogEditView extends LitElement {
size="small"
aria-label="Saving"
></ha-circular-progress>`
: ""}
: nothing}
${this.hass!.localize("ui.common.save")}</mwc-button
>
</ha-dialog>
Expand Down Expand Up @@ -361,24 +356,28 @@ export class HuiDialogEditView extends LitElement {
}
}

private _deleteConfirm(): void {
showConfirmationDialog(this, {
title: this.hass!.localize(
`ui.panel.lovelace.views.confirm_delete${
this._cards?.length ? `_existing_cards` : ""
}`
),
private async _deleteConfirm() {
const type = this._config?.sections?.length
? "sections"
: this._config?.cards?.length
? "cards"
: "only";

const named = this._config?.title ? "named" : "unnamed";

const confirm = await showConfirmationDialog(this, {
title: this.hass!.localize("ui.panel.lovelace.views.delete_title"),
text: this.hass!.localize(
`ui.panel.lovelace.views.confirm_delete${
this._cards?.length ? "_existing_cards" : ""
}_text`,
{
name: this._config?.title || "Unnamed view",
number: this._cards?.length || 0,
}
`ui.panel.lovelace.views.delete_${named}_view_${type}`,
{ name: this._config?.title }
),
confirm: () => this._delete(),
confirmText: this.hass!.localize("ui.common.delete"),
destructive: true,
});

if (!confirm) return;

this._delete();
}

private _handleTabSelected(ev: CustomEvent): void {
Expand All @@ -402,9 +401,18 @@ export class HuiDialogEditView extends LitElement {
const viewConf: LovelaceViewConfig = {
...this._config,
badges: this._badges,
cards: this._cards,
};

if (viewConf.type === SECTION_VIEW_LAYOUT && !viewConf.sections?.length) {
viewConf.sections = [{ cards: [] }];
} else if (!viewConf.cards?.length) {
viewConf.cards = [];
}

if (!viewConf.badges?.length) {
delete viewConf.badges;
}

const lovelace = this._params.lovelace!;

try {
Expand Down Expand Up @@ -469,7 +477,7 @@ export class HuiDialogEditView extends LitElement {
if (!ev.detail.isValid) {
return;
}
const { badges = [], ...config } = ev.detail.value;
const { badges, ...config } = ev.detail.value;
this._config = config;
this._badges = badges;
this._dirty = true;
Expand Down
31 changes: 7 additions & 24 deletions src/panels/lovelace/views/hui-sections-view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,38 +180,21 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
path
) as LovelaceRawSectionConfig;

const title = section.title;
const title = section.title?.trim();
const cardCount = section.cards?.length;

if (title || cardCount) {
const sectionName = title?.trim()
? this.hass.localize(
"ui.panel.lovelace.editor.delete_section.named_section",
{ name: title }
)
: this.hass.localize(
"ui.panel.lovelace.editor.delete_section.unnamed_section"
);

const content = cardCount
? this.hass.localize(
"ui.panel.lovelace.editor.delete_section.text_section_and_cards",
{
section: sectionName,
}
)
: this.hass.localize(
"ui.panel.lovelace.editor.delete_section.text_section_only",
{
section: sectionName,
}
);
const named = title ? "named" : "unnamed";
const type = cardCount ? "cards" : "only";

const confirm = await showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.lovelace.editor.delete_section.title"
),
text: content,
text: this.hass.localize(
`ui.panel.lovelace.editor.delete_section.text_${named}_section_${type}`,
{ name: title }
),
confirmText: this.hass.localize("ui.common.delete"),
destructive: true,
});
Expand Down
19 changes: 11 additions & 8 deletions src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5026,10 +5026,13 @@
"saving_failed": "Saving dashboard configuration failed."
},
"views": {
"confirm_delete": "Delete view?",
"confirm_delete_text": "Are you sure you want to delete your ''{name}'' view?",
"confirm_delete_existing_cards": "Deleting this view will also remove the cards",
"confirm_delete_existing_cards_text": "Are you sure you want to delete your ''{name}'' view? The view contains {number} cards that will be deleted. This action cannot be undone."
"delete_title": "Delete view",
"delete_named_view_only": "''{name}'' view will be deleted.",
"delete_unnamed_view_only": "This view will be deleted.",
"delete_named_view_cards": "''{name}'' view and all its cards will be deleted.",
"delete_unnamed_view_cards": "This view and all its cards will be deleted.",
"delete_named_view_sections": "''{name}'' view and all its sections will be deleted.",
"delete_unnamed_view_sections": "This view and all its sections will be deleted."
},
"menu": {
"configure_ui": "Edit dashboard",
Expand Down Expand Up @@ -5162,10 +5165,10 @@
},
"delete_section": {
"title": "Delete section",
"named_section": "\"{name}\" section",
"unnamed_section": "This section",
"text_section_only": "{section} will be deleted.",
"text_section_and_cards": "{section} and all its cards will be deleted."
"text_named_section_only": "''{name}'' section will be deleted.",
"text_unnamed_section_only": "This section will be deleted.",
"text_named_section_cards": "''{name}'' section and all its cards will be deleted.",
"text_unnamed_section_cards": "This section and all its cards will be deleted."
},
"edit_section_title": {
"title": "Edit name",
Expand Down

0 comments on commit f4c932e

Please sign in to comment.