From 761779440b62ce759bdfc5d62346934ff0955b43 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 2 Dec 2019 14:31:15 +0100
Subject: [PATCH 1/2] Allow automation actions/scripts to be moved up/down

---
 src/panels/config/js/script/action_row.tsx | 14 ++++++++++++--
 src/panels/config/js/script/index.tsx      | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/js/script/action_row.tsx b/src/panels/config/js/script/action_row.tsx
index 0073d11e38a9..31b4397b4421 100644
--- a/src/panels/config/js/script/action_row.tsx
+++ b/src/panels/config/js/script/action_row.tsx
@@ -9,8 +9,10 @@ import ActionEdit from "./action_edit";
 
 export default class Action extends Component<any> {
   public state: { yamlMode: boolean };
-  constructor() {
-    super();
+  private moveUp: (event: Event) => void;
+  private moveDown: (event: Event) => void;
+  constructor(props) {
+    super(props);
 
     this.state = {
       yamlMode: false,
@@ -18,6 +20,8 @@ export default class Action extends Component<any> {
 
     this.onDelete = this.onDelete.bind(this);
     this.switchYamlMode = this.switchYamlMode.bind(this);
+    this.moveUp = props.moveUp.bind(this, props.index);
+    this.moveDown = props.moveDown.bind(this, props.index);
   }
 
   public onDelete() {
@@ -38,6 +42,12 @@ export default class Action extends Component<any> {
       <ha-card>
         <div class="card-content">
           <div class="card-menu" style="z-index: 3">
+            {props.index !== 0 && (
+              <paper-icon-button icon="hass:arrow-up" onTap={this.moveUp} />
+            )}
+            {props.index !== props.length - 1 && (
+              <paper-icon-button icon="hass:arrow-down" onTap={this.moveDown} />
+            )}
             <paper-menu-button
               no-animations
               horizontal-align="right"
diff --git a/src/panels/config/js/script/index.tsx b/src/panels/config/js/script/index.tsx
index 8d1eb75ffcc1..7b91d8dd0911 100644
--- a/src/panels/config/js/script/index.tsx
+++ b/src/panels/config/js/script/index.tsx
@@ -10,6 +10,8 @@ export default class Script extends Component<any> {
 
     this.addAction = this.addAction.bind(this);
     this.actionChanged = this.actionChanged.bind(this);
+    this.moveUp = this.moveUp.bind(this);
+    this.moveDown = this.moveDown.bind(this);
   }
 
   public addAction() {
@@ -32,14 +34,31 @@ export default class Script extends Component<any> {
     this.props.onChange(script);
   }
 
+  public moveUp(index) {
+    const script = this.props.script.concat();
+    const action = script.splice(index, 1)[0];
+    script.splice(index - 1, 0, action);
+    this.props.onChange(script);
+  }
+
+  public moveDown(index) {
+    const script = this.props.script.concat();
+    const action = script.splice(index, 1)[0];
+    script.splice(index + 1, 0, action);
+    this.props.onChange(script);
+  }
+
   public render({ script, hass, localize }) {
     return (
       <div class="script">
         {script.map((act, idx) => (
           <ActionRow
             index={idx}
+            length={script.length}
             action={act}
             onChange={this.actionChanged}
+            moveUp={this.moveUp}
+            moveDown={this.moveDown}
             hass={hass}
             localize={localize}
           />

From f2abfae0638f3fc10c2545960038879c01594287 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 2 Dec 2019 14:36:42 +0100
Subject: [PATCH 2/2] Update index.tsx

---
 src/panels/config/js/script/index.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/panels/config/js/script/index.tsx b/src/panels/config/js/script/index.tsx
index 7b91d8dd0911..a9b0aa7b1150 100644
--- a/src/panels/config/js/script/index.tsx
+++ b/src/panels/config/js/script/index.tsx
@@ -34,18 +34,12 @@ export default class Script extends Component<any> {
     this.props.onChange(script);
   }
 
-  public moveUp(index) {
-    const script = this.props.script.concat();
-    const action = script.splice(index, 1)[0];
-    script.splice(index - 1, 0, action);
-    this.props.onChange(script);
+  public moveUp(index: number) {
+    this.move(index, index - 1);
   }
 
-  public moveDown(index) {
-    const script = this.props.script.concat();
-    const action = script.splice(index, 1)[0];
-    script.splice(index + 1, 0, action);
-    this.props.onChange(script);
+  public moveDown(index: number) {
+    this.move(index, index + 1);
   }
 
   public render({ script, hass, localize }) {
@@ -73,4 +67,11 @@ export default class Script extends Component<any> {
       </div>
     );
   }
+
+  private move(index: number, newIndex: number) {
+    const script = this.props.script.concat();
+    const action = script.splice(index, 1)[0];
+    script.splice(newIndex, 0, action);
+    this.props.onChange(script);
+  }
 }