Khafid Prayoga
132068fcde
- Add schema validation for query parameters - Create pagination component with type definitions - Implement division list view with search functionality - Add data table configuration for division listing - Handle pagination state and URL synchronization
73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
|
|
|
interface Props {
|
|
data: any[]
|
|
paginationMeta?: PaginationMeta
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
pageChange: [page: number]
|
|
}>()
|
|
|
|
function handlePageChange(page: number) {
|
|
emit('pageChange', page)
|
|
}
|
|
|
|
// Computed properties for formatted display
|
|
const formattedRecordCount = computed(() => {
|
|
if (!props.paginationMeta) return '0'
|
|
const count = props.paginationMeta.recordCount
|
|
if (count == null || count === undefined) return '0'
|
|
return Number(count).toLocaleString('id-ID')
|
|
})
|
|
|
|
const startRecord = computed(() => {
|
|
if (!props.paginationMeta) return 1
|
|
return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
|
|
})
|
|
|
|
const endRecord = computed(() => {
|
|
if (!props.paginationMeta) return 0
|
|
return Math.min(props.paginationMeta.page * props.paginationMeta.pageSize, props.paginationMeta.recordCount)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<PubBaseDataTable
|
|
:rows="data"
|
|
:cols="cols"
|
|
:header="header"
|
|
:keys="keys"
|
|
:func-parsed="funcParsed"
|
|
:func-html="funcHtml"
|
|
:func-component="funcComponent"
|
|
/>
|
|
|
|
<!-- Data info and pagination -->
|
|
<div v-if="paginationMeta" class="flex align-center justify-between">
|
|
<!-- Data info - always show -->
|
|
<div class="flex items-center justify-between px-2 mb-4">
|
|
<div class="flex-1 text-sm text-muted-foreground">
|
|
Menampilkan {{ startRecord }}
|
|
hingga {{ endRecord }}
|
|
dari {{ formattedRecordCount }} data
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination controls - only show when multiple pages -->
|
|
<div v-if="paginationMeta.totalPage > 1">
|
|
<PubCustomUiPagination
|
|
:pagination-meta="paginationMeta"
|
|
:show-info="false"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|