Merge pull request #1025 from 4Science/CST-3782-fix-repeatable-fields

Cst 3782 fix repeatable fields
2025-10-07 01:54:15 +00:00 · 2021-04-01 13:53:36 -05:00
parent 3815bdbd8c 44b37f673a
commit 1dd1c98846
27 changed files with 463 additions and 282 deletions
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -11,12 +11,15 @@
                      'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
        <div [ngClass]="getClass('grid', 'control')">
            <ng-container #componentViewContainer></ng-container>
-            <small *ngIf="hasHint && (model.repeatable === false || context?.index === 0) && (!showErrorMessages || errorMessages.length === 0)"
-                   class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+          <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+                 class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+          <!-- In case of repeatable fields show empty space for all elements except the first -->
+          <div *ngIf="context?.index !== null
+              && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>

-            <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-                <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
-            </div>
+          <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+          </div>

        </div>
        <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
@@ -32,12 +35,12 @@
                <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
            </select>
        </div>
-        <div *ngIf="isRelationship" class="col-auto text-center" [class.invisible]="context?.index > 0">
+        <div *ngIf="isRelationship && !isVirtual()" class="col-auto text-center">
            <button class="btn btn-secondary"
                    type="button"
                    ngbTooltip="{{'form.lookup-help' | translate}}"
                    placement="top"
-                    (click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
+                    (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
            </button>
        </div>
    </div>
@@ -65,6 +68,9 @@
                [relationshipOptions]="model.relationship"
        >
        </ds-existing-relation-list-element>
+        <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+             class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+        <div class="clearfix w-100 mb-2"></div>
    </ng-container>
    <ng-content></ng-content>
 </div>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -37,7 +37,6 @@ import {
  DynamicFormControl,
  DynamicFormControlContainerComponent,
  DynamicFormControlEvent,
-  DynamicFormControlEventType,
  DynamicFormControlModel,
  DynamicFormLayout,
  DynamicFormLayoutService,
@@ -91,10 +90,10 @@ import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-di
 import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
 import {
  getAllSucceededRemoteData,
+  getFirstSucceededRemoteData,
  getFirstSucceededRemoteDataPayload,
  getPaginatedListPayload,
-  getRemoteDataPayload,
-  getFirstSucceededRemoteData
+  getRemoteDataPayload
 } from '../../../../core/shared/operators';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { Item } from '../../../../core/shared/item.model';
@@ -374,6 +373,15 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    }
  }

+  hasRelationship() {
+    return isNotEmpty(this.model) && this.model.hasOwnProperty('relationship') && isNotEmpty(this.model.relationship);
+  }
+
+  isVirtual() {
+    const value: FormFieldMetadataValueObject = this.model.metadataValue;
+    return isNotEmpty(value) && value.isVirtual;
+  }
+
  public hasResultsSelected(): Observable<boolean> {
    return this.model.value.pipe(map((list: SearchResult<DSpaceObject>[]) => isNotEmpty(list)));
  }
@@ -385,6 +393,11 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
      size: 'lg'
    });
+
+    if (hasValue(this.model.value)) {
+      this.submissionService.dispatchSave(this.model.submissionId);
+    }
+
    const modalComp = this.modalRef.componentInstance;

    if (hasValue(this.model.value) && !this.model.readOnly) {
@@ -395,18 +408,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
      }
    }

-    if (hasValue(this.model.value)) {
-      this.model.value = '';
-      this.onChange({
-        $event: { previousIndex: 0 },
-        context: { index: 0 },
-        control: this.control,
-        model: this.model,
-        type: DynamicFormControlEventType.Change
-      });
-    }
-    this.submissionService.dispatchSave(this.model.submissionId);
-
    modalComp.repeatable = this.model.repeatable;
    modalComp.listId = this.listId;
    modalComp.relationshipOptions = this.model.relationship;
@@ -437,6 +438,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
      .forEach((sub) => sub.unsubscribe());
  }

+  get hasHint(): boolean {
+    return isNotEmpty(this.model.hint) && this.model.hint !== '&nbsp;';
+  }
+
  /**
   *  Initialize this.item$ based on this.model.submissionId
   */
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -8,6 +8,7 @@
        </ng-container>
    </span>
    <button type="button" class="btn btn-secondary"
+            title="{{'form.remove' | translate}}"
            (click)="removeSelection()">
        <i class="fas fa-trash" aria-hidden="true"></i>
    </button>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.spec.ts
