changed rendering of values

src/app/core/submission/submission-response-parsing.service.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
+import { DSOResponseParsingService } from '../data/dso-response-parsing.service';
 
 import { ResponseParsingService } from '../data/parsing.service';
 import { RestRequest } from '../data/request.models';
@@ -76,7 +77,9 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
   protected toCache = false;
 
   constructor(@Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
-              protected objectCache: ObjectCacheService) {
+              protected objectCache: ObjectCacheService,
+              protected dsoParser: DSOResponseParsingService
+  ) {
     super();
   }
 
@@ -88,6 +91,7 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
    * @returns {RestResponse}
    */
   parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
+    this.dsoParser.parse(request, data);
     if (isNotEmpty(data.payload)
       && isNotEmpty(data.payload._links)
       && this.isSuccessStatus(data.statusCode)) {
@@ -162,5 +166,4 @@ export class SubmissionResponseParsingService extends BaseResponseParsingService
 
     return normalizedDefinition;
   }
-
 }

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.html

@@ -1,6 +1,6 @@
 <div class="d-flex">
     <div class="person-thumbnail pr-2">
-        <ds-thumbnail [thumbnail]="dso.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>
+<!--        <ds-thumbnail [thumbnail]="dso.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>-->
     </div>
     <div class="flex-grow-1">
         <ds-person-input-suggestions [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)" (submitSuggestion)="selectCustom($event)"></ds-person-input-suggestions>

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container-wrapper/ds-dynamic-form-control-container-wrapper.component.html

