Add a destructive confirmation when deleting a picture-elements element (#21541)

This commit is contained in:
karwosts 2024-08-02 03:28:37 -07:00 committed by GitHub
parent 6dc80306e8
commit 5e75f6a6c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 6 deletions

View File

@ -8,6 +8,7 @@ import "../../../components/ha-svg-icon";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "../../../components/ha-select"; import "../../../components/ha-select";
import type { HaSelect } from "../../../components/ha-select"; import type { HaSelect } from "../../../components/ha-select";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import { import {
ConditionalElementConfig, ConditionalElementConfig,
IconElementConfig, IconElementConfig,
@ -77,7 +78,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
` `
: nothing} : nothing}
<ha-icon-button <ha-icon-button
.label=${this.hass!.localize("ui.common.clear")} .label=${this.hass!.localize("ui.common.delete")}
.path=${mdiClose} .path=${mdiClose}
class="remove-icon" class="remove-icon"
.index=${index} .index=${index}
@ -187,11 +188,28 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
private _removeRow(ev: CustomEvent): void { private _removeRow(ev: CustomEvent): void {
const index = (ev.currentTarget as any).index; const index = (ev.currentTarget as any).index;
const newElements = this.elements!.concat(); const element = this.elements?.[index];
if (!element) {
newElements.splice(index, 1); return;
}
fireEvent(this, "elements-changed", { elements: newElements }); showConfirmationDialog(this, {
text: this.hass!.localize(
"ui.panel.lovelace.editor.card.picture-elements.confirm_delete_element",
{
type:
this.hass!.localize(
`ui.panel.lovelace.editor.card.picture-elements.element_types.${element.type}`
) || element.type,
}
),
confirmText: this.hass!.localize("ui.common.delete"),
destructive: true,
confirm: () => {
const newElements = this.elements!.concat();
newElements.splice(index, 1);
fireEvent(this, "elements-changed", { elements: newElements });
},
});
} }
private _editRow(ev: CustomEvent): void { private _editRow(ev: CustomEvent): void {

View File

@ -5990,6 +5990,7 @@
"card_options": "Card Options", "card_options": "Card Options",
"elements": "Elements", "elements": "Elements",
"new_element": "Add new element", "new_element": "Add new element",
"confirm_delete_element": "Are you sure you want to delete the {type} element?",
"dark_mode_image": "Dark mode image path", "dark_mode_image": "Dark mode image path",
"state_filter": "State filter", "state_filter": "State filter",
"dark_mode_filter": "Dark mode state filter", "dark_mode_filter": "Dark mode state filter",