Handle sequences under parallel actions

home-assistant · Oct 30, 2023 · 1c4958a · 1c4958a
1 parent 113eb5b
commit 1c4958a
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 16 deletions.
diff --git a/src/data/script.ts b/src/data/script.ts
@@ -242,8 +242,12 @@ export interface StopAction extends BaseAction {
   error?: boolean;
 }
 
+export interface SequenceAction extends BaseAction {
+  sequence: ManualScriptConfig | Action | (ManualScriptConfig | Action)[];
+}
+
 export interface ParallelAction extends BaseAction {
-  parallel: ManualScriptConfig | Action | (ManualScriptConfig | Action)[];
+  parallel: SequenceAction | SequenceAction[];
 }
 
 interface UnknownAction extends BaseAction {

diff --git a/src/panels/config/automation/action/types/ha-automation-action-parallel.ts b/src/panels/config/automation/action/types/ha-automation-action-parallel.ts
@@ -1,12 +1,14 @@
-import { CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { mdiDelete, mdiPlus } from "@mdi/js";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import { Action, ParallelAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
+import { ensureArray } from "../../../../../common/array/ensure-array";
 
 @customElement("ha-automation-action-parallel")
 export class HaParallelAction extends LitElement implements ActionElement {
@@ -20,38 +22,122 @@ export class HaParallelAction extends LitElement implements ActionElement {
 
   public static get defaultConfig() {
     return {
-      parallel: [],
+      parallel: [{ sequence: [] }],
     };
   }
 
   protected render() {
     const action = this.action;
 
+    action.parallel = (action.parallel ? ensureArray(action.parallel) : []).map(
+      (sequenceAction) =>
+        sequenceAction.sequence
+          ? sequenceAction
+          : { sequence: [sequenceAction] }
+    );
+
     return html`
-      <ha-automation-action
-        nested
-        .actions=${action.parallel}
-        .reOrderMode=${this.reOrderMode}
+      ${action.parallel.map(
+        (sequence, idx) =>
+          html`<ha-card>
+            <ha-icon-button
+              .idx=${idx}
+              .disabled=${this.disabled}
+              @click=${this._removeSequence}
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.parallel.remove_sequence"
+              )}
+              .path=${mdiDelete}
+            ></ha-icon-button>
+            <div class="card-content">
+              <h2>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.type.parallel.sequence"
+                )}:
+              </h2>
+              <ha-automation-action
+                nested
+                .actions=${ensureArray(sequence.sequence) || []}
+                .reOrderMode=${this.reOrderMode}
+                .disabled=${this.disabled}
+                @value-changed=${this._actionChanged}
+                .hass=${this.hass}
+                .idx=${idx}
+              ></ha-automation-action>
+            </div>
+          </ha-card>`
+      )}
+      <mwc-button
+        outlined
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.parallel.add_sequence"
+        )}
         .disabled=${this.disabled}
-        @value-changed=${this._actionsChanged}
-        .hass=${this.hass}
-      ></ha-automation-action>
+        @click=${this._addSequence}
+      >
+        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+      </mwc-button>
     `;
   }
 
-  private _actionsChanged(ev: CustomEvent) {
+  private _actionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = ev.detail.value as Action[];
+    const index = (ev.target as any).idx;
+    const parallel = this.action.parallel
+      ? [...ensureArray(this.action.parallel)]
+      : [];
+    parallel[index].sequence = value;
+    fireEvent(this, "value-changed", {
+      value: { ...this.action, parallel },
+    });
+  }
+
+  private _addSequence() {
+    const parallel = this.action.parallel
+      ? [...ensureArray(this.action.parallel)]
+      : [];
+    parallel.push({ sequence: [] });
+    fireEvent(this, "value-changed", {
+      value: { ...this.action, parallel },
+    });
+  }
+
+  private _removeSequence(ev: CustomEvent) {
+    const index = (ev.currentTarget as any).idx;
+    const parallel = this.action.parallel
+      ? [...ensureArray(this.action.parallel)]
+      : [];
+    parallel.splice(index, 1);
     fireEvent(this, "value-changed", {
-      value: {
-        ...this.action,
-        parallel: value,
-      },
+      value: { ...this.action, parallel },
     });
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        ha-card {
+          margin: 16px 0;
+        }
+        .add-card mwc-button {
+          display: block;
+          text-align: center;
+        }
+        ha-icon-button {
+          position: absolute;
+          right: 0;
+          padding: 4px;
+        }
+        ha-svg-icon {
+          height: 20px;
+        }
+        .link-button-row {
+          padding: 14px;
+        }
+      `,
+    ];
   }
 }
 

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -2879,6 +2879,9 @@
                 },
                 "parallel": {
                   "label": "Run in parallel",
+                  "add_sequence": "Add parallel actions",
+                  "remove_sequence": "Remove actions",
+                  "sequence": "Actions",
                   "description": {
                     "full": "Run {number} {number, plural,\n one {action}\n other {actions}\n} in parallel"
                   }