From 3ea094cff2196286f09c78a3290aa330d0444b90 Mon Sep 17 00:00:00 2001 From: Vito Date: Tue, 24 Nov 2020 09:50:53 +0000 Subject: [PATCH] [AAE-1379] - fixed form rapresentation (#6366) Co-authored-by: Vito Albano --- .../container/container.widget.spec.ts | 80 +++++++++++------- .../widgets/container/container.widget.ts | 81 +++++-------------- 2 files changed, 71 insertions(+), 90 deletions(-) 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 be90cd7f8c..7680f0cb72 100644 --- a/lib/core/form/components/widgets/container/container.widget.spec.ts +++ b/lib/core/form/components/widgets/container/container.widget.spec.ts @@ -133,15 +133,13 @@ describe('ContainerWidgetComponent', () => { widget.field = field; widget.ngOnInit(); + expect(widget.fields.length).toEqual(6); expect(widget.fields[0].id).toEqual('1'); expect(widget.fields[1].id).toEqual('4'); expect(widget.fields[2].id).toEqual('6'); expect(widget.fields[3].id).toEqual('2'); expect(widget.fields[4].id).toEqual('5'); - expect(widget.fields[5]).toEqual(undefined); - expect(widget.fields[6].id).toEqual('3'); - expect(widget.fields[7]).toEqual(undefined); - expect(widget.fields[8]).toEqual(undefined); + expect(widget.fields[5].id).toEqual('3'); }); it('should serializes the content fields with rowspan', () => { @@ -159,33 +157,46 @@ describe('ContainerWidgetComponent', () => { rowspan: 1 }, { - id: 'b' + id: 'b', + colspan: 2, + rowspan: 1 }, { - id: 'c' + id: 'c', + colspan: 2, + rowspan: 1 }, { - id: 'd' + id: 'd', + colspan: 2, + rowspan: 1 }, { id: 'e', - colspan: 3 + colspan: 2, + rowspan: 1 }, { - id: 'f' + id: 'f', + colspan: 2, + rowspan: 1 }, { - id: 'g' + id: 'g', + colspan: 2, + rowspan: 1 }, { id: 'h', - colspan: 2 + colspan: 2, + rowspan: 1 } ], '2': [ { id: '1', - rowspan: 3 + rowspan: 3, + colspan: 2 }, { id: '2', @@ -193,7 +204,8 @@ describe('ContainerWidgetComponent', () => { colspan: 2 }, { - id: '3' + id: '3', + colspan: 2 } ], '3': [ @@ -217,24 +229,32 @@ describe('ContainerWidgetComponent', () => { widget.field = field; widget.ngOnInit(); - expect(widget.fields.length).toEqual(17); + expect(widget.fields.length).toEqual(25); expect(widget.fields[0].id).toEqual('a'); - expect(widget.fields[1].id).toEqual('white'); - expect(widget.fields[2].id).toEqual('b'); - expect(widget.fields[3].id).toEqual('1'); - expect(widget.fields[4].id).toEqual('black'); - expect(widget.fields[5].id).toEqual('c'); - expect(widget.fields[6].id).toEqual('green'); - expect(widget.fields[7].id).toEqual('d'); - expect(widget.fields[8].id).toEqual('e'); - expect(widget.fields[9].id).toEqual('f'); - expect(widget.fields[10].id).toEqual('2'); - expect(widget.fields[11].id).toEqual('g'); - expect(widget.fields[12].id).toEqual('h'); - expect(widget.fields[13].id).toEqual('yellow'); - expect(widget.fields[14]).toEqual(undefined); - expect(widget.fields[15].id).toEqual('3'); - expect(widget.fields[16]).toEqual(undefined); + expect(widget.fields[1].id).toEqual('1'); + expect(widget.fields[2].id).toEqual('white'); + expect(widget.fields[3].id).toEqual('b'); + expect(widget.fields[4].id).toEqual('2'); + expect(widget.fields[5].id).toEqual('black'); + expect(widget.fields[6].id).toEqual('c'); + expect(widget.fields[7].id).toEqual('3'); + expect(widget.fields[8].id).toEqual('green'); + expect(widget.fields[9].id).toEqual('d'); + expect(widget.fields[10]).toEqual(null); + expect(widget.fields[11]).toEqual(null); + expect(widget.fields[12].id).toEqual('yellow'); + expect(widget.fields[13].id).toEqual('e'); + expect(widget.fields[14]).toEqual(null); + expect(widget.fields[15]).toEqual(null); + expect(widget.fields[16].id).toEqual('f'); + expect(widget.fields[17]).toEqual(null); + expect(widget.fields[18]).toEqual(null); + expect(widget.fields[19].id).toEqual('g'); + expect(widget.fields[20]).toEqual(null); + expect(widget.fields[21]).toEqual(null); + expect(widget.fields[22].id).toEqual('h'); + expect(widget.fields[23]).toEqual(null); + expect(widget.fields[24]).toEqual(null); }); }); diff --git a/lib/core/form/components/widgets/container/container.widget.ts b/lib/core/form/components/widgets/container/container.widget.ts index c77523efe1..027b581388 100644 --- a/lib/core/form/components/widgets/container/container.widget.ts +++ b/lib/core/form/components/widgets/container/container.widget.ts @@ -74,73 +74,34 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit, * Serializes column fields */ private getFields(): FormFieldModel[] { - const { size, rowspanOffset, numberOfColumnElementsToBeProcessedRemaining , fields } = this.initializeHelpers(); - - for (let i = 0; i < size; i++) { - let fieldExist = false; - let columnIndex = 0; - while (columnIndex < this.numberOfColumns) { - let field: FormFieldModel; - if (rowspanOffset[columnIndex] > 0) { - this.decreaseRowspanOffsetForColumn(rowspanOffset, columnIndex); + const serialisedFormFields: FormFieldModel[] = []; + const maxColumnFieldsSize = this.getMaxColumnFieldSize(); + for (let rowIndex = 0; rowIndex < maxColumnFieldsSize; rowIndex++) { + this.content?.columns.flatMap((currentColumn) => { + if (!!currentColumn?.fields[rowIndex]) { + serialisedFormFields.push(currentColumn?.fields[rowIndex]); } else { - field = this.getNextFieldToAdd(columnIndex, numberOfColumnElementsToBeProcessedRemaining, field); - fields.push(field); - if (field) { - fieldExist = true; + const firstRowElementColSpan = currentColumn?.fields[0]?.colspan; + if (!!firstRowElementColSpan && rowIndex > 0 ) { + for (let i = 0; i < firstRowElementColSpan; i++) { + serialisedFormFields.push(null); + } } - this.updateColumnsRowspanOffsetWithFieldRowspan(field, rowspanOffset, columnIndex); - numberOfColumnElementsToBeProcessedRemaining[columnIndex] = numberOfColumnElementsToBeProcessedRemaining[columnIndex] - 1; } - columnIndex = columnIndex + (field?.colspan || 1); - } - if (!fieldExist) { - i = this.deleteLastEmptyRowAndExit(fields, i, size); - } + }); } - return fields; + + return serialisedFormFields; } - private updateColumnsRowspanOffsetWithFieldRowspan(field: FormFieldModel, rowspanOffset: any[], columnIndex: number) { - for (let k = 0; k < (field?.colspan || 1); k++) { - rowspanOffset[columnIndex + k] = field?.rowspan > 0 ? field?.rowspan - 1 : 0; + private getMaxColumnFieldSize(): number { + let maxFieldSize = 0; + if (this.content?.columns?.length > 0) { + maxFieldSize = this.content?.columns?.reduce((prevColumn, currentColumn) => { + return currentColumn.fields.length > prevColumn?.fields?.length ? currentColumn : prevColumn; + })?.fields?.length; } - } - - private getNextFieldToAdd(columnIndex: number, numberOfColumnElementsToBeProcessedRemaining: any[], field: FormFieldModel): FormFieldModel { - const rowToCompute = (this.content.columns[columnIndex]?.fields?.length || 0) - numberOfColumnElementsToBeProcessedRemaining[columnIndex]; - field = this.content.columns[columnIndex]?.fields[rowToCompute]; - return field; - } - - private decreaseRowspanOffsetForColumn(rowspanOffset: any[], columnIndex: number) { - rowspanOffset[columnIndex] = rowspanOffset[columnIndex] - 1; - } - - private initializeHelpers(): { - size: number; - rowspanOffset: number[]; - numberOfColumnElementsToBeProcessedRemaining: number[]; - fields: FormFieldModel[]; - } { - const fields = []; - const numberOfColumnElementsToBeProcessedRemaining: number[] = []; - const rowspanOffset: number[] = []; - let size = 0; - for (let i = 0; i < this.numberOfColumns; i++) { - numberOfColumnElementsToBeProcessedRemaining.push(this.content.columns[i]?.fields?.length || 0); - rowspanOffset[i] = 0; - size += (this.content.columns[i]?.fields?.length || 0); - } - return { size, rowspanOffset, numberOfColumnElementsToBeProcessedRemaining, fields }; - } - - private deleteLastEmptyRowAndExit(fields: FormFieldModel[], i: number, size: number) { - for (let j = 0; j < this.numberOfColumns; j++) { - fields.pop(); - } - i = size; - return i; + return maxFieldSize; } /**