Viewing File: /home/markqprx/iniasli.pro/client/datatable/data-table-pagination-footer.tsx

import {UseQueryResult} from '@tanstack/react-query';
import {
  hasNextPage,
  LengthAwarePaginationResponse,
  PaginatedBackendResponse,
} from '../http/backend-response/pagination-response';
import {useNumberFormatter} from '../i18n/use-number-formatter';
import {Select} from '../ui/forms/select/select';
import {Trans} from '../i18n/trans';
import {Item} from '../ui/forms/listbox/item';
import {IconButton} from '../ui/buttons/icon-button';
import {KeyboardArrowLeftIcon} from '../icons/material/KeyboardArrowLeft';
import {KeyboardArrowRightIcon} from '../icons/material/KeyboardArrowRight';
import React from 'react';
import {useIsMobileMediaQuery} from '../utils/hooks/is-mobile-media-query';
import clsx from 'clsx';

const defaultPerPage = 15;
const perPageOptions = [{key: 10}, {key: 15}, {key: 20}, {key: 50}, {key: 100}];

type DataTablePaginationFooterProps = {
  query: UseQueryResult<PaginatedBackendResponse<unknown>, unknown>;
  onPerPageChange?: (perPage: number) => void;
  onPageChange?: (page: number) => void;
  className?: string;
};
export function DataTablePaginationFooter({
  query,
  onPerPageChange,
  onPageChange,
  className,
}: DataTablePaginationFooterProps) {
  const isMobile = useIsMobileMediaQuery();
  const numberFormatter = useNumberFormatter();
  const pagination = query.data
    ?.pagination as LengthAwarePaginationResponse<any>;

  if (!pagination) return null;

  const perPageSelect = onPerPageChange ? (
    <Select
      minWidth="min-w-auto"
      selectionMode="single"
      disabled={query.isLoading}
      labelPosition="side"
      size="xs"
      label={<Trans message="Items per page" />}
      selectedValue={pagination.per_page || defaultPerPage}
      onSelectionChange={value => onPerPageChange(value as number)}
    >
      {perPageOptions.map(option => (
        <Item key={option.key} value={option.key}>
          {option.key}
        </Item>
      ))}
    </Select>
  ) : null;

  return (
    <div
      className={clsx(
        'flex h-54 select-none items-center justify-end gap-20 px-20',
        className,
      )}
    >
      {!isMobile && perPageSelect}
      {pagination.from && pagination.to && 'total' in pagination && (
        <div className="text-sm">
          <Trans
            message=":from - :to of :total"
            values={{
              from: pagination.from,
              to: pagination.to,
              total: numberFormatter.format(pagination.total),
            }}
          />
        </div>
      )}
      <div className="text-muted">
        <IconButton
          disabled={query.isFetching || pagination.current_page < 2}
          onClick={() => {
            onPageChange?.(pagination?.current_page - 1);
          }}
        >
          <KeyboardArrowLeftIcon />
        </IconButton>
        <IconButton
          disabled={query.isFetching || !hasNextPage(pagination)}
          onClick={() => {
            onPageChange?.(pagination?.current_page + 1);
          }}
        >
          <KeyboardArrowRightIcon />
        </IconButton>
      </div>
    </div>
  );
}