[ADF-4829] [ADF] [TaskListCloudComponent] Add action and context menu. (#5018)

* * Demo on list com

* [ADF-4828] [ADF] [ProcessListCloudComponent] Add action and context menu.

* Exposed action and context menu.
* Provided a way to in the demo shell to test action menu.
* Added required transaltion on demo shell.

* * Added doc

* [ADF-4829] [ADF] [TaskListCloudComponent] Add action and context menu.

* Exposed action and contect menu on tasklist page.

* * Added documentation.

* * Fixed typo

* * After rebase

* * Fixed failing e2e test on cloud demo tasklist

* * Added providedIn in Task/process cloud service.

demo-shell/resources/i18n/en.json

@@ -321,6 +321,7 @@
       "KEY": "Key",
       "TITLE": "Title",
       "ICON": "Icon",
+      "TASK_ID": "Task Id",
       "PROCESS_ID": "ProcessInstanceId",
       "ACTION_TYPE": "Action Type"
     }

demo-shell/src/app/components/cloud/services/cloud-layout.service.ts

@@ -41,7 +41,7 @@ export class ActionMenuModel {
         public icon: string,
         public title: string,
         public visible?: boolean,
-        public disable?: boolean
+        public disabled?: boolean
       ) {  }
 
 }

demo-shell/src/app/components/cloud/shared/cloud-settings.component.html

@@ -47,7 +47,7 @@
                 <mat-checkbox formControlName="visible">
                     {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
                 </mat-checkbox>
-                <mat-checkbox formControlName="disable">
+                <mat-checkbox formControlName="disabled">
                     {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
                 </mat-checkbox>
                 <button mat-raised-button (click)="addAction()">

demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts

@@ -49,7 +49,7 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
         title: new FormControl(''),
         icon: new FormControl(''),
         visible: new FormControl(true),
-        disable: new FormControl(false)
+        disabled: new FormControl(false)
       });
 
     constructor(private cloudLayoutService: CloudLayoutService) { }

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html

@@ -29,6 +29,12 @@
             [sorting]="sortArray"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"
+            [stickyHeader]="true"
+            [showActions]="actionMenu"
+            [showContextMenu]="contextMenu"
+            (showRowActionsMenu)="onShowRowActionsMenu($event)"
+            (showRowContextMenu)="onShowRowContextMenu($event)"
+            (executeRowAction)="onExecuteRowAction($event)"
             (rowClick)="onRowClick($event)"
             (rowsSelected)="onRowsSelected($event)"
             #taskCloud>
@@ -40,10 +46,28 @@
             (prevPage)="resetSelectedRows()">
         </adf-pagination>
         <div *ngIf="testingMode">
-            Selected rows:
+            <div *ngIf="multiselect">
-            <ul>
+                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
-                <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
+                <ul>
-            </ul>
+                    <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
+                </ul>
+            </div>
+            <div *ngIf="actionMenu">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
+                <br>
+                <div *ngIf="selectedAction">
+                    <span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
+                    <span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
+                </div>
+            </div>
+            <div *ngIf="contextMenu">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
+                <br>
+                <div *ngIf="selectedContextAction">
+                    <span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
+                    <span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
+                </div>
+            </div>
         </div>
     </div>
 </div>

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
 import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CloudLayoutService } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
@@ -48,10 +48,16 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
     filterId;
     multiselect: boolean;
     selectedRows: string[] = [];
+    actionMenu: boolean;
+    contextMenu: boolean;
+    actions: any[] = [];
+    selectedAction: { id: number, name: string, actionType: string};
+    selectedContextAction: { id: number, name: string, actionType: string};
     testingMode: boolean;
     selectionMode: string;
     taskDetailsRedirection: boolean;
 
+    private performAction$ = new Subject<any>();
     private onDestroy$ = new Subject<boolean>();
 
     constructor(
@@ -82,6 +88,7 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
         this.cloudLayoutService.settings$
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(settings => this.setCurrentSettings(settings));
+        this.performContextActions();
     }
 
     ngOnDestroy() {
@@ -95,6 +102,9 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
             this.testingMode = settings.testingMode;
             this.selectionMode = settings.selectionMode;
             this.taskDetailsRedirection = settings.taskDetailsRedirection;
+            this.actionMenu = settings.actionMenu;
+            this.contextMenu = settings.contextMenu;
+            this.actions = settings.actions;
         }
     }
 
@@ -128,4 +138,41 @@ export class TasksCloudDemoComponent implements OnInit, OnDestroy {
             this.router.navigate([`/cloud/${this.appName}/tasks/`], { queryParams: filterAction.filter });
         }
     }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        event.value.actions = this.actions;