@@ -14,6 +14,8 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils
 import { RemoveRelationshipAction } from '../relation-lookup-modal/relationship.actions';
 import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
 import { of as observableOf } from 'rxjs';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../../testing/translate-loader.mock';

 describe('ExistingMetadataListElementComponent', () => {
  let component: ExistingMetadataListElementComponent;
@@ -65,6 +67,14 @@ describe('ExistingMetadataListElementComponent', () => {
  beforeEach(waitForAsync(() => {
    init();
    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
      declarations: [ExistingMetadataListElementComponent],
      providers: [
        { provide: SelectableListService, useValue: selectionService },
--- 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
@@ -2,44 +2,42 @@
    <div [id]="id"
         [formArrayName]="model.id"
         [ngClass]="getClass('element', 'control')">
-        <div role="group"
-             formGroupName="0" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
-            <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model.groups[0]"></ng-container>
-            <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: 0}"></ng-container>
-            <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model.groups[0]"></ng-container>
-        </div>
-        <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
-            <div *ngFor="let groupModel of model.groups; let idx = index"
-                 [ngClass]="{'pt-2 pb-2': idx > 0}" cdkDrag cdkDragHandle>
-                <div [formGroupName]="idx"
-                     [class]="getClass('element', 'group') + ' ' + getClass('grid', 'group')"
-                     [ngClass]="{'d-flex align-items-center': idx > 0}"
-                >
-                <ng-container *ngIf="idx > 0">
-                    <i class="drag-icon fas fa-grip-vertical fa-fw"></i>
-                    <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
-                    <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
-                    <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
-                </ng-container>
-                </div>
-            </div>
+
+      <!-- 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
+             [cdkDragDisabled]="dragDisabled"
+             [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
+          <!-- Item content -->
+          <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="dragDisabled"></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>
+
 </ng-container>
-
-
-<ng-template #controlContainer let-idx>
-    <ds-dynamic-form-control-container *ngFor="let _model of model.groups[idx].group"
-                                       [bindId]="false"
-                                       [context]="model.groups[idx]"
-                                       [group]="control.get([idx])"
-                                       [hidden]="_model.hidden"
-                                       [layout]="formLayout"
-                                       [model]="_model"
-                                       [templates]="templates"
-                                       [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
-                                       (dfBlur)="update($event, idx)"
-                                       (dfChange)="update($event, idx)"
-                                       (dfFocus)="onFocus($event)"
-                                       (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
-</ng-template>
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
@@ -5,48 +5,41 @@
 }

 .cdk-drag {
-    margin-left: calc(-2 * var(--bs-spacer));
-    margin-right: calc(-0.5 * var(--bs-spacer));
-    padding-right: calc(0.5 * var(--bs-spacer));
-    .drag-icon {
-        visibility: hidden;
-        width: calc(2 * var(--bs-spacer));
-        color: var(--bs-gray-600);
-        margin: var(--bs-btn-padding-y) 0;
-        line-height: var(--bs-btn-line-height);
-        text-indent: calc(0.5 * var(--bs-spacer))
-    }
+  margin-left: calc(-2.3 * var(--bs-spacer));
+  margin-right: calc(-0.5 * var(--bs-spacer));
+  padding-right: calc(0.5 * var(--bs-spacer));
+  .drag-icon {
+    visibility: hidden;
+    width: calc(2 * var(--bs-spacer));
+    color: var(--bs-gray-600);
+    margin: var(--bs-btn-padding-y) 0;
+    line-height: var(--bs-btn-line-height);
+    text-indent: calc(0.5 * var(--bs-spacer))
+  }

-    &:hover, &:focus {
-        cursor: grab;
-        .drag-icon {
-            visibility: visible;
-        }
+  &:hover, &:focus {
+    cursor: grab;
+    .drag-icon {
+      visibility: visible;
    }
+  }

 }

 .cdk-drop-list-dragging {
-    .cdk-drag {
-        cursor: grabbing;
-        .drag-icon {
-            visibility: hidden;
-        }
+  .cdk-drag {
+    cursor: grabbing;
+    .drag-icon {
+      visibility: hidden;
    }
+  }
 }

 .cdk-drag-preview {
-    background-color: white;
-    border-radius: var(--bs-border-radius-sm);
-    margin-left: 0;
-    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    .drag-icon {
-        visibility: visible;
-    }
+  margin: 0;
+  padding: 0;
 }

 .cdk-drag-placeholder {
-    opacity: 0;
+  opacity: 0;
 }
--- 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
@@ -5,15 +5,15 @@ import {
  DynamicFormArrayComponent,
  DynamicFormControlCustomEvent,
  DynamicFormControlEvent,
-  DynamicFormControlEventType,
-  DynamicFormControlLayout, DynamicFormLayout,
+  DynamicFormControlLayout,
+  DynamicFormLayout,
  DynamicFormLayoutService,
  DynamicFormValidationService,
  DynamicTemplateDirective
 } from '@ng-dynamic-forms/core';
 import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
-import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
 import { hasValue } from '../../../../../empty.util';
+import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';

@Component({
  selector: 'ds-dynamic-form-array',
@@ -25,7 +25,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
  @Input() formLayout: DynamicFormLayout;
  @Input() group: FormGroup;
  @Input() layout: DynamicFormControlLayout;
-  @Input() model: DynamicRowArrayModel;
+  @Input() model: DynamicRowArrayModel;// DynamicRow?
  @Input() templates: QueryList<DynamicTemplateDirective> | undefined;

  /* tslint:disable:no-output-rename */
@@ -43,22 +43,25 @@ 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 = {
-        $event: { previousIndex: prevIndex },
-        context: { index },
-        control: (this.control as any).controls[index],
-        group: this.group,
+      this.onCustomEvent({
+        previousIndex: prevIndex,
+        index,
+        arrayModel: this.model,
        model: this.model.groups[index].group[0],
-        type: DynamicFormControlEventType.Change
-      };
-
-      this.onChange($event);
-      }
+        control: (this.control as any).controls[index]
+      }, 'move');
+    }
  }

  update(event: any, index: number) {
@@ -68,4 +71,11 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {

    this.onChange($event);
  }
+
+  /**
+   * If the drag feature is disabled for this DynamicRowArrayModel.
+   */
+  get dragDisabled(): boolean {
+    return this.model.groups.length === 1 || !this.model.isDraggable;
+  }
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
@@ -9,6 +9,7 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
  metadataKey: string;
  metadataFields: string[];
  hasSelectableMetadata: boolean;
+  isDraggable: boolean;
 }

 export class DynamicRowArrayModel extends DynamicFormArrayModel {
@@ -19,6 +20,7 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
  @serializable() metadataKey: string;
  @serializable() metadataFields: string[];
  @serializable() hasSelectableMetadata: boolean;
+  @serializable() isDraggable: boolean;
  isRowArray = true;

  constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
@@ -30,5 +32,6 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
    this.metadataKey = config.metadataKey;
    this.metadataFields = config.metadataFields;
    this.hasSelectableMetadata = config.hasSelectableMetadata;
+    this.isDraggable = config.isDraggable;
  }
 }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -6,7 +6,8 @@
    </button>
 </div>
 <div class="modal-body">
-    <ngb-tabset>
+    <ds-loading *ngIf="!item || !collection"></ds-loading>
+    <ngb-tabset *ngIf="item && collection">
        <ngb-tab [title]="'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : {count: (totalInternal$ | async)}">
            <ng-template ngbTabContent>
                <ds-dynamic-lookup-relation-search-tab
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -21,6 +21,10 @@ import { createPaginatedList } from '../../../../testing/utils.test';
 import { ExternalSourceService } from '../../../../../core/data/external-source.service';
 import { LookupRelationService } from '../../../../../core/data/lookup-relation.service';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
+import { SubmissionService } from '../../../../../submission/submission.service';
+import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
+import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
+import { Collection } from '../../../../../core/shared/collection.model';

 describe('DsDynamicLookupRelationModalComponent', () => {
  let component: DsDynamicLookupRelationModalComponent;
@@ -28,6 +32,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
  let item;
  let item1;
  let item2;
+  let testWSI;
  let searchResult1;
  let searchResult2;
  let listID;
@@ -41,6 +46,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
  let lookupRelationService;
  let rdbService;
  let submissionId;
+  let submissionService;
+  let submissionObjectDataService;

  const externalSources = [
    Object.assign(new ExternalSource(), {
@@ -56,11 +63,16 @@ describe('DsDynamicLookupRelationModalComponent', () => {
  ];
  const totalLocal = 10;
  const totalExternal = 8;
+  const collection: Collection = new Collection();
+

  function init() {
    item = Object.assign(new Item(), { uuid: '7680ca97-e2bd-4398-bfa7-139a8673dc42', metadata: {} });
    item1 = Object.assign(new Item(), { uuid: 'e1c51c69-896d-42dc-8221-1d5f2ad5516e' });
    item2 = Object.assign(new Item(), { uuid: 'c8279647-1acc-41ae-b036-951d5f65649b' });
+    testWSI = new WorkspaceItem();
+    testWSI.item = createSuccessfulRemoteDataObject$(item);
+    testWSI.collection = createSuccessfulRemoteDataObject$(collection);
    searchResult1 = Object.assign(new ItemSearchResult(), { indexableObject: item1 });
    searchResult2 = Object.assign(new ItemSearchResult(), { indexableObject: item2 });
    listID = '6b0c8221-fcb4-47a8-b483-ca32363fffb3';
@@ -87,6 +99,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
    rdbService = jasmine.createSpyObj('rdbService', {
      aggregate: createSuccessfulRemoteDataObject$(externalSources)
    });
+    submissionService = jasmine.createSpyObj('SubmissionService', {
+      dispatchSave: jasmine.createSpy('dispatchSave')
+    });
+    submissionObjectDataService = jasmine.createSpyObj('SubmissionObjectDataService', {
+      findById: createSuccessfulRemoteDataObject$(testWSI)
+    });
    submissionId = '1234';
  }

@@ -111,6 +129,8 @@ describe('DsDynamicLookupRelationModalComponent', () => {
        },
        { provide: RelationshipTypeService, useValue: {} },
        { provide: RemoteDataBuildService, useValue: rdbService },
+        { provide: SubmissionService, useValue: submissionService },
+        { provide: SubmissionObjectDataService, useValue: submissionObjectDataService },
        {
          provide: Store, useValue: {
            // tslint:disable-next-line:no-empty
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
@@ -11,7 +11,11 @@ import { ListableObject } from '../../../../object-collection/shared/listable-ob
 import { RelationshipOptions } from '../../models/relationship-options.model';
 import { SearchResult } from '../../../../search/search-result.model';
 import { Item } from '../../../../../core/shared/item.model';
-import { getAllSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
+import {
+  getAllSucceededRemoteData,
+  getAllSucceededRemoteDataPayload,
+  getRemoteDataPayload
+} from '../../../../../core/shared/operators';
 import { AddRelationshipAction, RemoveRelationshipAction, UpdateRelationshipNameVariantAction } from './relationship.actions';
 import { RelationshipService } from '../../../../../core/data/relationship.service';
 import { RelationshipTypeService } from '../../../../../core/data/relationship-type.service';
@@ -23,6 +27,12 @@ import { ExternalSource } from '../../../../../core/shared/external-source.model
 import { ExternalSourceService } from '../../../../../core/data/external-source.service';
 import { Router } from '@angular/router';
 import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
+import { followLink } from '../../../../utils/follow-link-config.model';
+import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
+import { Collection } from '../../../../../core/shared/collection.model';
+import { SubmissionService } from '../../../../../submission/submission.service';
+import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
+import { RemoteData } from '../../../../../core/data/remote-data';

@Component({
  selector: 'ds-dynamic-lookup-relation-modal',
@@ -112,6 +122,11 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
   */
  totalExternal$: Observable<number[]>;

+  /**
+   * List of subscriptions to unsubscribe from
+   */
+  private subs: Subscription[] = [];
+
  constructor(
    public modal: NgbActiveModal,
    private selectableListService: SelectableListService,
@@ -121,14 +136,17 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
    private lookupRelationService: LookupRelationService,
    private searchConfigService: SearchConfigurationService,
    private rdbService: RemoteDataBuildService,
+    private submissionService: SubmissionService,
+    private submissionObjectService: SubmissionObjectDataService,
    private zone: NgZone,
    private store: Store<AppState>,
-    private router: Router,
+    private router: Router
  ) {

  }

  ngOnInit(): void {
+    this.setItem();
    this.selection$ = this.selectableListService
      .getSelectableList(this.listId)
      .pipe(map((listState: SelectableListState) => hasValue(listState) && hasValue(listState.selection) ? listState.selection : []));
@@ -188,6 +206,24 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
      });
  }

+  /**
+   *  Initialize this.item$ based on this.model.submissionId
+   */
+  private setItem() {
+    const submissionObject$ = this.submissionObjectService
+      .findById(this.submissionId, true, true, followLink('item'), followLink('collection')).pipe(
+        getAllSucceededRemoteData(),
+        getRemoteDataPayload()
+      );
+
+    const item$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
+    const collection$ = submissionObject$.pipe(switchMap((submissionObject: SubmissionObject) => (submissionObject.collection as Observable<RemoteData<Collection>>).pipe(getAllSucceededRemoteData(), getRemoteDataPayload())));
+
+    this.subs.push(item$.subscribe((item) => this.item = item));
+    this.subs.push(collection$.subscribe((collection) => this.collection = collection));
+
+  }
+
  /**
   * Add a subscription updating relationships with name variants
   * @param sri The search result to track name variants for
@@ -243,5 +279,8 @@ export class DsDynamicLookupRelationModalComponent implements OnInit, OnDestroy
  ngOnDestroy() {
    this.router.navigate([], {});
    Object.values(this.subMap).forEach((subscription) => subscription.unsubscribe());
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
  }
 }
--- a/src/app/shared/form/builder/form-builder.service.spec.ts
+++ b/src/app/shared/form/builder/form-builder.service.spec.ts
@@ -295,6 +295,7 @@ describe('FormBuilderService test suite', () => {
          notRepeatable: false,
          relationshipConfig: undefined,
          submissionId: '1234',
+          isDraggable: true,
          groupFactory: () => {
            return [
              new DynamicInputModel({ id: 'testFormRowArrayGroupInput' })
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -28,9 +28,10 @@ import { DynamicRelationGroupModel } from './ds-dynamic-form-ui/models/relation-
 import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
 import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
-import { isNgbDateStruct } from '../../date.util';
+import { dateToString, isNgbDateStruct } from '../../date.util';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/ds-dynamic-form-constants';
 import { CONCAT_GROUP_SUFFIX, DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';

@Injectable()
 export class FormBuilderService extends DynamicFormService {
@@ -121,8 +122,15 @@ export class FormBuilderService extends DynamicFormService {

    const normalizeValue = (controlModel, controlValue, controlModelIndex) => {
      const controlLanguage = (controlModel as DsDynamicInputModel).hasLanguages ? (controlModel as DsDynamicInputModel).language : null;
+
+      if (controlModel?.metadataValue?.authority?.includes(VIRTUAL_METADATA_PREFIX)) {
+        return controlModel.metadataValue;
+      }
+
      if (isString(controlValue)) {
        return new FormFieldMetadataValueObject(controlValue, controlLanguage, null, null, controlModelIndex);
+      } else if (isNgbDateStruct(controlValue)) {
+        return new FormFieldMetadataValueObject(dateToString(controlValue));
      } else if (isObject(controlValue)) {
        const authority = (controlValue as any).authority || (controlValue as any).id || null;
        const place = controlModelIndex || (controlValue as any).place;
@@ -240,7 +248,7 @@ export class FormBuilderService extends DynamicFormService {
  }

  hasArrayGroupValue(model: DynamicFormControlModel): boolean {
-    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG || model.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY);
+    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
  }

  hasMappedGroupValue(model: DynamicFormControlModel): boolean {
@@ -310,7 +318,7 @@ export class FormBuilderService extends DynamicFormService {
    let tempModel: DynamicFormControlModel;

    if (this.isArrayGroup(model as DynamicFormControlModel)) {
-      return hasValue((model as any).metadataKey) ? (model as any).metadataKey : model.index.toString();
+      return model.index.toString();
    } else if (this.isModelInCustomGroup(model as DynamicFormControlModel)) {
      tempModel = (model as any).parent;
    } else {
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -58,8 +58,20 @@ export class ConcatFieldParser extends FieldParser {
    concatGroup.group = [];
    concatGroup.separator = this.separator;

-    const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, false, false);
-    const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, false, false);
+    const input1ModelConfig: DynamicInputModelConfig = this.initModel(
+      id + CONCAT_FIRST_INPUT_SUFFIX,
+      false,
+      true,
+      true,
+      false
+    );
+    const input2ModelConfig: DynamicInputModelConfig = this.initModel(
+      id + CONCAT_SECOND_INPUT_SUFFIX,
+      false,
+      true,
+      true,
+      false
+    );

    if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
      concatGroup.hint = input1ModelConfig.hint;
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -15,6 +15,8 @@ import { setLayout } from './parser.utils';
 import { ParserOptions } from './parser-options';
 import { RelationshipOptions } from '../models/relationship-options.model';
 import { VocabularyOptions } from '../../../../core/submission/vocabularies/models/vocabulary-options.model';
+import { ParserType } from './parser-type';
+import { isNgbDateStruct } from '../../../date.util';

 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -37,9 +39,8 @@ export abstract class FieldParser {

  public parse() {
    if (((this.getInitValueCount() > 1 && !this.configData.repeatable) || (this.configData.repeatable))
-      && (this.configData.input.type !== 'list')
-      && (this.configData.input.type !== 'tag')
-      && (this.configData.input.type !== 'group')
+      && (this.configData.input.type !== ParserType.List)
+      && (this.configData.input.type !== ParserType.Tag)
    ) {
      let arrayCounter = 0;
      let fieldArrayCounter = 0;
@@ -49,6 +50,11 @@ export abstract class FieldParser {
      if (Array.isArray(this.configData.selectableMetadata) && this.configData.selectableMetadata.length === 1) {
        metadataKey = this.configData.selectableMetadata[0].metadata;
      }
+
+      let isDraggable = true;
+      if (this.configData.input.type === ParserType.Onebox && this.configData?.selectableMetadata?.length > 1) {
+        isDraggable = false;
+      }
      const config = {
        id: uniqueId() + '_array',
        label: this.configData.label,
@@ -60,6 +66,7 @@ export abstract class FieldParser {
        metadataKey,
        metadataFields: this.getAllFieldIds(),
        hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata),
+        isDraggable,
        groupFactory: () => {
          let model;
          if ((arrayCounter === 0)) {
@@ -69,19 +76,13 @@ export abstract class FieldParser {
            const fieldArrayOfValueLength = this.getInitValueCount(arrayCounter - 1);
            let fieldValue = null;
            if (fieldArrayOfValueLength > 0) {
-              if (fieldArrayCounter === 0) {
-                fieldValue = '';
-              } else {
-                fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter - 1);
-              }
-              fieldArrayCounter++;
-              if (fieldArrayCounter === fieldArrayOfValueLength + 1) {
+              fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter++);
+              if (fieldArrayCounter === fieldArrayOfValueLength) {
                fieldArrayCounter = 0;
                arrayCounter++;
              }
            }
            model = this.modelFactory(fieldValue, false);
-            model.id = `${model.id}_${fieldArrayCounter}`;
          }
          setLayout(model, 'element', 'host', 'col');
          if (model.hasLanguages || isNotEmpty(model.relationship)) {
@@ -130,7 +131,9 @@ export abstract class FieldParser {
        return;
      }

-      if (typeof fieldValue === 'object') {
+      if (isNgbDateStruct(fieldValue)) {
+        modelConfig.value = fieldValue;
+      } else if (typeof fieldValue === 'object') {
        modelConfig.metadataValue = fieldValue;
        modelConfig.language = fieldValue.language;
        modelConfig.place = fieldValue.place;
@@ -210,10 +213,9 @@ export abstract class FieldParser {
  }

  protected getInitArrayIndex() {
-    let fieldCount = 0;
    const fieldIds: any = this.getAllFieldIds();
    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
-      fieldCount = this.initFormValues[fieldIds].filter((value) => hasValue(value) && hasValue(value.value)).length;
+      return this.initFormValues[fieldIds].length;
    } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
      let counter = 0;
      fieldIds.forEach((id) => {
@@ -221,9 +223,10 @@ export abstract class FieldParser {
          counter = counter + this.initFormValues[id].length;
        }
      });
-      fieldCount = counter;
+      return (counter === 0) ? 1 : counter;
+    } else {
+      return 1;
    }
-    return (fieldCount === 0) ? 1 : fieldCount + 1;
  }

  protected getFieldId(): string {
@@ -245,7 +248,7 @@ export abstract class FieldParser {
    }
  }

-  protected initModel(id?: string, label = true, setErrors = true, hint = true) {
+  protected initModel(id?: string, label = true, labelEmpty = false, setErrors = true, hint = true) {

    const controlModel = Object.create(null);

@@ -316,7 +319,7 @@ export abstract class FieldParser {

  protected setLabel(controlModel, label = true, labelEmpty = false) {
    if (label) {
-      controlModel.label = this.configData.label;
+      controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
    }
  }

--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -59,7 +59,7 @@ export class OneboxFieldParser extends FieldParser {
      this.setLabel(inputSelectGroup, label);
      inputSelectGroup.required = isNotEmpty(this.configData.mandatory);

-      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false);
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label, false, false);
      selectModelConfig.hint = null;
      this.setOptions(selectModelConfig);
      if (isNotEmpty(fieldValue)) {
@@ -67,7 +67,7 @@ export class OneboxFieldParser extends FieldParser {
      }
      inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));

-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false);
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, false, false);
      inputModelConfig.hint = null;
      this.setValues(inputModelConfig, fieldValue);
      inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -1,57 +1,68 @@
 <div class="container-fluid">
-    <form class="form-horizontal" [formGroup]="formGroup">
+  <form class="form-horizontal" [formGroup]="formGroup">

-        <ds-dynamic-form
-                [formId]="formId"
-                [formGroup]="formGroup"
-                [formModel]="formModel"
-                [formLayout]="formLayout"
-                (change)="$event.stopPropagation();"
-                (dfBlur)="onBlur($event)"
-                (dfChange)="onChange($event)"
-                (dfFocus)="onFocus($event)">
-            <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
-                <!--Array with repeatable items-->
-                <div *ngIf="context.hasSelectableMetadata && !context.notRepeatable && index < 1"
-                     class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-                    <div class="btn-group" role="group" aria-label="Add and remove button">
-                        <button type="button" class="btn btn-secondary"
-                                [disabled]="isItemReadOnly(context, index)"
-                                (click)="insertItem($event, group.context, group.index)">
-                            <span aria-label="Add">{{'form.add' | translate}}</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!--Array with non repeatable items - Only delete button-->
-                <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || index > 0 && !(group.group[0]?.value?.isVirtual || group.group[0]?.metadataValue?.isVirtual)"
-                     class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-                    <div class="btn-group" role="group" aria-label="Remove button">
-                        <button type="button" class="btn btn-secondary"
-                                (click)="removeItem($event, context, index)"
-                                [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
-                            <i class="fas fa-trash" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </ng-template>
-
-        </ds-dynamic-form>
-
-        <ng-content></ng-content>
-
-    <div *ngIf="displaySubmit">
-            <hr>
-            <div class="form-group row">
-                <div class="col text-right">
-                    <button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
-                    <button type="submit" class="btn btn-primary" (click)="onSubmit()"
-                            [disabled]="!(isValid() | async)">{{submitLabel | translate}}
-                    </button>
-                </div>
-            </div>
+    <ds-dynamic-form
+      [formId]="formId"
+      [formGroup]="formGroup"
+      [formModel]="formModel"
+      [formLayout]="formLayout"
+      (change)="$event.stopPropagation();"
+      (dfBlur)="onBlur($event)"
+      (dfChange)="onChange($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)"
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+            <button type="button" class="btn btn-secondary"
+                    title="{{'form.remove' | translate}}"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <span attr.aria-label="{{'form.remove' | translate}}"><i class="fas fa-trash" aria-hidden="true"></i></span>
+            </button>
+        </div>
+        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1)" class="clearfix pl-4 w-100">
+          <div class="btn-group" role="group" aria-label="remove button">
+            <button type="button" class="ds-form-add-more btn btn-link"
+                    title="{{'form.add' | translate}}"
+                    [disabled]="isItemReadOnly(context, index)"
+                    (click)="insertItem($event, group.context, group.context.groups.length)">
+              <span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+            </button>
+          </div>
        </div>

-    </form>
+        <!--Array with non repeatable items - Only discard button-->
+        <div *ngIf="context.notRepeatable && context.showButtons && group.context.groups.length > 1"
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+          <div class="btn-group" role="group" aria-label="Remove button">
+            <button type="button" class="btn btn-secondary"
+                    title="{{'form.discard' | translate}}"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <span attr.aria-label="{{'form.discard' | translate}}">{{'form.discard' | translate}}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+    </ds-dynamic-form>
+
+    <ng-content></ng-content>
+
+    <div *ngIf="displaySubmit">
+      <hr>
+      <div class="form-group row">
+        <div class="col text-right">
+          <button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
+          <button type="submit" class="btn btn-primary" (click)="onSubmit()"
+                  [disabled]="!(isValid() | async)">{{submitLabel | translate}}
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </form>

 </div>
--- a/src/app/shared/form/form.component.scss
+++ b/src/app/shared/form/form.component.scss
@@ -15,6 +15,11 @@
  box-shadow: none !important;
 }

+button.ds-form-add-more:focus {
+  outline: none;
+  box-shadow: none !important;
+}
+
 .ds-form-input-value {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
--- 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();
    }));
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -2,6 +2,7 @@ import { distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';

+import { Observable, Subscription } from 'rxjs';
 import {
  DynamicFormArrayModel,
  DynamicFormControlEvent,
@@ -9,15 +10,14 @@ import {
  DynamicFormGroupModel,
  DynamicFormLayout,
 } from '@ng-dynamic-forms/core';
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { findIndex } from 'lodash';
+
 import { FormBuilderService } from './builder/form-builder.service';
-import { Observable, Subscription } from 'rxjs';
 import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { FormEntry, FormError } from './form.reducer';
-import { QUALDROP_GROUP_SUFFIX } from './builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
-
-const QUALDROP_GROUP_REGEX = new RegExp(`${QUALDROP_GROUP_SUFFIX}_\\d+$`);
+import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';

 /**
 * The default form component.
@@ -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>();
@@ -87,9 +88,9 @@ export class FormComponent implements OnDestroy, OnInit {
  @Output() submitForm: EventEmitter<Observable<any>> = new EventEmitter<Observable<any>>();

  /**
-   * An object of FormGroup type
+   * Reference to NgbModal
   */
-  // public formGroup: FormGroup;
+  modalRef: NgbModalRef;

  /**
   * Array to track all subscriptions and unsubscribe them onDestroy
@@ -166,7 +167,6 @@ export class FormComponent implements OnDestroy, OnInit {
        filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors))),
        map((formState) => formState.errors),
        distinctUntilChanged())
-      // .delay(100) // this terrible delay is here to prevent the detection change error
        .subscribe((errors: FormError[]) => {
          const { formGroup, formModel } = this;
          errors
@@ -187,7 +187,6 @@ export class FormComponent implements OnDestroy, OnInit {
              if (field) {
                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
                this.formService.addErrorToField(field, model, error.message);
-                // this.formService.validateAllFormFields(formGroup);
                this.changeDetectorRef.detectChanges();

              }
@@ -252,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);
@@ -300,58 +303,25 @@ export class FormComponent implements OnDestroy, OnInit {

  removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
    const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
-    this.removeArrayItem.emit(this.getEvent($event, arrayContext, index - 1, 'remove'));
+    const event = this.getEvent($event, arrayContext, index, 'remove');
    this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
    this.formService.changeForm(this.formId, this.formModel);
+    this.removeArrayItem.emit(event);
  }

  insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
    const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
-
-    // First emit the new value so it can be sent to the server
-    const value = formArrayControl.controls[0].value;
-    const event = this.getEvent($event, arrayContext, 0, 'add');
-    this.addArrayItem.emit(event);
-    this.change.emit(event);
-
-    // Next: update the UI so the user sees the changes
-    // without having to wait for the server's reply
-
-    // add an empty new field at the bottom
-    this.formBuilderService.addFormArrayGroup(formArrayControl, arrayContext);
-
-    // set that field to the new value
-    const model = arrayContext.groups[arrayContext.groups.length - 1].group[0] as any;
-    if (model.hasAuthority) {
-      model.value = Object.values(value)[0];
-      const ctrl = formArrayControl.controls[formArrayControl.length - 1];
-      const ctrlValue = ctrl.value;
-      const ctrlValueKey = Object.keys(ctrlValue)[0];
-      ctrl.setValue({
-        [ctrlValueKey]: model.value
-      });
-    } else if (this.formBuilderService.isQualdropGroup(model)) {
-      const ctrl = formArrayControl.controls[formArrayControl.length - 1];
-      const ctrlKey = Object.keys(ctrl.value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
-      const valueKey = Object.keys(value).find((key: string) => isNotEmpty(key.match(QUALDROP_GROUP_REGEX)));
-      if (ctrlKey !== valueKey) {
-        Object.defineProperty(value, ctrlKey, Object.getOwnPropertyDescriptor(value, valueKey));
-        delete value[valueKey];
-      }
-      ctrl.setValue(value);
-    } else {
-      formArrayControl.controls[formArrayControl.length - 1].setValue(value);
-    }
-
-    // Clear the topmost field by removing the filled out version and inserting a new, empty version.
-    // Doing it this way ensures an empty value of the correct type is added without a bunch of ifs here
-    this.formBuilderService.removeFormArrayGroup(0, formArrayControl, arrayContext);
-    this.formBuilderService.insertFormArrayGroup(0, formArrayControl, arrayContext);
-
-    // Tell the formService that it should rerender.
+    this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
+    this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
    this.formService.changeForm(this.formId, this.formModel);
  }

+  isVirtual(arrayContext: DynamicFormArrayModel, index: number) {
+    const context = arrayContext.groups[index];
+    const value: FormFieldMetadataValueObject = (context.group[0] as any).metadataValue;
+    return isNotEmpty(value) && value.isVirtual;
+  }
+
  protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
    const context = arrayContext.groups[index];
    const itemGroupModel = context.context;
--- a/src/app/shared/mocks/form-models.mock.ts
+++ b/src/app/shared/mocks/form-models.mock.ts
@@ -80,6 +80,7 @@ const rowArrayQualdropConfig = {
  id: 'row_QUALDROP_GROUP',
  initialCount: 1,
  notRepeatable: true,
+  isDraggable: false,
  relationshipConfig: undefined,
  groupFactory: () => {
    return [MockQualdropModel];
--- a/src/app/submission/sections/form/section-form-operations.service.spec.ts
+++ b/src/app/submission/sections/form/section-form-operations.service.spec.ts
@@ -1,4 +1,4 @@
-import { waitForAsync, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';

 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import {
@@ -35,10 +35,10 @@ describe('SectionFormOperationsService test suite', () => {
  let serviceAsAny: any;

  const jsonPatchOpBuilder: any = jasmine.createSpyObj('jsonPatchOpBuilder', {
-    add: jasmine.createSpy('add'),
-    replace: jasmine.createSpy('replace'),
-    remove: jasmine.createSpy('remove'),
-  });
+      add: jasmine.createSpy('add'),
+      replace: jasmine.createSpy('replace'),
+      remove: jasmine.createSpy('remove'),
+    });
  const pathCombiner = new JsonPatchOperationPathCombiner('sections', 'test');

  const dynamicFormControlChangeEvent: DynamicFormControlEvent = {
--- a/src/app/submission/sections/form/section-form-operations.service.ts
+++ b/src/app/submission/sections/form/section-form-operations.service.ts
@@ -6,18 +6,10 @@ import {
  DYNAMIC_FORM_CONTROL_TYPE_GROUP,
  DynamicFormArrayGroupModel,
  DynamicFormControlEvent,
-  DynamicFormControlModel
+  DynamicFormControlModel, isDynamicFormControlEvent
 } from '@ng-dynamic-forms/core';

-import {
-  hasNoValue,
-  hasValue,
-  isNotEmpty,
-  isNotNull,
-  isNotUndefined,
-  isNull,
-  isUndefined
-} from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isNotNull, isNotUndefined, isNull, isUndefined } from '../../../shared/empty.util';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { FormFieldPreviousValueObject } from '../../../shared/form/builder/models/form-field-previous-value-object';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
@@ -30,6 +22,8 @@ import { DynamicQualdropModel } from '../../../shared/form/builder/ds-dynamic-fo
 import { DynamicRelationGroupModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { deepClone } from 'fast-json-patch';
+import { dateToString, isNgbDateStruct } from '../../../shared/date.util';
+import { DynamicRowArrayModel } from '../../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model';

 /**
 * The service handling all form section operations
@@ -71,8 +65,8 @@ export class SectionFormOperationsService {
      case 'change':
        this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue);
        break;
-      case 'add':
-        this.dispatchOperationsFromAddEvent(pathCombiner, event);
+      case 'move':
+        this.dispatchOperationsFromMoveEvent(pathCombiner, event, previousValue);
        break;
      default:
        break;
@@ -83,20 +77,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;
      }
    }

@@ -245,6 +248,8 @@ export class SectionFormOperationsService {
        // Language without Authority (input, textArea)
        fieldValue = new FormFieldMetadataValueObject(value, language);
      }
+    } else if (isNgbDateStruct(value)) {
+      fieldValue = new FormFieldMetadataValueObject(dateToString(value));
    } else if (value instanceof FormFieldLanguageValueObject || value instanceof VocabularyEntry
      || value instanceof VocabularyEntryDetail || isObject(value)) {
      fieldValue = value;
@@ -291,11 +296,19 @@ export class SectionFormOperationsService {
  protected dispatchOperationsFromRemoveEvent(pathCombiner: JsonPatchOperationPathCombiner,
                                              event: DynamicFormControlEvent,
                                              previousValue: FormFieldPreviousValueObject): void {
+
+    if (event.context && event.context instanceof DynamicFormArrayGroupModel) {
+      // Model is a DynamicRowArrayModel
+      this.handleArrayGroupPatch(pathCombiner, event, (event as any).context.context);
+      return;
+    }
+
    const path = this.getFieldPathFromEvent(event);
    const value = this.getFieldValueFromChangeEvent(event);
+    console.log(value);
    if (this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
      this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
-    } else if (isNotEmpty(value)) {
+    } else if ((isNotEmpty(value) && typeof value === 'string') || (isNotEmpty(value) && value instanceof FormFieldMetadataValueObject && value.hasValue())) {
      this.operationsBuilder.remove(pathCombiner.getPath(path));
    }
  }
@@ -352,17 +365,25 @@ export class SectionFormOperationsService {
                                              event: DynamicFormControlEvent,
                                              previousValue: FormFieldPreviousValueObject,
                                              hasStoredValue: boolean): void {
+
+   if (event.context && event.context instanceof DynamicFormArrayGroupModel) {
+      // Model is a DynamicRowArrayModel
+      this.handleArrayGroupPatch(pathCombiner, event, (event as any).context.context);
+      return;
+    }
+
    const path = this.getFieldPathFromEvent(event);
    const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(event);
    const value = this.getFieldValueFromChangeEvent(event);
    // Detect which operation must be dispatched
-    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)) {
+    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)
+      || this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
      // It's a qualdrup model
      this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
    } else if (this.formBuilder.isRelationGroup(event.model)) {
      // It's a relation model
      this.dispatchOperationsFromMap(this.getValueMap(value), pathCombiner, event, previousValue);
-    } else if (this.formBuilder.hasArrayGroupValue(event.model) && hasNoValue((event.model as any).relationshipConfig)) {
+    } else if (this.formBuilder.hasArrayGroupValue(event.model)) {
      // Model has as value an array, so dispatch an add operation with entire block of values
      this.operationsBuilder.add(
        pathCombiner.getPath(segmentedPath),
@@ -398,13 +419,21 @@ export class SectionFormOperationsService {
          value);
      }
      previousValue.delete();
-    } else if (value.hasValue() && (isUndefined(this.getArrayIndexFromEvent(event))
-        || this.getArrayIndexFromEvent(event) === 0)) {
+    } else if (value.hasValue()) {
+      // Here model has no previous value but a new one
+      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(
          pathCombiner.getPath(segmentedPath),
          value, true);
+      } else {
+        // Model is part of an array model but is not the first item,
+        // so dispatch an add operation that add a value to an existent metadata
+        this.operationsBuilder.add(
+          pathCombiner.getPath(path),
+          value);
+      }
    }
  }

@@ -454,4 +483,38 @@ export class SectionFormOperationsService {

    previousValue.delete();
  }
+
+  /**
+   * Handle form move operations
+   *
+   * @param pathCombiner
+   *    the [[JsonPatchOperationPathCombiner]] object for the specified operation
+   * @param event
+   *    the [[DynamicFormControlEvent]] for the specified operation
+   * @param previousValue
+   *    the [[FormFieldPreviousValueObject]] for the specified operation
+   */
+  private dispatchOperationsFromMoveEvent(pathCombiner: JsonPatchOperationPathCombiner,
+                                          event: DynamicFormControlEvent,
+                                          previousValue: FormFieldPreviousValueObject) {
+
+    return this.handleArrayGroupPatch(pathCombiner, event.$event, (event as any).$event.arrayModel);
+  }
+
+  /**
+   * Specific patch handler for a DynamicRowArrayModel.
+   * Configure a Patch ADD with the current array value.
+   * @param pathCombiner
+   * @param event
+   * @param model
+   */
+  private handleArrayGroupPatch(pathCombiner: JsonPatchOperationPathCombiner,
+                                event,
+                                model: DynamicRowArrayModel) {
+    const arrayValue = this.formBuilder.getValueFromModel([model]);
+    const segmentedPath2 = this.getFieldPathSegmentedFromChangeEvent(event);
+    this.operationsBuilder.add(
+      pathCombiner.getPath(segmentedPath2),
+      arrayValue[segmentedPath2], false);
+  }
 }
--- a/src/app/submission/sections/form/section-form.component.html
+++ b/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>
--- a/src/app/submission/sections/form/section-form.component.ts
+++ b/src/app/submission/sections/form/section-form.component.ts
@@ -19,7 +19,7 @@ import { FormComponent } from '../../../shared/form/form.component';
 import { FormService } from '../../../shared/form/form.service';
 import { SectionModelComponent } from '../models/section.model';
 import { SubmissionFormsConfigService } from '../../../core/config/submission-forms-config.service';
-import { hasNoValue, hasValue, isNotEmpty, isUndefined } from '../../../shared/empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../../../shared/empty.util';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { SubmissionFormsModel } from '../../../core/config/models/config-submission-forms.model';
 import { SubmissionSectionError, SubmissionSectionObject } from '../../objects/submission-objects.reducer';
@@ -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);
    }
  }

@@ -451,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: DynamicFormControlEvent) {
+    this.formOperationsService.dispatchOperationsFromEvent(
+      this.pathCombiner,
+      event,
+      this.previousValue,
+      null);
+  }
 }
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1267,7 +1267,7 @@



-  "form.add": "Add",
+  "form.add": "Add more",

  "form.add-help": "Click here to add the current entry and to add another one",

@@ -1277,6 +1277,8 @@

  "form.clear-help": "Click here to remove the selected value",

+  "form.discard": "Discard",
+
  "form.edit": "Edit",

  "form.edit-help": "Click here to edit the selected value",
@@ -1317,6 +1319,7 @@

  "form.submit": "Submit",

+  "form.repeatable.sort.tip": "Drop the item in the new position",


  "home.description": "",
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -56,3 +56,10 @@ ds-admin-sidebar {
  left: auto;
  width: calc(100% - 53px);
 }
+
+.ds-submission-reorder-dragging {
+  .ds-hint,
+  button {
+    display: none;
+  }
+}