[MNT-21705] - fixed column display for fields (#6078)

* [MNT-21705] - fixed column display for fields

* [MNT-21705] - fixed unit test

* [MNT-21636] - adding flag for enable-disable column

* [MNT-21705] - fixed broken unit test

* [MNT-21705] - added documentation for extra form input field

Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>

docs/process-services/components/form.component.md

@@ -73,6 +73,7 @@ Any content in the body of `<adf-form>` will be shown when no form definition is
 | showTitle | `boolean` | true | Toggle rendering of the form title. |
 | showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
 | taskId | `string` |  | Task id to fetch corresponding form and values. |
+| enableFixedSpacedForm | `boolean` | true | The form will set a prefixed space for invisible fields |
 
 ### Events
 

lib/core/form/components/form-renderer.component.spec.ts

@@ -320,17 +320,17 @@ describe('Form Renderer Component', () => {
         });
 
         it('[C309654] - Should display Number widget spans on 2 columns when colspan is set to 2', async () => {
-            formRendererComponent.formDefinition = formService.parseForm(colspanForm.formRepresentation.formDefinition);
+            formRendererComponent.formDefinition = formService.parseForm(colspanForm.formRepresentation.formDefinition, null , false, false);
             fixture.detectChanges();
             await fixture.whenStable();
-            const formSizedElement = fixture.nativeElement.querySelector('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section.adf-grid-list');
+            const formSizedElement = fixture.nativeElement.querySelector('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section.adf-grid-list-column-view');
             expectElementToBeVisible(formSizedElement);
-            const sectionGridElement: HTMLElement[] = fixture.nativeElement.querySelectorAll('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section .adf-grid-list-item');
+            const sectionGridElement: HTMLElement[] = fixture.nativeElement.querySelectorAll('#field-2bc275fb-e113-4d7d-885f-6e74a7332d40-container section .adf-grid-list-single-column');
             sectionGridElement.forEach((element) => {
                 expect(element.style['width']).toBe('50%', 'Elemens is wrong sized for this section');
             });
 
-            const fullWidthElement = fixture.nativeElement.querySelector('#field-d52ada4e-cbdc-4f0c-a480-5b85fa00e4f8-container section.adf-grid-list .adf-grid-list-item');
+            const fullWidthElement = fixture.nativeElement.querySelector('#field-d52ada4e-cbdc-4f0c-a480-5b85fa00e4f8-container section.adf-grid-list-column-view .adf-grid-list-single-column');
             expect(fullWidthElement.style['width']).toBe('100%');
         });
 

lib/core/form/components/widgets/container/container.widget.html

@@ -11,10 +11,22 @@
     </h4>
 </div>
 
-<section class="adf-grid-list" *ngIf="content?.isExpanded">
+<div *ngIf="field?.form?.enableFixedSpace else fixingTemplate">
-    <div class="adf-grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
+    <section class="adf-grid-list" *ngIf="content?.isExpanded">
-        <adf-form-field *ngIf="field" [field]="field"></adf-form-field>
+        <div class="adf-grid-list-item" *ngFor="let field of fields" [style.width.%]="getColumnWith(field)">
-    </div>
+            <adf-form-field *ngIf="field" [field]="field"></adf-form-field>
-</section>
+        </div>
+    </section>
+</div>
+
+<ng-template #fixingTemplate>
+    <section class="adf-grid-list-column-view" *ngIf="content?.isExpanded">
+        <div class="adf-grid-list-single-column" *ngFor="let column of content?.columns" [style.width.%]="getColumnWith(field)">
+            <div class="adf-grid-list-column-view-item" *ngFor="let field of column?.fields">
+                <adf-form-field *ngIf="field" [field]="field"></adf-form-field>
+            </div>
+        </div>
+    </section>
+</ng-template>
 
 

lib/core/form/components/widgets/container/container.widget.scss

@@ -35,6 +35,27 @@
     }
 
     container-widget {
+        .adf-grid-list-column-view {
+            display: flex;
+            align-items: flex-start;
+            margin-right: -1%;
+        }
+
+        .adf-grid-list-single-column {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            flex: 1 0 auto;
+        }
+
+        .adf-grid-list-column-view-item {
+            width: 100%;
+            flex-grow: 1;
+            box-sizing: border-box;
+            padding-left: 1%;
+            padding-right: 1%;
+        }
+
         .adf-grid-list {
             display: flex;
             flex-wrap: wrap;
@@ -53,6 +74,18 @@
             .adf-grid-list-item {
                 flex: 1 0 100%;
             }
+
+            .adf-grid-list--column-view {
+                flex-direction: column;
+            }
+
+            .adf-grid-list-single-column {
+                width: 90% !important;
+            }
+
+            .adf-grid-list-column-view-item {
+                flex: 1 0 auto;
+            }
         }
 
         .mat-form-field {

lib/core/form/components/widgets/container/container.widget.spec.ts

@@ -160,9 +160,9 @@ describe('ContainerWidgetComponent', () => {
             const container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel(), { numberOfColumns: 4 }));
             widget.content = container;
 
-            expect(widget.getColumnWith(undefined)).toBe('25%');
+            expect(widget.getColumnWith(undefined)).toBe('25');
-            expect(widget.getColumnWith(<FormFieldModel> { colspan: 1 })).toBe('25%');
+            expect(widget.getColumnWith(<FormFieldModel> { colspan: 1 })).toBe('25');
-            expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75%');
+            expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75');
         });
     });
 });

