Allow automation actions/scripts to be moved up/down (#4308)

* Allow automation actions/scripts to be moved up/down

* Update index.tsx

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() {
+  private moveUp: (event: Event) => void;
-    super();
+  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"

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,25 @@ export default class Script extends Component<any> {
     this.props.onChange(script);
   }
 
+  public moveUp(index: number) {
+    this.move(index, index - 1);
+  }
+
+  public moveDown(index: number) {
+    this.move(index, index + 1);
+  }
+
   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}
           />
@@ -54,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);
+  }
 }