munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(pagination): move pagination info display to component and improve layout

Browse Source 
- Consolidate pagination info display logic in pagination component
- Remove duplicate computed properties from list components
- Improve pagination layout with better spacing and responsiveness
- Add skeleton loading support to data tables
This commit is contained in:
Khafid Prayoga
2025-09-04 11:26:58 +07:00
parent 6c70beb882
commit 3dbc1b8fd1
3 changed files with 40 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/custom-ui/pagination/pagination.vue
+26 -21
View File
@@ -87,39 +87,44 @@ function getButtonClass(pageNumber: number) {
</script>
<template>
<div class="flex items-center justify-between px-2">
<div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
<!-- Info text -->
<div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
<div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
Menampilkan {{ startRecord }}
hingga {{ endRecord }}
dari {{ formattedRecordCount }} data
</div>
<div v-else class="flex-1"></div>
<div v-else class="shrink-0"></div>
<!-- Spacer untuk memastikan ada ruang di tengah -->
<div class="flex-1 min-w-4"></div>
<!-- Pagination controls -->
<Pagination
<div class="shrink-0">
<Pagination
v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
:items-per-page="paginationMeta.pageSize" show-edges
: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" />
<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
<template v-for="(item, index) in items">
<PaginationListItem
v-if="item.type === 'page'" :key="index" :value="item.value" as-child
@click="handlePageChange(item.value)"
@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>
<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>
<PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
<PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
</PaginationList>
</Pagination>
</div>
</div>
</template>