From f387d315cd1cd023cff6c4d680fde6ef8cda7fc6 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 26 Dec 2023 23:17:37 -0800
Subject: [PATCH] Drag n drop reordering of workflow actions

---
 .../workflow-edit-dialog.component.html             |  4 ++--
 .../workflow-edit-dialog.component.ts               | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
index 53eeb77f1..195d81c5a 100644
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
@@ -92,9 +92,9 @@
                   <ng-container i18n>Add Action</ng-container>
                 </button>
               </div>
-              <div ngbAccordion [closeOthers]="true">
+              <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
                 @for (action of object.actions; track action; let i = $index){
-                  <div ngbAccordionItem [formGroup]="actionFields.controls[i]">
+                  <div ngbAccordionItem cdkDrag [formGroup]="actionFields.controls[i]">
                     <div ngbAccordionHeader>
                       <button ngbAccordionButton><ng-container i18n>Action</ng-container> {{i + 1}}
 
diff --git a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
index 53a4eeffb..1f07532ba 100644
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
@@ -21,6 +21,8 @@ import {
   DocumentSource,
   WorkflowTriggerType,
 } from 'src/app/data/workflow-trigger'
+import { WorkflowAction } from 'src/app/data/workflow-action'
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
 
 export const DOCUMENT_SOURCE_OPTIONS = [
   {
@@ -239,4 +241,15 @@ export class WorkflowEditDialogComponent
     this.object.actions.splice(index, 1)
     this.updateTriggerActionFields()
   }
+
+  onActionDrop(event: CdkDragDrop<WorkflowAction[]>) {
+    moveItemInArray(
+      this.object.actions,
+      event.previousIndex,
+      event.currentIndex
+    )
+    // removing id will effectively re-create the actions in this order
+    this.object.actions.forEach((a) => (a.id = null))
+    this.updateTriggerActionFields()
+  }
 }