[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
2025-07-31 17:38:48 +00:00 · 2018-12-11 16:04:18 +05:30
parent 4302cfbd04
commit ced1901c89
32 changed files with 527 additions and 352 deletions
--- 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;
+        }
+    }
 }
--- 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' },
--- a/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.html
+++ b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.html
@@ -0,0 +1 @@
+<adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>
--- a/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/app-layout/cloud/apps-cloud-demo.component.ts
@@ -0,0 +1,33 @@
+/*!
+ * @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 } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    templateUrl: './apps-cloud-demo.component.html'
+})
+
+export class AppsCloudDemoComponent {
+
+    constructor(private router: Router) {
+    }
+
+    onAppClick(app) {
+        this.router.navigate([`/cloud/${app.name}`]);
+    }
+}
--- 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
@@ -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>
--- 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
@@ -0,0 +1,8 @@
+.adf-app-crumb {
+  opacity: 0.5;
+}
+
+.adf-filter-crumb {
+  opacity: 0.8;
+  margin-left: 5px;
+}
--- 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
@@ -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;
+      }
+    });
+  }
+}
--- 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
@@ -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>
--- 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
@@ -0,0 +1,3 @@
+adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
+  padding-left: 0 !important;
+}
--- 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
@@ -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);
+  }
+
+}
--- 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
@@ -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>
--- 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
@@ -0,0 +1,3 @@
+.adf-cloud-layout-overflow {
+  overflow: auto;
+}
--- 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
@@ -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 });
+    }
+}
--- 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
@@ -0,0 +1,67 @@
+<div fxLayout="column" fxFill fxLayoutGap="2px">
+    <mat-accordion>
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{filterName | translate}}
+                </mat-panel-title>
+                <mat-panel-description>
+                    {{ 'PROCESS_LIST_CLOUD_DEMO.CUSTOMIZE_FILTERS' | translate}}
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <div fxLayout="row" fxLayoutGap="10px">
+                <mat-form-field>
+                    <mat-select placeholder="Status" [(ngModel)]="status">
+                        <mat-option value="">
+                            ALL
+                        </mat-option>
+                        <mat-option value="RUNNING">
+                            RUNNING
+                        </mat-option>
+                    <mat-option value="COMPLETED">
+                            COMPLETED
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-select [formControl]="sortFormControl">
+                        <mat-option [value]="''">Select a column</mat-option>
+                        <mat-option *ngFor="let column of columns" [value]="column.key">
+                        {{column.label}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-select [formControl]="sortDirectionFormControl">
+                        <mat-option [value]="''">Select a direction</mat-option>
+                        <mat-option value="ASC">
+                            ASC
+                        </mat-option>
+                        <mat-option value="DESC">
+                            DESC
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+
+        </mat-expansion-panel>
+    </mat-accordion>
+    <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>
--- a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.scss
--- 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
@@ -0,0 +1,111 @@
+/*!
+ * @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 { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud';
+import { ActivatedRoute } from '@angular/router';
+import { FormControl } from '@angular/forms';
+import { UserPreferencesService } from '@alfresco/adf-core';
+
+@Component({
+    templateUrl: './processes-cloud-demo.component.html',
+    styleUrls: ['./processes-cloud-demo.component.scss']
+})
+export class ProcessesCloudDemoComponent implements OnInit {
+
+    @ViewChild('processCloud')
+    processCloud: ProcessListCloudComponent;
+
+    sortFormControl: FormControl;
+    sortDirectionFormControl: FormControl;
+
+    applicationName: string = '';
+    isFilterLoaded:  boolean;
+
+    status: string = '';
+    filterName: string;
+    filterId: string = '';
+    sort: string = '';
+    sortArray: any = [];
+    sortField: string;
+    sortDirection: string;
+    selectedRow: any;
+
+    columns = [
+        {key: 'id', label: 'ID'},
+        {key: 'name', label: 'NAME'},
+        {key: 'status', label: 'STATUS'},
+        {key: 'startDate', label: 'START DATE'}
+      ];
+
+    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(
+            (sortValue) => {
+                this.sort = sortValue;
+
+                this.sortArray = [{
+                    orderBy: this.sort,
+                    direction: this.sortDirection
+                }];
+            }
+        );
+        this.sortDirectionFormControl = new FormControl('');
+
+        this.sortDirectionFormControl.valueChanges.subscribe(
+            (sortDirectionValue) => {
+                this.sortDirection = sortDirectionValue;
+
+                this.sortArray = [{
+                    orderBy: this.sort,
+                    direction: this.sortDirection
+                }];
+            }
+        );
+
+        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;
+    }
+
+    onRowClick($event) {
+        this.selectedRow = $event;
+    }
+}
--- 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
@@ -0,0 +1,6 @@
+<adf-cloud-start-task
+    [appName]="applicationName"
+    (error)="openSnackMessage($event)"
+    (success)="onStartTaskSuccess()"
+    (cancel)="onCancelStartTask()">
+</adf-cloud-start-task>
--- 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
--- 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
@@ -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
+        );
+    }
+}
--- 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
@@ -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>
--- 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
--- 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
@@ -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})];
+    }
+}
				`@@ -0,0 +1 @@`
				`<adf-cloud-app-list (appClick)="onAppClick($event)"></adf-cloud-app-list>`