[AAE-15815] Create Data Table widget (#8801)

* [AAE-15815] Create Data Table widget

* [AAE-15815] Add check for corectness of column schema

* fix mock name typo

* improve method name

* fix testing module config

lib/core/src/lib/form/components/widgets/core/form-field-types.ts

@@ -46,6 +46,7 @@ export class FormFieldTypes {
     static VIEWER: string = 'base-viewer';
     static DISPLAY_RICH_TEXT: string = 'display-rich-text';
     static JSON: string = 'json';
+    static DATA_TABLE: string = 'data-table';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -28,6 +28,7 @@ import { FormFieldRule } from './form-field-rule';
 import { ProcessFormModel } from './process-form-model.interface';
 import { isNumberValue } from './form-field-utils';
 import { VariableConfig } from './form-field-variable-options';
+import { DataColumn } from '../../../../datatable/data/data-column.model';
 
 // Maps to FormFieldRepresentation
 export class FormFieldModel extends FormWidgetModel {
@@ -83,6 +84,7 @@ export class FormFieldModel extends FormWidgetModel {
     groupsRestriction: string[];
     leftLabels: boolean = false;
     variableConfig: VariableConfig;
+    schemaDefinition: DataColumn[];
 
     // container model members
     numberOfColumns: number = 1;
@@ -197,6 +199,7 @@ export class FormFieldModel extends FormWidgetModel {
             this.selectLoggedUser = json.selectLoggedUser;
             this.groupsRestriction = json.groupsRestriction?.groups;
             this.variableConfig = json.variableConfig;
+            this.schemaDefinition = json.schemaDefinition;
 
             if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
                 this.placeholder = json.placeholder;

lib/core/src/lib/i18n/en.json

@@ -47,6 +47,7 @@
       "REQUIRED": "This is a required field",
       "REST_API_FAILED": "The server `{{ hostname }}` is not reachable",
       "VARIABLE_DROPDOWN_OPTIONS_FAILED": "There was a problem loading dropdown elements. Please contact administrator.",
+      "DATA_TABLE_LOAD_FAILED": "There was a problem loading table elements. Please contact administrator.",
       "FILE_NAME": "File Name",
       "NO_FILE_ATTACHED": "No file attached",
       "VALIDATOR": {

lib/process-services-cloud/src/lib/form/components/cloud-form-rendering.service.ts

@@ -26,6 +26,7 @@ import { PropertiesViewerWidgetComponent } from './widgets/properties-viewer/pro
 import { RadioButtonsCloudWidgetComponent } from './widgets/radio-buttons/radio-buttons-cloud.widget';
 import { FileViewerWidgetComponent } from './widgets/file-viewer/file-viewer.widget';
 import { DisplayRichTextWidgetComponent } from './widgets/display-rich-text/display-rich-text.widget';
+import { DataTableWidgetComponent } from './widgets/data-table/data-table.widget';
 
 @Injectable({
     providedIn: 'root'
@@ -43,7 +44,8 @@ export class CloudFormRenderingService extends FormRenderingService {
             [FormFieldTypes.PROPERTIES_VIEWER]: () => PropertiesViewerWidgetComponent,
             [FormFieldTypes.RADIO_BUTTONS]: () => RadioButtonsCloudWidgetComponent,
             [FormFieldTypes.ALFRESCO_FILE_VIEWER]: () => FileViewerWidgetComponent,
-            [FormFieldTypes.DISPLAY_RICH_TEXT]: () => DisplayRichTextWidgetComponent
+            [FormFieldTypes.DISPLAY_RICH_TEXT]: () => DisplayRichTextWidgetComponent,
+            [FormFieldTypes.DATA_TABLE]: () => DataTableWidgetComponent
         }, true);
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table-adapter.widget.spec.ts

@@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 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.
+ */
+
+import { WidgetDataTableAdapter } from './data-table-adapter.widget';
+import {
+    mockCountriesData,
+    mockCountriesIncorrectData,
+    mockInvalidSchemaDefinition,
+    mockSchemaDefinition,
+    mockSchemaDefinitionWithDifferentTypes
+} from '../../../mocks/data-table-widget.mock';
+import { ObjectDataRow } from '@alfresco/adf-core';
+
+describe('WidgetDataTableAdapter', () => {
+    let widgetDataTableAdapter: WidgetDataTableAdapter;
+
+    beforeEach(() => {
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinition);
+    });
+
+    it('should set columns type to "text" during initialization', () => {
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinitionWithDifferentTypes);
+
+        widgetDataTableAdapter.getColumns().forEach(column =>
+            expect(column.type).toBe('text')
+        );
+    });
+
+    it('should return rows if all columns are linked to data', () => {
+        const rows = widgetDataTableAdapter.getRows();
+
+        expect(rows).toEqual([
+            new ObjectDataRow({ id: 'IT', name: 'Italy' }),
+            new ObjectDataRow({ id: 'PL', name: 'Poland' }),
+            new ObjectDataRow({ id: 'UK', name: 'United Kingdom' })
+        ]);
+    });
+
+    it('should return an empty array if not all columns are linked to data', () => {
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesIncorrectData, mockSchemaDefinition);
+        const rows = widgetDataTableAdapter.getRows();
+        const isDataSourceValid = widgetDataTableAdapter.isDataSourceValid();
+
+        expect(rows).toEqual([]);
+        expect(isDataSourceValid).toBeFalse();
+    });
+
+    it('should return an empty array if columns have invalid structure', () => {
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockInvalidSchemaDefinition);
+        const rows = widgetDataTableAdapter.getRows();
+        const isDataSourceValid = widgetDataTableAdapter.isDataSourceValid();
+
+        expect(rows).toEqual([]);
+        expect(isDataSourceValid).toBeFalse();
+    });
+
+    it('should return true for isDataSourceValid() if rows have data and valid columns schema', () => {
+        const isValid = widgetDataTableAdapter.isDataSourceValid();
+
+        expect(isValid).toBeTrue();
+    });
+});

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table-adapter.widget.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 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.
+ */
+
+import {
+    ObjectDataTableAdapter,
+    DataColumn,
+    DataRow
+} from '@alfresco/adf-core';
+
+export class WidgetDataTableAdapter extends ObjectDataTableAdapter {
+
+    private rows: DataRow[];
+    private columns: DataColumn[];
+
+    constructor(data?: any[], schema?: DataColumn[]) {
+        super(data, schema);
+        this.rows = super.getRows();
+        this.columns = super.getColumns();
+
+        this.setColumnsTypeToText();
+    }
+
+    getRows(): DataRow[] {
+        if (this.isDataSourceValid()) {
+            return this.rows;
+        }
+
+        return [];
+    }
+
+    isDataSourceValid(): boolean {
+        return this.hasAllColumnsLinkedToData() && this.hasAllMandatoryColumnPropertiesHaveValues();
+    }
+
+    private hasAllMandatoryColumnPropertiesHaveValues(): boolean {
+        return this.columns.every(column => !!column.key);
+    }
+
+    private hasAllColumnsLinkedToData(): boolean {
+        const availableColumnKeys: string[] = this.columns.map(column => column.key);
+
+        return availableColumnKeys.every(columnKey => this.rows.some(row => Object.keys(row.obj).includes(columnKey)));
+    }
+
+    private setColumnsTypeToText(): void {
+        super.setColumns(this.columns.map(column => ({ ...column, type: 'text' })));
+    }
+}

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.html

@@ -0,0 +1,22 @@
+<div class="adf-data-table-widget-container">
+    <div class="adf-data-table-widget-label">
+        <label
+            class="adf-label"
+            [class.adf-left-label]="field.leftLabels"
+            [attr.for]="field.id">
+                {{field.name | translate }}
+        </label>
+    </div>
+
+    <ng-container *ngIf="!previewState; else previewTemplate">
+        <adf-datatable data-automation-id="adf-data-table-widget" [data]="dataSource"></adf-datatable>
+
+        <error-widget *ngIf="dataTableLoadFailed"
+            class="adf-data-table-widget-failed-message"
+            required="{{ 'FORM.FIELD.DATA_TABLE_LOAD_FAILED' | translate }}"></error-widget>
+    </ng-container>
+
+    <ng-template #previewTemplate>
+        <adf-datatable data-automation-id="adf-data-table-widget-preview"></adf-datatable>
+    </ng-template>
+</div>

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss

@@ -0,0 +1,3 @@
+.adf-data-table-widget-failed-message {
+    margin: 10px;
+}