fix issue where the disabled field would be rendered for each selected relationship

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

@@ -7,7 +7,8 @@
            [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 || isRelationship, 'd-none': model.hasSelectableMetadata && value?.isVirtual}">
+    <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
+                      'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
         <div [ngClass]="getClass('grid', 'control')">
             <ng-container #componentViewContainer></ng-container>
             <small *ngIf="hasHint && context?.index === 0 && (!showErrorMessages || errorMessages.length === 0)"
@@ -55,14 +56,17 @@
         </ds-existing-metadata-list-element>
         <ds-existing-relation-list-element
                 *ngIf="!model.hasSelectableMetadata"
+                [ngClass]="{'d-block pb-2 pt-2': !context?.index}"
                 [reoRel]="relationshipValue$ | async"
                 [submissionItem]="item$ | async"
                 [listId]="listId"
                 [metadataFields]="model.metadataFields"
                 [submissionId]="model.submissionId"
-                [relationshipOptions]="model.relationship">
+                [relationshipOptions]="model.relationship"
+        >
         </ds-existing-relation-list-element>
     </ng-container>
     <ng-content></ng-content>
 </div>
 
+

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

@@ -395,7 +395,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     const arrayContext: DynamicFormArrayModel = (this.context as DynamicFormArrayGroupModel).context;
     const path = this.formBuilderService.getPath(arrayContext);
     const formArrayControl = this.group.root.get(path) as FormArray;
-
+    console.log('this.listId', this.listId);
     this.formBuilderService.removeFormArrayGroup(this.context.index, formArrayControl, arrayContext);
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html

@@ -1,4 +1,4 @@
-<div class="d-flex mt-2">
+<div class="d-flex">
     <span class="mr-auto text-contents">
         <ng-container *ngIf="!relatedItem">
             <ds-loading [showMessage]="false"></ds-loading>

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

@@ -1,4 +1,12 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  EventEmitter
+} from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { DynamicFormArrayGroupModel } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
@@ -53,51 +61,6 @@ export abstract class Reorderable {
   }
 }
 
-/**
- * A Reorderable representation of a FormFieldMetadataValue
- */
-export class ReorderableFormFieldMetadataValue extends Reorderable {
-
-  constructor(
-    public metadataValue: FormFieldMetadataValueObject,
-    public model: DynamicConcatModel,
-    public control: FormControl,
-    public group: DynamicFormArrayGroupModel,
-    oldIndex?: number,
-    newIndex?: number
-  ) {
-    super(oldIndex, newIndex);
-    this.metadataValue = metadataValue;
-  }
-
-  /**
-   * Return the id for this Reorderable
-   */
-  getId(): string {
-    if (hasValue(this.metadataValue.authority)) {
-      return this.metadataValue.authority;
-    } else {
-      // can't use UUIDs, they're generated client side
-      return this.metadataValue.value;
-    }
-  }
-
-  /**
-   * Return the place metadata for this Reorderable
-   */
-  getPlace(): number {
-    return this.metadataValue.place;
-  }
-
-  /**
-   * Update the Reorderable
-   */
-  update(): Observable<FormFieldMetadataValueObject> {
-    this.oldIndex = this.newIndex;
-    return observableOf(this.metadataValue);
-  }
-
-}
 
 /**
  * Represents a single existing relationship value as metadata in submission
@@ -116,6 +79,7 @@ export class ExistingRelationListElementComponent implements OnInit, OnChanges,
   @Input() submissionId: string;
   relatedItem: Item;
   viewType = ViewMode.ListElement;
+  @Output() remove: EventEmitter<any> = new EventEmitter();
 
   /**
    * List of subscriptions to unsubscribe from

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

@@ -11,7 +11,10 @@
         <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')">
+                <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>