diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts index 879d8d8ca5..2d25f72f39 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts @@ -1,5 +1,6 @@ +import { consume } from "@lit-labs/context"; import { mdiDelete, mdiPlus } from "@mdi/js"; -import { CSSResultGroup, LitElement, css, html } from "lit"; +import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ensureArray } from "../../../../../common/array/ensure-array"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -10,6 +11,9 @@ import { Action, ChooseAction } from "../../../../../data/script"; import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant } from "../../../../../types"; import { ActionElement } from "../ha-automation-action-row"; +import { describeCondition } from "../../../../../data/automation_i18n"; +import { fullEntitiesContext } from "../../../../../data/context"; +import { EntityRegistryEntry } from "../../../../../data/entity_registry"; @customElement("ha-automation-action-choose") export class HaChooseAction extends LitElement implements ActionElement { @@ -23,62 +27,145 @@ export class HaChooseAction extends LitElement implements ActionElement { @state() private _showDefault = false; + @state() private expandedUpdateFlag = false; + + @state() + @consume({ context: fullEntitiesContext, subscribe: true }) + _entityReg!: EntityRegistryEntry[]; + public static get defaultConfig() { return { choose: [{ conditions: [], sequence: [] }] }; } + protected willUpdate(changedProperties: PropertyValues) { + if (!changedProperties.has("action")) { + return; + } + + const oldCnt = + changedProperties.get("action") === undefined || + changedProperties.get("action").choose === undefined + ? 0 + : ensureArray(changedProperties.get("action").choose).length; + const newCnt = this.action.choose + ? ensureArray(this.action.choose).length + : 0; + if (newCnt === oldCnt + 1) { + this.expand(newCnt - 1); + } + } + + private expand(i: number) { + this.updateComplete.then(() => { + this.shadowRoot!.querySelectorAll("ha-expansion-panel")[i].expanded = + true; + this.expandedUpdateFlag = !this.expandedUpdateFlag; + }); + } + + private isExpanded(i: number) { + const nodes = this.shadowRoot!.querySelectorAll("ha-expansion-panel"); + if (nodes[i]) { + return nodes[i].expanded; + } + return false; + } + + private _expandedChanged() { + this.expandedUpdateFlag = !this.expandedUpdateFlag; + } + + private _getDescription(option, idx: number) { + if (this.isExpanded(idx)) { + return ""; + } + if (!option.conditions || option.conditions.length === 0) { + return this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.no_conditions" + ); + } + let str = ""; + if (typeof option.conditions[0] === "string") { + str += option.conditions[0]; + } else { + str += describeCondition( + option.conditions[0], + this.hass, + this._entityReg + ); + } + if (option.conditions.length > 1) { + str += this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.option_description_additional", + "numberOfAdditionalConditions", + option.conditions.length - 1 + ); + } + return str; + } + protected render() { const action = this.action; return html` ${(action.choose ? ensureArray(action.choose) : []).map( (option, idx) => html` - -
-

+ +

${this.hass.localize( "ui.panel.config.automation.editor.actions.type.choose.option", "number", idx + 1 )}: -

-

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.conditions" - )}: + ${this._getDescription(option, idx)}

- (option.conditions)} - .reOrderMode=${this.reOrderMode} - .disabled=${this.disabled} - .hass=${this.hass} + + -

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.type.choose.sequence" - )}: -

- -

+ @click=${this._removeOption} + .label=${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.remove_option" + )} + .path=${mdiDelete} + > +
+

+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.conditions" + )}: +

+ ( + option.conditions + )} + .reOrderMode=${this.reOrderMode} + .disabled=${this.disabled} + .hass=${this.hass} + .idx=${idx} + @value-changed=${this._conditionChanged} + > +

+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.sequence" + )}: +

+ +
+
` )}