[ADF-4828] [ProcessListCloudComponent] Add action and context menu. (#5009)

* * 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 * * Fixed comments.
2025-07-24 17:32:15 +00:00 · 2019-08-23 19:21:40 +05:30
parent 8c159babe0
commit 8c00919db0
12 changed files with 366 additions and 10 deletions
--- a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
@@ -24,7 +24,13 @@
            [lastModifiedTo]="editedFilter.lastModifiedTo"
            [sorting]="sortArray"
            [selectionMode]="selectionMode"
+            [stickyHeader]="true"
+            [showActions]="actionMenu"
+            [showContextMenu]="contextMenu"
            [multiselect]="multiselect"
+            (showRowActionsMenu)="onShowRowActionsMenu($event)"
+            (showRowContextMenu)="onShowRowContextMenu($event)"
+            (executeRowAction)="onExecuteRowAction($event)"
            (rowClick)="onRowClick($event)"
            (rowsSelected)="onRowsSelected($event)">
        </adf-cloud-process-list>
@@ -35,10 +41,28 @@
            (prevPage)="resetSelectedRows()">
        </adf-pagination>
        <div *ngIf="testingMode">
-            Selected rows:
-            <ul>
-                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
-            </ul>
+            <div *ngIf="multiselect">
+                {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
+                <ul>
+                    <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+                </ul>
+            </div>
+            <div *ngIf="actionMenu">
+                <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
+                <br>
+                <div *ngIf="selectedAction">
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
+                    <span>{{ '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>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
+                    <span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
+                </div>
+            </div>
        </div>
    </div>
 </div>
--- a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts
@@ -24,7 +24,7 @@ import {
 } from '@alfresco/adf-process-services-cloud';

 import { ActivatedRoute, Router } from '@angular/router';
-import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
+import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core';
 import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -55,11 +55,17 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
    selectionMode: string;
    selectedRows: string[] = [];
    testingMode: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
+    actions: any[] = [];
+    selectedAction: { id: number, name: string, actionType: string};
+    selectedContextAction: { id: number, name: string, actionType: string};
    processFilterProperties: any  = { filterProperties: [], sortProperties: [], actions: [] };
    processDetailsRedirection: boolean;

    editedFilter: ProcessFilterCloudModel;

+    private performAction$ = new Subject<any>();
    private onDestroy$ = new Subject<boolean>();

    constructor(
@@ -89,6 +95,7 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
        this.cloudLayoutService.settings$
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(settings => this.setCurrentSettings(settings));
+        this.performContextActions();
    }

    ngOnDestroy() {
@@ -102,6 +109,9 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
            this.testingMode = settings.testingMode;
            this.selectionMode = settings.selectionMode;
            this.processDetailsRedirection = settings.processDetailsRedirection;
+            this.actionMenu = settings.actionMenu;
+            this.contextMenu = settings.contextMenu;
+            this.actions = settings.actions;
        }
    }

@@ -140,4 +150,41 @@ export class ProcessesCloudDemoComponent implements OnInit, OnDestroy {
        this.resetSelectedRows();
        this.selectedRows = nodes.map((node) => node.obj.entry);
    }
+
+    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/demo-shell/src/app/components/cloud/services/cloud-layout.service.ts
+++ b/demo-shell/src/app/components/cloud/services/cloud-layout.service.ts
@@ -20,10 +20,13 @@ import { BehaviorSubject } from 'rxjs';

 export interface CloudServiceSettings {
    multiselect: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
    testingMode: boolean;
    taskDetailsRedirection: boolean;
    processDetailsRedirection: boolean;
    selectionMode: string;
+    actions: any[];
 }

 export interface FilterSettings {
@@ -32,6 +35,17 @@ export interface FilterSettings {
    key?: string;
 }

+export class ActionMenuModel {
+    constructor(
+        public key: string,
+        public icon: string,
+        public title: string,
+        public visible?: boolean,
+        public disable?: boolean
+      ) {  }
+
+}
+
@Injectable({
    providedIn: 'root'
 })
@@ -39,10 +53,13 @@ export class CloudLayoutService {

    private settings: CloudServiceSettings = {
        multiselect: false,
+        actionMenu: false,
+        contextMenu: false,
        testingMode: false,
        taskDetailsRedirection: true,
        processDetailsRedirection: true,
-        selectionMode: 'single'
+        selectionMode: 'single',
+        actions: []
    };

    taskFilter$ = new BehaviorSubject<FilterSettings>({index: 0});
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
@@ -2,6 +2,12 @@
    <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
+        {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
+        {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
+    </mat-slide-toggle>
    <mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
    </mat-slide-toggle>
@@ -21,4 +27,45 @@
            </mat-option>
        </mat-select>
    </mat-form-field>
+    <mat-card *ngIf="actionMenu || contextMenu">
+        <mat-card-header>
+          <mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
+                </mat-form-field>
+
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
+                </mat-form-field>
+
+                <mat-form-field fxFlex="23%">
+                    <input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
+                </mat-form-field>
+                <mat-checkbox formControlName="visible">
+                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
+                </mat-checkbox>
+                <mat-checkbox formControlName="disable">
+                    {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
+                </mat-checkbox>
+                <button mat-raised-button (click)="addAction()">
+                        {{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
+                </button>
+            </form>
+            <div *ngIf="actions.length > 0">
+                <mat-chip-list #chipList>
+                    <mat-chip *ngFor="let action of actions" [removable]="true">
+                        {{action.title}}
+                        <mat-icon
+                            matChipRemove
+                            (click)="removeAction(action)">
+                            cancel
+                        </mat-icon>
+                    </mat-chip>
+                </mat-chip-list>
+            </div>
+        </mat-card-content>
+    </mat-card>
 </div>
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
@@ -16,9 +16,10 @@
 */

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudLayoutService } from '../services/cloud-layout.service';
+import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'app-cloud-settings',
@@ -29,6 +30,9 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
    private onDestroy$ = new Subject<boolean>();

    multiselect: boolean;
+    actionMenu: boolean;
+    contextMenu: boolean;
+    actions: ActionMenuModel[] = [];
    selectionMode: string;
    testingMode: boolean;
    taskDetailsRedirection: boolean;
@@ -40,6 +44,14 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
        { value: 'multiple', title: 'Multiple' }
    ];

+    actionMenuForm = new FormGroup({
+        key: new FormControl(''),
+        title: new FormControl(''),
+        icon: new FormControl(''),
+        visible: new FormControl(true),
+        disable: new FormControl(false)
+      });
+
    constructor(private cloudLayoutService: CloudLayoutService) { }

    ngOnInit() {
@@ -57,6 +69,9 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
    setCurrentSettings(settings) {
        if (settings) {
            this.multiselect = settings.multiselect;
+            this.actionMenu = this.actionMenu;
+            this.contextMenu = this.contextMenu;
+            this.actions = this.actions;
            this.testingMode = settings.testingMode;
            this.selectionMode = settings.selectionMode;
            this.taskDetailsRedirection = settings.taskDetailsRedirection;
@@ -88,9 +103,35 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
        this.setSetting();
    }

+    toggleActionMenu() {
+        this.actionMenu = !this.actionMenu;
+        this.setSetting();
+    }
+
+    toggleContextMenu() {
+        this.contextMenu = !this.contextMenu;
+        this.setSetting();
+    }
+
+    addAction() {
+        this.actions.push(<ActionMenuModel> this.actionMenuForm.value);
+        this.actionMenuForm.get('key').reset();
+        this.actionMenuForm.get('title').reset();
+        this.actionMenuForm.get('icon').reset();
+        this.setSetting();
+    }
+
+    removeAction(removedAction: ActionMenuModel) {
+        this.actions = this.actions.filter((action: ActionMenuModel) => action.key !== removedAction.key);
+        this.setSetting();
+    }
+
    setSetting() {
        this.cloudLayoutService.setCurrentSettings({
            multiselect: this.multiselect,
+            actionMenu: this.actionMenu,
+            contextMenu: this.contextMenu,
+            actions: this.actions,
            testingMode: this.testingMode,
            selectionMode: this.selectionMode,
            taskDetailsRedirection: this.taskDetailsRedirection,
--- a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
@@ -20,6 +20,7 @@ import { CommonModule } from '@angular/common';
 import { CloudSettingsComponent } from './cloud-settings.component';
 import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
 import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
    imports: [
@@ -28,7 +29,8 @@ import { CoreModule } from '@alfresco/adf-core';
        MatDialogModule,
        MatInputModule,
        MatSelectModule,
-        MatSlideToggleModule
+        MatSlideToggleModule,
+        FlexLayoutModule
    ],
    declarations: [ CloudSettingsComponent ],
    exports: [ CommonModule, CloudSettingsComponent]