mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
Merge pull request #945 from Alfresco/dev-denys-478
Pagination component improvements
This commit is contained in:
commit
2959db79c6
@ -15,6 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Subject } from 'rxjs/Rx';
|
||||
|
||||
export interface PaginationProvider {
|
||||
|
||||
/**
|
||||
@ -44,4 +46,19 @@ export interface PaginationProvider {
|
||||
* or if there was no maxItems parameter the default value is 100.
|
||||
*/
|
||||
maxItems: number;
|
||||
|
||||
/**
|
||||
* An event that is emitted every time data is loaded.
|
||||
*/
|
||||
dataLoaded: DataLoadedEventEmitter;
|
||||
}
|
||||
|
||||
export class DataLoadedEventEmitter extends Subject<any> {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
emit(value) {
|
||||
super.next(value);
|
||||
}
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { PaginationProvider } from './pagination-provider';
|
||||
|
||||
@Component({
|
||||
@ -24,10 +24,12 @@ import { PaginationProvider } from './pagination-provider';
|
||||
templateUrl: './pagination.component.html',
|
||||
styleUrls: ['./pagination.component.css']
|
||||
})
|
||||
export class PaginationComponent {
|
||||
export class PaginationComponent implements OnInit {
|
||||
|
||||
DEFAULT_PAGE_SIZE: number = 20;
|
||||
|
||||
private _summary: string = '';
|
||||
|
||||
@Input()
|
||||
supportedPageSizes: number[] = [5, 10, 20, 50, 100];
|
||||
|
||||
@ -52,13 +54,7 @@ export class PaginationComponent {
|
||||
}
|
||||
|
||||
get summary(): string {
|
||||
let from = this.provider.skipCount;
|
||||
if (from === 0) {
|
||||
from = 1;
|
||||
}
|
||||
let to = this.provider.skipCount + this.provider.count;
|
||||
let of = this.provider.totalItems;
|
||||
return `${from}-${to} of ${of}`;
|
||||
return this._summary;
|
||||
}
|
||||
|
||||
get nextPageAvail(): boolean {
|
||||
@ -76,4 +72,20 @@ export class PaginationComponent {
|
||||
showPrevPage() {
|
||||
this.provider.skipCount -= this.provider.maxItems;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.provider.dataLoaded.subscribe(() => {
|
||||
this.updateSummary();
|
||||
});
|
||||
}
|
||||
|
||||
private updateSummary() {
|
||||
let from = this.provider.skipCount;
|
||||
if (from === 0) {
|
||||
from = 1;
|
||||
}
|
||||
let to = this.provider.skipCount + this.provider.count;
|
||||
let of = this.provider.totalItems;
|
||||
this._summary = `${from}-${to} of ${of}`;
|
||||
}
|
||||
}
|
||||
|
@ -18,7 +18,7 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { ObjectUtils } from 'ng2-alfresco-core';
|
||||
import {
|
||||
PaginationProvider,
|
||||
PaginationProvider, DataLoadedEventEmitter,
|
||||
DataTableAdapter,
|
||||
DataRow, DataColumn, DataSorting
|
||||
} from 'ng2-alfresco-datatable';
|
||||
@ -51,10 +51,12 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
|
||||
private _maxItems: number = this.DEFAULT_PAGE_SIZE;
|
||||
|
||||
thumbnails: boolean = false;
|
||||
dataLoaded: DataLoadedEventEmitter;
|
||||
|
||||
constructor(private documentListService: DocumentListService,
|
||||
private basePath: string,
|
||||
schema: DataColumn[]) {
|
||||
this.dataLoaded = new DataLoadedEventEmitter();
|
||||
this.rows = [];
|
||||
this.columns = schema || [];
|
||||
this.resetPagination();
|
||||
@ -201,7 +203,10 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
|
||||
maxItems: this._maxItems,
|
||||
skipCount: this._skipCount
|
||||
})
|
||||
.subscribe(val => this.loadPage(<NodePaging>val),
|
||||
.subscribe(val => {
|
||||
this.loadPage(<NodePaging>val);
|
||||
this.dataLoaded.emit(null);
|
||||
},
|
||||
error => console.error(error));
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user