From d208cf16fa56bd27b17f1f70b3e1cabcfb8607a8 Mon Sep 17 00:00:00 2001
From: Alessandro Martelli <alessandro.martelli@4science.it>
Date: Wed, 17 Feb 2021 17:57:29 +0100
Subject: [PATCH] [CST-3782] Drag drop restored

---
 .../dynamic-form-array.component.html         | 50 +++++++++++--------
 .../dynamic-form-array.component.ts           | 12 +++--
 src/app/shared/form/form.component.spec.ts    |  4 +-
 .../sections/form/section-form.component.ts   | 21 ++++----
 4 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index d6cfc57b90..ec007d6ff4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -3,29 +3,37 @@
          [formArrayName]="model.id"
          [ngClass]="getClass('element', 'control')">
 
-        <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
-             [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
-
-                    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
-
-            <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
-                                               [bindId]="false"
-                                               [formGroup]="group"
-                                               [context]="groupModel"
-                                               [group]="control.get([idx])"
-                                               [hidden]="_model.hidden"
-                                               [layout]="formLayout"
-                                               [model]="_model"
-                                               [templates]="templates"
-                                               [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
-                                               (dfBlur)="onBlur($event)"
-                                               (dfChange)="onChange($event)"
-                                               (dfFocus)="onFocus($event)"
-                                               (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
-
-            <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
+      <!-- Draggable Container -->
+      <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"
+                                             [context]="groupModel"
+                                             [group]="control.get([idx])"
+                                             [hidden]="_model.hidden"
+                                             [layout]="formLayout"
+                                             [model]="_model"
+                                             [templates]="templates"
+                                             [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
+                                             (dfBlur)="onBlur($event)"
+                                             (dfChange)="onChange($event)"
+                                             (dfFocus)="onFocus($event)"
+                                             (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
 
+          <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
         </div>
+      </div>
+
+
 
     </div>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
index 3c275ddf19..b6c1a6c308 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/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 index = event.currentIndex - 1;
+    const prevIndex = event.previousIndex;
+    const index = event.currentIndex;
 
     if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
       const $event = {
@@ -59,7 +65,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
       };
 
       this.onChange($event);
-      }
+    }
   }
 
   update(event: any, index: number) {
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index aa004b3f87..4dd733a554 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/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();
     }));
diff --git a/src/app/submission/sections/form/section-form.component.ts b/src/app/submission/sections/form/section-form.component.ts
index c3d4575148..bc88323a8c 100644
--- a/src/app/submission/sections/form/section-form.component.ts
+++ b/src/app/submission/sections/form/section-form.component.ts
@@ -359,19 +359,16 @@ 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,
-        this.previousValue,
-        this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event)));
-      const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
-      const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
+    this.formOperationsService.dispatchOperationsFromEvent(
+      this.pathCombiner,
+      event,
+      this.previousValue,
+      this.hasStoredValue(this.formBuilderService.getId(event.model), this.formOperationsService.getArrayIndexFromEvent(event)));
+    const metadata = this.formOperationsService.getFieldPathSegmentedFromChangeEvent(event);
+    const value = this.formOperationsService.getFieldValueFromChangeEvent(event);
 
-      if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) {
-        this.submissionService.dispatchSave(this.submissionId);
-      }
+    if (environment.submission.autosave.metadata.indexOf(metadata) !== -1 && isNotEmpty(value)) {
+      this.submissionService.dispatchSave(this.submissionId);
     }
   }