[DURACOM-444] adapt inline-group parser, style, improve error handling and status reset of form

FrancescoMolinaro · FrancescoMolinaro · commit c32a477c33a3 · 2026-02-05T09:03:23.000+01:00
diff --git a/karma.conf.js b/karma.conf.js
@@ -15,7 +15,7 @@ module.exports = function (config) {
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
-      captureConsole: false,
+      captureConsole: true,
       jasmine: {
         failSpecWithNoExpectations: true
       }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -19,7 +19,7 @@
         <ng-container #componentViewContainer></ng-container>
       </div>
 
-      @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
+      @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || ((!model.repeatable && (!(model?.isModelOfNotRepeatableGroup) || model?.isModelOfNotRepeatableGroup && context?.index === context?.context?.groups?.length - 1)) && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
 <small
              class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
       }
@@ -28,7 +28,7 @@
         <div class="clearfix w-100 mb-2"></div>
       }
 
-      @if (!model.hideErrorMessages && showErrorMessages) {
+      @if (!model.hideErrorMessages && showErrorMessages && (!(model?.isModelOfNotRepeatableGroup) || model?.isModelOfNotRepeatableGroup && context?.index === context?.context?.groups?.length - 1) && isNotRequiredGroupAndEmpty()) {
         <div [id]="id + '_errors'"
           [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
           @for (message of errorMessages; track message) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -461,4 +461,22 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.subs.push(collection$.subscribe((collection) => this.collection = collection));
 
   }
+
+  isNotRequiredGroupAndEmpty(): boolean {
+    const parent = this.model.parent;
+    // Check if the model is part of a group, the group needs to be an inner form and be in the submission form not in a nested form.
+    // The check hasValue(parent.parent) tells if the parent is in the submission or in a modal (nested cases)
+    if (hasValue(parent) && parent.type === 'GROUP' && this.model.isModelOfInnerForm && hasValue(parent.parent)) {
+
+      const groupHasSomeValue = parent.group.some(elem => !!elem.value);
+
+      if (!groupHasSomeValue && !parent.isRequired && parent.group?.length > 1) {
+        this.group.reset();
+      }
+
+      return (groupHasSomeValue && !parent.isRequired) || (hasValue(parent.isRequired) && parent.isRequired);
+    } else {
+      return true;
+    }
+  }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
@@ -80,3 +80,13 @@
     background-color: var(--bs-gray-400);
   }
 }
