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

fix pagination issues (#5881)

Browse Source 
* fix pagination issues

* angular workarounds
This commit is contained in:
Denys Vuika
2020-07-16 17:52:49 +01:00
committed by GitHub
parent 389a65860c
commit 33965d0a41
2 changed files with 124 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
lib/core/pagination/pagination.component.ts
View File

@@ -15,12 +15,7 @@
* limitations under the License.
*/
import {
ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation,
ChangeDetectorRef, OnDestroy, HostBinding
} from '@angular/core';
import { Pagination } from '@alfresco/js-api';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, OnDestroy, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core';
import { PaginatedComponent } from './paginated-component.interface';
import { PaginationComponentInterface } from './pagination-component.interface';
import { Subject } from 'rxjs';
@@ -29,6 +24,12 @@ import { UserPreferencesService, UserPreferenceValues } from '../services/user-p
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
export type PaginationAction =
| 'NEXT_PAGE'
| 'PREV_PAGE'
| 'CHANGE_PAGE_SIZE'
| 'CHANGE_PAGE_NUMBER';
@Component({
selector: 'adf-pagination',
host: { 'class': 'adf-pagination' },
@@ -38,20 +39,18 @@ import { TranslateService } from '@ngx-translate/core';
encapsulation: ViewEncapsulation.None
})
export class PaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
static DEFAULT_PAGINATION: Pagination = new Pagination({
static DEFAULT_PAGINATION: PaginationModel = {
skipCount: 0,
maxItems: 25,
totalItems: 0
});
static ACTIONS = {
NEXT_PAGE: 'NEXT_PAGE',
PREV_PAGE: 'PREV_PAGE',
CHANGE_PAGE_SIZE: 'CHANGE_PAGE_SIZE',
CHANGE_PAGE_NUMBER: 'CHANGE_PAGE_NUMBER'
totalItems: 0,
count: 0,
hasMoreItems: false
};
private _pagination: PaginationModel;
private _isEmpty = true;
private _hasItems = false;
/** Component that provides custom pagination support. */
@Input()
target: PaginatedComponent;
@@ -60,40 +59,70 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
@Input()
supportedPageSizes: number[];
get pagination(): PaginationModel {
return this._pagination;
}
/** Pagination object. */
@Input()
pagination: PaginationModel = PaginationComponent.DEFAULT_PAGINATION;
set pagination(value: PaginationModel) {
value = value || PaginationComponent.DEFAULT_PAGINATION;
this._pagination = value;
this._hasItems = value && value.count > 0;
this._isEmpty = !this.hasItems;
// TODO: Angular 10 workaround for HostBinding bug
if (this._isEmpty) {
this.renderer.addClass(this.elementRef.nativeElement, 'adf-pagination__empty');
} else {
this.renderer.removeClass(this.elementRef.nativeElement, 'adf-pagination__empty');
}
this.cdr.detectChanges();
}
/** Emitted when pagination changes in any way. */
@Output()
change: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
change = new EventEmitter<PaginationModel>();
/** Emitted when the page number changes. */
@Output()
changePageNumber: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
changePageNumber = new EventEmitter<PaginationModel>();
/** Emitted when the page size changes. */
@Output()
changePageSize: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
changePageSize = new EventEmitter<PaginationModel>();
/** Emitted when the next page is requested. */
@Output()
nextPage: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
nextPage = new EventEmitter<PaginationModel>();
/** Emitted when the previous page is requested. */
@Output()
prevPage: EventEmitter<PaginationModel> = new EventEmitter<PaginationModel>();
prevPage = new EventEmitter<PaginationModel>();
private onDestroy$ = new Subject<boolean>();
constructor(private cdr: ChangeDetectorRef, private userPreferencesService: UserPreferencesService, private translate: TranslateService) {
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private cdr: ChangeDetectorRef,
private userPreferencesService: UserPreferencesService,
private translate: TranslateService) {
}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.PaginationSize)
.pipe(takeUntil(this.onDestroy$))
.subscribe(pagSize => this.pagination.maxItems = pagSize);
.subscribe(maxItems => {
this.pagination = {
...PaginationComponent.DEFAULT_PAGINATION,
...this.pagination,
maxItems
};
});
if (!this.supportedPageSizes) {
this.supportedPageSizes = this.userPreferencesService.supportedPageSizes;
@@ -107,13 +136,16 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
this.goPrevious();
}
this.pagination = pagination;
this.cdr.detectChanges();
this.pagination = {
...pagination
};
});
}
if (!this.pagination) {
this.pagination = PaginationComponent.DEFAULT_PAGINATION;
this.pagination = {
...PaginationComponent.DEFAULT_PAGINATION
};
}
}
@@ -153,24 +185,24 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
}
get hasItems(): boolean {
return this.pagination && this.pagination.count > 0;
return this._hasItems;
}
@HostBinding('class.adf-pagination__empty')
// TODO: not working correctly in Angular 10
// @HostBinding('class.adf-pagination__empty')
get isEmpty(): boolean {
return !this.hasItems;
return this._isEmpty;
}
get range(): number[] {
const { skipCount, maxItems, totalItems } = this.pagination;
const { isLastPage } = this;
let start = 0;
if (totalItems || totalItems !== 0) {
start = skipCount + 1;
}
const end = isLastPage ? totalItems : skipCount + maxItems;
const end = this.isLastPage ? totalItems : skipCount + maxItems;
return [start, end];
}
@@ -183,13 +215,16 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
get itemRangeText(): string {
const rangeString = this.range.join('-');
let translation = this.translate.instant('CORE.PAGINATION.ITEMS_RANGE', {
range: rangeString,
total: this.pagination.totalItems
});
if (!this.pagination.totalItems) {
translation = translation.substr(0, translation.indexOf(rangeString) + rangeString.length);
}
return translation;
}
@@ -197,12 +232,13 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
if (this.hasItems) {
const maxItems = this.pagination.maxItems;
const skipCount = (this.next - 1) * maxItems;
this.pagination.skipCount = skipCount;
this.handlePaginationEvent(PaginationComponent.ACTIONS.NEXT_PAGE, {
skipCount,
maxItems
});
this.pagination = {
...this.pagination,
skipCount
};
this.handlePaginationEvent('NEXT_PAGE');
}
}
@@ -210,12 +246,13 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
if (this.hasItems) {
const maxItems = this.pagination.maxItems;
const skipCount = (this.previous - 1) * maxItems;
this.pagination.skipCount = skipCount;
this.handlePaginationEvent(PaginationComponent.ACTIONS.PREV_PAGE, {
skipCount,
maxItems
});
this.pagination = {
...this.pagination,
skipCount
};
this.handlePaginationEvent('PREV_PAGE');
}
}
@@ -223,22 +260,25 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
if (this.hasItems) {
const maxItems = this.pagination.maxItems;
const skipCount = (pageNumber - 1) * maxItems;
this.pagination.skipCount = skipCount;
this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_NUMBER, {
skipCount,
maxItems
});
this.pagination = {
...this.pagination,
skipCount
};
this.handlePaginationEvent('CHANGE_PAGE_NUMBER');
}
}
onChangePageSize(maxItems: number) {
this.pagination.skipCount = 0;
this.userPreferencesService.paginationSize = maxItems;
this.handlePaginationEvent(PaginationComponent.ACTIONS.CHANGE_PAGE_SIZE, {
this.pagination = {
...this.pagination,
skipCount: 0,
maxItems
});
};
this.userPreferencesService.paginationSize = maxItems;
this.handlePaginationEvent('CHANGE_PAGE_SIZE');
}
ngOnDestroy() {
@@ -246,45 +286,29 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
this.onDestroy$.complete();
}
handlePaginationEvent(action: string, params: PaginationModel) {
const {
NEXT_PAGE,
PREV_PAGE,
CHANGE_PAGE_NUMBER,
CHANGE_PAGE_SIZE
} = PaginationComponent.ACTIONS;
handlePaginationEvent(action: PaginationAction) {
const paginationModel = { ...this.pagination };
const {
change,
changePageNumber,
changePageSize,
nextPage,
prevPage,
pagination
} = this;
const paginationModel: PaginationModel = Object.assign({}, pagination, params);
if (action === NEXT_PAGE) {
nextPage.emit(paginationModel);
if (action === 'NEXT_PAGE') {
this.nextPage.emit(paginationModel);
}
if (action === PREV_PAGE) {
prevPage.emit(paginationModel);
if (action === 'PREV_PAGE') {
this.prevPage.emit(paginationModel);
}
if (action === CHANGE_PAGE_NUMBER) {
changePageNumber.emit(paginationModel);
if (action === 'CHANGE_PAGE_NUMBER') {
this.changePageNumber.emit(paginationModel);
}
if (action === CHANGE_PAGE_SIZE) {
changePageSize.emit(paginationModel);
if (action === 'CHANGE_PAGE_SIZE') {
this.changePageSize.emit(paginationModel);
}
change.emit(params);
this.change.emit(paginationModel);
if (this.target) {
this.target.updatePagination(params);
this.target.updatePagination(paginationModel);
}
}
}