[ADF-2039] pagination fixes (#2742)

* pagination fixes

* test fixes

demo-shell/src/app/components/files/files.component.html

@@ -274,7 +274,6 @@
                 *ngIf="!infiniteScrolling"
                 class="adf-documentlist-pagination"
                 [target]="documentList"
-                [supportedPageSizes]="supportedPages"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
                 (nextPage)="onNextPage($event)"

demo-shell/src/app/components/files/files.component.ts

@@ -124,7 +124,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     standardPagination: PaginationComponent;
 
     permissionsStyle: PermissionStyleModel[] = [];
-    supportedPages: number[] = [5, 10, 15, 25];
     infiniteScrolling: boolean;
 
     private onCreateFolder: Subscription;

lib/content-services/document-list/components/document-list.component.ts

@@ -173,6 +173,8 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     infiniteLoading: boolean = false;
     noPermission: boolean = false;
     selection = new Array<MinimalNodeEntity>();
+
+    // PaginatedComponent implementation
     pagination = new Subject<Pagination>();
 
     private layoutPresets = {};
@@ -860,6 +862,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
         }
     }
 
+    // PaginatedComponent implementation
     updatePagination(params: PaginationQueryParams) {
         const needsReload = this.maxItems !== params.maxItems || this.skipCount !== params.skipCount;
 
@@ -871,9 +874,15 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
         }
     }
 
+    // PaginatedComponent implementation
+    get supportedPageSizes(): number[] {
+        return this.appConfig.get('document-list.supportedPageSizes', [5, 10, 15, 25]);
+    }
+
     ngOnDestroy() {
         if (this.contextActionHandlerSubscription) {
             this.contextActionHandlerSubscription.unsubscribe();
+            this.contextActionHandlerSubscription = null;
         }
     }
 }

lib/core/pagination/paginated-component.interface.ts

@@ -23,6 +23,7 @@ import { PaginationQueryParams } from './pagination-query-params.interface';
 export interface PaginatedComponent {
 
     pagination: Subject<Pagination>;
+    supportedPageSizes: number[];
     updatePagination(params: PaginationQueryParams);
 
 }

lib/core/pagination/pagination.component.html

@@ -1,3 +1,4 @@
+<ng-container *ngIf="hasItems">
     <div class="adf-pagination__block adf-pagination__range-block">
         <span class="adf-pagination__range">
             {{
@@ -75,3 +76,4 @@
             <mat-icon>keyboard_arrow_right</mat-icon>
         </button>
     </div>
+</ng-container>

lib/core/pagination/pagination.component.spec.ts

@@ -30,13 +30,13 @@ import { PaginatedComponent } from './public-api';
 import { Subject } from 'rxjs/Subject';
 
 class FakePaginationInput implements Pagination {
-    count: number;
+    count: number = 25;
     hasMoreItems: boolean;
     totalItems: number = null;
     skipCount: number = null;
     maxItems: number = 25;
 
-    constructor(pagesCount, currentPage, lastPageItems) {
+    constructor(pagesCount: number, currentPage: number, lastPageItems: number) {
         this.totalItems = ((pagesCount - 1) * this.maxItems) + lastPageItems;
         this.skipCount = (currentPage - 1) * this.maxItems;
     }
@@ -305,13 +305,16 @@ describe('PaginationComponent', () => {
         it('should send pagination event to paginated component', () => {
             const customComponent = <PaginatedComponent> {
                 pagination: new Subject<Pagination>(),
-                updatePagination() {}
+                updatePagination() {},
+                supportedPageSizes: []
             };
             spyOn(customComponent, 'updatePagination').and.stub();
 
             component.target = customComponent;
             component.ngOnInit();
 
+            customComponent.pagination.next(new FakePaginationInput(2, 0, 25));
+
             component.goNext();
             expect(customComponent.updatePagination).toHaveBeenCalled();
         });

lib/core/pagination/pagination.component.ts

@@ -42,11 +42,9 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class PaginationComponent implements OnInit, OnDestroy {
 
-    static DEFAULT_PAGE_SIZE: number = 25;
-
     static DEFAULT_PAGINATION: Pagination = {
         skipCount: 0,
-        maxItems: PaginationComponent.DEFAULT_PAGE_SIZE,
+        maxItems: 25,
         totalItems: 0
     };
 
@@ -88,10 +86,10 @@ export class PaginationComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         if (this.target) {
+            this.supportedPageSizes = this.target.supportedPageSizes;
             this.paginationSubscription = this.target.pagination.subscribe(page => {
                 this.pagination = page;
                 this.cdr.detectChanges();
-
             });
         }
 
@@ -117,8 +115,7 @@ export class PaginationComponent implements OnInit, OnDestroy {
     }
 
     get isLastPage(): boolean {
-        const { current, lastPage } = this;
-        return current === lastPage;
+        return this.current === this.lastPage;
     }
 
     get isFirstPage(): boolean {
@@ -126,13 +123,15 @@ export class PaginationComponent implements OnInit, OnDestroy {
     }
 
     get next(): number {
-        const { isLastPage, current } = this;
-        return isLastPage ? current : current + 1;
+        return this.isLastPage ? this.current : this.current + 1;
     }
 
     get previous(): number {
-        const { isFirstPage, current } = this;
-        return isFirstPage ? 1 : current - 1;
+        return this.isFirstPage ? 1 : this.current - 1;
+    }
+
+    get hasItems(): boolean {
+        return this.pagination && this.pagination.count > 0;
     }
 
     get range(): number[] {
@@ -152,31 +151,40 @@ export class PaginationComponent implements OnInit, OnDestroy {
     }
 
     goNext() {
-        const { next, pagination: { maxItems } } = this;
+        if (this.hasItems) {
+            const maxItems = this.pagination.maxItems;
+            const skipCount = (this.next - 1) * maxItems;
 
             this.handlePaginationEvent(PaginationComponent.ACTIONS.NEXT_PAGE, {
-            skipCount: (next - 1) * maxItems,
+                skipCount,
                 maxItems
             });
         }
+    }
 
     goPrevious() {
-        const { previous, pagination: { maxItems } } = this;
+        if (this.hasItems) {
+            const maxItems = this.pagination.maxItems;
+            const skipCount = (this.previous - 1) * maxItems;
 
             this.handlePaginationEvent(PaginationComponent.ACTIONS.PREV_PAGE, {
-            skipCount: (previous - 1) * maxItems,
+                skipCount,
                 maxItems
             });
         }
+    }
 
     onChangePageNumber(pageNumber: number) {
-        const { pagination: { maxItems } } = this;
+        if (this.hasItems) {
+            const maxItems = this.pagination.maxItems;
+            const skipCount = (pageNumber - 1) * maxItems;
 
             this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_NUMBER, {
-            skipCount: (pageNumber - 1) * maxItems,
+                skipCount,
                 maxItems
             });
         }
+    }
 
     onChangePageSize(maxItems: number) {
         this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_SIZE, {