[DURACOM-444] add modal for relation groups

Author: FrancescoMolinaro

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

@@ -1,65 +1,4 @@
-@if ((formCollapsed | async) !== true) {
-  <a
-    class="close position-relative"
-    ngbTooltip="{{'form.group-collapse-help' | translate}}"
-    placement="left">
-    <span class="fas fa-angle-up fa-fw fa-2x"
-      aria-hidden="true"
-    (click)="collapseForm()"></span>
-  </a>
-}
-@if ((formCollapsed | async)) {
-  <a
-    class="close position-relative"
-    ngbTooltip="{{'form.group-expand-help' | translate}}"
-    placement="left">
-    <span class="fas fa-angle-down fa-fw fa-2x"
-      aria-hidden="true"
-    (click)="expandForm()"></span>
-  </a>
-}
-
-<div class="pt-2" [ngClass]="{'border-top': !showErrorMessages, 'border border-danger': showErrorMessages}">
-  @if ((formCollapsed | async) !== true) {
-    <div class="ps-2 row"  @shrinkInOut>
-      <ds-form #formRef="formComponent"
-        class="col-sm-12 col-md-8 col-lg-9 col-xl-10 ps-0"
-        [formId]="formId"
-        [formModel]="formModel"
-        [displaySubmit]="false"
-        [displayCancel]="false"
-        [emitChange]="false"
-        (dfBlur)="onBlur($event)"
-      (dfFocus)="onFocus($event)"></ds-form>
-      @if ((formCollapsed | async) !== true) {
-        <div class="col p-0 m-0 d-flex justify-content-center align-items-center">
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="isMandatoryFieldEmpty()"
-            (click)="save()">
-            <i class="fas fa-save link-primary fa-2x"
-            aria-hidden="true"></i>
-          </button>
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="!editMode"
-            (click)="delete()">
-            <i class="fas fa-trash link-danger fa-2x"
-            aria-hidden="true"></i>
-          </button>
-          <button type="button"
-            class="btn btn-link"
-            [dsBtnDisabled]="isMandatoryFieldEmpty()"
-            (click)="clear()">
-            <i class="fas fa-undo fa-2x"
-            aria-hidden="true"></i>
-          </button>
-        </div>
-      }
-      <div class="clearfix"></div>
-    </div>
-  }
-
+<div class="pt-2">
   <div class="d-flex">
     @if (!chips) {
       <ds-loading [showMessage]="false"></ds-loading>
@@ -76,9 +15,15 @@
     @if (chips && chips.hasItems()) {
       <ds-chips
         [chips]="chips"
-        [editable]="true"
+        [editable]="!model.readOnly"
         [showIcons]="true"
-      (selected)="onChipSelected($event)"></ds-chips>
+        (selected)="onChipSelected($event)"></ds-chips>
     }
+    <button type="button" class="ds-form-add-more btn btn-link"
+            title="{{'form.add' | translate}}"
+            [dsBtnDisabled]="model.readOnly"
+            (click)="openModal()">
+      <span attr.aria-label="{{'form.add' | translate}}"><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+    </button>
   </div>
 </div>