From 6873fc01bc1c8570d047145942845d5842407779 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 28 Oct 2016 14:57:03 +0100 Subject: [PATCH 1/2] #478 pagination improvements - update page summary only on data change (performance and presentation improvements) --- .../pagination/pagination-provider.ts | 7 +++++ .../pagination/pagination.component.ts | 30 +++++++++++++------ .../src/data/share-datatable-adapter.ts | 8 ++++- 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts index c4e58a66e9..d803407b55 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts @@ -15,6 +15,8 @@ * limitations under the License. */ +import { Subject } from 'rxjs/Rx'; + export interface PaginationProvider { /** @@ -44,4 +46,9 @@ 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: Subject; } diff --git a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts index 6b848d7ffe..2daa0f1780 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination.component.ts @@ -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}`; + } } diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index 444d166337..86d0cba5b7 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -16,6 +16,7 @@ */ import { DatePipe } from '@angular/common'; +import { Subject } from 'rxjs/Rx'; import { ObjectUtils } from 'ng2-alfresco-core'; import { PaginationProvider, @@ -51,10 +52,12 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid private _maxItems: number = this.DEFAULT_PAGE_SIZE; thumbnails: boolean = false; + dataLoaded: Subject; constructor(private documentListService: DocumentListService, private basePath: string, schema: DataColumn[]) { + this.dataLoaded = new Subject(); this.rows = []; this.columns = schema || []; this.resetPagination(); @@ -201,7 +204,10 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid maxItems: this._maxItems, skipCount: this._skipCount }) - .subscribe(val => this.loadPage(val), + .subscribe(val => { + this.loadPage(val); + this.dataLoaded.next(); + }, error => console.error(error)); } } From 820e20037922e7ad294c0330ffde31f8d16f484d Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 28 Oct 2016 15:03:53 +0100 Subject: [PATCH 2/2] #478 Custom event emitter for data loaded event --- .../src/components/pagination/pagination-provider.ts | 12 +++++++++++- .../src/data/share-datatable-adapter.ts | 9 ++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts index d803407b55..fb445a0364 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/pagination/pagination-provider.ts @@ -50,5 +50,15 @@ export interface PaginationProvider { /** * An event that is emitted every time data is loaded. */ - dataLoaded: Subject; + dataLoaded: DataLoadedEventEmitter; +} + +export class DataLoadedEventEmitter extends Subject { + constructor() { + super(); + } + + emit(value) { + super.next(value); + } } diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index 86d0cba5b7..1754c5f594 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -16,10 +16,9 @@ */ import { DatePipe } from '@angular/common'; -import { Subject } from 'rxjs/Rx'; import { ObjectUtils } from 'ng2-alfresco-core'; import { - PaginationProvider, + PaginationProvider, DataLoadedEventEmitter, DataTableAdapter, DataRow, DataColumn, DataSorting } from 'ng2-alfresco-datatable'; @@ -52,12 +51,12 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid private _maxItems: number = this.DEFAULT_PAGE_SIZE; thumbnails: boolean = false; - dataLoaded: Subject; + dataLoaded: DataLoadedEventEmitter; constructor(private documentListService: DocumentListService, private basePath: string, schema: DataColumn[]) { - this.dataLoaded = new Subject(); + this.dataLoaded = new DataLoadedEventEmitter(); this.rows = []; this.columns = schema || []; this.resetPagination(); @@ -206,7 +205,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid }) .subscribe(val => { this.loadPage(val); - this.dataLoaded.next(); + this.dataLoaded.emit(null); }, error => console.error(error)); }