simrsx-fe/app/components/pub/my-ui/pagination/pagination.vue

<script setup lang="ts">
import type { PaginationMeta } from './pagination.type'
import {
  Pagination,
  PaginationEllipsis,
  PaginationFirst,
  PaginationLast,
  PaginationList,
  PaginationListItem,
  PaginationNext,
  PaginationPrev,
} from '~/components/pub/ui/pagination'

interface Props {
  paginationMeta: PaginationMeta
  onPageChange?: (page: number) => void
  showInfo?: boolean
  showControl?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  onPageChange: undefined,
  showInfo: true,
  showControl: true,
})

const emit = defineEmits<{
  pageChange: [page: number]
}>()

function handlePageChange(page: number) {
  if (props.onPageChange) {
    props.onPageChange(page)
  }
  emit('pageChange', page)
}

function handleFirst() {
  if (props.paginationMeta.hasPrev) {
    handlePageChange(1)
  }
}

function handlePrev() {
  if (props.paginationMeta.hasPrev) {
    handlePageChange(props.paginationMeta.page - 1)
  }
}

function handleNext() {
  if (props.paginationMeta.hasNext) {
    handlePageChange(props.paginationMeta.page + 1)
  }
}

function handleLast() {
  if (props.paginationMeta.hasNext) {
    handlePageChange(props.paginationMeta.totalPage)
  }
}

// Computed properties for formatted numbers
const formattedRecordCount = computed(() => {
  const count = props.paginationMeta.recordCount
  if (count == null || count === undefined) return '0'
  return Number(count).toLocaleString('id-ID')
})

const startRecord = computed(() => {
  const start = (props.paginationMeta.page - 1) * props.paginationMeta.pageSize + 1
  return Number(start).toLocaleString('id-ID')
})

const endRecord = computed(() => {
  return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
})

// Function to determine button width based on page number
function getButtonClass(pageNumber: number) {
  const digits = pageNumber.toString().length

  if (digits >= 4) {
    // 1000+ (1k+)
    return 'h-9 px-4 min-w-12'
  } else if (digits === 3) {
    // 100-999
    return 'h-9 px-3 min-w-10'
  } else {
    // 1-99
    return 'w-9 h-9 p-0'
  }
}
</script>

<template>
  <div class="flex w-full min-w-0 items-center justify-between overflow-x-scroll px-2 py-2 md:overflow-hidden">
    <!-- Info text -->
    <div
      v-if="showInfo && endRecord > 0"
      class="shrink-0 text-sm text-muted-foreground"
    >
      Menampilkan {{ startRecord }} hingga {{ Number(endRecord).toLocaleString('id-ID') }} dari
      {{ formattedRecordCount }} data
    </div>
    <div
      v-else
      class="shrink-0"
    >
      -
    </div>

    <!-- Spacer untuk memastikan ada ruang di tengah -->
    <div class="min-w-4 flex-1"></div>

    <!-- Pagination controls -->
    <div
      v-if="showControl"
      class="shrink-0"
    >
      <Pagination
        v-slot="{ page }"
        :total="paginationMeta.recordCount"
        :sibling-count="1"
        :page="paginationMeta.page"
        :items-per-page="paginationMeta.pageSize"
        show-edges
      >
        <PaginationList
          v-slot="{ items }"
          class="flex items-center gap-1"
        >
          <PaginationFirst
            :disabled="!paginationMeta.hasPrev"
            @click="handleFirst"
          />
          <PaginationPrev
            :disabled="!paginationMeta.hasPrev"
            @click="handlePrev"
          />

          <template v-for="(item, index) in items">
            <PaginationListItem
              v-if="item.type === 'page'"
              :key="index"
              :value="item.value"
              as-child
              @click="handlePageChange(item.value)"
            >
              <Button
                :class="getButtonClass(item.value)"
                :variant="item.value === page ? 'default' : 'outline'"
              >
                {{ item.value }}
              </Button>
            </PaginationListItem>
            <PaginationEllipsis
              v-else
              :key="item.type"
              :index="index"
            />
          </template>

          <PaginationNext
            :disabled="!paginationMeta.hasNext"
            @click="handleNext"
          />
          <PaginationLast
            :disabled="!paginationMeta.hasNext"
            @click="handleLast"
          />
        </PaginationList>
      </Pagination>
    </div>
  </div>
</template>