+    }
+
+    onShowRowContextMenu(event: DataCellEvent) {
+        event.value.actions = this.actions.map((action) => {
+            return {
+                data: event.value.row['obj'],
+                model: action,
+                subject: this.performAction$
+
+            };
+        });
+    }
+
+    onExecuteRowAction(row: any) {
+        const value = row.value.row['obj'].entry;
+        const action = row.value.action;
+        this.selectedAction = {id: value.id, name: value.name, actionType: action.title};
+    }
+
+    performContextActions() {
+        this.performAction$
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe((action: any) => {
+            if (action) {
+              this.onExecuteContextAction(action);
+            }
+          });
+    }
+
+    onExecuteContextAction(contextAction: any) {
+        const value = contextAction.data.entry;
+        const action = contextAction.model;
+        this.selectedContextAction = {id: value.id, name: value.name, actionType: action.title};
+    }
 }

docs/process-services-cloud/components/task-list-cloud.component.md

@@ -53,6 +53,9 @@ when the task list is empty:
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` | "" | The name of the application. |
 | assignee | `string` | "" | The assignee of the process. Possible values are: "assignee" (the current user is the assignee), "candidate" (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value (the current user is involved). |
+| actions | `boolean` | false | Toggles the data actions column. |
+| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
+| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
 | createdDate | `string` | "" | Filter the tasks. Display only tasks created on the supplied date. |
 | dueDate | `string` | "" | Filter the tasks. Display only tasks with dueDate equal to the supplied date. |
 | id | `string` | "" | Filter the tasks. Display only tasks with id equal to the supplied value. |
@@ -80,6 +83,9 @@ when the task list is empty:
 | rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task in the list is clicked |
 | rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any[]>` | Emitted when rows are selected/unselected |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task list is loaded |
+| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/datatable/components/datatable/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
+| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/datatable/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
+| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/datatable/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
 
 ## Details
 
@@ -215,6 +221,116 @@ typical tasklist.
 
 You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) page for more information about these features.
 
+#### showRowContextMenu event
+
+Emitted before the context menu is displayed for a row.
+
+Note that the TaskListCloudComponent itself does not populate the context menu with items.
+You can provide all necessary content via the handler.
+
+```html
+<adf-cloud-task-list
+    [contextMenu]="true"
+    (showRowContextMenu)="onShowRowContextMenu($event)">
+</adf-cloud-task-list>
+```
+
+Event properties:
+
+```ts
+value: {
+    row: DataRow,
+    col: DataColumn,
+    actions: []
+}
+```
+
+Handler example:
+
+```ts
+onShowRowContextMenu(event: DataCellEvent) {
+    event.value.actions = [
+        {  title: 'Hello Context Action' },
+        { ... }
+    ]
+}
+```
+![](../../docassets/images/task-list-cloud-context-menu.png)
+
+This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
+
+The TaskListCloudComponent will automatically render the supplied menu items.
+
+See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
+documentation for more details on the format and behavior of context actions.
+
+#### showRowActionsMenu event
+
+Emitted before the actions menu is displayed for a row.
+Requires the `actions` property to be set to `true`.
+
+Event properties:
+
+```ts
+value: {
+    row: DataRow,
+    action: any
+}
+```
+
+Note that the TaskListCloudComponent itself does not populate the action menu with items.
+You can provide all necessary content via the handler.
+
+This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
+
+#### executeRowAction event
+
+Emitted when the user executes a row action.
+
+This usually accompanies a `showRowActionsMenu` event.
+The TaskListCloudComponent itself does not execute actions but provides support for external
+integration. If actions are provided using the `showRowActionsMenu` event
+then `executeRowAction` will be automatically executed when the user clicks a
+corresponding menu item.
+
+```html
+<adf-cloud-task-list
+    [actions]="true"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)">
+</adf-cloud-task-list>
+```
+
+```ts
+import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
+
+onShowRowActionsMenu(event: DataCellEvent) {
+    let myAction = {
+        title: 'Hello Action'
+        // your custom metadata needed for onExecuteRowAction
+    };
+    event.value.actions = [
+        myAction
+    ];
+}
+
+onExecuteRowAction(event: DataRowActionEvent) {
+    let args = event.value;
+    console.log(args.row);
+    console.log(args.action);
+    window.alert(`My custom action: ${args.action.title}`);
+}
+```
+
+![](../../docassets/images/task-list-cloud-action-menu.png)
+
+You can use any payloads for row actions. The only requirement for the objects is that they
+must have a `title` property.
+
+When an action is selected in the dropdown menu, the TaskListCloudComponent invokes the `executeRowAction` event.
+Use this to handle the response, inspect the action payload (and all custom properties defined
+earlier), and perform the corresponding actions.
+
 ## See also
 
 -   [Data column component](../../core/components/data-column.component.md)

lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts

