inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: standalone pagination components (#9480)

Browse Source
This commit is contained in:
Denys Vuika 2024-03-27 12:40:54 -04:00 committed by GitHub
parent 2ea17a7dc6
commit 66ec68551f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/core/src/lib/pagination/infinite-pagination.component.ts
View File

@ -19,8 +19,15 @@
/* eslint-disable rxjs/no-subject-value */
import {
ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter,
Input, OnInit, Output, OnDestroy, ViewEncapsulation
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnInit,
Output,
OnDestroy,
ViewEncapsulation
} from '@angular/core';
import { PaginatedComponent } from './paginated-component.interface';
@ -30,6 +37,10 @@ import { RequestPaginationModel } from '../models/request-pagination.model';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { PaginationModel } from '../models/pagination.model';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { TranslateModule } from '@ngx-translate/core';
@Component({
selector: 'adf-infinite-pagination',
@ -37,10 +48,11 @@ import { takeUntil } from 'rxjs/operators';
templateUrl: './infinite-pagination.component.html',
styleUrls: ['./infinite-pagination.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [CommonModule, MatButtonModule, MatProgressBarModule, TranslateModule]
})
export class InfinitePaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
static DEFAULT_PAGINATION: PaginationModel = new PaginationModel({
skipCount: 0,
maxItems: 25,
@ -55,9 +67,7 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
set target(target: PaginatedComponent) {
if (target) {
this._target = target;
target.pagination
.pipe(takeUntil(this.onDestroy$))
.subscribe(pagination => {
target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => {
this.isLoading = false;
this.pagination = pagination;
@ -93,9 +103,7 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
merge: true
};
constructor(private cdr: ChangeDetectorRef,
private userPreferencesService: UserPreferencesService) {
}
constructor(private cdr: ChangeDetectorRef, private userPreferencesService: UserPreferencesService) {}
ngOnInit() {
this.userPreferencesService

50
lib/core/src/lib/pagination/pagination.component.ts
View File

@ -15,20 +15,32 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, OnDestroy, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core';
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';
import { PaginationModel } from '../models/pagination.model';
import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
export type PaginationAction =
| 'NEXT_PAGE'
| 'PREV_PAGE'
| 'CHANGE_PAGE_SIZE'
| 'CHANGE_PAGE_NUMBER';
export type PaginationAction = 'NEXT_PAGE' | 'PREV_PAGE' | 'CHANGE_PAGE_SIZE' | 'CHANGE_PAGE_NUMBER';
export const DEFAULT_PAGINATION: PaginationModel = {
skipCount: 0,
@ -44,7 +56,9 @@ export const DEFAULT_PAGINATION: PaginationModel = {
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatMenuModule]
})
export class PaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
private _pagination: PaginationModel;
@ -110,14 +124,14 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
private renderer: Renderer2,
private cdr: ChangeDetectorRef,
private userPreferencesService: UserPreferencesService,
private translate: TranslateService) {
}
private translate: TranslateService
) {}
ngOnInit() {
this.userPreferencesService
.select(UserPreferenceValues.PaginationSize)
.pipe(takeUntil(this.onDestroy$))
.subscribe(maxItems => {
.subscribe((maxItems) => {
this.pagination = {
...DEFAULT_PAGINATION,
...this.pagination,
@ -130,9 +144,7 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
}
if (this.target) {
this.target.pagination
.pipe(takeUntil(this.onDestroy$))
.subscribe(pagination => {
this.target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => {
if (pagination.count === 0 && !this.isFirstPage) {
this.goPrevious();
}
@ -153,17 +165,13 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
get lastPage(): number {
const { maxItems, totalItems } = this.pagination;
return (totalItems && maxItems)
? Math.ceil(totalItems / maxItems)
: 1;
return totalItems && maxItems ? Math.ceil(totalItems / maxItems) : 1;
}
get current(): number {
const { maxItems, skipCount } = this.pagination;
return (skipCount && maxItems)
? Math.floor(skipCount / maxItems) + 1
: 1;
return skipCount && maxItems ? Math.floor(skipCount / maxItems) + 1 : 1;
}
get isLastPage(): boolean {
@ -211,7 +219,7 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
get pages(): number[] {
return Array(this.lastPage)
.fill('n')
.map((_, index) => (index + 1));
.map((_, index) => index + 1);
}
get limitedPages(): number[] {

18
lib/core/src/lib/pagination/pagination.module.ts
View File

@ -15,26 +15,12 @@
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { InfinitePaginationComponent } from './infinite-pagination.component';
import { PaginationComponent } from './pagination.component';
@NgModule({
imports: [
CommonModule,
MaterialModule,
TranslateModule
],
declarations: [
InfinitePaginationComponent,
PaginationComponent
],
exports: [
InfinitePaginationComponent,
PaginationComponent
]
imports: [InfinitePaginationComponent, PaginationComponent],
exports: [InfinitePaginationComponent, PaginationComponent]
})
export class PaginationModule {}