[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.
2025-05-12 17:04:57 +00:00 · 2019-09-16 16:56:27 +05:30 · 2019-09-16 16:56:27 +05:30 · 53471eae84
commit 53471eae84
parent d89b61cff0
15 changed files with 245 additions and 15 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/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"
    }
--- a/demo-shell/src/app/components/cloud/services/cloud-layout.service.ts
+++ b/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
      ) {  }

 }
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
+++ b/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()">
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
+++ b/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) { }
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
+++ b/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>
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
+++ b/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};
+    }
 }
--- a/docs/docassets/images/task-list-cloud-action-menu.png
+++ b/docs/docassets/images/task-list-cloud-action-menu.png
--- a/docs/docassets/images/task-list-cloud-context-menu.png
+++ b/docs/docassets/images/task-list-cloud-context-menu.png
--- a/docs/process-services-cloud/components/task-list-cloud.component.md
+++ b/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)
--- a/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts
+++ b/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 },
--- a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
+++ b/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[]>;
--- a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
+++ b/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[]>;
--- a/lib/process-services-cloud/src/lib/task/task-filters/task-filters-cloud.module.ts
+++ b/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 },
--- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.html
+++ b/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)"
--- a/lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts
+++ b/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 = {