mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[AAE-1379] - fixed form rapresentation (#6366)
Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>
This commit is contained in:
@@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Reference in New Issue
Block a user