From ced1901c89577e93f44d2ff2b8824577c820d06e Mon Sep 17 00:00:00 2001 From: Deepak Paul Date: Tue, 11 Dec 2018 16:04:18 +0530 Subject: [PATCH] [ADF-3775] APS 2 Process and Task view in the ADF Demo Application (#4035) * [ADF-3775] Created breadcrumb component for layout demo * [ADF-3775] Created filter demo component * [ADF-3775] Created apps demo component * [ADF-3775] Created tasks list cloud demo component * [ADF-3775] Created tasks process cloud demo component * [ADF-3775] Created new cloud layout component * [ADF-3775] Improved translation * [ADF-3775] Fixed translation * [ADF-3775] Improved layout * Use the EditTaskFilters TaskFilterCloud should have a stream of filter Fix integration issues * Remove useless route Enable start task cloud button * Remove useless pages and handle start task error event * Fix wrong unit test * Use the Process Cloud menu name --- demo-shell/resources/i18n/en.json | 8 +- demo-shell/src/app/app.module.ts | 22 ++- demo-shell/src/app/app.routes.ts | 39 ++++-- .../app-layout/app-layout.component.scss | 9 ++ .../app-layout/app-layout.component.ts | 1 - .../cloud/apps-cloud-demo.component.html} | 1 - .../cloud/apps-cloud-demo.component.ts} | 10 +- .../cloud/cloud-breadcrumb-component.html | 7 + .../cloud/cloud-breadcrumb-component.scss | 8 ++ .../cloud/cloud-breadcrumb-component.ts | 44 ++++++ .../cloud/cloud-filters-demo.component.html | 21 +++ .../cloud/cloud-filters-demo.component.scss | 3 + .../cloud/cloud-filters-demo.component.ts | 48 +++++++ .../cloud/cloud-layout.component.html | 29 ++++ .../cloud/cloud-layout.component.scss | 3 + .../cloud/cloud-layout.component.ts | 57 ++++++++ .../processes-cloud-demo.component.html} | 50 +++---- .../processes-cloud-demo.component.scss} | 0 .../cloud/processes-cloud-demo.component.ts} | 59 ++++---- .../start-task-cloud-demo.component.html | 6 + .../start-task-cloud-demo.component.scss | 0 .../cloud/start-task-cloud-demo.component.ts | 56 ++++++++ .../cloud/tasks-cloud-demo.component.html | 28 ++++ .../cloud/tasks-cloud-demo.component.scss | 0 .../cloud/tasks-cloud-demo.component.ts | 73 ++++++++++ .../process-list-cloud-example.component.scss | 11 -- .../task-list-cloud-demo.component.html | 54 -------- .../task-list-cloud-demo.component.scss | 15 -- .../task-list-cloud-demo.component.ts | 128 ------------------ .../services/task-filter-cloud.service.ts | 41 ++++-- .../task-filters-cloud.component.spec.ts | 23 ---- .../task-filters-cloud.component.ts | 25 +--- 32 files changed, 527 insertions(+), 352 deletions(-) rename demo-shell/src/app/components/{cloud/cloud.component.html => app-layout/cloud/apps-cloud-demo.component.html} (98%) rename demo-shell/src/app/components/{cloud/cloud.component.ts => app-layout/cloud/apps-cloud-demo.component.ts} (79%) create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.ts create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.ts create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts rename demo-shell/src/app/components/{cloud/process-list-cloud-example.component.html => app-layout/cloud/processes-cloud-demo.component.html} (60%) rename demo-shell/src/app/components/{cloud/cloud.component.scss => app-layout/cloud/processes-cloud-demo.component.scss} (100%) rename demo-shell/src/app/components/{cloud/process-list-cloud-example.component.ts => app-layout/cloud/processes-cloud-demo.component.ts} (64%) create mode 100644 demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.ts create mode 100644 demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html create mode 100644 demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts delete mode 100644 demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss delete mode 100644 demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html delete mode 100644 demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss delete mode 100644 demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index 53c864ae04..677df061c4 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -273,7 +273,11 @@ } } }, - "PROCESS_LIST_CLOUD": { - "TITLE": "PROCESS LIST CLOUD DEMO" + "PROCESS_LIST_CLOUD_DEMO": { + "TITLE": "PROCESS LIST CLOUD DEMO", + "CUSTOMIZE_FILTERS": "Customise your filter" + }, + "TASK_LIST_CLOUD_DEMO": { + "CUSTOMIZE_FILTERS": "Customise your filter" } } diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index 947925b086..7b769076cc 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -64,11 +64,16 @@ import { InsightsModule } from '@alfresco/adf-insights'; import { ProcessModule } from '@alfresco/adf-process-services'; import { AuthBearerInterceptor } from './services'; import { ProcessServicesCloudModule } from '@alfresco/adf-process-services-cloud'; -import { CloudComponent } from './components/cloud/cloud.component'; -import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component'; -import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component'; import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component'; import { AppExtensionsModule } from './extensions/extensions.module'; +import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component'; +import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud-demo.component'; +import { ProcessesCloudDemoComponent } from './components/app-layout/cloud/processes-cloud-demo.component'; +import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component'; +import { CloudBreadcrumbsComponent } from './components/app-layout/cloud/cloud-breadcrumb-component'; +import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component'; +import { CloudFiltersDemoComponent } from './components/app-layout/cloud/cloud-filters-demo.component'; + @NgModule({ imports: [ BrowserModule, @@ -92,7 +97,6 @@ import { AppExtensionsModule } from './extensions/extensions.module'; declarations: [ AppComponent, LoginComponent, - CloudComponent, LogoutComponent, AppLayoutComponent, HomeComponent, @@ -118,10 +122,14 @@ import { AppExtensionsModule } from './extensions/extensions.module'; DemoPermissionComponent, FormLoadingComponent, ReportIssueComponent, - TaskListCloudDemoComponent, - ProcessListCloudExampleComponent, TreeViewSampleComponent, - TaskListCloudDemoComponent + CloudLayoutComponent, + AppsCloudDemoComponent, + TasksCloudDemoComponent, + ProcessesCloudDemoComponent, + StartTaskCloudDemoComponent, + CloudBreadcrumbsComponent, + CloudFiltersDemoComponent ], providers: [ { diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index d503595749..cf4f6302f3 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/demo-shell/src/app/app.routes.ts @@ -40,10 +40,12 @@ import { FormLoadingComponent } from './components/form/form-loading.component'; import { DemoPermissionComponent } from './components/permissions/demo-permissions.component'; import { ReportIssueComponent } from './components/report-issue/report-issue.component'; import { AppComponent } from './app.component'; -import { CloudComponent } from './components/cloud/cloud.component'; -import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/task-list-cloud-demo.component'; -import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component'; import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component'; +import { CloudLayoutComponent } from './components/app-layout/cloud/cloud-layout.component'; +import { ProcessesCloudDemoComponent } from './components/app-layout/cloud/processes-cloud-demo.component'; +import { AppsCloudDemoComponent } from './components/app-layout/cloud/apps-cloud-demo.component'; +import { TasksCloudDemoComponent } from './components/app-layout/cloud/tasks-cloud-demo.component'; +import { StartTaskCloudDemoComponent } from './components/app-layout/cloud/start-task-cloud-demo.component'; export const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, @@ -141,20 +143,33 @@ export const appRoutes: Routes = [ children: [ { path: '', - component: CloudComponent, - canActivate: [AuthGuard] + component: AppsCloudDemoComponent }, { - path: ':applicationName/tasks', - component: TaskListCloudDemoComponent, - canActivate: [AuthGuard] + path: ':applicationName', + children: [ + { + path: '', + component: CloudLayoutComponent, + children: [ + { + path: 'tasks', + component: TasksCloudDemoComponent + }, + { + path: 'processes', + component: ProcessesCloudDemoComponent + } + ] + }, + { + path: 'start-task', + component: StartTaskCloudDemoComponent + } + ] } ] }, - { - path: 'process-list-cloud', - component: ProcessListCloudExampleComponent - }, { path: 'node-selector', loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule' diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss index 5c83e7c2da..d816564856 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.scss +++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss @@ -103,4 +103,13 @@ } @media screen and ($mat-xsmall) {} + + mat-sidenav-content > div { + display: flex; + height: 100%; + + > div { + flex: auto; + } + } } diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index 4aab9280e4..83008a3540 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts @@ -41,7 +41,6 @@ export class AppLayoutComponent implements OnInit { { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' }, { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' }, { href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' }, - { href: '/process-list-cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_LIST_CLOUD' }, { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' }, { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' }, { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' }, diff --git a/demo-shell/src/app/components/cloud/cloud.component.html b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.html similarity index 98% rename from demo-shell/src/app/components/cloud/cloud.component.html rename to demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.html index 68ddc07330..a7bcd4d9ae 100644 --- a/demo-shell/src/app/components/cloud/cloud.component.html +++ b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.html @@ -1,2 +1 @@ - diff --git a/demo-shell/src/app/components/cloud/cloud.component.ts b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.ts similarity index 79% rename from demo-shell/src/app/components/cloud/cloud.component.ts rename to demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.ts index 280f40987f..ea7cd0f55f 100644 --- a/demo-shell/src/app/components/cloud/cloud.component.ts +++ b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.ts @@ -17,17 +17,17 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; + @Component({ - selector: 'app-cloud', - templateUrl: './cloud.component.html', - styleUrls: ['./cloud.component.scss'] + templateUrl: './apps-cloud-demo.component.html' }) -export class CloudComponent { + +export class AppsCloudDemoComponent { constructor(private router: Router) { } onAppClick(app) { - this.router.navigate([`/cloud/${app.name}/tasks/`]); + this.router.navigate([`/cloud/${app.name}`]); } } 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 new file mode 100644 index 0000000000..0b7fdb0971 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.html @@ -0,0 +1,7 @@ + +
+
+
{{applicationName + ' >'}}
{{filterName | translate}}
+
+
+ diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.scss b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.scss new file mode 100644 index 0000000000..dc6af11d15 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.scss @@ -0,0 +1,8 @@ +.adf-app-crumb { + opacity: 0.5; +} + +.adf-filter-crumb { + opacity: 0.8; + margin-left: 5px; +} diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.ts b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.ts new file mode 100644 index 0000000000..bdb4b05839 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-breadcrumb-component.ts @@ -0,0 +1,44 @@ +/*! + * @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 { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-cloud-breadcrumbs', + templateUrl: './cloud-breadcrumb-component.html', + styleUrls: ['cloud-breadcrumb-component.scss'] +}) +export class CloudBreadcrumbsComponent implements OnInit { + + applicationName: string; + filterName: string; + + constructor(private route: ActivatedRoute) { } + + ngOnInit() { + this.route.parent.params.subscribe(( + params) => { + this.applicationName = params.applicationName; + }); + this.route.queryParams.subscribe((params) => { + if (params.filterName) { + this.filterName = params.filterName; + } + }); + } +} diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.html new file mode 100644 index 0000000000..fb635606f2 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.html @@ -0,0 +1,21 @@ + + + + + Task Filters + + + + + + + + + + Process Filters + + + + + + diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.scss new file mode 100644 index 0000000000..771d9ca8e5 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.scss @@ -0,0 +1,3 @@ +adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry { + padding-left: 0 !important; +} diff --git a/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.ts new file mode 100644 index 0000000000..0c258a5a20 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-filters-demo.component.ts @@ -0,0 +1,48 @@ +/*! + * @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, EventEmitter, ViewEncapsulation, Output, Input } from '@angular/core'; + +@Component({ + selector: 'app-cloud-fillters-demo', + templateUrl: './cloud-filters-demo.component.html', + styleUrls: ['cloud-filters-demo.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class CloudFiltersDemoComponent { + + @Input() + appName: string; + + @Output() + taskFilterSelect: EventEmitter = new EventEmitter(); + + @Output() + processFilterSelect: EventEmitter = new EventEmitter(); + + panelOpenStateTask: boolean; + panelOpenStateProcess: boolean; + + onTaskFilterSelected(filter) { + this.taskFilterSelect.emit(filter); + } + + onProcessFilterSelected(filter) { + this.processFilterSelect.emit(filter); + } + +} 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 new file mode 100644 index 0000000000..6e490be141 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.html @@ -0,0 +1,29 @@ +
+ + + + + + + + + + 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 new file mode 100644 index 0000000000..32aba0e010 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.scss @@ -0,0 +1,3 @@ +.adf-cloud-layout-overflow { + overflow: auto; +} 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 new file mode 100644 index 0000000000..6ecdbd403c --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/cloud-layout.component.ts @@ -0,0 +1,57 @@ +/*! + * @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, ViewEncapsulation } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-cloud-layout', + templateUrl: './cloud-layout.component.html', + styleUrls: ['./cloud-layout.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class CloudLayoutComponent implements OnInit { + displayMenu = true; + applicationName: string; + + constructor(private router: Router, private route: ActivatedRoute) { + } + + ngOnInit() { + this.route.params.subscribe((params) => { + this.applicationName = params.applicationName; + }); + } + + onTaskFilterSelected(filter) { + const currentFilter = Object.assign({}, filter); + this.router.navigate([`/cloud/${this.applicationName}/tasks/`], { queryParams: currentFilter }); + } + + onStartTask() { + this.router.navigate([`/cloud/${this.applicationName}/start-task/`]); + } + + onProcessFilterSelected(filter) { + const queryParams = { + status: filter.query.state, + filterName: filter.name, + sort: filter.query.sort, + order: filter.query.order + }; + this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: queryParams }); + } +} diff --git a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.html b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html similarity index 60% rename from demo-shell/src/app/components/cloud/process-list-cloud-example.component.html rename to demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html index 9d562c10bc..e4dd1a318e 100644 --- a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.html +++ b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html @@ -1,14 +1,4 @@ -

{{'PROCESS_LIST_CLOUD.TITLE' | translate}}

- - - - -
+
@@ -16,10 +6,10 @@ {{filterName | translate}} - Customise your filter + {{ 'PROCESS_LIST_CLOUD_DEMO.CUSTOMIZE_FILTERS' | translate}} -
+
@@ -53,21 +43,25 @@
+ - - - - - - - - - - +
+ + + + + + + + + + +
diff --git a/demo-shell/src/app/components/cloud/cloud.component.scss b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.scss similarity index 100% rename from demo-shell/src/app/components/cloud/cloud.component.scss rename to demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.scss diff --git a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.ts b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts similarity index 64% rename from demo-shell/src/app/components/cloud/process-list-cloud-example.component.ts rename to demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts index d15167650c..7169781d8f 100644 --- a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.ts +++ b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.ts @@ -16,16 +16,16 @@ */ import { Component, ViewChild, OnInit } from '@angular/core'; -import { UserPreferencesService } from '@alfresco/adf-core'; import { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud'; +import { ActivatedRoute } from '@angular/router'; import { FormControl } from '@angular/forms'; +import { UserPreferencesService } from '@alfresco/adf-core'; @Component({ - selector: 'app-process-list-example', - templateUrl: './process-list-cloud-example.component.html', - styleUrls: ['./process-list-cloud-example.component.scss'] + templateUrl: './processes-cloud-demo.component.html', + styleUrls: ['./processes-cloud-demo.component.scss'] }) -export class ProcessListCloudExampleComponent implements OnInit { +export class ProcessesCloudDemoComponent implements OnInit { @ViewChild('processCloud') processCloud: ProcessListCloudComponent; @@ -33,14 +33,17 @@ export class ProcessListCloudExampleComponent implements OnInit { sortFormControl: FormControl; sortDirectionFormControl: FormControl; - currentAppName: string = ''; - filterName: string = ''; + applicationName: string = ''; + isFilterLoaded: boolean; + status: string = ''; + filterName: string; filterId: string = ''; sort: string = ''; - sortArray: any[]; + sortArray: any = []; sortField: string; sortDirection: string; + selectedRow: any; columns = [ {key: 'id', label: 'ID'}, @@ -49,10 +52,16 @@ export class ProcessListCloudExampleComponent implements OnInit { {key: 'startDate', label: 'START DATE'} ]; - constructor(private userPreference: UserPreferencesService) { + constructor(private route: ActivatedRoute, + private userPreference: UserPreferencesService) { } ngOnInit() { + this.isFilterLoaded = false; + this.route.parent.params.subscribe((params) => { + this.applicationName = params.applicationName; + }); + this.sortFormControl = new FormControl(''); this.sortFormControl.valueChanges.subscribe( @@ -77,30 +86,26 @@ export class ProcessListCloudExampleComponent implements OnInit { }]; } ); - } - onAppClick(appClicked: any) { - this.currentAppName = appClicked.name; - } - - onClick() { - this.currentAppName = ''; + this.route.queryParams + .subscribe((params) => { + if (params.filterName) { + this.status = params.status ? params.status : ''; + this.sort = params.sort; + this.sortDirection = params.order; + this.filterName = params.filterName; + this.isFilterLoaded = true; + this.sortDirectionFormControl.setValue(this.sortDirection); + this.sortFormControl.setValue(this.sort); + } + }); } onChangePageSize(event) { this.userPreference.paginationSize = event.maxItems; } - onClearFilters() { - this.processCloud.reload(); - } - - onFilterSelected(filter) { - this.status = filter.query.state || ''; - this.sort = filter.query.sort; - this.sortDirection = filter.query.order; - this.filterName = filter.name; - this.sortDirectionFormControl.setValue(this.sortDirection); - this.sortFormControl.setValue(this.sort); + onRowClick($event) { + this.selectedRow = $event; } } diff --git a/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.html new file mode 100644 index 0000000000..f77a9e6619 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.html @@ -0,0 +1,6 @@ + + diff --git a/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.ts new file mode 100644 index 0000000000..bb487b5d2a --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/start-task-cloud-demo.component.ts @@ -0,0 +1,56 @@ +/*! + * @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 { ActivatedRoute, Router } from '@angular/router'; +import { NotificationService } from '@alfresco/adf-core'; + +@Component({ + templateUrl: './start-task-cloud-demo.component.html', + styleUrls: ['./start-task-cloud-demo.component.scss'] +}) +export class StartTaskCloudDemoComponent implements OnInit { + + applicationName; + + constructor( + private route: ActivatedRoute, + private notificationService: NotificationService, + private router: Router) { + } + + ngOnInit() { + this.route.parent.params.subscribe((params) => { + this.applicationName = params.applicationName; + }); + } + + onStartTaskSuccess() { + this.router.navigate([`/cloud/${this.applicationName}`]); + } + + onCancelStartTask() { + this.router.navigate([`/cloud/${this.applicationName}`]); + } + + openSnackMessage(event: any) { + this.notificationService.openSnackMessage( + event.response.body.message, + 4000 + ); + } +} 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 new file mode 100644 index 0000000000..1b7a020d28 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.html @@ -0,0 +1,28 @@ +
+ + + +
+ + + + + + + + + + + + +
+
diff --git a/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.scss new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..293df86e31 --- /dev/null +++ b/demo-shell/src/app/components/app-layout/cloud/tasks-cloud-demo.component.ts @@ -0,0 +1,73 @@ +/*! + * @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, ViewChild, OnInit } from '@angular/core'; +import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud'; +import { UserPreferencesService } from '@alfresco/adf-core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + templateUrl: 'tasks-cloud-demo.component.html', + styleUrls: ['tasks-cloud-demo.component.scss'] +}) +export class TasksCloudDemoComponent implements OnInit { + + @ViewChild('taskCloud') + taskCloud: TaskListCloudComponent; + + applicationName: string = ''; + + isFilterLoaded = false; + + selectedRow: any; + + sortArray: TaskListCloudSortingModel[]; + editedFilter: TaskFilterCloudModel; + + filterId; + + constructor( + private route: ActivatedRoute, + private userPreference: UserPreferencesService) { + } + + ngOnInit() { + this.isFilterLoaded = false; + this.route.parent.params.subscribe((params) => { + this.applicationName = params.applicationName; + }); + + this.route.queryParams.subscribe((params) => { + this.isFilterLoaded = true; + this.onFilterChange(params); + this.filterId = params.id; + }); + } + + onChangePageSize(event) { + this.userPreference.paginationSize = event.maxItems; + } + + onRowClick($event) { + this.selectedRow = $event; + } + + onFilterChange(filter: any) { + this.editedFilter = Object.assign({}, filter); + this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order})]; + } +} diff --git a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss b/demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss deleted file mode 100644 index 3993334288..0000000000 --- a/demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -.adf-process-list-cloud-button { - margin: 15px; -} - -.adf-process-cloud-spacing { - margin: 10px; -} - -mat-form-field { - margin-left: 10px; -} diff --git a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html deleted file mode 100644 index 363f6169a6..0000000000 --- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html +++ /dev/null @@ -1,54 +0,0 @@ -

TASK LIST CLOUD DEMO

-
-
- - arrow_drop_down -
- -
- -
-
- -
- - -
-
- - - - - - -
- - - - - - - - - - - - -
-
diff --git a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss deleted file mode 100644 index ee7a3697fc..0000000000 --- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -.adf-task-cloud-demo-select { - padding: 10px; -} - -.adf-task-cloud-demo-select .mat-expansion-panel-body { - display: flex; -} - -.adf-app-task-list-cloud-demo-selection { - display: flex; -} - -.adf-task-row-clicked { - align-self: center; -} diff --git a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts deleted file mode 100644 index 67ab7963f1..0000000000 --- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts +++ /dev/null @@ -1,128 +0,0 @@ -/*! - * @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, ViewChild, OnInit } from '@angular/core'; -import { - TaskListCloudComponent, - TaskFiltersCloudComponent, - TaskListCloudSortingModel, - TaskFilterCloudModel, - EditTaskFilterCloudComponent -} from '@alfresco/adf-process-services-cloud'; -import { UserPreferencesService } from '@alfresco/adf-core'; -import { Observable } from 'rxjs'; -import { ActivatedRoute, Router } from '@angular/router'; - -@Component({ - selector: 'app-task-list-cloud-demo', - templateUrl: 'task-list-cloud-demo.component.html', - styleUrls: ['task-list-cloud-demo.component.scss'] -}) -export class TaskListCloudDemoComponent implements OnInit { - - @ViewChild('taskCloud') - taskCloud: TaskListCloudComponent; - - @ViewChild('taskFiltersCloud') - taskFiltersCloud: TaskFiltersCloudComponent; - - appDefinitionList: Observable; - applicationName; - status: string = ''; - showStartTask = false; - clickedRow: string = ''; - filterTaskParam; - sortArray: TaskListCloudSortingModel[]; - editedFilter: TaskFilterCloudModel; - - currentFilter: TaskFilterCloudModel; - - constructor( - private route: ActivatedRoute, - private router: Router, - private userPreference: UserPreferencesService - ) {} - - ngOnInit() { - this.route.params.subscribe((params) => { - this.applicationName = params.applicationName; - }); - - this.route.queryParams.subscribe( (params) => { - this.onFilterChange(params); - }); - } - - onFilterSelected(filter: TaskFilterCloudModel) { - this.currentFilter = Object.assign({}, filter); - this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.currentFilter.sort, direction: this.currentFilter.order})]; - - this.router.navigate([`/cloud/${this.applicationName}/tasks/`], { - queryParams: this.currentFilter - }); - } - - onFilterChange(filter: any) { - this.editedFilter = Object.assign({}, this.currentFilter, filter); - this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order})]; - } - - onStartTask() { - this.showStartTask = true; - } - - onStartTaskSuccess() { - this.showStartTask = false; - this.filterTaskParam = { name: 'My tasks'}; - } - - onCancelStartTask() { - this.showStartTask = false; - } - - onChangePageSize(event) { - this.userPreference.paginationSize = event.maxItems; - } - - onRowClick($event) { - this.clickedRow = $event; - } - - onEditActions(event: any) { - if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE) { - this.save(event.id); - } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE_AS) { - this.saveAs(event.id); - } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_DELETE) { - this.deleteFilter(); - } - } - - saveAs(filterId) { - this.taskFiltersCloud.filterParam = {id : filterId}; - this.taskFiltersCloud.getFilters(this.applicationName); - } - - save(filterId) { - this.taskFiltersCloud.filterParam = {id : filterId}; - this.taskFiltersCloud.getFilters(this.applicationName); - } - - deleteFilter() { - this.taskFiltersCloud.getFilters(this.applicationName); - } -} diff --git a/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts b/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts index ff3403fcdb..99c6822bb4 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts @@ -17,13 +17,17 @@ import { StorageService, JwtHelperService } from '@alfresco/adf-core'; import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Observable, BehaviorSubject } from 'rxjs'; import { TaskFilterCloudModel } from '../models/filter-cloud.model'; - @Injectable() export class TaskFilterCloudService { + private filtersSubject: BehaviorSubject; + filters$: Observable; + constructor(private storage: StorageService, private jwtService: JwtHelperService) { + this.filtersSubject = new BehaviorSubject([]); + this.filters$ = this.filtersSubject.asObservable(); } /** @@ -31,14 +35,12 @@ export class TaskFilterCloudService { * @param appName Name of the target app * @returns Observable of default filters just created */ - public createDefaultFilters(appName: string): Observable { + public createDefaultFilters(appName: string) { let myTasksFilter = this.getMyTasksFilterInstance(appName); this.addFilter(myTasksFilter); let completedTasksFilter = this.getCompletedTasksFilterInstance(appName); this.addFilter(completedTasksFilter); - - return this.getTaskListFilters(appName); } /** @@ -50,10 +52,13 @@ export class TaskFilterCloudService { const username = this.getUsername(); let key = `task-filters-${appName}-${username}`; const filters = JSON.parse(this.storage.getItem(key) || '[]'); - return new Observable(function(observer) { - observer.next(filters); - observer.complete(); - }); + + if (filters.length === 0) { + this.createDefaultFilters(appName); + } else { + this.addFiltersToStream(filters); + } + return this.filters$; } getTaskFilterById(appName: string, id: string): TaskFilterCloudModel { @@ -69,7 +74,7 @@ export class TaskFilterCloudService { * @param filter The new filter to add * @returns Details of task filter just added */ - addFilter(filter: TaskFilterCloudModel): Observable { + addFilter(filter: TaskFilterCloudModel) { const username = this.getUsername(); const key = `task-filters-${filter.appName}-${username}`; let filters = JSON.parse(this.storage.getItem(key) || '[]'); @@ -78,10 +83,11 @@ export class TaskFilterCloudService { this.storage.setItem(key, JSON.stringify(filters)); - return new Observable(function(observer) { - observer.next(filter); - observer.complete(); - }); + this.addFiltersToStream(filters); + } + + private addFiltersToStream(filters: TaskFilterCloudModel []) { + this.filtersSubject.next(filters); } /** @@ -107,9 +113,14 @@ export class TaskFilterCloudService { const username = this.getUsername(); const key = `task-filters-${filter.appName}-${username}`; if (key) { - let filters = JSON.parse(this.storage.getItem(key) || '[]'); + let filters: TaskFilterCloudModel[] = JSON.parse(this.storage.getItem(key) || '[]'); filters = filters.filter((item) => item.id !== filter.id); this.storage.setItem(key, JSON.stringify(filters)); + if (filters.length === 0) { + this.createDefaultFilters(filter.appName); + } else { + this.addFiltersToStream(filters); + } } } diff --git a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts index cc64344387..95e2026f2c 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts @@ -67,14 +67,6 @@ describe('TaskFiltersCloudComponent', () => { resolve(fakeGlobalFilter); }); - let fakeGlobalEmptyFilter = { - message: 'invalid data' - }; - - let fakeGlobalEmptyFilterPromise = new Promise(function (resolve, reject) { - resolve(fakeGlobalEmptyFilter); - }); - let mockErrorFilterList = { error: 'wrong request' }; @@ -206,21 +198,6 @@ describe('TaskFiltersCloudComponent', () => { })); - it('should be able to fetch and select the default filters if the input filter is not valid', (done) => { - spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(from(fakeGlobalEmptyFilterPromise)); - spyOn(component, 'createFilters').and.callThrough(); - - const appName = 'my-app-1'; - let change = new SimpleChange(null, appName, true); - component.ngOnChanges({ 'appName': change }); - - component.success.subscribe((res) => { - expect(res).toBeDefined(); - expect(component.createFilters).not.toHaveBeenCalled(); - done(); - }); - }); - it('should select the task filter based on the input by name param', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); diff --git a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts index ee78ee48d3..73432c2ece 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts @@ -80,12 +80,8 @@ export class TaskFiltersCloudComponent implements OnChanges { this.filters$.subscribe( (res: TaskFilterCloudModel[]) => { - if (res.length === 0) { - this.createFilters(appName); - } else { - this.resetFilter(); - this.filters = res; - } + this.resetFilter(); + this.filters = Object.assign([], res); this.selectFilterAndEmit(this.filterParam); this.success.emit(res); }, @@ -95,23 +91,6 @@ export class TaskFiltersCloudComponent implements OnChanges { ); } - /** - * Create default filters by appId - */ - createFilters(appName?: string) { - this.filters$ = this.taskFilterCloudService.createDefaultFilters(appName); - - this.filters$.subscribe( - (resDefault: TaskFilterCloudModel[]) => { - this.resetFilter(); - this.filters = resDefault; - }, - (errDefault: any) => { - this.error.emit(errDefault); - } - ); - } - public selectFilter(newFilter: TaskFilterCloudModel) { if (newFilter) { this.currentFilter = this.filters.find( (filter: TaskFilterCloudModel, index) =>