mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Make action-choose options collapsible (#17239)
* Make action-choose options collapsible * padding changes
This commit is contained in:
karwosts
GitHub
parent
5e197334f6
commit
7546d1950e
@ -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`<ha-card>
|
||||
<ha-icon-button
|
||||
.idx=${idx}
|
||||
.disabled=${this.disabled}
|
||||
@click=${this._removeOption}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.remove_option"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
<div class="card-content">
|
||||
<h2>
|
||||
<ha-expansion-panel
|
||||
leftChevron
|
||||
@expanded-changed=${this._expandedChanged}
|
||||
>
|
||||
<h3 slot="header">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.option",
|
||||
"number",
|
||||
idx + 1
|
||||
)}:
|
||||
</h2>
|
||||
<h3>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.conditions"
|
||||
)}:
|
||||
${this._getDescription(option, idx)}
|
||||
</h3>
|
||||
<ha-automation-condition
|
||||
nested
|
||||
.conditions=${ensureArray<string | Condition>(option.conditions)}
|
||||
.reOrderMode=${this.reOrderMode}
|
||||
.disabled=${this.disabled}
|
||||
.hass=${this.hass}
|
||||
|
||||
<ha-icon-button
|
||||
slot="icons"
|
||||
.idx=${idx}
|
||||
@value-changed=${this._conditionChanged}
|
||||
></ha-automation-condition>
|
||||
<h3>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.sequence"
|
||||
)}:
|
||||
</h3>
|
||||
<ha-automation-action
|
||||
nested
|
||||
.actions=${ensureArray(option.sequence) || []}
|
||||
.reOrderMode=${this.reOrderMode}
|
||||
.disabled=${this.disabled}
|
||||
.hass=${this.hass}
|
||||
.idx=${idx}
|
||||
@value-changed=${this._actionChanged}
|
||||
></ha-automation-action>
|
||||
</div>
|
||||
@click=${this._removeOption}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.remove_option"
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
></ha-icon-button>
|
||||
<div class="card-content">
|
||||
<h4>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.conditions"
|
||||
)}:
|
||||
</h4>
|
||||
<ha-automation-condition
|
||||
nested
|
||||
.conditions=${ensureArray<string | Condition>(
|
||||
option.conditions
|
||||
)}
|
||||
.reOrderMode=${this.reOrderMode}
|
||||
.disabled=${this.disabled}
|
||||
.hass=${this.hass}
|
||||
.idx=${idx}
|
||||
@value-changed=${this._conditionChanged}
|
||||
></ha-automation-condition>
|
||||
<h4>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.type.choose.sequence"
|
||||
)}:
|
||||
</h4>
|
||||
<ha-automation-action
|
||||
nested
|
||||
.actions=${ensureArray(option.sequence) || []}
|
||||
.reOrderMode=${this.reOrderMode}
|
||||
.disabled=${this.disabled}
|
||||
.hass=${this.hass}
|
||||
.idx=${idx}
|
||||
@value-changed=${this._actionChanged}
|
||||
></ha-automation-action>
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
</ha-card>`
|
||||
)}
|
||||
<ha-button
|
||||
@ -188,25 +275,36 @@ export class HaChooseAction extends LitElement implements ActionElement {
|
||||
haStyle,
|
||||
css`
|
||||
ha-card {
|
||||
margin: 16px 0;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
.add-card mwc-button {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
ha-expansion-panel {
|
||||
--expansion-panel-summary-padding: 0 0 0 8px;
|
||||
--expansion-panel-content-padding: 0;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
ha-icon-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 0;
|
||||
direction: var(--direction);
|
||||
padding: 4px;
|
||||
}
|
||||
ha-svg-icon {
|
||||
height: 20px;
|
||||
}
|
||||
.link-button-row {
|
||||
padding: 14px;
|
||||
padding: 14px 14px 0 14px;
|
||||
}
|
||||
.card-content {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -2703,7 +2703,9 @@
|
||||
"option": "Option {number}",
|
||||
"add_option": "Add option",
|
||||
"remove_option": "Remove option",
|
||||
"option_description_additional": " {numberOfAdditionalConditions, plural,\n one {and 1 more condition}\n other {and {numberOfAdditionalConditions} more conditions}}",
|
||||
"conditions": "Conditions",
|
||||
"no_conditions": "[%key:ui::panel::config::devices::automation::conditions::no_conditions%]",
|
||||
"sequence": "Actions",
|
||||
"description": {
|
||||
"full": "Choose between {number} {number, plural,\n one {action}\n other{actions}\n}",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user