[ADF-3829] Add multiple select checkbox to tasks and process cloud APS2 (#4210)

* [ADF-3829] Add multiple select checkbox to tasks and process cloud components in Demo-Shell

* [ADF-3829] A settings tab has been added to Process Cloud

* [ADF-3829] Remove unused imports

* [ADF-3829] Improve streamer of settings

* [ADF-3829] Create new cloud settings component with all its attributes for better structure and understanding

* [ADF-3829] Add localization for cloud settings component

demo-shell/resources/i18n/en.json

@@ -191,6 +191,10 @@
     "TASK-AUDIT-LOG": "Task Audit log",
     "TASK-SHOW-HEADER": "Show details header"
   },
+  "PS_CLOUD_TAB": {
+    "APPS_TAB": "App",
+    "SETTINGS_TAB": "Settings"
+  },
   "FORM-LIST": {
     "STORE": "Store",
     "RESTORE": "Restore"
@@ -300,5 +304,10 @@
       "RUNTIME": "Runtime",
       "DESCRIPTION": "Description"
     }
+  },
+  "SETTINGS_CLOUD": {
+      "MULTISELECTION": "Multiselection",
+      "TESTING_MODE": "Testing Mode",
+      "SELECTION_MODE": "Selection Mode"
   }
 }

demo-shell/src/app/app.module.ts

@@ -77,6 +77,7 @@ import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-f
 import { StartProcessCloudDemoComponent } from './components/app-layout/cloud/start-process-cloud-demo.component';
 import { DocumentListDemoComponent } from './components/document-list/document-list-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/people-groups-cloud-demo.component';
