Khafid Prayoga
a9c286bd0a
feat(form): add accessibility improvements to form components - Add labelFor prop to Label component for better form element association - Enhance Combobox with ARIA attributes for better screen reader support - Update form fields with proper IDs and label associations feat(pagination): adjust button width based on page number length Add dynamic button sizing for pagination items to accommodate different digit lengths (1-99, 100-999, 1000+). This improves visual consistency when displaying varying page numbers. feat(modal): add reusable dialog component and refactor division form - Create new Dialog.vue component with configurable size and outside click prevention - Replace inline dialog implementation in division list with new Dialog component - Fix formatting in entry-form.vue feat(data-table): add click handling for action cells Implement handleActionCellClick function to manage click events on action cells, triggering dropdown buttons when clicked outside interactive elements. Add cursor-pointer class and click handler to action cells for better UX. refactor(custom-ui): centralize action event strings in types Replace hardcoded action event strings with constants from types.ts to improve maintainability and reduce potential typos feat(confirmation): add reusable confirmation modal components - Implement base confirmation.vue component with customizable props - Create record-specific record-confirmation.vue for data operations - Add comprehensive README.md documentation for usage - Integrate confirmation flow in division list component refactor(components): move dialog component to base directory and update imports The dialog component was moved from custom-ui/modal to base/modal to better reflect its shared usage across the application. All import paths referencing the old location have been updated accordingly. refactor(select): reorganize imports and adjust conditional formatting - Reorder imports in Select.vue for better organization - Adjust logical operator formatting in SelectContent.vue for consistency
126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
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
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
onPageChange: undefined,
|
|
showInfo: 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(() => {
|
|
return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
|
|
})
|
|
|
|
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 items-center justify-between px-2">
|
|
<!-- Info text -->
|
|
<div v-if="showInfo" class="flex-1 text-sm text-muted-foreground">
|
|
Menampilkan {{ startRecord }}
|
|
hingga {{ endRecord }}
|
|
dari {{ formattedRecordCount }} data
|
|
</div>
|
|
<div v-else class="flex-1"></div>
|
|
|
|
<!-- Pagination controls -->
|
|
<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>
|
|
</template>
|