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

6
demo-shell/src/app/components/files/files.component.html
View File

@@ -291,10 +291,8 @@
</adf-pagination>
<adf-infinite-pagination
*ngIf="infiniteScrolling"
[pagination]="pagination"
[loading]="documentList.infiniteLoading"
[pageSize]="currentMaxItems"
(loadMore)="loadNextBatch($event)">
[target]="documentList"
[loading]="documentList.infiniteLoading">
{{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
</adf-infinite-pagination>
</adf-upload-drag-area>

13
docs/infinite-pagination.component.md
View File

@@ -14,6 +14,17 @@ Adds "infinite" pagination to the component it is used with.
</adf-infinite-pagination>
```
## Integrating with Document List
```html
<adf-document-list #documentList ...></adf-document-list>
<adf-infinite-pagination
[target]="documentList"
[loading="documentList.infiniteLoading">
</adf-infinite-pagination>
```
### Properties
| Name | Type | Default | Description |
@@ -21,6 +32,8 @@ Adds "infinite" pagination to the component it is used with.
| pagination | Pagination | `InfinitePaginationComponent.DEFAULT_PAGINATION` | Pagination object |
| pageSize | number | `InfinitePaginationComponent.DEFAULT_PAGE_SIZE` | Number of items that are added with each "load more" event |
| loading | boolean | false | |
| target | PaginatedComponent | | Component that provides custom pagination support |
### Events

5
lib/content-services/document-list/components/document-list.component.ts
View File

@@ -41,6 +41,7 @@ import {
} from 'alfresco-js-api';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { presetsDefaultModel } from '../models/preset.model';
import { ShareDataRow } from './../data/share-data-row.model';
import { ShareDataTableAdapter } from './../data/share-datatable-adapter';
@@ -220,7 +221,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
noPermission: boolean = false;
selection = new Array<MinimalNodeEntity>();
pagination = new Subject<Pagination>();
pagination: BehaviorSubject<Pagination>;
private layoutPresets = {};
private currentNodeAllowableOperations: string[] = [];
@@ -236,7 +237,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
private preferences: UserPreferencesService) {
this.maxItems = this.preferences.paginationSize;
this.pagination.next(<Pagination> {
this.pagination = new BehaviorSubject<Pagination>(<Pagination> {
maxItems: this.preferences.paginationSize,
skipCount: 0,
totalItems: 0,

51
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,6 +57,8 @@ describe('InfinitePaginationComponent', () => {
TestBed.resetTestingModule();
});
describe('Standalone', () => {
it('should show the loading spinner if loading', () => {
pagination.hasMoreItems = true;
component.pagination = pagination;
@@ -112,5 +116,52 @@ describe('InfinitePaginationComponent', () => {
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: []
};