import { Component , Output , EventEmitter , Input , OnInit } from '@angular/core' ; import { UntilDestroy } from '@ngneat/until-destroy' ; import { distinctUntilChange } from '@gauzy/common-angular' ; import { Subject } from 'rxjs' ; import { debounceTime , tap } from 'rxjs/operators' ; @ UntilDestroy ( { checkProperties : true } ) @ Component ( { selector : 'ga-pagination' , templateUrl : './pagination.component.html' , styleUrls : [ './pagination.component.scss' ] , } ) export class PaginationComponent implements OnInit { _totalItems : number = 1 ; get totalItems ( ) : number { return this . _totalItems ; } @ Input ( ) set totalItems ( value ) { this . _totalItems = value ; } _activePage : number = 1 ; get activePage ( ) : number { return this . _activePage ; } @ Input ( ) set activePage ( value ) { this . _activePage = value ; } _itemsPerPage : number = 5 ; get itemsPerPage ( ) : number { return this . _itemsPerPage ; } @ Input ( ) set itemsPerPage ( value ) { this . _itemsPerPage = value ; } _doEmit : boolean = true ; get doEmit ( ) : boolean { return this . _doEmit ; } @ Input ( ) set doEmit ( value ) { this . _doEmit = value ; } subject$ : Subject < any > = new Subject ( ) ; @ Output ( ) selectedPage = new EventEmitter < Number > ( ) ; constructor ( ) { } ngOnInit ( ) { this . subject$ . pipe ( debounceTime ( 100 ) , distinctUntilChange ( ) , tap ( ( ) => this . selectedPage . emit ( this . activePage ) ) ) . subscribe ( ) ; if ( this . doEmit ) { this . subject$ . next ( this . activePage ) ; } } getPages ( ) { let countItems = Math . ceil ( this . totalItems / this . itemsPerPage ) ; let pages = [ ] ; for ( let i = 1 ; i <= countItems ; i ++ ) { pages . push ( i ) ; } return pages ; } onChangePage ( pageIdx ) { this . activePage = pageIdx ; this . subject$ . next ( this . activePage ) ; } onNextPageClick ( ) { if ( this . activePage == this . getPages ( ) . length ) return ; this . activePage ++ ; this . subject$ . next ( this . activePage ) ; } onPrevPageClick ( ) { if ( this . activePage == 1 ) return ; this . activePage -- ; this . subject$ . next ( this . activePage ) ; } }