AAE-21945 Support a nested object which is within an array in the JSO… (#9635)

* AAE-21945 Support a nested object which is within an array in the JSON datasource

* improve data table widget mocks

* improve object datatable adapter unit tests

* improve mocks

* modify data table widget adapter instead of core object data table adapter

* revert not needed changes

* improve method name

* remove automatic lint changes
This commit is contained in:
Tomasz Gnyp
2024-05-09 12:01:07 +02:00
committed by GitHub
parent d59fbdd825
commit d0209d466e
9 changed files with 410 additions and 49 deletions

View File

@@ -22,7 +22,8 @@ import {
mockInvalidSchemaDefinition,
mockSchemaDefinition
} from './mocks/data-table-widget.mock';
import { ObjectDataRow } from '@alfresco/adf-core';
import { mockPersonDataFirstRow, mockPersonsData } from './mocks/data-table-adapter.mock';
import { DataColumn, ObjectDataColumn, ObjectDataRow } from '@alfresco/adf-core';
describe('WidgetDataTableAdapter', () => {
let widgetDataTableAdapter: WidgetDataTableAdapter;
@@ -64,4 +65,130 @@ describe('WidgetDataTableAdapter', () => {
expect(isValid).toBeTrue();
});
describe('should create proper rows and columns from schema and data with nested properties for', () => {
it('one column', () => {
const mockPersonSchema: DataColumn[] = [
{
type: 'text',
key: 'person.name',
title: 'Name'
}
];
const adapter = new WidgetDataTableAdapter(mockPersonsData, mockPersonSchema);
const rows = adapter.getRows();
const columns = adapter.getColumns();
const expectedFirstRow = new ObjectDataRow({
'person.name': 'John Doe'
});
const expectedSecondRow = new ObjectDataRow({
'person.name': 'Sam Smith'
});
const expectedColumns = [new ObjectDataColumn({ key: 'person.name', type: 'text', title: 'Name' })];
expect(rows.length).toBe(2);
expect(rows[0]).toEqual(expectedFirstRow);
expect(rows[1]).toEqual(expectedSecondRow);
expect(columns.length).toBe(1);
expect(columns).toEqual(expectedColumns);
});
it('one row', () => {
const mockPersonSchema: DataColumn[] = [
{
type: 'text',
key: 'name',
title: 'Name'
},
{
type: 'text',
key: 'personData.[address.[data]test].city',
title: 'City'
}
];
const adapter = new WidgetDataTableAdapter([mockPersonDataFirstRow], mockPersonSchema);
const rows = adapter.getRows();
const columns = adapter.getColumns();
const expectedFirstRow = new ObjectDataRow({
name: 'John Doe',
'personData.[address.[data]test].city': 'Springfield'
});
const expectedColumns = [
new ObjectDataColumn({ key: 'name', type: 'text', title: 'Name' }),
new ObjectDataColumn({ key: 'personData.[address.[data]test].city', type: 'text', title: 'City' })
];
expect(rows.length).toBe(1);
expect(rows[0]).toEqual(expectedFirstRow);
expect(columns.length).toBe(2);
expect(columns).toEqual(expectedColumns);
});
it('complex schema', () => {
const mockPersonSchema: DataColumn[] = [
{
type: 'text',
key: 'person.name',
title: 'Name'
},
{
type: 'text',
key: 'person.personData.[address.[data]test].city',
title: 'City'
},
{
type: 'text',
key: 'person.personData.[address.[data]test].street',
title: 'Street'
},
{
type: 'json',
key: 'person.phoneNumbers',
title: 'Phone numbers'
}
];
const adapter = new WidgetDataTableAdapter(mockPersonsData, mockPersonSchema);
const rows = adapter.getRows();
const columns = adapter.getColumns();
const expectedFirstRow = new ObjectDataRow({
'person.personData.[address.[data]test].city': 'Springfield',
'person.personData.[address.[data]test].street': '1234 Main St',
'person.name': 'John Doe',
'person.phoneNumbers': [
{ type: 'home', phoneNumber: '123-456-7890' },
{ type: 'work', phoneNumber: '098-765-4321' }
]
});
const expectedSecondRow = new ObjectDataRow({
'person.personData.[address.[data]test].city': 'Westlake',
'person.personData.[address.[data]test].street': '731 Second St',
'person.name': 'Sam Smith',
'person.phoneNumbers': [
{ type: 'home', phoneNumber: '123-456-7891' },
{ type: 'work', phoneNumber: '321-654-1987' }
]
});
const expectedColumns = [
new ObjectDataColumn({ key: 'person.name', type: 'text', title: 'Name' }),
new ObjectDataColumn({ key: 'person.personData.[address.[data]test].city', type: 'text', title: 'City' }),
new ObjectDataColumn({ key: 'person.personData.[address.[data]test].street', type: 'text', title: 'Street' }),
new ObjectDataColumn({ key: 'person.phoneNumbers', type: 'json', title: 'Phone numbers' })
];
expect(rows.length).toBe(2);
expect(rows[0]).toEqual(expectedFirstRow);
expect(rows[1]).toEqual(expectedSecondRow);
expect(columns.length).toBe(4);
expect(columns).toEqual(expectedColumns);
});
});
});

View File

@@ -15,42 +15,118 @@
* limitations under the License.
*/
import {
ObjectDataTableAdapter,
DataColumn,
DataRow
} from '@alfresco/adf-core';
import { ObjectDataTableAdapter, DataColumn, DataRow, ObjectDataColumn, ObjectDataRow, DataTableAdapter, DataSorting } from '@alfresco/adf-core';
import { DataTablePathParserHelper } from './helpers/data-table-path-parser.helper';
import { Subject } from 'rxjs';
export class WidgetDataTableAdapter extends ObjectDataTableAdapter {
export class WidgetDataTableAdapter implements DataTableAdapter {
private adapter: ObjectDataTableAdapter;
private columnKeys: string[] = [];
private helper = new DataTablePathParserHelper();
private rows: DataRow[];
private columns: DataColumn[];
get selectedRow(): DataRow {
return this.adapter.selectedRow;
}
constructor(data?: any[], schema?: DataColumn[]) {
super(data, schema);
this.rows = super.getRows();
this.columns = super.getColumns();
get rowsChanged(): Subject<Array<DataRow>> {
return this.adapter.rowsChanged;
}
constructor(data: any[], schema: DataColumn[]) {
this.adapter = new ObjectDataTableAdapter(data, schema);
this.createColumns(schema);
this.createRows(data);
}
private createColumns(schema: DataColumn[]): void {
if (schema?.length) {
this.adapter.setColumns(this.buildColumnsFromSchema(schema));
}
}
private buildColumnsFromSchema(schema: DataColumn[]): ObjectDataColumn[] {
return schema.map((dataColumn) => {
this.columnKeys.push(dataColumn.key);
return new ObjectDataColumn(dataColumn);
});
}
private createRows(data: any[]): void {
if (data?.length) {
this.adapter.setRows(data.map((item) => this.buildDataRowFromItem(item)));
}
}
private buildDataRowFromItem(item: any): ObjectDataRow {
const rowData = {};
this.columnKeys.forEach((path, i) => {
const rowValue = this.extractPropertyValue(this.helper.splitPathIntoProperties(path), item);
if (rowValue) {
rowData[this.columnKeys[i]] = rowValue;
}
});
return new ObjectDataRow(rowData);
}
private extractPropertyValue(properties: string[], item: any): string {
return properties.reduce((acc, property) => (acc ? acc[this.helper.removeSquareBracketsFromProperty(property)] : undefined), item);
}
getColumns(): Array<DataColumn> {
return this.adapter.getColumns();
}
getRows(): DataRow[] {
if (this.isDataSourceValid()) {
return this.rows;
return this.adapter.getRows();
}
return [];
}
isDataSourceValid(): boolean {
return this.hasAllColumnsLinkedToData() && this.hasAllMandatoryColumnPropertiesHaveValues();
setRows(rows: Array<DataRow>): void {
this.adapter.setRows(rows);
}
private hasAllMandatoryColumnPropertiesHaveValues(): boolean {
return this.columns.every(column => !!column.key);
setColumns(columns: Array<DataColumn>): void {
this.adapter.setColumns(columns);
}
getValue(row: DataRow, col: DataColumn, resolverFn?: (_row: DataRow, _col: DataColumn) => any): any {
return this.adapter.getValue(row, col, resolverFn);
}
getColumnType(row: DataRow, col: DataColumn): string {
return this.adapter.getColumnType(row, col);
}
getSorting(): DataSorting {
return this.adapter.getSorting();
}
setSorting(sorting: DataSorting): void {
this.adapter.setSorting(sorting);
}
sort(key?: string, direction?: string): void {
this.adapter.sort(key, direction);
}
isDataSourceValid(): boolean {
return this.hasAllColumnsLinkedToData() && this.allMandatoryColumnPropertiesHaveValues();
}
private allMandatoryColumnPropertiesHaveValues(): boolean {
return this.adapter.getColumns().every((column) => !!column.key);
}
private hasAllColumnsLinkedToData(): boolean {
const availableColumnKeys: string[] = this.columns.map(column => column.key);
const availableColumnKeys: string[] = this.adapter.getColumns().map((column) => column.key);
return availableColumnKeys.every(columnKey => this.rows.some(row => Object.keys(row.obj).includes(columnKey)));
return availableColumnKeys.every((columnKey) => this.adapter.getRows().some((row) => Object.keys(row.obj).includes(columnKey)));
}
}

View File

@@ -16,15 +16,13 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DataColumn, FormFieldModel, FormFieldTypes, FormModel, VariableConfig } from '@alfresco/adf-core';
import { DataColumn, DataRow, FormFieldModel, FormFieldTypes, FormModel, VariableConfig } from '@alfresco/adf-core';
import { By } from '@angular/platform-browser';
import { DataTableWidgetComponent } from './data-table.widget';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
import { FormCloudService } from '../../../services/form-cloud.service';
import { WidgetDataTableAdapter } from './data-table-adapter.widget';
import {
mockEuropeCountriesData,
mockAmericaCountriesData,
mockInvalidSchemaDefinition,
mockJsonFormVariable,
@@ -34,7 +32,14 @@ import {
mockJsonResponseEuropeCountriesData,
mockJsonResponseFormVariable,
mockJsonNestedResponseFormVariable,
mockJsonNestedResponseEuropeCountriesData
mockJsonNestedResponseEuropeCountriesData,
mockNestedEuropeCountriesData,
mockSchemaDefinitionWithNestedKeys,
mockCountryColumns,
mockEuropeCountriesRows,
mockAmericaCountriesRows,
mockNestedCountryColumns,
mockNestedEuropeCountriesRows
} from './mocks/data-table-widget.mock';
describe('DataTableWidgetComponent', () => {
@@ -71,9 +76,10 @@ describe('DataTableWidgetComponent', () => {
const getPreview = () => fixture.nativeElement.querySelector('[data-automation-id="adf-data-table-widget-preview"]');
const assertDataRows = (expectedData: WidgetDataTableAdapter) => {
expectedData.getRows().forEach((row) => (row.cssClass = ''));
expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
const assertData = (expectedColumns: DataColumn[], expectedRows: DataRow[]) => {
expectedRows.forEach((row) => (row.cssClass = ''));
expect(widget.dataSource.getColumns()).toEqual(expectedColumns);
expect(widget.dataSource.getRows()).toEqual(expectedRows);
};
beforeEach(() => {
@@ -117,13 +123,20 @@ describe('DataTableWidgetComponent', () => {
widget.dataSource.getColumns().forEach((column, index) => expect(column.key).toEqual(mockSchemaDefinition[index].key));
});
it('should properly initialize data source based on nested schema and data', () => {
widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinitionWithNestedKeys, [], []);
widget.field.value = mockNestedEuropeCountriesData;
fixture.detectChanges();
assertData(mockNestedCountryColumns, mockNestedEuropeCountriesRows);
});
it('should properly initialize data source with priority on the field value if process and form variables are provided', () => {
widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinition, mockJsonProcessVariables, mockJsonFormVariable);
widget.field.value = mockAmericaCountriesData;
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockAmericaCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockAmericaCountriesRows);
});
it('should properly initialize data source based on field value', () => {
@@ -131,8 +144,7 @@ describe('DataTableWidgetComponent', () => {
widget.field.value = mockAmericaCountriesData;
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockAmericaCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockAmericaCountriesRows);
});
it('should properly initialize default json response data source based on field value if path is NOT provided', () => {
@@ -140,16 +152,14 @@ describe('DataTableWidgetComponent', () => {
widget.field.value = mockJsonResponseEuropeCountriesData;
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should properly initialize default json response data source based on variable if path is NOT provided', () => {
widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinition, [], mockJsonResponseFormVariable);
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should properly initialize json response data source based on field value if path is provided', () => {
@@ -157,8 +167,7 @@ describe('DataTableWidgetComponent', () => {
widget.field.value = mockJsonNestedResponseEuropeCountriesData;
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should properly initialize json response data source based on variable if path is provided', () => {
@@ -170,24 +179,21 @@ describe('DataTableWidgetComponent', () => {
);
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should properly initialize data source based on form variable', () => {
widget.field = getDataVariable(mockVariableConfig, mockSchemaDefinition, [], mockJsonFormVariable);
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should properly initialize data source based on process variable', () => {
widget.field = getDataVariable({ variableName: 'json-variable' }, mockSchemaDefinition, mockJsonProcessVariables);
fixture.detectChanges();
const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
assertDataRows(expectedData);
assertData(mockCountryColumns, mockEuropeCountriesRows);
});
it('should NOT display error if form is in preview state', () => {

View File

@@ -46,7 +46,6 @@ import { DataTablePathParserHelper } from './helpers/data-table-path-parser.help
encapsulation: ViewEncapsulation.None
})
export class DataTableWidgetComponent extends WidgetComponent implements OnInit {
dataSource: WidgetDataTableAdapter;
dataTableLoadFailed = false;
previewState = false;

View File

@@ -18,6 +18,14 @@
import { DataTablePathParserHelper } from './data-table-path-parser.helper';
import { mockResponseResultData, mockResultData } from '../mocks/data-table-path-parser.helper.mock';
interface DataTablePathParserTestCase {
description: string;
path: string;
data?: any;
propertyName?: string;
expected?: unknown[];
}
describe('DataTablePathParserHelper', () => {
let helper: DataTablePathParserHelper;
@@ -26,13 +34,19 @@ describe('DataTablePathParserHelper', () => {
});
describe('should return the correct data for path', () => {
const testCases = [
const testCases: DataTablePathParserTestCase[] = [
{
description: 'not existent',
data: {},
path: 'nonexistent.path',
expected: []
},
{
description: 'not defined',
data: {},
path: undefined,
expected: []
},
{
description: 'nested',
data: { level1: { level2: { level3: { level4: ['parrot', 'fish'] } } } },

View File

@@ -35,7 +35,7 @@ export class DataTablePathParserHelper {
return this.retrieveDataFromPath(nestedData, properties.join('.'));
}
private splitPathIntoProperties(path: string): string[] {
splitPathIntoProperties(path: string): string[] {
const properties: string[] = [];
const separator = '.';
const openBracket = '[';
@@ -45,6 +45,10 @@ export class DataTablePathParserHelper {
let bracketCount = 0;
const isPropertySeparatorOutsideBrackets = () => bracketCount === 0;
if (!path) {
return properties;
}
for (const char of path) {
switch (char) {
case separator:
@@ -76,7 +80,7 @@ export class DataTablePathParserHelper {
return properties;
}
private removeSquareBracketsFromProperty(property: string): string {
removeSquareBracketsFromProperty(property: string): string {
return property?.replace(this.removeSquareBracketsRegEx, '$1');
}

View File

@@ -0,0 +1,63 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const mockPersonsData = [
{
person: {
personData: {
'address.[data]test': {
street: '1234 Main St',
city: 'Springfield'
}
},
name: 'John Doe',
phoneNumbers: [
{
type: 'home',
phoneNumber: '123-456-7890'
},
{
type: 'work',
phoneNumber: '098-765-4321'
}
]
}
},
{
person: {
personData: {
'address.[data]test': {
street: '731 Second St',
city: 'Westlake'
}
},
name: 'Sam Smith',
phoneNumbers: [
{
type: 'home',
phoneNumber: '123-456-7891'
},
{
type: 'work',
phoneNumber: '321-654-1987'
}
]
}
}
];
export const mockPersonDataFirstRow = mockPersonsData[0].person;

View File

@@ -38,7 +38,7 @@ export const mockResultData = [
}
];
export const mockResponseResultData = (propertyName: string) => ({
export const mockResponseResultData = (propertyName?: string) => ({
response: {
[propertyName]: mockResultData
}

View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { DataColumn } from '@alfresco/adf-core';
import { DataColumn, DataRow, ObjectDataColumn, ObjectDataRow } from '@alfresco/adf-core';
import { TaskVariableCloud } from '../../../../models/task-variable-cloud.model';
export const mockSchemaDefinition: DataColumn[] = [
@@ -35,6 +35,33 @@ export const mockSchemaDefinition: DataColumn[] = [
}
];
export const mockSchemaDefinitionWithNestedKeys: DataColumn[] = [
{
type: 'text',
key: 'countries.europeCountry.id',
title: 'Country ID',
sortable: true,
draggable: true
},
{
type: 'text',
key: 'countries.europeCountry.name',
title: 'Country Name',
sortable: true,
draggable: true
}
];
export const mockCountryColumns: DataColumn[] = [
new ObjectDataColumn({ key: 'id', type: 'text', title: 'Country ID', sortable: true, draggable: true }),
new ObjectDataColumn({ key: 'name', type: 'text', title: 'Country Name', sortable: true, draggable: true })
];
export const mockNestedCountryColumns: DataColumn[] = [
new ObjectDataColumn({ key: 'countries.europeCountry.id', type: 'text', title: 'Country ID', sortable: true, draggable: true }),
new ObjectDataColumn({ key: 'countries.europeCountry.name', type: 'text', title: 'Country Name', sortable: true, draggable: true })
];
export const mockInvalidSchemaDefinition: DataColumn[] = [
{
type: 'text',
@@ -67,6 +94,18 @@ export const mockEuropeCountriesData = [
}
];
export const mockEuropeCountriesRows: DataRow[] = [
new ObjectDataRow({ id: 'IT', name: 'Italy' }),
new ObjectDataRow({ id: 'PL', name: 'Poland' }),
new ObjectDataRow({ id: 'UK', name: 'United Kingdom' })
];
export const mockNestedEuropeCountriesRows: DataRow[] = [
new ObjectDataRow({ 'countries.europeCountry.id': 'IT', 'countries.europeCountry.name': 'Italy' }),
new ObjectDataRow({ 'countries.europeCountry.id': 'PL', 'countries.europeCountry.name': 'Poland' }),
new ObjectDataRow({ 'countries.europeCountry.id': 'UK', 'countries.europeCountry.name': 'United Kingdom' })
];
export const mockJsonResponseEuropeCountriesData = {
data: mockEuropeCountriesData
};
@@ -85,6 +124,33 @@ export const mockJsonNestedResponseEuropeCountriesData = {
}
};
export const mockNestedEuropeCountriesData = [
{
countries: {
europeCountry: {
id: 'PL',
name: 'Poland'
}
}
},
{
countries: {
europeCountry: {
id: 'IT',
name: 'Italy'
}
}
},
{
countries: {
europeCountry: {
id: 'UK',
name: 'United Kingdom'
}
}
}
];
export const mockAmericaCountriesData = [
{
id: 'CA',
@@ -100,6 +166,12 @@ export const mockAmericaCountriesData = [
}
];
export const mockAmericaCountriesRows: DataRow[] = [
new ObjectDataRow({ id: 'CA', name: 'Canada' }),
new ObjectDataRow({ id: 'MX', name: 'Mexico' }),
new ObjectDataRow({ id: 'US', name: 'United States' })
];
export const mockCountriesIncorrectData = [
{
id: 'PL'