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

18
lib/core/models/pagination.model.ts
View File

@@ -20,15 +20,15 @@ import { Pagination } from '@alfresco/js-api';
export class PaginationModel extends Pagination {
merge?: boolean;
constructor(obj?: any) {
super(obj);
if (obj) {
this.count = obj.count;
this.hasMoreItems = obj.hasMoreItems ? obj.hasMoreItems : false;
this.merge = obj.merge ? obj.merge : false;
this.totalItems = obj.totalItems;
this.skipCount = obj.skipCount;
this.maxItems = obj.maxItems;
constructor(input?: any) {
super(input);
if (input) {
this.count = input.count;
this.hasMoreItems = input.hasMoreItems ? input.hasMoreItems : false;
this.merge = input.merge ? input.merge : false;
this.totalItems = input.totalItems;
this.skipCount = input.skipCount;
this.maxItems = input.maxItems;
}
}
}

1
lib/core/models/public-api.ts
View File

@@ -24,3 +24,4 @@ export * from './ecm-company.model';
export * from './redirection.model';
export * from './pagination.model';
export * from './oauth-config.model';
export * from './request-pagination.model';

31
lib/core/models/request-pagination.model.ts Normal file
View File

@@ -0,0 +1,31 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export class RequestPaginationModel {
skipCount?: number;
maxItems?: number;
merge?: boolean = false;
constructor(input?: any) {
if (input) {
Object.assign(this, input);
}
}
}

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);
}