[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.

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 = {