[ADF-2212] Task List - Improve the pagination using the interface (#2921)

* [ADF-2212] Task List - Improve the pagination using the interface

 * Improved the pagination using the interface.

* * Updated unimplemented pagination method.
* Removed unused currentPage() method from process-service component.

* * Refactored process-service component.
* Removed unused pagination method.

* * Updated tasklist doc.

demo-shell/src/app/components/process-service/process-service.component.html

@@ -33,7 +33,7 @@
                         [appId]="taskFilter?.appId"
                         [presetColumn]="presetColoum"
                         [page]="taskPage"
-                        [size]="taskPagination.maxItems"
+                        [size]="paginationPageSize"
                         [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
                         [name]="taskFilter?.filter?.name"
                         [assignment]="taskFilter?.filter?.assignment"
@@ -45,7 +45,7 @@
                         (success)="onSuccessTaskList($event)"
                         (row-click)="onRowClick($event)"
                         (row-dblclick)="onTaskRowDblClick($event)"
-                        #activititasklist>
+                        #taskList>
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
@@ -56,12 +56,10 @@
                     </adf-tasklist>
 
                     <adf-pagination
-                        (changePageNumber)="onChangePageNumber($event)"
-                        (changePageSize)="onChangePageSize($event)"
-                        (nextPage)="onNextPage($event)"
-                        (prevPage)="onPrevPage($event)"
-                        [pagination]="taskPagination"
-                        [supportedPageSizes]="supportedPages">
+                        *ngIf="taskList"
+                        [target]="taskList"
+                        [supportedPageSizes]="supportedPages"
+                        #taskListPagination>
                     </adf-pagination>
                 </div>
                 <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -79,6 +79,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     @ViewChild(PaginationComponent)
     processListPagination: PaginationComponent;
 
+    @ViewChild(PaginationComponent)
+    taskListPagination: PaginationComponent;
+
     @ViewChild(TaskListComponent)
     taskList: TaskListComponent;
 
@@ -116,11 +119,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     currentProcessInstanceId: string;
 
     taskSchemaColumns: any[] = [];
-    taskPagination: Pagination = {
-        skipCount: 0,
-        maxItems: 10,
-        totalItems: 0
-    };
     taskPage = 0;
     processPage = 0;
     paginationPageSize = 0;
@@ -163,7 +161,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
         this.supportedPages = this.preferenceService.getDifferentPageSizes();
-        this.taskPagination.maxItems = this.preferenceService.paginationSize;
         this.paginationPageSize = this.preferenceService.paginationSize;
 
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
@@ -203,20 +200,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         */
     }
 
-    onPrevPage(pagination: Pagination): void {
-        this.taskPagination.skipCount = pagination.skipCount;
-        this.taskPage--;
-    }
-
     onPrevPageProcess(pagination: Pagination): void {
         this.processPage = this.processListPagination.current - 1;
     }
 
-    onNextPage(pagination: Pagination): void {
-        this.taskPagination.skipCount = pagination.skipCount;
-        this.taskPage++;
-    }
-
     onNextPageProcess(pagination: Pagination): void {
         this.processPage = this.processListPagination.current - 1;
     }
@@ -228,48 +215,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.paginationPageSize = maxItems;
     }
 
-    onChangePageSize(pagination: Pagination): void {
-        const { skipCount, maxItems } = pagination;
-        this.taskPage = this.currentPage(skipCount, maxItems);
-        this.taskPagination.maxItems = maxItems;
-        this.taskPagination.skipCount = skipCount;
-        this.preferenceService.paginationSize = maxItems;
-    }
-
-    onChangePageNumber(pagination: Pagination): void {
-        const { maxItems, skipCount } = pagination;
-        this.taskPage = this.currentPage(skipCount, maxItems);
-        this.taskPagination.maxItems = maxItems;
-        this.taskPagination.skipCount = skipCount;
-    }
-
     onChangePageNumberProcess(pagination: Pagination): void {
         this.processPage = this.processListPagination.current - 1;
     }
 
