Drag n drop reordering of workflow actions

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}}
 

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()
+  }
 }