@@ -1,41 +0,0 @@
-<div class="form-group"
-     [formGroup]="group">
-    <ds-dynamic-form-control-container
-            *ngFor="let field of model.group"
-            [formId]="formId"
-            [group]="group"
-            [hasErrorMessaging]="field.hasErrorMessages"
-            [hidden]="field.hidden"
-            [layout]="layout"
-            [model]="field"
-            [templates]="inputTemplateList"
-            (dfBlur)="blur.emit($event)"
-            (dfChange)="change.emit($event)"
-            (dfFocus)="focus.emit($event)"></ds-dynamic-form-control-container>
-    <div *ngIf="hasRelationLookup" class="col-auto text-center">
-        <button *ngIf="model.repeatable" class="btn btn-secondary"
-                type="submit"
-                ngbTooltip="{{'form.add-help' | translate}}"
-                placement="top"
-                (click)="addValue(); $event.stopPropagation();">{{'form.add' | translate}}
-        </button>
-        <button class="btn btn-secondary"
-                type="submit"
-                ngbTooltip="{{'form.lookup-help' | translate}}"
-                placement="top"
-                (click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
-        </button>
-    </div>
-    <div *ngIf="hasRelationLookup" class="mt-3">
-        <ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">
-            <ds-existing-metadata-list-element cdkDrag
-                                               *ngFor="let reorderable of reorderables; trackBy: trackReorderable"
-                                               [reoRel]="reorderable"
-                                               [submissionItem]="item"
-                                               [listId]="listId"
-                                               [metadataFields]="model.metadataFields"
-                                               [relationshipOptions]="model.relationship">
-            </ds-existing-metadata-list-element>
-        </ul>
-    </div>
-</div>

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container-wrapper/ds-dynamic-form-control-container-wrapper.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DsDynamicFormControlContainerWrapperComponent } from './ds-dynamic-form-control-container-wrapper.component';
-
-describe('DsDynamicFormControlContainerWrapperComponent', () => {
-  let component: DsDynamicFormControlContainerWrapperComponent;
-  let fixture: ComponentFixture<DsDynamicFormControlContainerWrapperComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DsDynamicFormControlContainerWrapperComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DsDynamicFormControlContainerWrapperComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container-wrapper/ds-dynamic-form-control-container-wrapper.component.ts

@@ -1,198 +0,0 @@
-import { ChangeDetectorRef, Component, ComponentFactoryResolver, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
-import {
-  DynamicFormControlContainerComponent,
-  DynamicFormControlEvent,
-  DynamicFormLayout,
-  DynamicFormLayoutService,
-  DynamicFormValidationService,
-  DynamicTemplateDirective
-} from '@ng-dynamic-forms/core';
-import { TranslateService } from '@ngx-translate/core';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { RelationshipService } from '../../../../../core/data/relationship.service';
-import { SelectableListService } from '../../../../object-list/selectable-list/selectable-list.service';
-import { ItemDataService } from '../../../../../core/data/item-data.service';
-import { Store } from '@ngrx/store';
-import { AppState } from '../../../../../app.reducer';
-import { SubmissionObjectDataService } from '../../../../../core/submission/submission-object-data.service';
-import { FormGroup } from '@angular/forms';
-import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
-import { Reorderable, ReorderableRelationship } from '../existing-metadata-list-element/existing-metadata-list-element.component';
-import { Item } from '../../../../../core/shared/item.model';
-import { hasValue } from '../../../../empty.util';
-import { getAllSucceededRemoteData, getRemoteDataPayload, getSucceededRemoteData } from '../../../../../core/shared/operators';
-import { map, startWith, switchMap } from 'rxjs/operators';
-import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
-import { RemoteData } from '../../../../../core/data/remote-data';
-import { PaginatedList } from '../../../../../core/data/paginated-list';
-import { Relationship } from '../../../../../core/shared/item-relationships/relationship.model';
-import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
-import { SearchResult } from '../../../../search/search-result.model';
-import { DsDynamicLookupRelationModalComponent } from '../relation-lookup-modal/dynamic-lookup-relation-modal.component';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-
-@Component({
-  selector: 'ds-dynamic-form-control-container-wrapper',
-  templateUrl: './ds-dynamic-form-control-container-wrapper.component.html',
-  styleUrls: ['./ds-dynamic-form-control-container-wrapper.component.scss']
-})
-export class DsDynamicFormControlContainerWrapperComponent implements OnInit, OnDestroy {
-  @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
-
-  @Input() formId: string;
-  @Input() context: any | null = null;
-  @Input() group: FormGroup;
-  @Input() hasErrorMessaging = false;
-  @Input() layout = null as DynamicFormLayout;
-  @Input() model: any;
-
-  reorderables$: Observable<ReorderableRelationship[]>;
-  reorderables: ReorderableRelationship[];
-  hasRelationLookup: boolean;
-  modalRef: NgbModalRef;
-  item: Item;
-  listId: string;
-  searchConfig: string;
-
-  /**
-   * List of subscriptions to unsubscribe from
-   */
-  private subs: Subscription[] = [];
-
-  /* tslint:disable:no-output-rename */
-  @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
-  @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
-  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
-
-  constructor(
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected layoutService: DynamicFormLayoutService,
-    protected validationService: DynamicFormValidationService,
-    protected translateService: TranslateService,
-    private modalService: NgbModal,
-    private relationService: RelationshipService,
-    private selectableListService: SelectableListService,
-    private itemService: ItemDataService,
-    private relationshipService: RelationshipService,
-    private zone: NgZone,
-    private store: Store<AppState>,
-    private submissionObjectService: SubmissionObjectDataService,
-    private ref: ChangeDetectorRef
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.hasRelationLookup = hasValue(this.model.relationship);
-    this.reorderables = [];
-    if (this.hasRelationLookup) {
-      this.listId = 'list-' + this.model.relationship.relationshipType;
-      const item$ = this.submissionObjectService
-        .findById(this.model.submissionId).pipe(
-          getAllSucceededRemoteData(),
-          getRemoteDataPayload(),
-          switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>)
-            .pipe(
-              getAllSucceededRemoteData(),
-              getRemoteDataPayload()
-            )
-          )
-        );
-
-      this.subs.push(item$.subscribe((item) => this.item = item));
-      this.reorderables$ = item$.pipe(
-        switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType)
-          .pipe(
-            getAllSucceededRemoteData(),
-            getRemoteDataPayload(),
-            map((relationshipList: PaginatedList<Relationship>) => relationshipList.page),
-            startWith([]),
-            switchMap((relationships: Relationship[]) =>
-              observableCombineLatest(
-                relationships.map((relationship: Relationship) =>
-                  relationship.leftItem.pipe(
-                    getSucceededRemoteData(),
-                    getRemoteDataPayload(),
-                    map((leftItem: Item) => {
-                      return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
-                    }),
-                  )
-                )
-              )
-            ),
-            map((relationships: ReorderableRelationship[]) =>
-              relationships
-                .sort((a: Reorderable, b: Reorderable) => {
-                    return Math.sign(a.getPlace() - b.getPlace());
-                  }
-                )
-            )
-          )
-        )
-      );
-
-      this.subs.push(this.reorderables$.subscribe((rs) => {
-        this.reorderables = rs;
-        this.ref.detectChanges();
-      }));
-
-      this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe(
-        map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))),
-      ).subscribe((relatedItems: Array<SearchResult<Item>>) => this.selectableListService.select(this.listId, relatedItems));
-    }
-  }
-
-  openLookup() {
-    this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
-      size: 'lg'
-    });
-    const modalComp = this.modalRef.componentInstance;
-    modalComp.repeatable = this.model.repeatable;
-    modalComp.listId = this.listId;
-    modalComp.relationshipOptions = this.model.relationship;
-    modalComp.label = this.model.label;
-    modalComp.metadataFields = this.model.metadataFields;
-    modalComp.item = this.item;
-  }
-
-  addValue() {
-    // console.log(this.model.value);
-    // const event = { type: DynamicFormControlEventType.Change, model: this.model } as any;
-    // this.change.emit(event);
-  }
-
-  moveSelection(event: CdkDragDrop<Relationship>) {
-    this.zone.runOutsideAngular(() => {
-      moveItemInArray(this.reorderables, event.previousIndex, event.currentIndex);
-      const reorderables = this.reorderables.map((reo: Reorderable, index: number) => {
-          reo.oldIndex = reo.getPlace();
-          reo.newIndex = index;
-          return reo;
-        }
-      );
-      return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
-          if (rel.oldIndex !== rel.newIndex) {
-            return this.relationshipService.updatePlace(rel);
-          } else {
-            return observableOf(undefined);
-          }
-        })
-      ).pipe(getSucceededRemoteData()).subscribe();
-    })
-  }
-
-  /**
-   * Prevent unnecessary rerendering so fields don't lose focus
-   */
-  trackReorderable(index, reorderable: Reorderable) {
-    return hasValue(reorderable) ? reorderable.getId() : undefined;
-  }
-
-  /**
-   * Unsubscribe from all subscriptions
-   */
-  ngOnDestroy(): void {
-    this.subs
-      .filter((sub) => hasValue(sub))
-      .forEach((sub) => sub.unsubscribe());
-  }
-}

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -1,13 +1,14 @@
-
+<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+     [formGroup]="group"
+     [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
 
     <label *ngIf="!isCheckbox && hasLabel"
            [for]="model.id"
            [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
            [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
-
     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
-
+<!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
-    <div [ngClass]="{'form-row': model.hasLanguages }">
+    <div [ngClass]="{'form-row': model.hasLanguages || hasRelationLookup, 'd-none': hasRelationLookup && model.value}">
         <div [ngClass]="getClass('grid', 'control')">
 
             <ng-container #componentViewContainer></ng-container>
@@ -34,8 +35,41 @@
                 <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
             </select>
         </div>
+
+        <div *ngIf="hasRelationLookup" class="col-auto text-center">
+            <button class="btn btn-secondary"
+                    type="submit"
+                    ngbTooltip="{{'form.lookup-help' | translate}}"
+                    placement="top"
+                    (click)="openLookup(); $event.stopPropagation();">{{'form.lookup' | translate}}
+            </button>
+        </div>
     </div>
 
     <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
-
+    <ng-container *ngIf="hasRelationLookup && model.value && reorderable">
+        <ds-existing-metadata-list-element cdkDrag
+                                           [reoRel]="reorderable"
+                                           [submissionItem]="item"
+                                           [listId]="listId"
+                                           [metadataFields]="model.metadataFields"
+                                           [relationshipOptions]="model.relationship">
+        </ds-existing-metadata-list-element>
+    </ng-container>
     <ng-content></ng-content>
+
+
+<!--    <div *ngIf="hasRelationLookup" class="mt-3">-->
+<!--        <ul class="list-unstyled" cdkDropList (cdkDropListDropped)="moveSelection($event)">-->
+<!--            <ds-existing-metadata-list-element cdkDrag-->
+<!--                                               *ngFor="let reorderable of reorderables; trackBy: trackReorderable"-->
+<!--                                               [reoRel]="reorderable"-->
+<!--                                               [submissionItem]="item"-->
+<!--                                               [listId]="listId"-->
+<!--                                               [metadataFields]="model.metadataFields"-->
+<!--                                               [relationshipOptions]="model.relationship">-->
+<!--            </ds-existing-metadata-list-element>-->
+<!--        </ul>-->
+<!--    </div>-->
+</div>
+

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -1,12 +1,14 @@
 import {
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ComponentFactoryResolver,
   ContentChildren,
   EventEmitter,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
+  OnInit,
   Output,
   QueryList,
   SimpleChanges,
@@ -48,6 +50,10 @@ import {
   DynamicNGBootstrapTimePickerComponent
 } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
+import {
+  Reorderable,
+  ReorderableRelationship
+} from './existing-metadata-list-element/existing-metadata-list-element.component';
 
 import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
@@ -56,7 +62,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/dat
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
 import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
-import { isNotEmpty, isNotUndefined } from '../../../empty.util';
+import { hasValue, isNotEmpty, isNotUndefined } from '../../../empty.util';
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-lookup-name.model';
 import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
 import { DsDatePickerComponent } from './models/date-picker/date-picker.component';
@@ -69,12 +75,30 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
-import { map } from 'rxjs/operators';
+import { map, startWith, switchMap, take } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
 import { SearchResult } from '../../../search/search-result.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { RelationshipService } from '../../../../core/data/relationship.service';
+import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
 import { DsDynamicDisabledComponent } from './models/disabled/dynamic-disabled.component';
 import { DYNAMIC_FORM_CONTROL_TYPE_DISABLED } from './models/disabled/dynamic-disabled.model';
+import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/dynamic-lookup-relation-modal.component';
+import { getAllSucceededRemoteData, getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { Item } from '../../../../core/shared/item.model';
+import { ItemDataService } from '../../../../core/data/item-data.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../../../app.reducer';
+import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
+import { SubmissionObject } from '../../../../core/submission/models/submission-object.model';
+import { PaginatedList } from '../../../../core/data/paginated-list';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
+import { MetadataValue } from '../../../../core/shared/metadata.models';
+import { DynamicRowArrayModel } from './models/ds-dynamic-row-array-model';
 
 export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
   switch (model.type) {
@@ -145,7 +169,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
   templateUrl: './ds-dynamic-form-control-container.component.html',
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnChanges {
+export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnInit, OnChanges, OnDestroy {
   @ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
   // tslint:disable-next-line:no-input-rename
   @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
@@ -158,6 +182,18 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @Input() hasErrorMessaging = false;
   @Input() layout = null as DynamicFormLayout;
   @Input() model: any;
+  reorderable$: Observable<ReorderableRelationship>;
+  reorderable: ReorderableRelationship;
+  hasRelationLookup: boolean;
+  modalRef: NgbModalRef;
+  item: Item;
+  listId: string;
+  searchConfig: string;
+
+  /**
+   * List of subscriptions to unsubscribe from
+   */
+  private subs: Subscription[] = [];
 
   /* tslint:disable:no-output-rename */
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -178,11 +214,97 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     protected layoutService: DynamicFormLayoutService,
     protected validationService: DynamicFormValidationService,
     protected translateService: TranslateService,
+    private modalService: NgbModal,
+    private relationService: RelationshipService,
+    private selectableListService: SelectableListService,
+    private itemService: ItemDataService,
+    private relationshipService: RelationshipService,
+    private zone: NgZone,
+    private store: Store<AppState>,
+    private submissionObjectService: SubmissionObjectDataService,
+    private ref: ChangeDetectorRef
   ) {
     super(componentFactoryResolver, layoutService, validationService);
   }
 
+  ngOnInit(): void {
+    if (this.model.type === 'ARRAY') {
+      console.log((this.model as DynamicRowArrayModel).get(1));
+    }
+    this.hasRelationLookup = hasValue(this.model.relationship);
+    if (this.hasRelationLookup) {
 
+      this.listId = 'list-' + this.model.relationship.relationshipType;
+      const item$ = this.submissionObjectService
+        .findById(this.model.submissionId).pipe(
+          getAllSucceededRemoteData(),
+          getRemoteDataPayload(),
+          switchMap((submissionObject: SubmissionObject) => (submissionObject.item as Observable<RemoteData<Item>>)
+            .pipe(
+              getAllSucceededRemoteData(),
+              getRemoteDataPayload()
+            )
+          )
+        );
+
+      this.subs.push(item$.subscribe((item) => this.item = item));
+      const value = Object.assign(new MetadataValue(), this.model.value);
+      if (hasValue(value) && value.isVirtual) {
+        this.reorderable$ = this.relationshipService.findById(value.virtualValue)
+          .pipe(
+            getAllSucceededRemoteData(),
+            getRemoteDataPayload(),
+            switchMap((relationship: Relationship) =>
+              relationship.leftItem.pipe(
+                getSucceededRemoteData(),
+                getRemoteDataPayload(),
+                map((leftItem: Item) => {
+                  return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
+                }),
+              )
+            )
+          );
+
+        this.subs.push(this.reorderable$.subscribe((rs) => {
+          this.reorderable = rs;
+          this.ref.detectChanges();
+        }));
+
+      }
+      // this.reorderable$ =
+      //   item$.pipe(
+      //     switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType)
+      //       .pipe(
+      //         getAllSucceededRemoteData(),
+      //         getRemoteDataPayload(),
+      //         map((relationshipList: PaginatedList<Relationship>) => relationshipList.page),
+      //         startWith([]),
+      //         switchMap((relationships: Relationship[]) =>
+      //           observableCombineLatest(
+      //             relationships.map((relationship: Relationship) =>
+      //               relationship.leftItem.pipe(
+      //                 getSucceededRemoteData(),
+      //                 getRemoteDataPayload(),
+      //                 map((leftItem: Item) => {
+      //                   return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
+      //                 }),
+      //               )
+      //             ))),
+      //         map((relationships: ReorderableRelationship[]) =>
+      //           relationships
+      //             .sort((a: Reorderable, b: Reorderable) => {
+      //               return Math.sign(a.getPlace() - b.getPlace());
+      //             })
+      //         )
+      //       )
+      //     )
+      //   );
+
+      this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe(
+        map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))),
+      ).subscribe((relatedItems: Array<SearchResult<Item>>) => this.selectableListService.select(this.listId, relatedItems));
+    }
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes) {
@@ -224,4 +346,53 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   public hasResultsSelected(): Observable<boolean> {
     return this.model.value.pipe(map((list: Array<SearchResult<DSpaceObject>>) => isNotEmpty(list)));
   }
+
+  openLookup() {
+    this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
+      size: 'lg'
+    });
+    const modalComp = this.modalRef.componentInstance;
+    modalComp.repeatable = this.model.repeatable;
+    modalComp.listId = this.listId;
+    modalComp.relationshipOptions = this.model.relationship;
+    modalComp.label = this.model.label;
+    modalComp.metadataFields = this.model.metadataFields;
+    modalComp.item = this.item;
+  }
+
+  // moveSelection(event: CdkDragDrop<Relationship>) {
+  //   this.zone.runOutsideAngular(() => {
+  //     moveItemInArray(this.reorderables, event.previousIndex, event.currentIndex);
+  //     const reorderables = this.reorderables.map((reo: Reorderable, index: number) => {
+  //         reo.oldIndex = reo.getPlace();
+  //         reo.newIndex = index;
+  //         return reo;
+  //       }
+  //     );
+  //     return observableCombineLatest(reorderables.map((rel: ReorderableRelationship) => {
+  //         if (rel.oldIndex !== rel.newIndex) {
+  //           return this.relationshipService.updatePlace(rel);
+  //         } else {
+  //           return observableOf(undefined);
+  //         }
+  //       })
+  //     ).pipe(getSucceededRemoteData()).subscribe();
+  //   })
+  // }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  ngOnDestroy(): void {
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+  }
+
+  /**
+   * Prevent unnecessary rerendering so fields don't lose focus
+   */
+  trackReorderable(index, reorderable: Reorderable) {
+    return hasValue(reorderable) ? reorderable.getId() : undefined;
+  }
 }

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

@@ -1,4 +1,4 @@
-<ds-dynamic-form-control-container-wrapper *ngFor="let model of formModel; trackBy: trackByFn"
+<ds-dynamic-form-control-container *ngFor="let model of formModel; trackBy: trackByFn"
                                    [formId]="formId"
                                    [group]="formGroup"
                                    [hasErrorMessaging]="model.hasErrorMessages"
@@ -8,5 +8,5 @@
                                    [ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
                                    [templates]="templates"
                                    (dfBlur)="onEvent($event, 'blur')"
-                                   (dfChange)="onEvent($event, 'change'); test($event);"
+                                   (dfChange)="onEvent($event, 'change')"
-                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container-wrapper>
+                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.ts

@@ -14,7 +14,6 @@ import { SelectableListService } from '../../../../object-list/selectable-list/s
 import { Store } from '@ngrx/store';
 import { AppState } from '../../../../../app.reducer';
 import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
-import { Metadata } from '../../../../../core/shared/metadata.utils';
 
 export abstract class Reorderable {
   constructor(public oldIndex?: number, public newIndex?: number) {

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts

@@ -44,19 +44,18 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     this.required = config.required;
     this.metadataFields = config.metadataFields;
     this.submissionId = config.submissionId;
-
     this.valueUpdates = new Subject<string>();
     this.valueUpdates.subscribe((value: string) => this.value = value);
   }
 
   get value() {
-    const firstValue = (this.get(0) as DsDynamicInputModel).value;
+    const firstValue = (this.get(0) as DsDynamicInputModel).value as any;
-    const secondValue = (this.get(1) as DsDynamicInputModel).value;
+    const secondValue = (this.get(1) as DsDynamicInputModel).value as any;
 
     if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) {
-      return new FormFieldMetadataValueObject(firstValue + this.separator + secondValue);
+      return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value + this.separator + secondValue.value);
     } else if (isNotEmpty(firstValue)) {
-      return new FormFieldMetadataValueObject(firstValue);
+      return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value);
     } else {
       return null;
     }
@@ -71,12 +70,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     } else {
       tempValue = value.value;
     }