lib/core/form/components/widgets/container/container.widget.ts

@@ -92,6 +92,6 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit,
      */
     getColumnWith(field: FormFieldModel): string {
         const colspan = field ? field.colspan : 1;
-        return (100 / this.content.json.numberOfColumns) * colspan + '%';
+        return (100 / this.content.json.numberOfColumns) * colspan + '';
     }
 }

lib/core/form/components/widgets/core/form.model.ts

@@ -67,6 +67,7 @@ export class FormModel {
     readonly taskName = FormModel.UNSET_TASK_NAME;
     readonly processDefinitionId: string;
     readonly selectedOutcome: string;
+    readonly enableFixedSpace: boolean;
 
     json: any;
     nodeId: string;
@@ -83,7 +84,7 @@ export class FormModel {
     processVariables: ProcessVariableModel[] = [];
     variables: FormVariableModel[] = [];
 
-    constructor(json?: any, formValues?: FormValues, readOnly: boolean = false, protected formService?: FormService) {
+    constructor(json?: any, formValues?: FormValues, readOnly: boolean = false, protected formService?: FormService, enableFixedSpace?: boolean) {
         this.readOnly = readOnly;
         this.json = json;
 
@@ -98,6 +99,7 @@ export class FormModel {
             this.className = json.className || '';
             this.variables = json.variables || [];
             this.processVariables = json.processVariables || [];
+            this.enableFixedSpace = enableFixedSpace;
 
             const tabCache: FormWidgetModelCache<TabModel> = {};
 

lib/core/form/services/form.service.ts

@@ -102,9 +102,9 @@ export class FormService {
      * @param readOnly Should the form fields be read-only?
      * @returns Form model created from input data
      */
-    parseForm(json: any, data?: FormValues, readOnly: boolean = false): FormModel {
+    parseForm(json: any, data?: FormValues, readOnly: boolean = false, fixedSpace?: boolean): FormModel {
         if (json) {
-            const form = new FormModel(json, data, readOnly, this);
+            const form = new FormModel(json, data, readOnly, this, fixedSpace);
             if (!json.fields) {
                 form.outcomes = [
                     new FormOutcomeModel(<any> form, {

lib/process-services/src/lib/form/form.component.ts

@@ -58,6 +58,9 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
     @Input()
     data: FormValues;
 
+    @Input()
+    enableFixedSpacedForm: boolean = true;
+
     /** Emitted when the form is submitted with the `Save` or custom outcomes. */
     @Output()
     formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
@@ -277,7 +280,7 @@ export class FormComponent extends FormBaseComponent implements OnInit, OnDestro
 
     parseForm(formRepresentationJSON: any): FormModel {
         if (formRepresentationJSON) {
-            const form = new FormModel(formRepresentationJSON, this.data, this.readOnly, this.formService);
+            const form = new FormModel(formRepresentationJSON, this.data, this.readOnly, this.formService, this.enableFixedSpacedForm);
             if (!formRepresentationJSON.fields) {
                 form.outcomes = this.getFormDefinitionOutcomes(form);
             }