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

* [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>
This commit is contained in:
Vito 2020-09-24 10:20:18 +01:00 committed by GitHub
parent 80a3618ca8
commit ffe04120a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 68 additions and 17 deletions

@ -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

@ -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%');
});

@ -11,10 +11,22 @@
</h4>
</div>
<section class="adf-grid-list" *ngIf="content?.isExpanded">
<div class="adf-grid-list-item" *ngFor="let field of fields" [style.width]="getColumnWith(field)">
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
</div>
</section>
<div *ngIf="field?.form?.enableFixedSpace else fixingTemplate">
<section class="adf-grid-list" *ngIf="content?.isExpanded">
<div class="adf-grid-list-item" *ngFor="let field of fields" [style.width.%]="getColumnWith(field)">
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
</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>

@ -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 {

@ -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(<FormFieldModel> { colspan: 1 })).toBe('25%');
expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75%');
expect(widget.getColumnWith(undefined)).toBe('25');
expect(widget.getColumnWith(<FormFieldModel> { colspan: 1 })).toBe('25');
expect(widget.getColumnWith(<FormFieldModel> { colspan: 3 })).toBe('75');
});
});
});

@ -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 + '';
}
}

@ -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> = {};

@ -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, {

@ -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);
}