-
+    values = [...tempValue.split(this.separator), null].map((v) => Object.assign(new FormFieldMetadataValueObject(), value, { value: v }));
-    if (tempValue.includes(this.separator)) {
-      values = tempValue.split(this.separator);
-    } else {
-      values = [tempValue, null];
-    }
 
     if (values[0]) {
       (this.get(0) as DsDynamicInputModel).valueUpdates.next(values[0]);

src/app/shared/form/builder/parsers/field-parser.ts

@@ -14,6 +14,7 @@ import { setLayout } from './parser.utils';
 import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model';
 import { ParserOptions } from './parser-options';
 import { RelationshipOptions } from '../models/relationship-options.model';
+import { relationship } from '../../../../core/cache/builders/build-decorators';
 
 export const SUBMISSION_ID: InjectionToken<string> = new InjectionToken<string>('submissionId');
 export const CONFIG_DATA: InjectionToken<FormFieldModel> = new InjectionToken<FormFieldModel>('configData');
@@ -39,7 +40,6 @@ export abstract class FieldParser {
       && (this.configData.input.type !== 'list')
       && (this.configData.input.type !== 'tag')
       && (this.configData.input.type !== 'group')
-      && isEmpty(this.configData.selectableRelationship)
     ) {
       let arrayCounter = 0;
       let fieldArrayCounter = 0;
@@ -48,10 +48,11 @@ export abstract class FieldParser {
         id: uniqueId() + '_array',
         label: this.configData.label,
         initialCount: this.getInitArrayIndex(),
-        notRepeatable: !this.configData.repeatable,
+        notRepeatable: !this.configData.repeatable || hasValue(this.configData.selectableRelationship),
         required: isNotEmpty(this.configData.mandatory),
         groupFactory: () => {
           let model;
+          console.log(arrayCounter);
           if ((arrayCounter === 0)) {
             model = this.modelFactory();
             arrayCounter++;
@@ -85,7 +86,7 @@ export abstract class FieldParser {
 
     } else {
       const model = this.modelFactory(this.getInitFieldValue());
-      if (model.hasLanguages) {
+      if (model.hasLanguages || isNotEmpty(model.relationship)) {
         setLayout(model, 'grid', 'control', 'col');
       }
       return model;

src/app/shared/shared.module.ts

@@ -48,10 +48,7 @@ import { LogOutComponent } from './log-out/log-out.component';
 import { FormComponent } from './form/form.component';
 import { DsDynamicTypeaheadComponent } from './form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component';
 import { DsDynamicScrollableDropdownComponent } from './form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
-import {
+import { DsDynamicFormControlContainerComponent, dsDynamicFormControlMapFn } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
-  DsDynamicFormControlContainerComponent,
-  dsDynamicFormControlMapFn
-} from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
 import { DsDynamicFormComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form.component';
 import { DYNAMIC_FORM_CONTROL_MAP_FN, DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
@@ -176,7 +173,6 @@ import { MetadataRepresentationListComponent } from '../+item-page/simple/metada
 import { SelectableListItemControlComponent } from './object-collection/shared/selectable-list-item-control/selectable-list-item-control.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ExistingMetadataListElementComponent } from './form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component';
-import { DsDynamicFormControlContainerWrapperComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container-wrapper/ds-dynamic-form-control-container-wrapper.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -438,8 +434,7 @@ const DIRECTIVES = [
     ...ENTRY_COMPONENTS,
     ...SHARED_ITEM_PAGE_COMPONENTS,
     PublicationSearchResultListElementComponent,
-    ExistingMetadataListElementComponent,
+    ExistingMetadataListElementComponent
-    DsDynamicFormControlContainerWrapperComponent
   ],
   providers: [
     ...PROVIDERS