[CSTPER-3782] custom move events handled correctly

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts

@@ -6,7 +6,6 @@ import {
   DynamicFormArrayModel,
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
-  DynamicFormControlEventType,
   DynamicFormControlLayout,
   DynamicFormLayout,
   DynamicFormLayoutService,
@@ -55,16 +54,12 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
     const index = event.currentIndex;
 
     if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
-      const $event = {
-        $event: { previousIndex: prevIndex },
-        context: { index },
-        control: (this.control as any).controls[index],
-        group: this.group,
+      this.onCustomEvent({
+        previousIndex: prevIndex,
+        index,
         model: this.model.groups[index].group[0],
-        type: DynamicFormControlEventType.Change
-      };
-
-      this.onChange($event);
+        control: (this.control as any).controls[index]
+      }, 'move');
     }
   }
 

src/app/shared/form/form.component.html

@@ -9,7 +9,8 @@
       (change)="$event.stopPropagation();"
       (dfBlur)="onBlur($event)"
       (dfChange)="onChange($event)"
-      (dfFocus)="onFocus($event)">
+      (dfFocus)="onFocus($event)"
+      (ngbEvent)="onCustomEvent($event)">
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
         <!--Array with repeatable items-->
         <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index)"

src/app/shared/form/form.component.ts

@@ -70,6 +70,7 @@ export class FormComponent implements OnDestroy, OnInit {
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   /* tslint:enable:no-output-rename */
   @Output() addArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output() removeArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -250,6 +251,10 @@ export class FormComponent implements OnDestroy, OnInit {
     this.blur.emit(event);
   }
 
+  onCustomEvent(event: any) {
+    this.customEvent.emit(event);
+  }
+
   onFocus(event: DynamicFormControlEvent): void {
     this.formService.setTouched(this.formId, this.formModel, event);
     this.focus.emit(event);

src/app/submission/sections/form/section-form-operations.service.ts

@@ -6,7 +6,7 @@ import {
   DYNAMIC_FORM_CONTROL_TYPE_GROUP,
   DynamicFormArrayGroupModel,
   DynamicFormControlEvent,
-  DynamicFormControlModel
+  DynamicFormControlModel, isDynamicFormControlEvent
 } from '@ng-dynamic-forms/core';
 
 import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
@@ -64,6 +64,9 @@ export class SectionFormOperationsService {
       case 'change':
         this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue);
         break;
+      case 'move':
+        this.dispatchOperationsFromMoveEvent(pathCombiner, event);
+        break;
       default:
         break;
     }
@@ -73,20 +76,29 @@ export class SectionFormOperationsService {
    * Return index if specified field is part of fields array
    *
    * @param event
-   *    the [[DynamicFormControlEvent]] for the specified operation
+   *    the [[DynamicFormControlEvent]] | CustomEvent for the specified operation
    * @return number
    *    the array index is part of array, zero otherwise
    */
-  public getArrayIndexFromEvent(event: DynamicFormControlEvent): number {
+  public getArrayIndexFromEvent(event: DynamicFormControlEvent | any): number {
     let fieldIndex: number;
+
     if (isNotEmpty(event)) {
-      if (isNull(event.context)) {
-        // Check whether model is part of an Array of group
-        if (this.isPartOfArrayOfGroup(event.model)) {
-          fieldIndex = (event.model.parent as any).parent.index;
+      if (isDynamicFormControlEvent(event)) {
+        // This is the case of a default insertItem/removeItem event
+
+        if (isNull(event.context)) {
+          // Check whether model is part of an Array of group
+          if (this.isPartOfArrayOfGroup(event.model)) {
+            fieldIndex = (event.model.parent as any).parent.index;
+          }
+        } else {
+          fieldIndex = event.context.index;
         }
+
       } else {
-        fieldIndex = event.context.index;
+        // This is the case of a custom event which contains indexes information
+        fieldIndex = event.index as any;
       }
     }
 
@@ -394,8 +406,7 @@ export class SectionFormOperationsService {
       previousValue.delete();
     } else if (value.hasValue()) {
       // Here model has no previous value but a new one
-      if (isUndefined(this.getArrayIndexFromEvent(event))
-        || this.getArrayIndexFromEvent(event) === 0) {
+      if (isUndefined(this.getArrayIndexFromEvent(event))   || this.getArrayIndexFromEvent(event) === 0) {
         // Model is single field or is part of an array model but is the first item,
         // so dispatch an add operation that initialize the values of a specific metadata
         this.operationsBuilder.add(
@@ -457,4 +468,19 @@ export class SectionFormOperationsService {
 
     previousValue.delete();
   }
+
+  private dispatchOperationsFromMoveEvent(pathCombiner: JsonPatchOperationPathCombiner,
+                                          event: DynamicFormControlEvent) {
+    const customEvent = event.$event;
+    const path = this.getFieldPathFromEvent(customEvent);
+    const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(customEvent);
+    const moveTo = pathCombiner.getPath(path);
+    const moveFrom = pathCombiner.getPath(segmentedPath + '/' + customEvent.previousIndex);
+    if (isNotEmpty(moveFrom.path) && isNotEmpty(moveTo.path) && moveFrom.path !== moveTo.path) {
+      this.operationsBuilder.move(
+        moveTo,
+        moveFrom.path
+      );
+    }
+  }
 }

src/app/submission/sections/form/section-form.component.html

@@ -6,4 +6,5 @@
          (dfChange)="onChange($event)"
          (dfFocus)="onFocus($event)"
          (remove)="onRemove($event)"
+         (ngbEvent)="onCustomEvent($event)"
          (removeArrayItem)="onRemove($event)"></ds-form>

src/app/submission/sections/form/section-form.component.ts

@@ -448,4 +448,17 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
   isFieldToRemove(fieldId, index) {
     return this.fieldsOnTheirWayToBeRemoved.has(fieldId) && this.fieldsOnTheirWayToBeRemoved.get(fieldId).includes(index);
   }
+
+  /**
+   * Handle the customEvent (ex. drag-drop move event).
+   * The customEvent is stored inside event.$event
+   * @param $event
+   */
+  onCustomEvent(event: any) {
+    this.formOperationsService.dispatchOperationsFromEvent(
+      this.pathCombiner,
+      event,
+      null,
+      null);
+  }
 }