Pagination

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import {
  ForPagination,
  ForPaginationItem,
  ForPaginationNext,
  ForPaginationPrevious,
} from 'forty-cdk/pagination';

interface Invoice {
  readonly id: string;
  readonly client: string;
  readonly amount: number;
}

const PAGE_SIZE = 5;

const INVOICES: readonly Invoice[] = Array.from({ length: 23 }, (_, i) => ({
  id: `INV-${String(1001 + i)}`,
  client: ['Acme', 'Globex', 'Initech', 'Umbrella', 'Soylent', 'Hooli', 'Stark'][i % 7]!,
  amount: 120 + ((i * 37) % 880),
}));

@Component({
  selector: 'app-pagination-data-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForPagination, ForPaginationItem, ForPaginationPrevious, ForPaginationNext],
  template: `
    <div class="stage">
      <ul class="rows">
        @for (invoice of pageRows(); track invoice.id) {
          <li class="row">
            <span class="row-id">{{ invoice.id }}</span>
            <span class="row-client">{{ invoice.client }}</span>
            <span class="row-amount">\${{ invoice.amount }}.00</span>
          </li>
        }
      </ul>

      <nav
        forPagination
        #pg="forPagination"
        class="pgn"
        ariaLabel="Invoice pages"
        [(page)]="page"
        [count]="pageCount()"
      >
        <button forPaginationPrevious class="pgn-btn pgn-nav" ariaLabel="Previous page">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path
              d="m15.75 19.5-7.5-7.5 7.5-7.5"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        @for (item of pg.items(); track $index) {
          @if (item.type === 'page') {
            <button forPaginationItem class="pgn-btn pgn-page" [page]="item.value!">
              {{ item.value }}
            </button>
          } @else {
            <span class="pgn-gap" aria-hidden="true">…</span>
          }
        }
        <button forPaginationNext class="pgn-btn pgn-nav" ariaLabel="Next page">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path
              d="m8.25 4.5 7.5 7.5-7.5 7.5"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </nav>

      <p class="range">{{ rangeLabel() }} of {{ total }} invoices</p>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .stage {
      width: min(440px, 100%);
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
    }

    .rows {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      margin: 0;
      padding: 0;
      list-style: none;
      min-height: 220px;
    }

    .row {
      display: grid;
      grid-template-columns: 5rem 1fr auto;
      align-items: center;
      gap: 0.75rem;
      padding: 0.55rem 0.8rem;
      font-size: 0.9rem;
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
    }

    .row-id {
      font-family: var(--ex-font-mono, ui-monospace, monospace);
      font-size: 0.8rem;
      color: var(--ex-muted, #585d66);
    }

    .row-client {
      font-weight: 600;
      color: var(--ex-text, #17191c);
    }

    .row-amount {
      font-variant-numeric: tabular-nums;
      color: var(--ex-text, #17191c);
    }

    .range {
      margin: 0;
      text-align: center;
      font-size: 0.8rem;
      color: var(--ex-muted, #585d66);
    }

    .pgn {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
    }

    .pgn-btn {
      min-width: 2.25rem;
      height: 2.25rem;
      padding: 0 0.5rem;
      font: inherit;
      font-weight: 600;
      color: var(--ex-text, #17191c);
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius-sm, 14px);
      cursor: pointer;
    }

    .pgn-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .pgn-nav svg {
      width: 1em;
      height: 1em;
    }

    .pgn-btn:hover:not(:disabled):not([aria-current='page']) {
      border-color: var(--ex-border-strong, #d0c9bc);
      background: var(--ex-surface-2, #f2eee6);
    }

    .pgn-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .pgn-page[aria-current='page'] {
      color: var(--ex-accent-contrast, #ffffff);
      background: var(--ex-accent, #0e7c6b);
      border-color: var(--ex-accent, #0e7c6b);
      cursor: default;
    }

    .pgn-gap {
      min-width: 1.5rem;
      text-align: center;
      color: var(--ex-muted, #585d66);
      user-select: none;
    }
  `,
})
export class PaginationDataExample {
  protected readonly total = INVOICES.length;
  protected readonly page = signal(1);
  protected readonly pageCount = computed(() => Math.ceil(this.total / PAGE_SIZE));

  protected readonly pageRows = computed<readonly Invoice[]>(() => {
    const start = (this.page() - 1) * PAGE_SIZE;
    return INVOICES.slice(start, start + PAGE_SIZE);
  });

  protected readonly rangeLabel = computed(() => {
    const start = (this.page() - 1) * PAGE_SIZE;
    const end = Math.min(start + PAGE_SIZE, this.total);
    return `${start + 1}–${end}`;
  });
}