psp_panel/src/app/uikit/paginator.component.ts

import { Component, EventEmitter, Input, Output, signal, SimpleChanges } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  imports: [ButtonModule],
})
export class PaginatorComponent {
  @Input() totalPages: number = 1;
  @Input() currentPage: number = 1;
  @Input() perPage: number = 10;
  @Input() loading: boolean = false;
  @Output() onChange = new EventEmitter<number>();

  pagesToShow = signal<number[]>([]);

  init() {
    const maxVisible = 5;

    let pagesToShow = [];

    if (this.totalPages <= maxVisible) {
      pagesToShow = Array.from({ length: this.totalPages }, (_, i) => i + 1);
    } else {
      let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));

      let end = start + maxVisible - 1;

      if (end > this.totalPages) {
        end = this.totalPages;
        start = end - maxVisible + 1;
      }

      pagesToShow = Array.from({ length: end - start + 1 }, (_, i) => start + i);
    }

    this.pagesToShow.set(pagesToShow);
  }

  onPageChange(newPage: number) {
    this.onChange.emit(newPage);
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.onPageChange(this.currentPage - 1);
    }
  }
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.onPageChange(this.currentPage + 1);
    }
  }

  goToFirstPage() {
    if (this.currentPage !== 1) {
      this.onPageChange(1);
    }
  }

  goToLastPage() {
    if (this.currentPage !== this.totalPages) {
      this.onPageChange(this.totalPages);
    }
  }

  ngOnInit() {
    this.init();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['totalPages'] || changes['currentPage']) {
      this.init();
    }
  }
}