fixed remove buttons for both relatinoships and metadata

src/app/core/shared/metadata.models.ts

@@ -3,7 +3,7 @@ import { autoserialize, Serialize, Deserialize } from 'cerialize';
 import { hasValue } from '../../shared/empty.util';
 /* tslint:disable:max-classes-per-file */
 
-const VIRTUAL_METADATA_PREFIX = 'virtual::';
+export const VIRTUAL_METADATA_PREFIX = 'virtual::';
 
 /** A single metadata value and its properties. */
 export interface MetadataValueInterface {

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

@@ -58,6 +58,8 @@
                 [relationshipOptions]="model.relationship">
         </ds-existing-metadata-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

@@ -16,7 +16,7 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormArray, FormGroup } from '@angular/forms';
 
 import {
   DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
@@ -29,7 +29,7 @@ import {
   DYNAMIC_FORM_CONTROL_TYPE_SELECT,
   DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
   DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER,
-  DynamicDatePickerModel,
+  DynamicDatePickerModel, DynamicFormArrayModel,
   DynamicFormControl,
   DynamicFormControlContainerComponent,
   DynamicFormControlEvent,
@@ -331,4 +331,12 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
       .filter((sub) => hasValue(sub))
       .forEach((sub) => sub.unsubscribe());
   }
+  //
+  //
+  // removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
+  //   const formArrayControl = this.group.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
+  //   this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
+  //   this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
+  //   this.formService.changeForm(this.formId, this.formModel);
+  // }
 }

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

@@ -1,8 +1,9 @@
-<div *ngIf="metadataRepresentation" class="mt-2 mb-4">
+<div *ngIf="metadataRepresentation" class="mt-2 mb-4 d-flex">
-    <button type="button" class="close float-left" aria-label="Close button" (click)="removeSelection()">
+    <span class="d-inline-block align-middle ml-1 mr-auto">
-        <span aria-hidden="true">&times;</span>
-    </button>
-    <span class="d-inline-block align-middle ml-1">
               <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
     </span>
+    <button type="button" class="btn btn-secondary"
+            (click)="removeSelection()">
+        <i class="fas fa-trash" aria-hidden="true"></i>
+    </button>
 </div>

src/app/shared/form/builder/models/form-field-metadata-value.model.ts

@@ -1,7 +1,7 @@
-import { isEmpty, isNotEmpty, isNotNull } from '../../../empty.util';
+import { hasValue, isEmpty, isNotEmpty, isNotNull } from '../../../empty.util';
 import { ConfidenceType } from '../../../../core/integration/models/confidence-type';
 import { PLACEHOLDER_PARENT_METADATA } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
-import { MetadataValueInterface } from '../../../../core/shared/metadata.models';
+import { MetadataValueInterface, VIRTUAL_METADATA_PREFIX } from '../../../../core/shared/metadata.models';
 
 export interface OtherInformation {
   [name: string]: string
@@ -65,6 +65,10 @@ export class FormFieldMetadataValueObject implements MetadataValueInterface {
     return this.hasValue() && this.value === PLACEHOLDER_PARENT_METADATA;
   }
 
+  get isVirtual(): boolean {
+    return hasValue(this.authority) && this.authority.startsWith(VIRTUAL_METADATA_PREFIX);
+  }
+
   toString() {
     return this.display || this.value;
   }

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

@@ -10,9 +10,7 @@
                 (dfBlur)="onBlur($event)"
                 (dfChange)="onChange($event)"
                 (dfFocus)="onFocus($event)">
-
             <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
-                metadata: {{context.metadata}}
                 <!--Array with repeatable items-->
                 <div *ngIf="!context.notRepeatable && (!context.hasRelationship || (context.hasRelationship && index < 1))"
                      class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
@@ -31,7 +29,7 @@
                 </div>
 
                 <!--Array with non repeatable items - Only delete button-->
-                    <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || (context.hasRelationship && index > 0)"
+                <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || (context.hasRelationship && index > 0 && !group.group[0]?.value?.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"
@@ -41,14 +39,6 @@
                         </button>
                     </div>
                 </div>
-
-<!--                <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">-->
-<!--                    <button type="button" class="btn btn-secondary"-->
-<!--                            [disabled]="isItemReadOnly(context, index)"-->
-<!--                            (click)="insertItem($event, group.context, group.index + 1)">-->
-<!--                        {{'form.add' | translate}}-->
-<!--                    </button>-->
-<!--                </div>-->
             </ng-template>
 
         </ds-dynamic-form>

src/app/shared/form/form.component.ts

@@ -322,4 +322,9 @@ export class FormComponent implements OnDestroy, OnInit {
     const control = group.controls[index] as FormControl;
     return { $event, context, control, group, model, type };
   }
+
+
+  print(data) {
+    console.log(data);
+  }
 }