From 82dca30d7f4fce2fe34de3fc93401c5ff295ffc8 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 27 Nov 2017 22:39:58 +0000 Subject: [PATCH] [ADF-2039] pagination fixes (#2742) * pagination fixes * test fixes --- .../app/components/files/files.component.html | 1 - .../app/components/files/files.component.ts | 1 - .../components/document-list.component.ts | 9 ++ .../paginated-component.interface.ts | 1 + lib/core/pagination/pagination.component.html | 134 +++++++++--------- .../pagination/pagination.component.spec.ts | 9 +- lib/core/pagination/pagination.component.ts | 58 ++++---- 7 files changed, 117 insertions(+), 96 deletions(-) diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 23384c1c9e..1fcfe16e6b 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/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)" diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index 9ebe02187f..92ab592679 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/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; diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts index a7cd8e02ae..5c567ad588 100644 --- a/lib/content-services/document-list/components/document-list.component.ts +++ b/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(); + + // PaginatedComponent implementation pagination = new Subject(); 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; } } } diff --git a/lib/core/pagination/paginated-component.interface.ts b/lib/core/pagination/paginated-component.interface.ts index ee81965c23..d745ddda80 100644 --- a/lib/core/pagination/paginated-component.interface.ts +++ b/lib/core/pagination/paginated-component.interface.ts @@ -23,6 +23,7 @@ import { PaginationQueryParams } from './pagination-query-params.interface'; export interface PaginatedComponent { pagination: Subject; + supportedPageSizes: number[]; updatePagination(params: PaginationQueryParams); } diff --git a/lib/core/pagination/pagination.component.html b/lib/core/pagination/pagination.component.html index 18804edcb5..0cfdc22ef1 100644 --- a/lib/core/pagination/pagination.component.html +++ b/lib/core/pagination/pagination.component.html @@ -1,77 +1,79 @@ -
- - {{ - 'CORE.PAGINATION.ITEMS_RANGE' | translate: { - range: range.join('-'), - total: pagination.totalItems - } - }} - -
+ +
+ + {{ + 'CORE.PAGINATION.ITEMS_RANGE' | translate: { + range: range.join('-'), + total: pagination.totalItems + } + }} + +
-
- - {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }} - +
+ + {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }} + - - {{ pagination.maxItems }} - + + {{ pagination.maxItems }} + - - - - - -
-
- - {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }} - + + + +
- +
+ + {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }} + - - {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }} - - - - -
-
- + + {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }} + - -
+ + + +
+ +
+ + + +
+ diff --git a/lib/core/pagination/pagination.component.spec.ts b/lib/core/pagination/pagination.component.spec.ts index ed2a6b3737..21b3e32c10 100644 --- a/lib/core/pagination/pagination.component.spec.ts +++ b/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 = { pagination: new Subject(), - 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(); }); diff --git a/lib/core/pagination/pagination.component.ts b/lib/core/pagination/pagination.component.ts index b228e4fbea..779c99bf0d 100644 --- a/lib/core/pagination/pagination.component.ts +++ b/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,30 +151,39 @@ 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, - maxItems - }); + this.handlePaginationEvent(PaginationComponent.ACTIONS.NEXT_PAGE, { + 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, - maxItems - }); + this.handlePaginationEvent(PaginationComponent.ACTIONS.PREV_PAGE, { + 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, - maxItems - }); + this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_NUMBER, { + skipCount, + maxItems + }); + } } onChangePageSize(maxItems: number) {