-    currentPage(skipCount: number, maxItems: number): number {
-        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
-    }
-
     ngOnInit() {
-        this.taskListService.tasksList$.subscribe(
-            (tasks) => {
-                this.taskPagination = {
-                    count: tasks.data.length,
-                    maxItems: this.taskPagination.maxItems,
-                    skipCount: this.taskPagination.skipCount,
-                    totalItems: tasks.total
-                };
-                this.logService.log({
-                    count: tasks.data.length,
-                    maxItems: this.taskPagination.maxItems,
-                    skipCount: this.taskPagination.skipCount,
-                    totalItems: tasks.total
-                });
-            }, (err) => {
-                this.logService.log('err' + err);
-            });
-
         if (this.router.url.includes('processes')) {
             this.activeTab = this.tabs.processes;
         }
@@ -299,7 +249,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     resetTaskPaginationPage() {
         this.taskPage = 0;
-        this.taskPagination.skipCount = 0;
     }
 
     onReportClick(event: any): void {
@@ -417,12 +366,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onFormCompleted(form): void {
         this.currentTaskId = null;
-        this.taskPagination.totalItems--;
-        const { skipCount, maxItems, totalItems } = this.taskPagination;
-        if (totalItems > 0 && (skipCount >= totalItems)) {
-            this.taskPagination.skipCount -= maxItems;
-        }
-        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        this.taskPage = this.taskListPagination.current - 1;
         if (this.taskList) {
             this.taskList.reload();
         }

docs/task-list.component.md

@@ -125,6 +125,23 @@ You can also use both HTML-based and app.config.json custom schema declaration a
 </adf-tasklist>
 ```
 
+adf-tasklist also supports pagination and the same can be used as shown below.
+
+```html
+<adf-tasklist
+    [appId]="'1'"
+    [page]="page"
+    [size]="size"
+    #taskList>
+</adf-tasklist>
+<adf-pagination
+    *ngIf="taskList"
+    [target]="taskList"
+    [supportedPageSizes]="supportedPages"
+    #taskListPagination>
+</adf-pagination>
+```
+
 ### Properties
 
 | Name | Type | Default | Description |

lib/process-services/task-list/components/task-list.component.ts

@@ -23,7 +23,14 @@ import {
     ObjectDataRow,
     ObjectDataTableAdapter
 } from '@alfresco/adf-core';
-import { AppConfigService, DataColumnListComponent, PaginationComponent } from '@alfresco/adf-core';
+import {
+    AppConfigService,
+    DataColumnListComponent,
+    PaginationComponent,
+    PaginatedComponent,
+    PaginationQueryParams,
+    UserPreferencesService
+} from '@alfresco/adf-core';
 import {
     AfterContentInit,
     Component,
@@ -36,6 +43,8 @@ import {
     SimpleChanges
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Pagination } from 'alfresco-js-api';
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
 import { TaskListModel } from '../models/task-list.model';
 import { taskPresetsDefaultModel } from '../models/task-preset.model';
@@ -46,7 +55,7 @@ import { TaskListService } from './../services/tasklist.service';
     templateUrl: './task-list.component.html',
     styleUrls: ['./task-list.component.css']
 })
-export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
+export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, PaginatedComponent {
 
     requestNode: TaskQueryRequestRepresentationModel;
 
@@ -129,6 +138,7 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
     currentInstanceId: string;
     selectedInstances: any[];
     layoutPresets = {};
+    pagination: BehaviorSubject<Pagination>;
 
     /* The page number of the tasks to fetch. */
     @Input()
@@ -151,7 +161,14 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
     isStreamLoaded = false;
 
     constructor(private taskListService: TaskListService,
-                private appConfig: AppConfigService) {
+        private appConfig: AppConfigService,
+        private userPreferences: UserPreferencesService) {
+        this.size = this.userPreferences.paginationSize;
+        this.pagination = new BehaviorSubject<Pagination>(<Pagination>{
+            maxItems: this.size,
+            skipCount: 0,
+            totalItems: 0
+        });
     }
 
     initStream() {
@@ -164,6 +181,12 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
                     this.selectTask(this.landingTaskId);
                     this.success.emit(tasks);
                     this.isLoading = false;
+                    this.pagination.next({
+                        count: tasks.data.length,
+                        maxItems: this.size,
+                        skipCount: this.page * this.size,
+                        totalItems: tasks.total
+                    });
                 }, (error) => {
                     this.error.emit(error);
                     this.isLoading = false;
@@ -214,9 +237,16 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
         let changed: boolean = true;
 
         let landingTaskId = changes['landingTaskId'];
+        let page = changes['page'];
+        let size = changes['size'];
         if (landingTaskId && landingTaskId.currentValue && this.isEqualToCurrentId(landingTaskId.currentValue)) {
             changed = false;
+        } else if (page && page.currentValue !== page.previousValue) {
+            changed = true;
+        } else if (size && size.currentValue !== size.previousValue) {
+            changed = true;
         }
+
         return changed;
     }
 
@@ -403,4 +433,21 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
     private getDefaultLayoutPreset(): DataColumn[] {
         return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
     }
-}
+
+    updatePagination(params: PaginationQueryParams) {
+        const needsReload = params.maxItems || params.skipCount;
+        this.size = params.maxItems;
+        this.page = this.currentPage(params.skipCount, params.maxItems);
+        if (needsReload) {
+            this.reload();
+        }
+    }
+
+    currentPage(skipCount: number, maxItems: number): number {
+        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
+    }
+
+    get supportedPageSizes(): number[] {
+        return this.userPreferences.getDifferentPageSizes();
+    }
+}