From ffe04120a877d478d252e6e8e4f80c825e0833aa Mon Sep 17 00:00:00 2001 From: Vito Date: Thu, 24 Sep 2020 10:20:18 +0100 Subject: [PATCH] [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 --- .../components/form.component.md | 1 + .../form-renderer.component.spec.ts | 8 ++--- .../widgets/container/container.widget.html | 22 ++++++++++--- .../widgets/container/container.widget.scss | 33 +++++++++++++++++++ .../container/container.widget.spec.ts | 6 ++-- .../widgets/container/container.widget.ts | 2 +- .../components/widgets/core/form.model.ts | 4 ++- lib/core/form/services/form.service.ts | 4 +-- .../src/lib/form/form.component.ts | 5 ++- 9 files changed, 68 insertions(+), 17 deletions(-) diff --git a/docs/process-services/components/form.component.md b/docs/process-services/components/form.component.md index 9a40da5f27..636cb5d4e0 100644 --- a/docs/process-services/components/form.component.md +++ b/docs/process-services/components/form.component.md @@ -73,6 +73,7 @@ Any content in the body of `` 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 diff --git a/lib/core/form/components/form-renderer.component.spec.ts b/lib/core/form/components/form-renderer.component.spec.ts index 29364ab8c4..5fc4055384 100644 --- a/lib/core/form/components/form-renderer.component.spec.ts +++ b/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%'); }); diff --git a/lib/core/form/components/widgets/container/container.widget.html b/lib/core/form/components/widgets/container/container.widget.html index a7ed104e3f..ab26552b29 100644 --- a/lib/core/form/components/widgets/container/container.widget.html +++ b/lib/core/form/components/widgets/container/container.widget.html @@ -11,10 +11,22 @@ -
-
- -
-
+
+
+
+ +
+
+
+ + +
+
+
+ +
+
+
+ diff --git a/lib/core/form/components/widgets/container/container.widget.scss b/lib/core/form/components/widgets/container/container.widget.scss index f81c40187d..b360e79854 100644 --- a/lib/core/form/components/widgets/container/container.widget.scss +++ b/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 { diff --git a/lib/core/form/components/widgets/container/container.widget.spec.ts b/lib/core/form/components/widgets/container/container.widget.spec.ts index 42d2df4d75..7d902264bd 100644 --- a/lib/core/form/components/widgets/container/container.widget.spec.ts +++ b/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( { colspan: 1 })).toBe('25%'); - expect(widget.getColumnWith( { colspan: 3 })).toBe('75%'); + expect(widget.getColumnWith(undefined)).toBe('25'); + expect(widget.getColumnWith( { colspan: 1 })).toBe('25'); + expect(widget.getColumnWith( { colspan: 3 })).toBe('75'); }); }); }); diff --git a/lib/core/form/components/widgets/container/container.widget.ts b/lib/core/form/components/widgets/container/container.widget.ts index 1293c2fe3d..f0ac4e0c78 100644 --- a/lib/core/form/components/widgets/container/container.widget.ts +++ b/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 + ''; } } diff --git a/lib/core/form/components/widgets/core/form.model.ts b/lib/core/form/components/widgets/core/form.model.ts index 98e9b23ef7..88721c13ff 100644 --- a/lib/core/form/components/widgets/core/form.model.ts +++ b/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 = {}; diff --git a/lib/core/form/services/form.service.ts b/lib/core/form/services/form.service.ts index 7135abb373..b5e8597a5d 100644 --- a/lib/core/form/services/form.service.ts +++ b/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( form, { diff --git a/lib/process-services/src/lib/form/form.component.ts b/lib/process-services/src/lib/form/form.component.ts index a00ac8bcce..2176c5a07a 100644 --- a/lib/process-services/src/lib/form/form.component.ts +++ b/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 = new EventEmitter(); @@ -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); }