Process list implement pagination interface (#2872)

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

@@ -133,11 +133,14 @@
                 <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
+                        #processList
                         *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                         [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
                         [name]="processFilter?.filter?.name"
                         [presetColumn]="presetColoum"
                         [state]="processFilter?.filter?.state"
+                        [page]="processPage"
+                        [size]="paginationPageSize"
                         [sort]="processFilter?.filter?.sort"
                         [data]="dataProcesses"
                         (rowClick)="onProcessRowClick($event)"
@@ -151,6 +154,16 @@
                         </data-columns> -->
 
                     </adf-process-instance-list>
+                    <adf-pagination
+                        *ngIf="processList"
+                        [target]="processList"
+                        [supportedPageSizes]="supportedPages"
+                        (changePageNumber)="onChangePageNumberProcess($event)"
+                        (changePageSize)="onChangePageSizeProcess($event)"
+                        (nextPage)="onNextPageProcess($event)"
+                        (prevPage)="onPrevPageProcess($event)"
+                        #processListPagination>
+                    </adf-pagination>
                 </div>
                 <div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                     <adf-process-instance-details

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

@@ -30,7 +30,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Pagination, ProcessInstanceFilterRepresentation } from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
-    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService
+    DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent
 } from '@alfresco/adf-core';
 
 import { AnalyticsReportListComponent } from '@alfresco/adf-insights';
@@ -76,6 +76,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     @ViewChild(TaskFiltersComponent)
     activitifilter: TaskFiltersComponent;
 
+    @ViewChild(PaginationComponent)
+    processListPagination: PaginationComponent;
+
     @ViewChild(TaskListComponent)
     taskList: TaskListComponent;
 
@@ -119,6 +122,8 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         totalItems: 0
     };
     taskPage = 0;
+    processPage = 0;
+    paginationPageSize = 0;
     processSchemaColumns: any[] = [];
 
     supportedPages: number[];
@@ -159,6 +164,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         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');
         this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
@@ -202,11 +208,26 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         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;
+    }
+
+    onChangePageSizeProcess(pagination: Pagination): void {
+        const { maxItems } = pagination;
+        this.preferenceService.paginationSize = maxItems;
+        this.processPage = this.processListPagination.current - 1;
+        this.paginationPageSize = maxItems;
+    }
+
     onChangePageSize(pagination: Pagination): void {
         const { skipCount, maxItems } = pagination;
         this.taskPage = this.currentPage(skipCount, maxItems);
@@ -222,6 +243,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         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;
     }
@@ -269,6 +294,12 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
+        this.resetTaskPaginationPage();
+    }
+
+    resetTaskPaginationPage() {
+        this.taskPage = 0;
+        this.taskPagination.skipCount = 0;
     }
 
     onReportClick(event: any): void {
@@ -302,6 +333,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
         this.processFilter = event;
+        this.resetProcessPaginationPage();
+    }
+
+    resetProcessPaginationPage() {
+        this.processPage = 0;
     }
 
     onSuccessProcessFilterList(event: ProcessInstanceFilterRepresentation[]): void {