[AAE-7856] Show process variables in table (#7630)

* [AAE-7856] Show variables in table

* Exclude flaky tests

* Revert "Exclude flaky tests"

This reverts commit 6ac24cc.

docs/core/components/data-column.component.md

@@ -21,6 +21,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
     -   [Column Template](#column-template)
     -   [Styling Techniques](#styling-techniques)
     -   [Using the copyContent option](#using-the-copycontent-option)
+    -   [Exapmple of column customData](#example-of-column-customData)
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -52,6 +53,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | formatTooltip | `Function` |  | Custom tooltip formatter function. |
 | key | `string` |  | Data source key. Can be either a column/property key like `title`  or a property path like `createdBy.name`. |
 | sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
+| customData | `Generic` | any | Any feature specific data |
 | draggable | `boolean` | false | Toggles drag and drop for header column. |
 | isHidden | `boolean` | false | Hides columns |
 | sortingKey | `string` |  | When using server side sorting the column used by the api call where the sorting will be performed |
@@ -351,6 +353,35 @@ HTML `<data-column>` element example:
 </adf-tasklist>
 ```
 
+### Example of column customData
+
+If you would like to pass any custom data related to your specific feature, you can use customData
+
+HTML `<data-column>` element example:
+
+```html
+<data-column [customData]="MyCustomData" key="id" title="Id"></data-column>
+```
+
+You can use generic type for `DataColumn` in order to get intellisense working e.g.
+
+```ts
+const dataColumn: DataColumn<{ shouldPerformActionIfDisplayed: boolean }> = {
+    ...
+    customData: { shouldPerformActionIfDisplayed: true }
+}
+
+// We should get proper types
+consol.log(dataColumn.customData.shouldPerformActionIfDisplayed);
+
+// Now we can use this data in our feature e.g.
+const shouldPerformAction = this.columns
+    .filter(column => column.isHidden)
+    .some(column => column.customData?.shouldPerformActionIfDisplayed === true);
+
+if (shouldPerformAction) { /* action */}
+```
+
 ## See also
 
 -   [Document list component](../../content-services/components/document-list.component.md)

lib/content-services/src/lib/document-list/data/share-datatable-adapter.ts

@@ -70,6 +70,10 @@ export class ShareDataTableAdapter implements DataTableAdapter {
         this.allowDropFiles = allowDropFiles;
     }
 
+    getColumnType(_row: DataRow, col: DataColumn): string {
+        return col.type;
+    }
+
     getRows(): Array<DataRow> {
         return this.rows;
     }

lib/core/data-column/data-column.component.ts

@@ -34,6 +34,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     key: string;
 
+    /** You can specify any custom data which can be used by any specific feature */
+    @Input()
+    customData: any;
+
     /** Value type for the column. Possible settings are 'text', 'image',
      * 'date', 'fileSize', 'location', and 'json'.
      */
@@ -52,6 +56,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     draggable: boolean = false;
 
+    /* Hide column */
+    @Input()
+    isHidden: boolean = false;
+
     /** Display title of the column, typically used for column headers. You can use the
      * i18n resource key to get it translated automatically.
      */

lib/core/datatable/components/columns-selector/columns-selector.component.html

@@ -24,20 +24,22 @@
             [placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
     </div>
 
-    <ng-container *ngFor="let column of columnItems">
-        <div
-            *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
-            class="adf-columns-selector-list-item-container">
-            <mat-checkbox
-                color="primary"
-                class="adf-columns-selector-column-checkbox"
-                [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
-                [checked]="!column.isHidden"
-                (change)="changeColumnVisibility(column)">
-                <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
-            </mat-checkbox>
-        </div>
-    </ng-container>
+    <div class="adf-columns-selector-list-container">
+        <ng-container *ngFor="let column of columnItems">
+            <div
+                *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
+                class="adf-columns-selector-list-item">
+                <mat-checkbox
+                    color="primary"
+                    class="adf-columns-selector-column-checkbox"
+                    [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
+                    [checked]="!column.isHidden"
+                    (change)="changeColumnVisibility(column)">
+                    <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
+                </mat-checkbox>
+            </div>
+        </ng-container>
+    </div>
 
     <mat-divider class="adf-columns-selector-divider"></mat-divider>
 

lib/core/datatable/components/columns-selector/columns-selector.component.scss

@@ -25,7 +25,13 @@ $adf-columns-selector-space: 12px;
         font-size: var(--theme-body-1-font-size);
     }
 
-    &-list-item-container {
+    &-list-container {
+        max-height: 350px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    &-list-item {
         margin-top: 10px;
 
         &:hover {

lib/core/datatable/components/datatable/datatable.component.html

@@ -194,7 +194,7 @@
                      [adf-context-menu-enabled]="contextMenu"
                      adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row">
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
-                        <ng-container [ngSwitch]="col.type">
+                        <ng-container [ngSwitch]="data.getColumnType(row, col)">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">
                                 <mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
                                 </mat-icon>
@@ -204,12 +204,12 @@
                                     </mat-icon>
                                     <ng-template #no_selected_row>
                                         <img class="adf-datatable-center-img-ie"
-                                            [attr.aria-label]=" (data.getValue(row, col) | fileType) === 'disable' ?
+                                            [attr.aria-label]="(data.getValue(row, col) | fileType) === 'disable' ?
                                                 ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
                                                 'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
                                                     type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
                                                 }"
-                                            [attr.alt]=" (data.getValue(row, col) | fileType) === 'disable' ?
+                                            [attr.alt]="(data.getValue(row, col) | fileType) === 'disable' ?
                                                 ('ADF-DATATABLE.ACCESSIBILITY.ICON_DISABLED' | translate) :
                                                 'ADF-DATATABLE.ACCESSIBILITY.ICON_TEXT' | translate:{
                                                         type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate

lib/core/datatable/data/data-column.model.ts

@@ -29,7 +29,7 @@ export interface DataColumnTypes {
 
 export type DataColumnType = keyof DataColumnTypes;
 
-export interface DataColumn {
+export interface DataColumn<T = unknown> {
     id?: string;
     key: string;
     type: DataColumnType;
@@ -47,4 +47,5 @@ export interface DataColumn {
     header?: TemplateRef<any>;
     draggable?: boolean;
     isHidden?: boolean;
+    customData?: T;
 }

lib/core/datatable/data/data-table.schema.ts

@@ -24,7 +24,7 @@ import { ObjectDataColumn } from './object-datacolumn.model';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class DataTableSchema {
+export abstract class DataTableSchema<T = unknown> {
 
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
@@ -33,7 +33,7 @@ export abstract class DataTableSchema {
     @Input()
     presetColumn: string;
 
-    columns: any;
+    columns: DataColumn<T>[];
 
     protected columnsOrder: string[] | undefined;
     protected columnsOrderedByKey: string = 'id';
@@ -91,7 +91,7 @@ export abstract class DataTableSchema {
         return customSchemaColumns;
     }
 
-    public getSchemaFromHtml(columnList: DataColumnListComponent): any {
+    public getSchemaFromHtml(columnList: DataColumnListComponent): DataColumn[] {
         let schema = [];
         if (columnList && columnList.columns && columnList.columns.length > 0) {
             schema = columnList.columns.map((c) => c as DataColumn);

lib/core/datatable/data/datatable-adapter.ts

@@ -29,6 +29,7 @@ export interface DataTableAdapter {
     getColumns(): Array<DataColumn>;
     setColumns(columns: Array<DataColumn>): void;
     getValue(row: DataRow, col: DataColumn, resolverFn?: (_row: DataRow, _col: DataColumn) => any): any;
+    getColumnType(row: DataRow, col: DataColumn): string;
     getSorting(): DataSorting;
     setSorting(sorting: DataSorting): void;
     sort(key?: string, direction?: string): void;

lib/core/datatable/data/object-datacolumn.model.ts

@@ -19,7 +19,7 @@ import { TemplateRef } from '@angular/core';
 import { DataColumn, DataColumnType } from './data-column.model';
 
 // Simple implementation of the DataColumn interface.
-export class ObjectDataColumn implements DataColumn {
+export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     id?: string;
     key: string;
     type: DataColumnType;
@@ -35,6 +35,7 @@ export class ObjectDataColumn implements DataColumn {
     header?: TemplateRef<any>;
     draggable: boolean;
     isHidden: boolean;
+    customData?: T;
 
     constructor(input: any) {
         this.id = input.id ?? '';
@@ -52,5 +53,6 @@ export class ObjectDataColumn implements DataColumn {
         this.header = input.header;
         this.draggable = input.draggable ?? false;
         this.isHidden = input.isHidden ?? false;
+        this.customData = input.customData;
     }
 }

lib/core/datatable/data/object-datatable-adapter.ts

@@ -77,6 +77,10 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
         this.rowsChanged = new Subject<Array<DataRow>>();
     }
 
+    getColumnType(_row: DataRow, col: DataColumn): string {
+        return col.type;
+    }
+
     getRows(): Array<DataRow> {
         return this._rows;
     }

lib/core/mock/data-column.mock.ts

@@ -0,0 +1,22 @@
+import { DataColumn } from '../datatable/data/data-column.model';
+
+export const getDataColumnMock = <T = unknown>(column: Partial<DataColumn<T>> = {}): DataColumn<T> => ({
+    id: 'columnId',
+    key: 'key',
+    type: 'text',
+    format: 'format',
+    sortable: false,
+    title: 'title',
+    srTitle: 'srTitle',
+    cssClass: 'cssClass',
+    template: undefined,
+    copyContent: false,
+    editable: false,
+    focus: false,
+    sortingKey: 'sortingKey',
+    header: undefined,
+    draggable: false,
+    isHidden: false,
+    customData: undefined,
+    ...column
+});

lib/core/mock/public-api.ts

@@ -41,3 +41,4 @@ export * from './identity-group.mock';
 export * from './identity-user.mock';
 export * from './identity-group.service.mock';
 export * from './identity-user.service.mock';
+export * from './data-column.mock';

lib/process-services-cloud/src/lib/models/column-data-type.model.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-shadow
+export enum ColumnDataType {
+    processVariableColumn = 'process-variable-column'
+}

lib/process-services-cloud/src/lib/models/process-definition-cloud.model.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { ProcessVariableDefinition } from './variable-definition';
+
 export class ProcessDefinitionCloud {
     id: string;
     appName: string;
@@ -25,6 +27,7 @@ export class ProcessDefinitionCloud {
     name: string;
     category: string;
     description: string;
+    variableDefinitions?: ProcessVariableDefinition[];
 
     constructor(obj?: any) {
         this.id = obj && obj.id || null;
@@ -36,5 +39,6 @@ export class ProcessDefinitionCloud {
         this.appVersion = obj && obj.appVersion || 0;
         this.category = obj && obj?.category || '';
         this.description = obj && obj?.description || '';
+        this.variableDefinitions = obj?.variableDefinitions ?? [];
     }
 }

lib/process-services-cloud/src/lib/models/process-instance-variable.model.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 interface ProcessInstanceVariable  {
+    id: number;
+    variableDefinitionId: string;
+    value: string;
+    appName: string;
+    createTime: string;
+    lastUpdatedTime: string;
+    markedAsDeleted: boolean;
+    name: string;
+    processInstanceId: string;
+    serviceFullName: string;
+    serviceName: string;
+    serviceVersion: string;
+    taskVariable: boolean;
+    type: string;
+}

lib/process-services-cloud/src/lib/models/variable-definition.ts

@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 interface ProcessVariableDefinition {
+    id: string;
+    name: string;
+    type: string;
+    required: boolean;
+    display: boolean;
+    displayName?: string;
+}

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html

@@ -1,6 +1,7 @@
 <adf-datatable #dataTable
         [rows]="rows"
         [columns]="columns"
+        [data]="dataAdapter"
         [stickyHeader]="stickyHeader"
         [loading]="isLoading"
         [sorting]="formattedSorting"