commit with extra wrapper component

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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,198 @@
+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,6 +1,4 @@
-<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"
@@ -9,7 +7,7 @@
 
     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
 
-    <div [ngClass]="{'form-row': model.hasLanguages || hasRelationLookup }">
+    <div [ngClass]="{'form-row': model.hasLanguages }">
         <div [ngClass]="getClass('grid', 'control')">
 
             <ng-container #componentViewContainer></ng-container>
@@ -36,32 +34,8 @@
                 <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-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,14 +1,12 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef,
+  ChangeDetectionStrategy,
   Component,
   ComponentFactoryResolver,
   ContentChildren,
   EventEmitter,
   Input,
-  NgZone,
   OnChanges,
   OnDestroy,
-  OnInit,
   Output,
   QueryList,
   SimpleChanges,
@@ -50,10 +48,6 @@ 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';
@@ -62,7 +56,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 { hasValue, isNotEmpty, isNotUndefined } from '../../../empty.util';
+import { 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';
@@ -75,28 +69,12 @@ 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, startWith, switchMap, take } from 'rxjs/operators';
-import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Observable } 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';
 
 export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
   switch (model.type) {
@@ -167,7 +145,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
   templateUrl: './ds-dynamic-form-control-container.component.html',
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnInit, OnChanges, OnDestroy {
+export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnChanges {
   @ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
   // tslint:disable-next-line:no-input-rename
   @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
@@ -180,18 +158,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @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>();
@@ -212,76 +178,11 @@ 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 {
-    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));
-    }
-  }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes) {
@@ -323,53 +224,4 @@ 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 *ngFor="let model of formModel; trackBy: trackByFn"
+<ds-dynamic-form-control-container-wrapper *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')"
-                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>
+                                   (dfChange)="onEvent($event, 'change'); test($event);"
+                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container-wrapper>

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

@@ -37,5 +37,4 @@ export class DsDynamicFormComponent extends DynamicFormComponent {
   constructor(protected formService: FormBuilderService, protected layoutService: DynamicFormLayoutService) {
     super(formService, layoutService);
   }
-
 }

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

@@ -14,6 +14,7 @@ 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) {
@@ -45,6 +46,22 @@ export class ReorderableRelationship extends Reorderable {
     }
   }
 }
+export class ReorderableMetadata extends Reorderable {
+  metadata: MetadataValue;
+
+  constructor(metadata: MetadataValue, oldIndex?: number, newIndex?: number) {
+    super(oldIndex, newIndex);
+    this.metadata = metadata;
+  }
+
+  getId(): string {
+    return this.metadata.uuid;
+  }
+
+  getPlace(): number {
+      return this.metadata.place
+  }
+}
 
 @Component({
   selector: 'ds-existing-metadata-list-element',

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

@@ -85,7 +85,7 @@ export abstract class FieldParser {
 
     } else {
       const model = this.modelFactory(this.getInitFieldValue());
-      if (model.hasLanguages || isNotEmpty(model.relationship)) {
+      if (model.hasLanguages) {
         setLayout(model, 'grid', 'control', 'col');
       }
       return model;
@@ -247,7 +247,6 @@ export abstract class FieldParser {
       {},
       controlModel.errorMessages,
       { pattern: 'error.validation.pattern' });
-
   }
 
   protected markAsRequired(controlModel) {
@@ -320,7 +319,6 @@ export abstract class FieldParser {
         }
       }
     }
-
     return modelConfig;
   }
 

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

@@ -48,7 +48,6 @@
     <div *ngIf="displaySubmit">
       <hr>
       <div class="form-group row">
-
         <div class="col text-right">
           <button type="reset" class="btn btn-default" (click)="reset()">{{'form.cancel' | translate}}</button>
           <button type="submit" class="btn btn-primary" (click)="onSubmit()"

src/app/shared/shared.module.ts

@@ -176,6 +176,7 @@ 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
@@ -437,7 +438,8 @@ const DIRECTIVES = [
     ...ENTRY_COMPONENTS,
     ...SHARED_ITEM_PAGE_COMPONENTS,
     PublicationSearchResultListElementComponent,
-    ExistingMetadataListElementComponent
+    ExistingMetadataListElementComponent,
+    DsDynamicFormControlContainerWrapperComponent
   ],
   providers: [
     ...PROVIDERS