diff --git a/lib/core/src/lib/pagination/infinite-pagination.component.ts b/lib/core/src/lib/pagination/infinite-pagination.component.ts index 32a61ce8f7f..f0ff21e8aa1 100644 --- a/lib/core/src/lib/pagination/infinite-pagination.component.ts +++ b/lib/core/src/lib/pagination/infinite-pagination.component.ts @@ -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,18 +67,16 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio set target(target: PaginatedComponent) { if (target) { this._target = target; - target.pagination - .pipe(takeUntil(this.onDestroy$)) - .subscribe(pagination => { - this.isLoading = false; - this.pagination = pagination; - - if (!this.pagination.hasMoreItems) { - this.pagination.hasMoreItems = false; - } - - this.cdr.detectChanges(); - }); + target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => { + this.isLoading = false; + this.pagination = pagination; + + if (!this.pagination.hasMoreItems) { + this.pagination.hasMoreItems = false; + } + + this.cdr.detectChanges(); + }); } } @@ -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 diff --git a/lib/core/src/lib/pagination/pagination.component.ts b/lib/core/src/lib/pagination/pagination.component.ts index 5d2d8821d94..53e96ee4597 100644 --- a/lib/core/src/lib/pagination/pagination.component.ts +++ b/lib/core/src/lib/pagination/pagination.component.ts @@ -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,17 +144,15 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone } if (this.target) { - this.target.pagination - .pipe(takeUntil(this.onDestroy$)) - .subscribe(pagination => { - if (pagination.count === 0 && !this.isFirstPage) { - this.goPrevious(); - } - - this.pagination = { - ...pagination - }; - }); + this.target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => { + if (pagination.count === 0 && !this.isFirstPage) { + this.goPrevious(); + } + + this.pagination = { + ...pagination + }; + }); } if (!this.pagination) { @@ -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[] { diff --git a/lib/core/src/lib/pagination/pagination.module.ts b/lib/core/src/lib/pagination/pagination.module.ts index e89e91431fa..1e147a2e6e4 100644 --- a/lib/core/src/lib/pagination/pagination.module.ts +++ b/lib/core/src/lib/pagination/pagination.module.ts @@ -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 {}