[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/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:
-            <ul>
-                <li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
-            </ul>
+            <div *ngIf="multiselect">
+                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
+                <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};
+    }
 }