[CST-3782] Drag drop restored

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

@@ -3,11 +3,17 @@
          [formArrayName]="model.id"
          [ngClass]="getClass('element', 'control')">
 
-        <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
+      <!-- Draggable Container -->
-             [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
+      <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
-
+        <!-- Draggable Items -->
+        <div *ngFor="let groupModel of model.groups; let idx = index"
+             role="group"
+             [formGroupName]="idx"
+             [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
+             cdkDrag cdkDragHandle>
+          <!-- Item content -->
+          <i class="drag-icon fas fa-grip-vertical fa-fw"></i>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
-
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
                                              [bindId]="false"
                                              [formGroup]="group"
@@ -24,8 +30,10 @@
                                              (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
 
           <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
-
         </div>
+      </div>
+
+
 
     </div>
 

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

@@ -44,9 +44,15 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   }
 
   moveSelection(event: CdkDragDrop<Relationship>) {
+
+    // prevent propagating events generated releasing on the same position
+    if (event.previousIndex === event.currentIndex) {
+      return;
+    }
+
     this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
-    const prevIndex = event.previousIndex - 1;
+    const prevIndex = event.previousIndex;
-    const index = event.currentIndex - 1;
+    const index = event.currentIndex;
 
     if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
       const $event = {

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

@@ -418,7 +418,7 @@ describe('FormComponent test suite', () => {
     }));
 
     it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
-      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
 
       expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
     }));
@@ -426,7 +426,7 @@ describe('FormComponent test suite', () => {
     it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
       spyOn(formComp.removeArrayItem, 'emit');
 
-      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
 
       expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
     }));

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

@@ -359,8 +359,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
    *    the [[DynamicFormControlEvent]] emitted
    */
   onChange(event: DynamicFormControlEvent): void {
-    // don't handle change events for things with an index < 0, those are template rows.
-    if (hasNoValue(event.context) || hasNoValue(event.context.index) || event.context.index >= 0) {
     this.formOperationsService.dispatchOperationsFromEvent(
       this.pathCombiner,
       event,
@@ -373,7 +371,6 @@ export class SubmissionSectionformComponent extends SectionModelComponent {
       this.submissionService.dispatchSave(this.submissionId);
     }
   }
-  }
 
   /**
    * Method called when a form dfFocus event is fired.