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-2157] Infinite pagination target supporting (#2856)

Browse Source 
* Infinite pagination target supporting

* Updating documentation
This commit is contained in:
Popovics András
2018-01-22 10:59:05 +00:00
committed by Eugenio Romano
parent d189567853
commit 89a7b0c4b0
7 changed files with 158 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Pagination } from 'alfresco-js-api';
import { MaterialModule } from '../material.module';
import { InfinitePaginationComponent } from './infinite-pagination.component';
import { PaginatedComponent } from './paginated-component.interface';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
describe('InfinitePaginationComponent', () => {
@@ -55,62 +57,111 @@ describe('InfinitePaginationComponent', () => {
TestBed.resetTestingModule();
});
it('should show the loading spinner if loading', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = true;
fixture.detectChanges();
describe('Standalone', () => {
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).not.toBeNull();
});
it('should show the loading spinner if loading', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = true;
fixture.detectChanges();
it('should NOT show the loading spinner if NOT loading', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = false;
fixture.detectChanges();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).toBeNull();
});
it('should show the load more button if NOT loading and has more items', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = false;
fixture.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).not.toBeNull();
});
it('should NOT show anything if pagination has NO more items', () => {
pagination.hasMoreItems = false;
component.pagination = pagination;
fixture.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).toBeNull();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).toBeNull();
});
it('should trigger the loadMore event with the proper pagination object', (done) => {
pagination.hasMoreItems = true;
pagination.skipCount = 5;
component.pagination = pagination;
component.isLoading = false;
component.pageSize = 5;
fixture.detectChanges();
component.loadMore.subscribe((newPagination: Pagination) => {
expect(newPagination.skipCount).toBe(10);
done();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).not.toBeNull();
});
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
loadMoreButton.triggerEventHandler('click', {});
it('should NOT show the loading spinner if NOT loading', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = false;
fixture.detectChanges();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).toBeNull();
});
it('should show the load more button if NOT loading and has more items', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
component.isLoading = false;
fixture.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).not.toBeNull();
});
it('should NOT show anything if pagination has NO more items', () => {
pagination.hasMoreItems = false;
component.pagination = pagination;
fixture.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).toBeNull();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).toBeNull();
});
it('should trigger the loadMore event with the proper pagination object', (done) => {
pagination.hasMoreItems = true;
pagination.skipCount = 5;
component.pagination = pagination;
component.isLoading = false;
component.pageSize = 5;
fixture.detectChanges();
component.loadMore.subscribe((newPagination: Pagination) => {
expect(newPagination.skipCount).toBe(10);
done();
});
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
loadMoreButton.triggerEventHandler('click', {});
});
});
describe('Target', () => {
let testTarget: PaginatedComponent;
beforeEach(() => {
pagination = { maxItems: 444, skipCount: 0, totalItems: 888, hasMoreItems: true };
testTarget = {
pagination: new BehaviorSubject<Pagination>(pagination),
supportedPageSizes: [],
updatePagination() {}
};
spyOn(testTarget, 'updatePagination');
});
it('should subscribe to target\'s pagination observable to update pagination and pagesize correctly', () => {
component.target = testTarget;
fixture.detectChanges();
expect(component.pagination).toBe(pagination);
expect(component.pageSize).toBe(pagination.maxItems);
});
it('should call the target\'s updatePagination on invoking the onLoadMore', () => {
component.target = testTarget;
fixture.detectChanges();
component.onLoadMore();
expect(testTarget.updatePagination).toHaveBeenCalledWith({ maxItems: 444, skipCount: 444, totalItems: 888, hasMoreItems: true });
});
it('should unsubscribe from the target\'s pagination on onDestroy', () => {
component.target = testTarget;
fixture.detectChanges();
fixture.destroy();
const emitNewPaginationEvent = () => {
let newPagination = { maxItems: 1, skipCount: 0, totalItems: 2, hasMoreItems: true };
testTarget.pagination.next(newPagination);
};
expect(emitNewPaginationEvent).not.toThrow();
});
});
});

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

@@ -19,15 +19,19 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnInit,
Output,
OnDestroy,
ViewEncapsulation
} from '@angular/core';
import { PaginatedComponent } from './paginated-component.interface';
import { PaginationQueryParams } from './pagination-query-params.interface';
import { Pagination } from 'alfresco-js-api';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'adf-infinite-pagination',
@@ -37,7 +41,7 @@ import { Pagination } from 'alfresco-js-api';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class InfinitePaginationComponent implements OnInit {
export class InfinitePaginationComponent implements OnInit, OnDestroy {
static DEFAULT_PAGE_SIZE: number = 25;
@@ -49,6 +53,9 @@ export class InfinitePaginationComponent implements OnInit {
@Input()
pagination: Pagination;
@Input()
target: PaginatedComponent;
@Input()
pageSize: number = InfinitePaginationComponent.DEFAULT_PAGE_SIZE;
@@ -58,7 +65,19 @@ export class InfinitePaginationComponent implements OnInit {
@Output()
loadMore: EventEmitter<Pagination> = new EventEmitter<Pagination>();
private paginationSubscription: Subscription;
constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() {
if (this.target) {
this.paginationSubscription = this.target.pagination.subscribe(page => {
this.pagination = page;
this.pageSize = page.maxItems;
this.cdr.detectChanges();
});
}
if (!this.pagination) {
this.pagination = InfinitePaginationComponent.DEFAULT_PAGINATION;
}
@@ -67,5 +86,15 @@ export class InfinitePaginationComponent implements OnInit {
onLoadMore() {
this.pagination.skipCount += this.pageSize;
this.loadMore.next(this.pagination);
if (this.target) {
this.target.updatePagination(<PaginationQueryParams> this.pagination);
}
}
ngOnDestroy() {
if (this.paginationSubscription) {
this.paginationSubscription.unsubscribe();
}
}
}

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

@@ -16,14 +16,12 @@
*/
import { Pagination } from 'alfresco-js-api';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { PaginationQueryParams } from './pagination-query-params.interface';
export interface PaginatedComponent {
pagination: Subject<Pagination>;
pagination: BehaviorSubject<Pagination>;
supportedPageSizes: number[];
updatePagination(params: PaginationQueryParams);
}

8
lib/core/pagination/pagination.component.spec.ts
View File

@@ -27,7 +27,7 @@ import { TranslateLoaderService } from '../services/translate-loader.service';
import { TranslationService } from '../services/translation.service';
import { PaginationComponent } from './pagination.component';
import { PaginatedComponent } from './public-api';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
class FakePaginationInput implements Pagination {
count: number = 25;
@@ -279,7 +279,7 @@ describe('PaginationComponent', () => {
const pagination: Pagination = {};
const customComponent = <PaginatedComponent> {
pagination: new Subject<Pagination>()
pagination: new BehaviorSubject<Pagination>({})
};
component.target = customComponent;
@@ -294,7 +294,7 @@ describe('PaginationComponent', () => {
const pagination2: Pagination = {};
const customComponent = <PaginatedComponent> {
pagination: new Subject<Pagination>()
pagination: new BehaviorSubject<Pagination>({})
};
component.target = customComponent;
@@ -309,7 +309,7 @@ describe('PaginationComponent', () => {
it('should send pagination event to paginated component', () => {
const customComponent = <PaginatedComponent> {
pagination: new Subject<Pagination>(),
pagination: new BehaviorSubject<Pagination>({}),
updatePagination() {},
supportedPageSizes: []
};