From f00fd1ad0119dc359a4bfd67c6390973c10dd359 Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Mon, 4 Feb 2019 14:34:55 +0000 Subject: [PATCH] [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 | 9 +++ demo-shell/src/app/app.module.ts | 4 +- .../cloud/cloud-breadcrumb-component.html | 7 +- .../cloud/cloud-layout.component.html | 62 ++++++++------- .../cloud/cloud-layout.component.scss | 4 + .../cloud/cloud-layout.component.ts | 2 +- .../cloud/cloud-settings.component.html | 18 +++++ .../cloud/cloud-settings.component.scss | 7 ++ .../cloud/cloud-settings.component.ts | 78 +++++++++++++++++++ .../cloud/processes-cloud-demo.component.html | 15 +++- .../cloud/processes-cloud-demo.component.ts | 32 +++++++- .../cloud/services/cloud-layout.service.ts | 17 ++++ .../cloud/tasks-cloud-demo.component.html | 15 +++- .../cloud/tasks-cloud-demo.component.ts | 32 +++++++- .../process-list-cloud.component.html | 2 + 15 files changed, 265 insertions(+), 39 deletions(-) create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index e5a9ceece7..c0dfe43613 100644 --- a/demo-shell/resources/i18n/en.json +++ b/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" } } diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index 975f3e22a5..9991a33787 100644 --- a/demo-shell/src/app/app.module.ts +++ b/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: [ { diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html index 0b7fdb0971..a062b24a13 100644 --- a/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html @@ -1,7 +1,8 @@ -
+
-
{{applicationName + ' >'}}
{{filterName | translate}}
+
{{applicationName + ' >'}}
+
{{filterName | translate}}
- + diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html index e8afc303e6..71deae9ede 100644 --- a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html @@ -1,35 +1,41 @@ -
- - - - - - - - - + + +
+ + + + + + + + + arrow_drop_down
- +
-
+
- -
-
- - - - - -
-
+ + + + + + + + + +
+ + + + + diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss index 32aba0e010..7c563b9ea9 100644 --- a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss +++ b/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%; +} diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts index 06d652bc74..820b584e3a 100644 --- a/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts +++ b/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 = ''; diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.html b/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.html new file mode 100644 index 0000000000..467b00715d --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.html @@ -0,0 +1,18 @@ +
+ + {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }} + + + {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }} + + + + {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }} + + + + {{ option.title }} + + + +
\ No newline at end of file diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.scss b/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.scss new file mode 100644 index 0000000000..5f275cf564 --- /dev/null +++ b/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; +} diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.ts b/demo-shell/src/app/components/app-layout/cloud/cloud-settings.component.ts new file mode 100644 index 0000000000..96ef58d5e7 --- /dev/null +++ b/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 + }); + } +} diff --git a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html index bcec39d4b9..6f31a6a396 100644 --- a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html +++ b/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> - + +
+ Selected rows: +
    +
  • {{ row.id }}
  • +
+
diff --git a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts index f153546cc7..68f5a78c88 100644 --- a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts +++ b/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); + } } diff --git a/demo-shell/src/app/components/app-layout/cloud/services/cloud-layout.service.ts b/demo-shell/src/app/components/app-layout/cloud/services/cloud-layout.service.ts index bf3d8b9d71..2674b4f21d 100644 --- a/demo-shell/src/app/components/app-layout/cloud/services/cloud-layout.service.ts +++ b/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 = new BehaviorSubject({index: 0}); private filterTask$: Observable; private filterProcessSubject: BehaviorSubject = new BehaviorSubject({index: 0}); private filterProcess$: Observable; + private settingsSubject: BehaviorSubject = new BehaviorSubject(this.settings); + private settings$: Observable; 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); + } } diff --git a/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html index 62e2a7a462..f4d8417c19 100644 --- a/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html +++ b/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)"> + (changePageSize)="onChangePageSize($event)" + (nextPage)="resetSelectedRows()" + (prevPage)="resetSelectedRows()"> +
+ Selected rows: +
    +
  • {{ row.name }}
  • +
+
diff --git a/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts index 1835016027..f6aba9d564 100644 --- a/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts +++ b/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,14 +73,40 @@ 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) { - this.router.navigate([`/cloud/${this.applicationName}/task-details/${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) { diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html index 59eff64345..ab135609ab 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html +++ b/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)">