+import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-settings.component';
 
 @NgModule({
     imports: [
@@ -138,7 +139,8 @@ import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/peo
         CloudBreadcrumbsComponent,
         CloudFiltersDemoComponent,
         DocumentListDemoComponent,
-        PeopleGroupCloudDemoComponent
+        PeopleGroupCloudDemoComponent,
+        CloudSettingsComponent
     ],
     providers: [
         {

demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html

@@ -1,7 +1,8 @@
 <adf-toolbar>
-  <div fxLayout="column" fxLayoutAlign="center" >
+  <div fxLayout="column" fxLayoutAlign="center">
     <div fxLayout="row">
-      <div class="adf-app-crumb">{{applicationName + ' >'}} </div>  <div class="adf-filter-crumb"> {{filterName | translate}}</div>
+      <div class="adf-app-crumb">{{applicationName + ' >'}} </div>
+      <div class="adf-filter-crumb"> {{filterName | translate}}</div>
     </div>
   </div>
-  </adf-toolbar>
+</adf-toolbar>

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

@@ -1,4 +1,6 @@
-<div fxFill fxLayout>
+<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+  <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
+    <div fxFill fxLayout>
       <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
         <adf-sidenav-layout-header>
           <ng-template>
@@ -7,8 +9,7 @@
         </adf-sidenav-layout-header>
         <adf-sidenav-layout-navigation>
           <ng-template>
-            <adf-sidebar-action-menu [expanded]="true" [width]="205"
+            <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-            title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
               <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
               <div adf-sidebar-menu-options>
                 <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
@@ -32,4 +33,9 @@
           </ng-template>
         </adf-sidenav-layout-content>
       </adf-sidenav-layout>
-</div>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
+      <app-cloud-settings></app-cloud-settings>
+  </mat-tab>
+</mat-tab-group>

demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss

@@ -1,3 +1,7 @@
 .adf-cloud-layout-overflow {
   overflow: auto;
 }
+
+.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+  height: 100%;
+}

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

@@ -32,7 +32,7 @@ export class CloudLayoutComponent implements OnInit {
         private router: Router,
         private route: ActivatedRoute,
         private cloudLayoutService: CloudLayoutService
-    ) {}
+    ) { }
 
     ngOnInit() {
         let root: string = '';

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

@@ -0,0 +1,18 @@
+<div fxFlex fxLayout="column" class="adf-settings-container">
+    <mat-checkbox [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
+        {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
+    </mat-checkbox>
+    <mat-checkbox [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
+        {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
+    </mat-checkbox>
+    <mat-form-field>
+        <mat-label>
+            {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
+        </mat-label>
+        <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
+            <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
+                {{ option.title }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>

demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.scss

@@ -0,0 +1,7 @@
+.adf-settings-container {
+    padding: 20px 30px;
+}
+
+.adf-settings-container mat-form-field {
+    max-width: 200px;
+}

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

@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { CloudLayoutService } from './services/cloud-layout.service';
+
+@Component({
+    selector: 'app-cloud-settings',
+    templateUrl: './cloud-settings.component.html',
+    styleUrls: ['./cloud-settings.component.scss']
+})
+export class CloudSettingsComponent implements OnInit {
+
+    multiselect: boolean;
+    selectionMode: string;
+    testingMode: boolean;
+
+    selectionModeOptions = [
+        { value: '', title: 'None' },
+        { value: 'single', title: 'Single' },
+        { value: 'multiple', title: 'Multiple' }
+    ];
+
+    constructor(private cloudLayoutService: CloudLayoutService) { }
+
+    ngOnInit() {
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
+    }
+
+    toggleMultiselect() {
+        this.multiselect = !this.multiselect;
+        this.setSetting();
+    }
+
+    toggleTestingMode() {
+        this.testingMode = !this.testingMode;
+        this.setSetting();
+    }
+
+    onSelectionModeChange() {
+        this.setSetting();
+    }
+
+    setSetting() {
+        this.cloudLayoutService.setCurrentSettings({
+            multiselect: this.multiselect,
+            testingMode: this.testingMode,
+            selectionMode: this.selectionMode
+        });
+    }
+}

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html

@@ -16,10 +16,23 @@
                                 [status]="editedFilter.state"
                                 [name]="editedFilter.processName"
                                 [sorting]="sortArray"
+                                [selectionMode]="selectionMode"
+                                [multiselect]="multiselect"
                                 (rowClick)="onRowClick($event)"
+                                (rowsSelected)="onRowsSelected($event)"
                                 #processCloud>
         </adf-cloud-process-list>
-        <adf-pagination [target]="processCloud" (changePageSize)="onChangePageSize($event)">
+        <adf-pagination 
+            [target]="processCloud" 
+            (changePageSize)="onChangePageSize($event)"
+            (nextPage)="resetSelectedRows()"
+            (prevPage)="resetSelectedRows()">
         </adf-pagination>
+        <div *ngIf="testingMode">
+            Selected rows:
+            <ul>
+                <li *ngFor="let row of selectedRows">{{ row.id }}</li>
+            </ul>
+        </div>
     </div>
 </div>

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts

@@ -48,6 +48,10 @@ export class ProcessesCloudDemoComponent implements OnInit {
     filterId: string = '';
     sortArray: any = [];
     selectedRow: any;
+    multiselect: boolean;
+    selectionMode: string;
+    selectedRows: string[] = [];
+    testingMode: boolean;
     processFilterProperties: any[] = [];
 
     editedFilter: ProcessFilterCloudModel;
@@ -75,12 +79,31 @@ export class ProcessesCloudDemoComponent implements OnInit {
             this.onFilterChange(params);
             this.filterId = params.id;
         });
+
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
     }
 
     onChangePageSize(event) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
+    resetSelectedRows() {
+        this.selectedRows = [];
+    }
+
     onRowClick($event) {
         this.selectedRow = $event;
     }
@@ -91,9 +114,14 @@ export class ProcessesCloudDemoComponent implements OnInit {
     }
 
     onProcessFilterAction(filterAction: any) {
-        this.cloudLayoutService.setCurrentProcessFilterParam({id: filterAction.filter.id});
+        this.cloudLayoutService.setCurrentProcessFilterParam({ id: filterAction.filter.id });
         if (filterAction.actionType === ProcessesCloudDemoComponent.ACTION_SAVE_AS) {
             this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: filterAction.filter });
         }
     }
+
+    onRowsSelected(nodes) {
+        this.resetSelectedRows();
+        this.selectedRows = nodes.map((node) => node.obj.entry);
+    }
 }

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

@@ -23,14 +23,23 @@ import { Observable, BehaviorSubject } from 'rxjs';
 })
 export class CloudLayoutService {
 
+    private settings = {
+        multiselect: false,
+        testingMode: false,
+        selectionMode: 'single'
+    };
+
     private filterTaskSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
     private filterTask$: Observable<any>;
     private filterProcessSubject: BehaviorSubject<any> = new BehaviorSubject({index: 0});
     private filterProcess$: Observable<any>;
+    private settingsSubject: BehaviorSubject<any> = new BehaviorSubject(this.settings);
+    private settings$: Observable<any>;
 
     constructor() {
         this.filterTask$ = this.filterTaskSubject.asObservable();
         this.filterProcess$ = this.filterProcessSubject.asObservable();
+        this.settings$ = this.settingsSubject.asObservable();
     }
 
     getCurrentTaskFilterParam() {
@@ -48,4 +57,12 @@ export class CloudLayoutService {
     setCurrentProcessFilterParam(param) {
         this.filterProcessSubject.next(param);
     }
+
+    getCurrentSettings() {
+        return this.settings$;
+    }
+
+    setCurrentSettings(param) {
+        this.settingsSubject.next(param);
+    }
 }

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

@@ -16,10 +16,21 @@
             [status]="editedFilter.state"
             [assignee]="editedFilter.assignment"
             [sorting]="sortArray"
-            (rowClick)="onRowClick($event)">
+            [multiselect]="multiselect"
+            [selectionMode]="selectionMode"
+            (rowClick)="onRowClick($event)"
+            (rowsSelected)="onRowsSelected($event)">
         </adf-cloud-task-list>
         <adf-pagination [target]="taskCloud"
-                        (changePageSize)="onChangePageSize($event)">
+                        (changePageSize)="onChangePageSize($event)"
+                        (nextPage)="resetSelectedRows()"
+                        (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>
     </div>
 </div>

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

@@ -44,6 +44,10 @@ export class TasksCloudDemoComponent implements OnInit {
     taskFilterProperties: any[] = [];
 
     filterId;
+    multiselect: boolean;
+    selectedRows: string[] = [];
+    testingMode: boolean;
+    selectionMode: string;
 
     constructor(
         private cloudLayoutService: CloudLayoutService,
@@ -69,15 +73,41 @@ export class TasksCloudDemoComponent implements OnInit {
             this.onFilterChange(params);
             this.filterId = params.id;
         });
+
+        this.cloudLayoutService.getCurrentSettings()
+            .subscribe((settings) => this.setCurrentSettings(settings));
+    }
+
+    setCurrentSettings(settings) {
+        if (settings.multiselect !== undefined) {
+            this.multiselect = settings.multiselect;
+        }
+        if (settings.testingMode !== undefined) {
+            this.testingMode = settings.testingMode;
+        }
+        if (settings.selectionMode !== undefined) {
+            this.selectionMode = settings.selectionMode;
+        }
     }
 
     onChangePageSize(event) {
         this.userPreference.paginationSize = event.maxItems;
     }
 
+    resetSelectedRows() {
+        this.selectedRows = [];
+    }
+
     onRowClick(taskId) {
+        if (!this.multiselect && this.selectionMode !== 'multiple') {
             this.router.navigate([`/cloud/${this.applicationName}/task-details/${taskId}`]);
         }
+    }
+
+    onRowsSelected(nodes) {
+        this.resetSelectedRows();
+        this.selectedRows = nodes.map((node) => node.obj.entry);
+    }
 
     onFilterChange(filter: any) {
         this.editedFilter = Object.assign({}, filter);

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

@@ -5,6 +5,8 @@
         [selectionMode]="selectionMode"
         [multiselect]="multiselect"
         (rowClick)="onRowClick($event)"
+        (row-select)="onRowSelect($event)"
+        (row-unselect)="onRowUnselect($event)"
         (row-keyup)="onRowKeyUp($event)">
         <adf-loading-content-template>
             <ng-template>