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

feat(pagination): add reusable pagination component and update list views

Browse Source 
- Create new PaginationView component to standardize pagination display
- Update multiple list components to use the new PaginationView
- Make paginationMeta prop required in list components
This commit is contained in:
Khafid Prayoga
2025-09-15 11:01:18 +07:00
parent 790c76be56
commit 566627239b
8 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/app/divison/list.vue
+5 -8
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -21,15 +22,11 @@ function handlePageChange(page: number) {
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<PubBaseDataTable <PubBaseDataTable
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed" :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize" :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
/> />
<template v-if="paginationMeta"> <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
</div> </div>
</template> </template>
app/components/app/equipment/list.vue
+4 -6
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -29,10 +30,7 @@ function handlePageChange(page: number) {
:func-html="funcHtml" :func-html="funcHtml"
:func-component="funcComponent" :func-component="funcComponent"
/> />
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1"> <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
</div> </div>
</template> </template>
app/components/app/installation/list.vue
+5 -10
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<PubBaseDataTable <PubBaseDataTable
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed" :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize" :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
/> />
<!-- Data info and pagination -->
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div> </div>
</template> </template>
app/components/app/specialist/list.vue
+5 -10
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<PubBaseDataTable <PubBaseDataTable
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed" :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize" :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
/> />
<!-- Data info and pagination -->
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div> </div>
</template> </template>
app/components/app/tools/list.vue
+10 -15
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -19,18 +20,12 @@ function handlePageChange(page: number) {
</script> </script>
<template> <template>
<PubBaseDataTable <div class="space-y-4">
:rows="data" <PubBaseDataTable
:cols="cols" :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
:header="header" :func-html="funcHtml" :func-component="funcComponent"
:keys="keys" />
:func-parsed="funcParsed"
:func-html="funcHtml" <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
:func-component="funcComponent" </div>
/>
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
</template> </template>
app/components/app/unit/list.vue
+5 -9
View File
@@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type' import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg' import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
interface Props { interface Props {
data: any[] data: any[]
paginationMeta?: PaginationMeta paginationMeta: PaginationMeta
} }
defineProps<Props>() defineProps<Props>()
@@ -21,15 +22,10 @@ function handlePageChange(page: number) {
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<PubBaseDataTable <PubBaseDataTable
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed" :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize" :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
/> />
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div> </div>
</template> </template>
app/components/pub/custom-ui/pagination/pagination-view.vue
+24
View File
@@ -0,0 +1,24 @@
<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
import Pagination from './pagination.vue'
const props = defineProps<{
paginationMeta: PaginationMeta
}>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<Pagination
v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
</template>
app/components/pub/custom-ui/pagination/pagination.vue
+2 -2
View File
@@ -89,12 +89,12 @@ function getButtonClass(pageNumber: number) {
<template> <template>
<div class="flex items-center justify-between px-2 py-2 w-full min-w-0"> <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
<!-- Info text --> <!-- Info text -->
<div v-if="showInfo" class="text-sm text-muted-foreground shrink-0"> <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
Menampilkan {{ startRecord }} Menampilkan {{ startRecord }}
hingga {{ endRecord }} hingga {{ endRecord }}
dari {{ formattedRecordCount }} data dari {{ formattedRecordCount }} data
</div> </div>
<div v-else class="shrink-0"></div> <div v-else class="shrink-0">-</div>
<!-- Spacer untuk memastikan ada ruang di tengah --> <!-- Spacer untuk memastikan ada ruang di tengah -->
<div class="flex-1 min-w-4"></div> <div class="flex-1 min-w-4"></div>