[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/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: [
         {

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'

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;
+        }
+    }
 }

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' },

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

@@ -1,2 +1 @@
-
 <adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>

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}`]);
     }
 }

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

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

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;
+}

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;
+      }
+    });
+  }
+}

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

@@ -0,0 +1,21 @@
+<mat-accordion>
+  <mat-expansion-panel [expanded]="true" (opened)="panelOpenStateTask = true" (closed)="panelOpenStateTask = false">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Task Filters
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <adf-cloud-task-filters *ngIf="panelOpenStateTask" [appName]="appName" [showIcons]="true" (filterClick)="onTaskFilterSelected($event)">
+      </adf-cloud-task-filters>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel (opened)="panelOpenStateProcess = true" (closed)="panelOpenStateProcess = false">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+          Process Filters
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <adf-cloud-process-filters *ngIf="panelOpenStateProcess" [appName]="appName" [showIcons]="true" (filterClick)="onProcessFilterSelected($event)">
+      </adf-cloud-process-filters>
+  </mat-expansion-panel>
+</mat-accordion>

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;
+}

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<any> = new EventEmitter<any>();
+
+  @Output()
+  processFilterSelect: EventEmitter<any> = new EventEmitter<any>();
+
+  panelOpenStateTask: boolean;
+  panelOpenStateProcess: boolean;
+
+  onTaskFilterSelected(filter) {
+    this.taskFilterSelect.emit(filter);
+  }
+
+  onProcessFilterSelected(filter) {
+    this.processFilterSelect.emit(filter);
+  }
+
+}

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

@@ -0,0 +1,29 @@
+<div fxFill fxLayout>
+  <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
+    <adf-sidenav-layout-header>
+      <ng-template>
+        <app-cloud-breadcrumbs></app-cloud-breadcrumbs>
+      </ng-template>
+    </adf-sidenav-layout-header>
+    <adf-sidenav-layout-navigation>
+      <ng-template>
+            <adf-sidebar-action-menu [expanded]="true" [width]="205"
+            title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
+            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+            <div sidebar-menu-options>
+            <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
+            <mat-icon>assessment</mat-icon>
+            <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
+            </button>
+            </div>
+            </adf-sidebar-action-menu>
+      <app-cloud-fillters-demo [appName]="applicationName" (taskFilterSelect)="onTaskFilterSelected($event)" (processFilterSelect)="onProcessFilterSelected($event)"></app-cloud-fillters-demo>
+      </ng-template>
+    </adf-sidenav-layout-navigation>
+    <adf-sidenav-layout-content>
+      <ng-template>
+        <router-outlet></router-outlet>
+      </ng-template>
+    </adf-sidenav-layout-content>
+  </adf-sidenav-layout>
+</div>

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

@@ -0,0 +1,3 @@
+.adf-cloud-layout-overflow {
+  overflow: auto;
+}

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 });
+    }
+}

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

@@ -1,14 +1,4 @@
-<h3>{{'PROCESS_LIST_CLOUD.TITLE' | translate}}</h3>
-<adf-cloud-process-filters
-    [appName]="currentAppName"
-    [showIcons]="true"
-    (filterClick)="onFilterSelected($event)"
-    *ngIf="currentAppName">
-</adf-cloud-process-filters>
-
-<adf-cloud-app-list *ngIf="!currentAppName"
-                    (appClick)="onAppClick($event)"></adf-cloud-app-list>
-<div *ngIf="currentAppName">
+<div fxLayout="column" fxFill fxLayoutGap="2px">
     <mat-accordion>
         <mat-expansion-panel>
             <mat-expansion-panel-header>
@@ -16,10 +6,10 @@
                     {{filterName | translate}}
                 </mat-panel-title>
                 <mat-panel-description>
-                    Customise your filter
+                    {{ 'PROCESS_LIST_CLOUD_DEMO.CUSTOMIZE_FILTERS' | translate}}
                 </mat-panel-description>
             </mat-expansion-panel-header>
-            <div>
+            <div fxLayout="row" fxLayoutGap="10px">
                 <mat-form-field>
                     <mat-select placeholder="Status" [(ngModel)]="status">
                         <mat-option value="">
@@ -53,21 +43,25 @@
                     </mat-select>
                 </mat-form-field>
             </div>
+
         </mat-expansion-panel>
     </mat-accordion>
-    <adf-cloud-process-list
-                            [applicationName]="currentAppName"
-                            [status]="status"
-                            [sorting]="sortArray"
-                            [id]="filterId"
-                            #processCloud>
-        <data-columns>
-            <data-column key="entry.id" title="Id"></data-column>
-            <data-column key="entry.appName" title="Name"></data-column>
-            <data-column key="entry.status" title="Status"></data-column>
-        </data-columns>
-    </adf-cloud-process-list>
-    <adf-pagination [target]="processCloud" (changePageSize)="onChangePageSize($event)">
-    </adf-pagination>
-    <button mat-fab class="adf-process-list-cloud-button" color="primary" (click)="onClick()">Back</button>
+    <div fxLayout="column" fxFlex fxLayoutAlign="space-between">
+        <adf-cloud-process-list fxFlex class="adf-cloud-layout-overflow"
+                                [applicationName]="applicationName"
+                                [status]="status"
+                                [sorting]="sortArray"
+                                [id]="filterId"
+                                (rowClick)="onRowClick($event)"
+                                #processCloud>
+            <data-columns>
+                <data-column key="entry.id" title="Id"></data-column>
+                <data-column key="entry.name" title="Name"></data-column>
+                <data-column key="entry.status" title="Status"></data-column>
+                <data-column key="entry.startDate" title="Start Date" type="date" format="timeAgo"></data-column>
+            </data-columns>
+        </adf-cloud-process-list>
+        <adf-pagination [target]="processCloud" (changePageSize)="onChangePageSize($event)">
+        </adf-pagination>
+    </div>
 </div>

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;
     }
 }

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

@@ -0,0 +1,6 @@
+<adf-cloud-start-task
+    [appName]="applicationName"
+    (error)="openSnackMessage($event)"
+    (success)="onStartTaskSuccess()"
+    (cancel)="onCancelStartTask()">
+</adf-cloud-start-task>

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
+        );
+    }
+}

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

@@ -0,0 +1,28 @@
+<div fxLayout="column" fxFill fxLayoutGap="2px">
+    <adf-cloud-edit-task-filter
+        [appName]="applicationName"
+        [id]="filterId"
+        (filterChange)="onFilterChange($event)">
+    </adf-cloud-edit-task-filter>
+
+    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
+        <adf-cloud-task-list #taskCloud
+            [applicationName]="editedFilter.appName"
+            [status]="editedFilter.state"
+            [assignee]="editedFilter.assignment"
+            [sorting]="sortArray"
+            (rowClick)="onRowClick($event)">
+            <data-columns>
+                <data-column key="entry.id" title="Id"></data-column>
+                <data-column key="entry.name" title="Name" class="full-width name-column ellipsis-cell"></data-column>
+                <data-column key="entry.status" title="Status"></data-column>
+                <data-column key="entry.processDefinitionId" title="Process Definition Id"></data-column>
+                <data-column key="entry.priority" title="Priority"></data-column>
+                <data-column key="entry.createdDate" type="date" title="Created Date" [format]="'timeAgo'"></data-column>
+            </data-columns>
+        </adf-cloud-task-list>
+        <adf-pagination [target]="taskCloud"
+                        (changePageSize)="onChangePageSize($event)">
+        </adf-pagination>
+    </div>
+</div>

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})];
+    }
+}

demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss

@@ -1,11 +0,0 @@
-.adf-process-list-cloud-button {
-    margin: 15px;
-}
-
-.adf-process-cloud-spacing {
-    margin: 10px;
-}
-
-mat-form-field {
-    margin-left: 10px;
-}

demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html

@@ -1,54 +0,0 @@
-<h2>TASK LIST CLOUD DEMO</h2>
-<div fxLayout="row" fxLayout.xs="column">
-    <div fxFlexOrder="1" fxFlex="15%">
-        <adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
-            <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
-            <div sidebar-menu-options>
-                <button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
-                    <mat-icon>assessment</mat-icon>
-                    <span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
-                </button>
-            </div>
-        </adf-sidebar-action-menu>
-    </div>
-</div>
-
-<div *ngIf="showStartTask">
-    <adf-cloud-start-task [appName]="applicationName" (success)="onStartTaskSuccess()" (cancel)="onCancelStartTask()">
-    </adf-cloud-start-task>
-</div>
-<div *ngIf="!showStartTask">
-    <adf-cloud-task-filters  #taskFiltersCloud
-     [appName]="applicationName"
-     [filterParam]="filterTaskParam"
-     [showIcons]="true"
-     (filterClick)="onFilterSelected($event)">
-    </adf-cloud-task-filters>
-
-    <adf-cloud-edit-task-filter
-        [appName]="applicationName"
-        [id]="currentFilter.id"
-        (filterChange)="onFilterChange($event)"
-        (action)="onEditActions($event)">
-    </adf-cloud-edit-task-filter>
-
-    <div *ngIf="editedFilter">
-        <adf-cloud-task-list #taskCloud
-            [applicationName]="editedFilter.appName"
-            [status]="editedFilter.state"
-            [assignee]="editedFilter.assignment"
-            [sorting]="sortArray"
-            (rowClick)="onRowClick($event)">
-            <data-columns>
-                <data-column key="entry.id" title="Id"></data-column>
-                <data-column key="entry.name" title="Name" class="full-width name-column ellipsis-cell"></data-column>
-                <data-column key="entry.status" title="Status"></data-column>
-                <data-column key="entry.processDefinitionId" title="Process Definition Id"></data-column>
-                <data-column key="entry.priority" title="Priority"></data-column>
-                <data-column key="entry.createdDate" type="date" title="Created Date" [format]="'timeAgo'"></data-column>
-            </data-columns>
-        </adf-cloud-task-list>
-        <adf-pagination [target]="taskCloud" (changePageSize)="onChangePageSize($event)">
-        </adf-pagination>
-    </div>
-</div>

demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.scss

@@ -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;
-}

demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts

@@ -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<any>;
-    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 = <any> {id : filterId};
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-
-    save(filterId) {
-        this.taskFiltersCloud.filterParam = <any> {id : filterId};
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-
-    deleteFilter() {
-        this.taskFiltersCloud.getFilters(this.applicationName);
-    }
-}