refactor(composables): extract pagination logic into usePaginatedList composable
- Remove duplicate schema.query.ts files from unit, division, and installation components - Create new usePaginatedList composable to centralize pagination logic - Update list.vue components to use the new composable - Maintain same functionality while reducing code duplication
This commit is contained in:
Khafid Prayoga
@@ -1,55 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import { refDebounced, useUrlSearchParams } from '@vueuse/core'
|
||||
import AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { division as divisionConf, schema as schemaConf } from './entry'
|
||||
import { defaultQuery, querySchema } from './schema.query'
|
||||
|
||||
// #region State & Computed
|
||||
const data = ref([])
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// URL state management
|
||||
const queryParams = useUrlSearchParams('history', {
|
||||
initialValue: defaultQuery,
|
||||
removeFalsyValues: true,
|
||||
})
|
||||
|
||||
const params = computed(() => {
|
||||
const result = querySchema.safeParse(queryParams)
|
||||
return result.data || defaultQuery
|
||||
})
|
||||
|
||||
// Pagination state - computed from URL params
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: params.value.page,
|
||||
pageSize: params.value.pageSize,
|
||||
totalPage: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Search model with debounce
|
||||
const searchInput = ref(params.value.q || '')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
// Fungsi untuk fetch data division
|
||||
async function fetchDivisionData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getDivisionList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchDivisionData,
|
||||
entityName: 'division',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Divisi',
|
||||
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getDivisionList()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getDivisionList() {
|
||||
isLoading.isTableLoading = true
|
||||
|
||||
try {
|
||||
// Use current params from URL state
|
||||
const currentParams = params.value
|
||||
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': currentParams.page.toString(),
|
||||
'page-size': currentParams.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (currentParams.q) {
|
||||
urlParams.append('search', currentParams.q)
|
||||
}
|
||||
|
||||
const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
|
||||
if (resp.success) {
|
||||
const responseBody = resp.body as Record<string, any>
|
||||
data.value = responseBody.data || []
|
||||
|
||||
const pager = responseBody.meta
|
||||
// Update pagination meta from response
|
||||
// Fallback if meta is not provided by API
|
||||
paginationMeta.recordCount = pager.record_totalCount
|
||||
paginationMeta.page = currentParams.page
|
||||
paginationMeta.pageSize = currentParams.pageSize
|
||||
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
|
||||
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
|
||||
paginationMeta.hasPrev = paginationMeta.page > 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching division list:', error)
|
||||
data.value = []
|
||||
paginationMeta.recordCount = 0
|
||||
paginationMeta.totalPage = 0
|
||||
paginationMeta.hasNext = false
|
||||
paginationMeta.hasPrev = false
|
||||
} finally {
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle pagination page change
|
||||
function handlePageChange(page: number) {
|
||||
// Update URL params - this will trigger watcher
|
||||
queryParams.page = page
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// Watch for URL param changes and trigger refetch
|
||||
watch(params, (newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.q !== searchInput.value) {
|
||||
searchInput.value = newParams.q || ''
|
||||
}
|
||||
getDivisionList()
|
||||
}, { deep: true })
|
||||
|
||||
// Handle search from header component
|
||||
function handleSearch(searchValue: string) {
|
||||
// Update URL params - this will trigger watcher and refetch data
|
||||
queryParams.q = searchValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Watch debounced search and update URL params (keeping for backward compatibility)
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
queryParams.q = newValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
@@ -277,12 +193,9 @@ function handleCancelConfirmation() {
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
|
||||
<AppDivisonEntryForm
|
||||
:division="divisionConf"
|
||||
:schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
/>
|
||||
:division="divisionConf" :schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const querySchema = z.object({
|
||||
q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
|
||||
page: z.coerce.number().int().min(1).default(1).catch(1),
|
||||
pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
})
|
||||
|
||||
export const defaultQuery = {
|
||||
q: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
|
||||
export type QueryParams = z.infer<typeof querySchema>
|
||||
@@ -1,55 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import { refDebounced, useUrlSearchParams } from '@vueuse/core'
|
||||
import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { installationConf, schemaConf } from './entry'
|
||||
import { defaultQuery, querySchema } from './schema.query'
|
||||
|
||||
// #region State & Computed
|
||||
const data = ref([])
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// URL state management
|
||||
const queryParams = useUrlSearchParams('history', {
|
||||
initialValue: defaultQuery,
|
||||
removeFalsyValues: true,
|
||||
})
|
||||
|
||||
const params = computed(() => {
|
||||
const result = querySchema.safeParse(queryParams)
|
||||
return result.data || defaultQuery
|
||||
})
|
||||
|
||||
// Pagination state - computed from URL params
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: params.value.page,
|
||||
pageSize: params.value.pageSize,
|
||||
totalPage: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Search model with debounce
|
||||
const searchInput = ref(params.value.q || '')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
// Fungsi untuk fetch data installation
|
||||
async function fetchInstallationData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getInstallationList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchInstallationData,
|
||||
entityName: 'installation',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Instalasi',
|
||||
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getInstallationList()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getInstallationList() {
|
||||
isLoading.isTableLoading = true
|
||||
|
||||
try {
|
||||
// Use current params from URL state
|
||||
const currentParams = params.value
|
||||
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': currentParams.page.toString(),
|
||||
'page-size': currentParams.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (currentParams.q) {
|
||||
urlParams.append('search', currentParams.q)
|
||||
}
|
||||
|
||||
const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
|
||||
if (resp.success) {
|
||||
const responseBody = resp.body as Record<string, any>
|
||||
data.value = responseBody.data || []
|
||||
|
||||
const pager = responseBody.meta
|
||||
// Update pagination meta from response
|
||||
// Fallback if meta is not provided by API
|
||||
paginationMeta.recordCount = pager.record_totalCount
|
||||
paginationMeta.page = currentParams.page
|
||||
paginationMeta.pageSize = currentParams.pageSize
|
||||
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
|
||||
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
|
||||
paginationMeta.hasPrev = paginationMeta.page > 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching Installation list:', error)
|
||||
data.value = []
|
||||
paginationMeta.recordCount = 0
|
||||
paginationMeta.totalPage = 0
|
||||
paginationMeta.hasNext = false
|
||||
paginationMeta.hasPrev = false
|
||||
} finally {
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle pagination page change
|
||||
function handlePageChange(page: number) {
|
||||
// Update URL params - this will trigger watcher
|
||||
queryParams.page = page
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// Watch for URL param changes and trigger refetch
|
||||
watch(params, (newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.q !== searchInput.value) {
|
||||
searchInput.value = newParams.q || ''
|
||||
}
|
||||
getInstallationList()
|
||||
}, { deep: true })
|
||||
|
||||
// Handle search from header component
|
||||
function handleSearch(searchValue: string) {
|
||||
// Update URL params - this will trigger watcher and refetch data
|
||||
queryParams.q = searchValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Watch debounced search and update URL params (keeping for backward compatibility)
|
||||
watch(debouncedSearch, (newValue: any) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
queryParams.q = newValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const querySchema = z.object({
|
||||
q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
|
||||
page: z.coerce.number().int().min(1).default(1).catch(1),
|
||||
pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
})
|
||||
|
||||
export const defaultQuery = {
|
||||
q: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
|
||||
export type QueryParams = z.infer<typeof querySchema>
|
||||
@@ -1,55 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import { refDebounced, useUrlSearchParams } from '@vueuse/core'
|
||||
import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { schemaConf, unitConf } from './entry'
|
||||
import { defaultQuery, querySchema } from './schema.query'
|
||||
|
||||
// #region State & Computed
|
||||
const data = ref([])
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// URL state management
|
||||
const queryParams = useUrlSearchParams('history', {
|
||||
initialValue: defaultQuery,
|
||||
removeFalsyValues: true,
|
||||
})
|
||||
|
||||
const params = computed(() => {
|
||||
const result = querySchema.safeParse(queryParams)
|
||||
return result.data || defaultQuery
|
||||
})
|
||||
|
||||
// Pagination state - computed from URL params
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: params.value.page,
|
||||
pageSize: params.value.pageSize,
|
||||
totalPage: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Search model with debounce
|
||||
const searchInput = ref(params.value.q || '')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
// Fungsi untuk fetch data unit
|
||||
async function fetchUnitData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getUnitList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchUnitData,
|
||||
entityName: 'unit',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Unit',
|
||||
@@ -84,63 +80,7 @@ provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
getUnitList()
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function getUnitList() {
|
||||
isLoading.isTableLoading = true
|
||||
|
||||
try {
|
||||
// Use current params from URL state
|
||||
const currentParams = params.value
|
||||
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': currentParams.page.toString(),
|
||||
'page-size': currentParams.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (currentParams.q) {
|
||||
urlParams.append('search', currentParams.q)
|
||||
}
|
||||
|
||||
const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
|
||||
if (resp.success) {
|
||||
const responseBody = resp.body as Record<string, any>
|
||||
data.value = responseBody.data || []
|
||||
|
||||
const pager = responseBody.meta
|
||||
// Update pagination meta from response
|
||||
// Fallback if meta is not provided by API
|
||||
paginationMeta.recordCount = pager.record_totalCount
|
||||
paginationMeta.page = currentParams.page
|
||||
paginationMeta.pageSize = currentParams.pageSize
|
||||
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
|
||||
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
|
||||
paginationMeta.hasPrev = paginationMeta.page > 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching Unit list:', error)
|
||||
data.value = []
|
||||
paginationMeta.recordCount = 0
|
||||
paginationMeta.totalPage = 0
|
||||
paginationMeta.hasNext = false
|
||||
paginationMeta.hasPrev = false
|
||||
} finally {
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle pagination page change
|
||||
function handlePageChange(page: number) {
|
||||
// Update URL params - this will trigger watcher
|
||||
queryParams.page = page
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
@@ -216,30 +156,6 @@ async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// Watch for URL param changes and trigger refetch
|
||||
watch(params, (newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.q !== searchInput.value) {
|
||||
searchInput.value = newParams.q || ''
|
||||
}
|
||||
getUnitList()
|
||||
}, { deep: true })
|
||||
|
||||
// Handle search from header component
|
||||
function handleSearch(searchValue: string) {
|
||||
// Update URL params - this will trigger watcher and refetch data
|
||||
queryParams.q = searchValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Watch debounced search and update URL params (keeping for backward compatibility)
|
||||
watch(debouncedSearch, (newValue: any) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
queryParams.q = newValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const querySchema = z.object({
|
||||
q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
|
||||
page: z.coerce.number().int().min(1).default(1).catch(1),
|
||||
pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
})
|
||||
|
||||
export const defaultQuery = {
|
||||
q: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
|
||||
export type QueryParams = z.infer<typeof querySchema>
|
||||
@@ -0,0 +1,164 @@
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import { refDebounced, useUrlSearchParams } from '@vueuse/core'
|
||||
import * as z from 'zod'
|
||||
|
||||
// Default query schema yang bisa digunakan semua list
|
||||
export const defaultQuerySchema = z.object({
|
||||
q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
|
||||
page: z.coerce.number().int().min(1).default(1).catch(1),
|
||||
pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
})
|
||||
|
||||
export const defaultQueryParams = {
|
||||
q: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
|
||||
export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
|
||||
|
||||
interface UsePaginatedListOptions<T = any> {
|
||||
// Schema untuk validasi query parameters
|
||||
querySchema?: z.ZodSchema<any>
|
||||
defaultQuery?: Record<string, any>
|
||||
// Fungsi untuk fetch data
|
||||
fetchFn: (params: any) => Promise<{
|
||||
success: boolean
|
||||
body: {
|
||||
data: T[]
|
||||
meta: {
|
||||
record_totalCount: number
|
||||
}
|
||||
}
|
||||
}>
|
||||
// Nama endpoint untuk logging error
|
||||
entityName: string
|
||||
}
|
||||
|
||||
export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
const {
|
||||
querySchema = defaultQuerySchema,
|
||||
defaultQuery = defaultQueryParams,
|
||||
fetchFn,
|
||||
entityName,
|
||||
} = options
|
||||
|
||||
// State management
|
||||
const data = ref<T[]>([])
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
// URL state management
|
||||
const queryParams = useUrlSearchParams('history', {
|
||||
initialValue: defaultQuery,
|
||||
removeFalsyValues: true,
|
||||
})
|
||||
|
||||
const params = computed(() => {
|
||||
const result = querySchema.safeParse(queryParams)
|
||||
return result.data || defaultQuery
|
||||
})
|
||||
|
||||
// Pagination state - computed from URL params
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: params.value.page,
|
||||
pageSize: params.value.pageSize,
|
||||
totalPage: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
// Search model with debounce
|
||||
const searchInput = ref(params.value.q || '')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
|
||||
// Functions
|
||||
async function fetchData() {
|
||||
isLoading.isTableLoading = true
|
||||
|
||||
try {
|
||||
// Use current params from URL state
|
||||
const currentParams = params.value
|
||||
|
||||
const response = await fetchFn(currentParams)
|
||||
|
||||
if (response.success) {
|
||||
const responseBody = response.body
|
||||
data.value = responseBody.data || []
|
||||
|
||||
const pager = responseBody.meta
|
||||
// Update pagination meta from response
|
||||
paginationMeta.recordCount = pager.record_totalCount
|
||||
paginationMeta.page = currentParams.page
|
||||
paginationMeta.pageSize = currentParams.pageSize
|
||||
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
|
||||
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
|
||||
paginationMeta.hasPrev = paginationMeta.page > 1
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${entityName} list:`, error)
|
||||
data.value = []
|
||||
paginationMeta.recordCount = 0
|
||||
paginationMeta.totalPage = 0
|
||||
paginationMeta.hasNext = false
|
||||
paginationMeta.hasPrev = false
|
||||
} finally {
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle pagination page change
|
||||
function handlePageChange(page: number) {
|
||||
// Update URL params - this will trigger watcher
|
||||
queryParams.page = page
|
||||
}
|
||||
|
||||
// Handle search from header component
|
||||
function handleSearch(searchValue: string) {
|
||||
// Update URL params - this will trigger watcher and refetch data
|
||||
queryParams.q = searchValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Watchers
|
||||
// Watch for URL param changes and trigger refetch
|
||||
watch(params, (newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.q !== searchInput.value) {
|
||||
searchInput.value = newParams.q || ''
|
||||
}
|
||||
fetchData()
|
||||
}, { deep: true })
|
||||
|
||||
// Watch debounced search and update URL params (keeping for backward compatibility)
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
queryParams.q = newValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
}
|
||||
})
|
||||
|
||||
// Initialize data on mount
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
params,
|
||||
queryParams,
|
||||
|
||||
// Functions
|
||||
fetchData,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user