AAE-30066 Render sections in form builder (#10552)

* AAE-30066 Render sections in runtime

* added unit tests

* remove comment

* added return type to method

* added self closing tag

lib/core/src/lib/form/components/form-renderer.component.html

@@ -40,7 +40,12 @@
                          *ngFor="let column of currentRootElement?.columns"
                          [style.width.%]="getColumnWith(currentRootElement)">
                         <div class="adf-grid-list-column-view-item" *ngFor="let field of column?.fields">
-                            <adf-form-field *ngIf="field" [field]="field" />
+                            <ng-container *ngIf="field.type === 'section'; else formField">
+                                to be implemented
+                            </ng-container>
+                            <ng-template #formField>
+                                <adf-form-field [field]="field" />
+                            </ng-template>
                         </div>
                     </div>
                 </section>

lib/core/src/lib/form/components/widgets/core/form-field-types.ts

@@ -20,6 +20,7 @@
 export class FormFieldTypes {
     static CONTAINER: string = 'container';
     static GROUP: string = 'group';
+    static SECTION: string = 'section';
     static DYNAMIC_TABLE: string = 'dynamic-table';
     static TEXT: string = 'text';
     static STRING: string = 'string';
@@ -58,11 +59,11 @@ export class FormFieldTypes {
 
     static CONSTANT_VALUE_TYPES: string[] = [FormFieldTypes.DISPLAY_EXTERNAL_PROPERTY];
 
-    static isReadOnlyType(type: string) {
+    static isReadOnlyType(type: string): boolean {
         return FormFieldTypes.READONLY_TYPES.includes(type);
     }
 
-    static isValidatableType(type: string) {
+    static isValidatableType(type: string): boolean {
         return FormFieldTypes.VALIDATABLE_TYPES.includes(type);
     }
 
@@ -70,11 +71,15 @@ export class FormFieldTypes {
         return FormFieldTypes.REACTIVE_TYPES.includes(type);
     }
 
-    static isConstantValueType(type: string) {
+    static isConstantValueType(type: string): boolean {
         return FormFieldTypes.CONSTANT_VALUE_TYPES.includes(type);
     }
 
-    static isContainerType(type: string) {
+    static isContainerType(type: string): boolean {
         return type === FormFieldTypes.CONTAINER || type === FormFieldTypes.GROUP;
     }
+
+    static isSectionType(type: string): boolean {
+        return type === FormFieldTypes.SECTION;
+    }
 }

lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts

@@ -869,6 +869,16 @@ describe('FormFieldModel', () => {
         expect(field.numberOfColumns).toBe(999);
     });
 
+    it('should calculate the columns in case of section type', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            type: FormFieldTypes.SECTION,
+            numberOfColumns: 123
+        });
+
+        expect(field.numberOfColumns).toBe(123);
+    });
+
     it('should instantiate FormField when has no variable', () => {
         const form = new FormModel({});
         form.json = {
@@ -890,7 +900,24 @@ describe('FormFieldModel', () => {
             readOnly: true
         });
         field.updateForm();
-        expect(form.values['header_field']).not.toBeDefined();
+
+        expect(form.values['header_field']).toBeUndefined();
+    });
+
+    it('section field type should not appear into form values', () => {
+        const form = new FormModel();
+        const field = new FormFieldModel(form, {
+            fieldType: 'SectionFieldtype',
+            id: 'section_field',
+            name: 'section',
+            type: FormFieldTypes.SECTION,
+            value: '',
+            required: false,
+            readOnly: true
+        });
+        field.updateForm();
+
+        expect(form.values['section_field']).toBeUndefined();
     });
 
     describe('dropdown field', () => {

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -234,7 +234,7 @@ export class FormFieldModel extends FormWidgetModel {
                 }
             }
 
-            if (FormFieldTypes.isContainerType(this.type)) {
+            if (FormFieldTypes.isContainerType(this.type) || FormFieldTypes.isSectionType(this.type)) {
                 this.containerFactory(json, form);
             }
         }
@@ -526,7 +526,7 @@ export class FormFieldModel extends FormWidgetModel {
                 break;
             }
             default:
-                if (!FormFieldTypes.isReadOnlyType(this.type) && !this.isInvalidFieldType(this.type)) {
+                if (this.shouldUpdateFormValues(this.type)) {
                     this.form.values[this.id] = this.value;
                 }
         }
@@ -557,6 +557,10 @@ export class FormFieldModel extends FormWidgetModel {
         return this.hasEmptyValue && option?.id === this.defaultEmptyOptionId;
     }
 
+    private shouldUpdateFormValues(type): boolean {
+        return !FormFieldTypes.isReadOnlyType(type) && !this.isInvalidFieldType(type) && !FormFieldTypes.isSectionType(type);
+    }
+
     private addOptions(options: FormFieldOption[]) {
         options.forEach((option) => this.addOption(option));
     }