inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3930] fix infinite pagination (#4275)

Browse Source 
* refactoring infinite pagination

* fix lint

* fix import reuqest pagination from core

* fix failing unit test
This commit is contained in:
Eugenio Romano
2019-02-06 14:40:38 +00:00
committed by GitHub
parent 3a9958988a
commit d6b8e85c35
20 changed files with 198 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
lib/core/pagination/infinite-pagination.component.spec.ts
View File

@@ -111,6 +111,36 @@ describe('InfinitePaginationComponent', () => {
expect(loadMoreButton).not.toBeNull();
});
it('should NOT show the load more button if there are no more elements to load', (done) => {
pagination = { maxItems: 444, skipCount: 25, totalItems: 30, hasMoreItems: false };
component.target.pagination.next(pagination);
fixture.detectChanges();
component.onLoadMore();
fixture.whenStable().then(() => {
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).toBeNull();
done();
});
});
it('should show the load more button if there are more elements to load', (done) => {
pagination = { maxItems: 444, skipCount: 25, totalItems: 55, hasMoreItems: true };
component.target.pagination.next(pagination);
fixture.detectChanges();
fixture.whenStable().then(() => {
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).not.toBeNull();
done();
});
});
it('should NOT show anything if pagination has NO more items', () => {
pagination.hasMoreItems = false;
component.target.updatePagination(pagination);
@@ -123,15 +153,16 @@ describe('InfinitePaginationComponent', () => {
});
it('should trigger the loadMore event with the proper pagination object', (done) => {
pagination.hasMoreItems = true;
pagination.skipCount = 5;
component.target.updatePagination(pagination);
pagination = { maxItems: 444, skipCount: 25, totalItems: 55, hasMoreItems: true };
component.target.pagination.next(pagination);
component.isLoading = false;
component.pageSize = 5;
fixture.detectChanges();
component.loadMore.subscribe((newPagination: Pagination) => {
expect(newPagination.skipCount).toBe(10);
expect(newPagination.skipCount).toBe(5);
done();
});
@@ -166,10 +197,9 @@ describe('InfinitePaginationComponent', () => {
component.onLoadMore();
expect(spyTarget).toHaveBeenCalledWith({
maxItems: 444,
skipCount: 25,
totalItems: 888,
hasMoreItems: true,
maxItems: 25,
hasMoreItems: false,
merge: true
});
});
@@ -182,10 +212,9 @@ describe('InfinitePaginationComponent', () => {
component.onLoadMore();
expect(spyTarget).toHaveBeenCalledWith({
maxItems: 444,
maxItems: 7,
skipCount: 7,
totalItems: 888,
hasMoreItems: true,
hasMoreItems: false,
merge: true
});
});

37
lib/core/pagination/infinite-pagination.component.ts
View File

@@ -27,6 +27,7 @@ import { PaginatedComponent } from './paginated-component.interface';
import { Subscription } from 'rxjs';
import { PaginationComponentInterface } from './pagination-component.interface';
import { PaginationModel } from '../models/pagination.model';
import { RequestPaginationModel } from '../models/request-pagination.model';
import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
@Component({
@@ -39,12 +40,6 @@ import { UserPreferencesService, UserPreferenceValues } from '../services/user-p
})
export class InfinitePaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
static DEFAULT_PAGINATION: PaginationModel = {
skipCount: 0,
hasMoreItems: false,
merge: true
};
/** Component that provides custom pagination support. */
@Input()
target: PaginatedComponent;
@@ -59,10 +54,15 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
/** Emitted when the "Load More" button is clicked. */
@Output()
loadMore: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
loadMore: EventEmitter<RequestPaginationModel> = new EventEmitter<RequestPaginationModel>();
pagination: PaginationModel;
requestPaginationModel: RequestPaginationModel = {
skipCount: 0,
merge: true
};
private paginationSubscription: Subscription;
constructor(private cdr: ChangeDetectorRef, private userPreferencesService: UserPreferencesService) {
@@ -73,6 +73,11 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
this.paginationSubscription = this.target.pagination.subscribe((pagination) => {
this.isLoading = false;
this.pagination = pagination;
if (!this.pagination.hasMoreItems) {
this.pagination.hasMoreItems = false;
}
this.cdr.detectChanges();
});
}
@@ -80,26 +85,18 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
this.userPreferencesService.select(UserPreferenceValues.PaginationSize).subscribe((pagSize) => {
this.pageSize = this.pageSize || pagSize;
});
if (!this.pagination) {
this.pagination = InfinitePaginationComponent.DEFAULT_PAGINATION;
}
}
onLoadMore() {
this.pagination.skipCount += this.pageSize;
this.pagination.merge = true;
this.loadMore.next(this.pagination);
this.requestPaginationModel.skipCount += this.pageSize;
this.requestPaginationModel.merge = true;
this.requestPaginationModel.maxItems = this.pageSize;
if (this.pagination.skipCount >= this.pagination.totalItems || !this.pagination.hasMoreItems) {
this.pagination.hasMoreItems = false;
}
this.loadMore.next(this.requestPaginationModel);
if (this.target) {
this.target.pagination.value.merge = this.pagination.merge;
this.target.pagination.value.skipCount = this.pagination.skipCount;
this.isLoading = true;
this.target.updatePagination(<PaginationModel> this.pagination);
this.target.updatePagination(<RequestPaginationModel> this.requestPaginationModel);
}
}

3
lib/core/pagination/paginated-component.interface.ts
View File

@@ -17,8 +17,9 @@
import { PaginationModel } from '../models/pagination.model';
import { BehaviorSubject } from 'rxjs';
import { RequestPaginationModel } from '../models/request-pagination.model';
export interface PaginatedComponent {
pagination: BehaviorSubject<PaginationModel>;
updatePagination(pagination: PaginationModel);
updatePagination(requestPaginationModel: RequestPaginationModel);
}