@@ -22,7 +22,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { ProcessFiltersCloudComponent } from './components/process-filters-cloud.component';
 import { MaterialModule } from '../../material.module';
 import { LogService, StorageService, CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
-import { ProcessFilterCloudService } from './services/process-filter-cloud.service';
 import { HttpClientModule } from '@angular/common/http';
 import { EditProcessFilterCloudComponent } from './components/edit-process-filter-cloud.component';
 import { ProcessFilterDialogCloudComponent } from './components/process-filter-dialog-cloud.component';
@@ -45,7 +44,6 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
     exports: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
     entryComponents: [ProcessFilterDialogCloudComponent],
     providers: [
-        ProcessFilterCloudService,
         LogService,
         StorageService,
         { provide: DateAdapter, useClass: MomentDateAdapter },

lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts

@@ -22,7 +22,9 @@ import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
 import { switchMap, map, catchError } from 'rxjs/operators';
 import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
 import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class ProcessFilterCloudService {
 
     private filtersSubject: BehaviorSubject<ProcessFilterCloudModel[]>;

lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts

@@ -23,7 +23,9 @@ import { switchMap, map, catchError } from 'rxjs/operators';
 import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
 import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class TaskFilterCloudService {
     private filtersSubject: BehaviorSubject<TaskFilterCloudModel[]>;
     filters$: Observable<TaskFilterCloudModel[]>;

lib/process-services-cloud/src/lib/task/task-filters/task-filters-cloud.module.ts

@@ -22,7 +22,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { TaskFiltersCloudComponent } from './components/task-filters-cloud.component';
 import { MaterialModule } from '../../material.module';
 import { LogService, StorageService, CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
-import { TaskFilterCloudService } from './services/task-filter-cloud.service';
 import { HttpClientModule } from '@angular/common/http';
 import { EditTaskFilterCloudComponent } from './components/edit-task-filter-cloud.component';
 import { TaskFilterDialogCloudComponent } from './components/task-filter-dialog-cloud.component';
@@ -43,7 +42,6 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
     declarations: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent, TaskFilterDialogCloudComponent],
     exports: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent],
     providers: [
-        TaskFilterCloudService,
         LogService,
         StorageService,
         { provide: DateAdapter, useClass: MomentDateAdapter },

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

@@ -7,6 +7,12 @@
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"
             [stickyHeader]="stickyHeader"
+            [actions]="showActions"
+            [actionsPosition]="actionsPosition"
+            [contextMenu]="showContextMenu"
+            (showRowActionsMenu)="onShowRowActionsMenu($event)"
+            (showRowContextMenu)="onShowRowContextMenu($event)"
+            (executeRowAction)="onExecuteRowAction($event)"
             (row-select)="onRowSelect($event)"
             (row-unselect)="onRowUnselect($event)"
             (rowClick)="onRowClick($event)"

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts

@@ -19,7 +19,7 @@ import { Component, ViewEncapsulation, OnChanges, Input, SimpleChanges, Output,
 import { AppConfigService, UserPreferencesService,
          DataTableSchema, UserPreferenceValues,
          PaginatedComponent, PaginationModel,
-         DataRowEvent, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
+         DataRowEvent, CustomEmptyContentTemplateDirective, DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
 import { taskPresetsCloudDefaultModel } from '../models/task-preset-cloud.model';
 import { TaskQueryCloudRequestModel } from '../models/filter-cloud-model';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -127,6 +127,30 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
     @Input()
     sorting: TaskListCloudSortingModel[];
 
+    /** Toggles the data actions column. */
+    @Input()
+    showActions: boolean = false;
+
+    /** Position of the actions dropdown menu. Can be "left" or "right". */
+    @Input()
+    actionsPosition: string = 'right'; // left|right
+
+    /** Toggles custom context menu for the component. */
+    @Input()
+    showContextMenu: boolean = false;
+
+    /** Emitted before the context menu is displayed for a row. */
+    @Output()
+    showRowContextMenu = new EventEmitter<DataCellEvent>();
+
+    /** Emitted before the actions menu is displayed for a row. */
+    @Output()
+    showRowActionsMenu = new EventEmitter<DataCellEvent>();
+
+    /** Emitted when the user executes a row action. */
+    @Output()
+    executeRowAction = new EventEmitter<DataRowActionEvent>();
+
     /** Emitted when a task in the list is clicked */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -264,6 +288,18 @@ export class TaskListCloudComponent extends DataTableSchema implements OnChanges
         }
     }
 
+    onShowRowActionsMenu(event: DataCellEvent) {
+        this.showRowActionsMenu.emit(event);
+    }
+
+    onShowRowContextMenu(event: DataCellEvent) {
+        this.showRowContextMenu.emit(event);
+    }
+
+    onExecuteRowAction(row: DataRowActionEvent) {
+        this.executeRowAction.emit(row);
+    }
+
     private createRequestNode() {
 
         const requestNode = {