+
+
+.grey-background{
+  background-color: #f3f3f3;
+  margin-bottom: 10px;
+  padding-top: 10px;
+  margin-left: -1rem;
+  margin-right: -1rem;
+  padding-right: 0px;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -120,7 +120,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
    * If the drag feature is disabled for this DynamicRowArrayModel.
    */
   get dragDisabled(): boolean {
-    return this.model.groups.length === 1 || !this.model.isDraggable;
+    return this.model.groups.length === 1 || !this.model.isDraggable || this.model.notRepeatable;
   }
 
   /**
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts
@@ -53,8 +53,7 @@ export class DynamicRelationGroupModel extends DsDynamicInputModel {
     this.scopeUUID = config.scopeUUID;
     this.submissionScope = config.submissionScope;
     this.isInlineGroup = config.isInlineGroup;
-    const value = config.value || [];
-    this.value = value;
+    this.value = config.value || [];
   }
 
   /*  get value() {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-inline-group/dynamic-relation-inline-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-inline-group/dynamic-relation-inline-group.components.ts
@@ -273,7 +273,6 @@ export class DsDynamicRelationInlineGroupComponent extends DynamicFormControlCom
 
   private copyArrayItem(event) {
     const index = Array.isArray(this.model.value) ? this.model.value.length : event.model.parent.index;
-    const mainRow = event.model.group.find(itemModel => itemModel.name === this.model.name);
     const groupValue = this.getRowValue(event.model as DynamicFormGroupModel);
     this.updateArrayModelValue(groupValue, index);
     this.change.emit();
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -128,7 +128,7 @@ export abstract class FieldParser {
 
       const layout: DynamicFormControlLayout = {
         grid: {
-          group: 'row',
+          group: 'form-row',
         },
       };
 
@@ -400,6 +400,7 @@ export abstract class FieldParser {
 
   protected markAsNotRepeatable(controlModel) {
     controlModel.isModelOfNotRepeatableGroup = true;
+    controlModel.repeatable = false;
 
     controlModel.errorMessages = Object.assign(
       {},
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
@@ -15,21 +15,45 @@
         <!--Array with repeatable items-->
         @if ((!context.notRepeatable) && !isVirtual(context, index) && group.context.groups.length !== 1 && !isItemReadOnly(context, index)) {
           <div
+            [class.isInlineGroupForm-delete]="isInlineGroupForm"
+            [ngClass]="{'justify-content-sm-end' : isInlineGroupForm }"
             class="col-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
               title="{{'form.remove' | translate}}"
               [attr.aria-label]="'form.remove' | translate"
               (click)="removeItem($event, context, index)">
               <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
+            @if (isInlineGroupForm) {
+              <div class="clearfix w-100 mb-2"></div>
+            }
           </div>
         }
+        @if ((!context.notRepeatable) && isInlineGroupForm) {
+          <div class="clearfix w-100">
+            <div class="btn-group" role="group" aria-label="remove button">
+              <button type="button" role="button" class="ds-form-add-more btn btn-link"
+                      title="{{'form.copy' | translate}}"
+                      attr.aria-label="{{'form.copy' | translate}}"
+                      [dsBtnDisabled]="isItemReadOnly(context, index)"
+                      (click)="copyItem($event, group.context, index)">
+                <span><i class="fas fa-copy"></i> {{'form.copy' | translate}}</span>
+              </button>
+            </div>
+          </div>
+        }
+
+
         @if ((!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)) {
-          <div class="clearfix ps-4 w-100">
+          <div class="clearfix w-100"
+               [class.ps-4]="!isInlineGroupForm"
+               [class.white-background]="isInlineGroupForm">
             <div class="btn-group" role="group">
               <button type="button" role="button" class="ds-form-add-more btn btn-link"
                 title="{{'form.add' | translate}}"
                 attr.aria-label="{{'form.add' | translate}}"
+                [class.ps-0]="isInlineGroupForm"
+                [dsBtnDisabled]="isItemReadOnly(context, index)"
                 (click)="insertItem($event, group.context, group.context.groups.length)">
                 <span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
               </button>
@@ -49,6 +73,10 @@
                 [dsBtnDisabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
                 <span>{{'form.discard' | translate}}</span>
               </button>
+              @if (isInlineGroupForm) {
+                <div class="clearfix w-100 mb-2"></div>
+              }
+
             </div>
           </div>
         }
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
@@ -56,3 +56,13 @@ select.form-control {
   padding-left: 15px;
   padding-right: 15px;
 }
+
+.isInlineGroupForm-delete {
+  margin-bottom: -2.5rem;
+  z-index: var(--ds-submission-inline-group-form-delete-z-index);
+  padding-right: calc(0.5 * var(--bs-spacer));
+}
+
+.white-background{
+  background-color: #fff;
+}
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
@@ -1,4 +1,7 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  NgClass,
+} from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -37,6 +40,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import cloneDeep from 'lodash/cloneDeep';
 import findIndex from 'lodash/findIndex';
+import isEqual from 'lodash/isEqual';
 import {
   Observable,
   Subscription,
@@ -50,6 +54,8 @@ import {
 import { BtnDisabledDirective } from '../btn-disabled.directive';
 import { DsDynamicFormComponent } from './builder/ds-dynamic-form-ui/ds-dynamic-form.component';
 import { DynamicConcatModel } from './builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { DynamicRowGroupModel } from './builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+import { DynamicRelationGroupModel } from './builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
 import { DynamicScrollableDropdownModel } from './builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { FormBuilderService } from './builder/form-builder.service';
 import {
@@ -58,6 +64,10 @@ import {
 } from './form.reducer';
 import { FormService } from './form.service';
 
+export interface MetadataFields {
+  [key: string]: FormFieldMetadataValueObject[]
+}
+
 /**
  * The default form component.
  */
@@ -71,6 +81,7 @@ import { FormService } from './form.service';
     BtnDisabledDirective,
     DsDynamicFormComponent,
     DynamicFormsCoreModule,
+    NgClass,
     ReactiveFormsModule,
     TranslateModule,
   ],
