[AAE-1379] - fixed form rapresentation (#6366)

Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>
This commit is contained in:
Vito
2020-11-24 09:50:53 +00:00
committed by GitHub
parent 28753df829
commit 3ea094cff2
2 changed files with 71 additions and 90 deletions

View File

@@ -133,15 +133,13 @@ describe('ContainerWidgetComponent', () => {
widget.field = field; widget.field = field;
widget.ngOnInit(); widget.ngOnInit();
expect(widget.fields.length).toEqual(6);
expect(widget.fields[0].id).toEqual('1'); expect(widget.fields[0].id).toEqual('1');
expect(widget.fields[1].id).toEqual('4'); expect(widget.fields[1].id).toEqual('4');
expect(widget.fields[2].id).toEqual('6'); expect(widget.fields[2].id).toEqual('6');
expect(widget.fields[3].id).toEqual('2'); expect(widget.fields[3].id).toEqual('2');
expect(widget.fields[4].id).toEqual('5'); expect(widget.fields[4].id).toEqual('5');
expect(widget.fields[5]).toEqual(undefined); expect(widget.fields[5].id).toEqual('3');
expect(widget.fields[6].id).toEqual('3');
expect(widget.fields[7]).toEqual(undefined);
expect(widget.fields[8]).toEqual(undefined);
}); });
it('should serializes the content fields with rowspan', () => { it('should serializes the content fields with rowspan', () => {
@@ -159,33 +157,46 @@ describe('ContainerWidgetComponent', () => {
rowspan: 1 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', 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', id: 'h',
colspan: 2 colspan: 2,
rowspan: 1
} }
], ],
'2': [ '2': [
{ {
id: '1', id: '1',
rowspan: 3 rowspan: 3,
colspan: 2
}, },
{ {
id: '2', id: '2',
@@ -193,7 +204,8 @@ describe('ContainerWidgetComponent', () => {
colspan: 2 colspan: 2
}, },
{ {
id: '3' id: '3',
colspan: 2
} }
], ],
'3': [ '3': [
@@ -217,24 +229,32 @@ describe('ContainerWidgetComponent', () => {
widget.field = field; widget.field = field;
widget.ngOnInit(); widget.ngOnInit();
expect(widget.fields.length).toEqual(17); expect(widget.fields.length).toEqual(25);
expect(widget.fields[0].id).toEqual('a'); expect(widget.fields[0].id).toEqual('a');
expect(widget.fields[1].id).toEqual('white'); expect(widget.fields[1].id).toEqual('1');
expect(widget.fields[2].id).toEqual('b'); expect(widget.fields[2].id).toEqual('white');
expect(widget.fields[3].id).toEqual('1'); expect(widget.fields[3].id).toEqual('b');
expect(widget.fields[4].id).toEqual('black'); expect(widget.fields[4].id).toEqual('2');
expect(widget.fields[5].id).toEqual('c'); expect(widget.fields[5].id).toEqual('black');
expect(widget.fields[6].id).toEqual('green'); expect(widget.fields[6].id).toEqual('c');
expect(widget.fields[7].id).toEqual('d'); expect(widget.fields[7].id).toEqual('3');
expect(widget.fields[8].id).toEqual('e'); expect(widget.fields[8].id).toEqual('green');
expect(widget.fields[9].id).toEqual('f'); expect(widget.fields[9].id).toEqual('d');
expect(widget.fields[10].id).toEqual('2'); expect(widget.fields[10]).toEqual(null);
expect(widget.fields[11].id).toEqual('g'); expect(widget.fields[11]).toEqual(null);
expect(widget.fields[12].id).toEqual('h'); expect(widget.fields[12].id).toEqual('yellow');
expect(widget.fields[13].id).toEqual('yellow'); expect(widget.fields[13].id).toEqual('e');
expect(widget.fields[14]).toEqual(undefined); expect(widget.fields[14]).toEqual(null);
expect(widget.fields[15].id).toEqual('3'); expect(widget.fields[15]).toEqual(null);
expect(widget.fields[16]).toEqual(undefined); 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);
}); });
}); });

View File

@@ -74,73 +74,34 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit,
* Serializes column fields * Serializes column fields
*/ */
private getFields(): FormFieldModel[] { private getFields(): FormFieldModel[] {
const { size, rowspanOffset, numberOfColumnElementsToBeProcessedRemaining , fields } = this.initializeHelpers(); const serialisedFormFields: FormFieldModel[] = [];
const maxColumnFieldsSize = this.getMaxColumnFieldSize();
for (let i = 0; i < size; i++) { for (let rowIndex = 0; rowIndex < maxColumnFieldsSize; rowIndex++) {
let fieldExist = false; this.content?.columns.flatMap((currentColumn) => {
let columnIndex = 0; if (!!currentColumn?.fields[rowIndex]) {
while (columnIndex < this.numberOfColumns) { serialisedFormFields.push(currentColumn?.fields[rowIndex]);
let field: FormFieldModel;
if (rowspanOffset[columnIndex] > 0) {
this.decreaseRowspanOffsetForColumn(rowspanOffset, columnIndex);
} else { } else {
field = this.getNextFieldToAdd(columnIndex, numberOfColumnElementsToBeProcessedRemaining, field); const firstRowElementColSpan = currentColumn?.fields[0]?.colspan;
fields.push(field); if (!!firstRowElementColSpan && rowIndex > 0 ) {
if (field) { for (let i = 0; i < firstRowElementColSpan; i++) {
fieldExist = true; 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) { private getMaxColumnFieldSize(): number {
for (let k = 0; k < (field?.colspan || 1); k++) { let maxFieldSize = 0;
rowspanOffset[columnIndex + k] = field?.rowspan > 0 ? field?.rowspan - 1 : 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;
} }
} return maxFieldSize;
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;
} }
/** /**