@@ -114,7 +125,7 @@ export class FormComponent implements OnDestroy, OnInit {
    * An array of DynamicFormControlModel type
    */
   @Input() formModel: DynamicFormControlModel[];
-  @Input() parentFormModel: DynamicFormGroupModel | DynamicFormGroupModel[];
+  @Input() parentFormModel: DynamicRowGroupModel | DynamicFormGroupModel | DynamicFormGroupModel[];
   @Input() formGroup: UntypedFormGroup;
   @Input() formLayout = null as DynamicFormLayout;
   @Input() arrayButtonsStyle: string;
@@ -184,7 +195,7 @@ export class FormComponent implements OnDestroy, OnInit {
   }
 
   private getFormGroupValidStatus() {
-    return this.getFormGroup().valid;
+    return this.getFormGroup().valid || this.getFormGroup().disabled;
   }
 
   /**
@@ -193,6 +204,7 @@ export class FormComponent implements OnDestroy, OnInit {
   ngOnInit() {
     if (!this.formGroup) {
       this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+      this.formBuilderService.addFormGroups(this.formId, this.formGroup);
 
     } else {
       this.formModel.forEach((model) => {
@@ -204,8 +216,7 @@ export class FormComponent implements OnDestroy, OnInit {
 
     this.formService.initForm(this.formId, this.formModel, this.getFormGroupValidStatus());
 
-    // TODO: take a look to the following method:
-    // this.keepSync();
+    this.keepSync();
 
     this.formValid = this.getFormGroupValidStatus();
 
@@ -239,7 +250,8 @@ export class FormComponent implements OnDestroy, OnInit {
               }
 
               if (field) {
-                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel, fieldIndex);
+                const modelArrayIndex = fieldIndex > 0 ? fieldIndex : null;
+                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel, modelArrayIndex);
                 this.formService.addErrorToField(field, model, error.message);
                 this.changeDetectorRef.detectChanges();
 
@@ -280,6 +292,7 @@ export class FormComponent implements OnDestroy, OnInit {
       .filter((sub) => hasValue(sub))
       .forEach((sub) => sub.unsubscribe());
     this.formService.removeForm(this.formId);
+    this.formBuilderService.removeFormGroup(this.formId);
   }
 
   /**
@@ -295,9 +308,7 @@ export class FormComponent implements OnDestroy, OnInit {
   private keepSync(): void {
     this.subs.push(this.formService.getFormData(this.formId)
       .subscribe((stateFormData) => {
-        if (!Object.is(stateFormData, this.formGroup.value) && this.formGroup) {
-          this.formGroup.setValue(stateFormData);
-        }
+        this.updateMetadataValue(stateFormData);
       }));
   }
 
@@ -318,6 +329,9 @@ export class FormComponent implements OnDestroy, OnInit {
         const control: FormControl = this.formBuilderService.getFormControlByModel(this.formGroup, model) as FormControl;
         if (control) {
           const changeEvent = this.formBuilderService.createDynamicFormControlEvent(control, control.parent as UntypedFormGroup, model, 'change');
+          if (model instanceof  DynamicRelationGroupModel) {
+            control.setValue(model.value);
+          }
           this.onChange(changeEvent);
         }
       });
@@ -456,4 +470,32 @@ export class FormComponent implements OnDestroy, OnInit {
     const control = group.controls[index] as UntypedFormControl;
     return { $event, context, control, group, model, type };
   }
+
+  private updateMetadataValue(metadataFields: MetadataFields): void {
+    const metadataKeys = hasValue(metadataFields) ? Object.keys(metadataFields) : [];
+    const formKeys = hasValue(this.formGroup.value) ? Object.keys(this.formGroup.value).map(key => key.replace('_array', '')) : [];
+
+    formKeys
+      .filter((key) => isNotEmpty(this.formGroup.value[key]))
+      .forEach((key) => {
+        const innerObjectKeys = (Object.keys(this.formGroup.value[key] ?? {} ) as any[]).map((oldKey) => oldKey.replaceAll('_', '.'));
+        const filteredKeys = innerObjectKeys.filter(innerKey => metadataKeys.includes(innerKey));
+        const oldValue = this.formGroup.value[key];
+
+        if (filteredKeys.length > 0) {
+          filteredKeys.forEach((oldValueKey) => {
+            const newValue = { ...oldValue };
+            const formattedKey = (oldValueKey as any).replaceAll('.', '_');
+            const patchValue = {};
+
+            newValue[formattedKey] = metadataFields[oldValueKey][0];
+            patchValue[key] = newValue;
+
+            if (!isEqual(oldValue[oldValueKey], newValue[oldValueKey])) {
+              this.formGroup.patchValue(patchValue);
+            }
+          });
+        }
+      });
+  }
 }
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
diff --git a/src/app/shared/form/testing/form-service.mock.ts b/src/app/shared/form/testing/form-service.mock.ts
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ module.exports = function (config) {`
`15`	`15`	`],`
`16`	`16`	`client: {`
`17`	`17`	`clearContext: false, // leave Jasmine Spec Runner output visible in browser`
`18`		`- captureConsole: false,`
	`18`	`+ captureConsole: true,`
`19`	`19`	`jasmine: {`
`20`	`20`	`failSpecWithNoExpectations: true`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -80,3 +80,13 @@`
`80`	`80`	`background-color: var(--bs-gray-400);`
`81`	`81`	`}`
`82`	`82`	`}`
	`83`	`+`
	`84`	`+`
	`85`	`+.grey-background{`
	`86`	`+ background-color: #f3f3f3;`
	`87`	`+ margin-bottom: 10px;`
	`88`	`+ padding-top: 10px;`
	`89`	`+ margin-left: -1rem;`
	`90`	`+ margin-right: -1rem;`
	`91`	`+ padding-right: 0px;`
	`92`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {`
`120`	`120`	`* If the drag feature is disabled for this DynamicRowArrayModel.`
`121`	`121`	`*/`
`122`	`122`	`get dragDisabled(): boolean {`
`123`		`- return this.model.groups.length === 1 \|\| !this.model.isDraggable;`
	`123`	`+ return this.model.groups.length === 1 \|\| !this.model.isDraggable \|\| this.model.notRepeatable;`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -53,8 +53,7 @@ export class DynamicRelationGroupModel extends DsDynamicInputModel {`
`53`	`53`	`this.scopeUUID = config.scopeUUID;`
`54`	`54`	`this.submissionScope = config.submissionScope;`
`55`	`55`	`this.isInlineGroup = config.isInlineGroup;`
`56`		`- const value = config.value \|\| [];`
`57`		`- this.value = value;`
	`56`	`+ this.value = config.value \|\| [];`
`58`	`57`	`}`
`59`	`58`
`60`	`59`	`/* get value() {`