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

refactor(api): consolidate query param transformation into utility function

Browse Source 
Move URL parameter construction logic from multiple list components to a shared transform function in usePaginatedList. This improves code reuse and maintainability while keeping the same functionality.

Standardize query parameter names to match backend expectations ('page-number' and 'page-size' instead of 'page' and 'pageSize'). Update related schema and default params accordingly.
This commit is contained in:
Khafid Prayoga
2025-09-11 13:28:07 +07:00
parent 140bfa0420
commit 26b0cf12e3
7 changed files with 70 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/content/division/list.vue
+2 -12
View File
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
// 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()}`)
const endpoint = transform('/api/v1/patient', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
app/components/content/equipment/list.vue
+7 -20
View File
@@ -24,19 +24,10 @@ const items = [
{ value: 'item-3', label: 'Item 3' },
]
// Fungsi untuk fetch data division
// Fungsi untuk fetch data equipment
async function fetchEquipmentData(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/equipment?${urlParams.toString()}`)
const endpoint = transform('/api/v1/equipment', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
@@ -188,17 +179,13 @@ const handleCancelConfirmation = () => {
</div>
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
@submit="onSubmitForm" />
</Dialog>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen"
action="delete"
:record="recItem"
@confirm="handleConfirmDelete"
@cancel="handleCancelConfirmation"
>
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
app/components/content/installation/list.vue
+7 -19
View File
@@ -5,7 +5,7 @@ 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 { transform, usePaginatedList } from '~/composables/usePaginatedList'
import { installationConf, schemaConf } from './entry'
// #region State & Computed
@@ -21,16 +21,8 @@ const recItem = ref<any>(null)
// 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()}`)
const endpoint = transform('/api/v1/patient', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
@@ -192,18 +184,14 @@ function handleCancelConfirmation() {
<AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
<AppInstallationEntryForm
:installation="installationConf" :schema="schemaConf"
<AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
:initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
@cancel="onCancelForm"
/>
@cancel="onCancelForm" />
</Dialog>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
>
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
app/components/content/specialist/list.vue
+6 -20
View File
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
// 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()}`)
const endpoint = transform('/api/v1/patient', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
@@ -192,18 +182,14 @@ function handleCancelConfirmation() {
<AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
<AppInstallationEntryForm
:installation="installationConf" :schema="schemaConf"
<AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
:initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
@cancel="onCancelForm"
/>
@cancel="onCancelForm" />
</Dialog>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
>
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
app/components/content/tools/list.vue
+2 -12
View File
@@ -24,19 +24,9 @@ const items = [
{ value: 'item-3', label: 'Item 3' },
]
// Fungsi untuk fetch data division
async function fetchDeviceData(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/device?${urlParams.toString()}`)
const endpoint = transform('/api/v1/device', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
app/components/content/unit/list.vue
+2 -12
View File
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
// 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()}`)
const endpoint = transform('/api/v1/patient', params)
return await xfetch(endpoint)
}
// Menggunakan composable untuk pagination
app/composables/usePaginatedList.ts
+44 -30
View File
@@ -5,15 +5,18 @@ 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),
search: z
.union([z.literal(''), z.string().min(3)])
.optional()
.catch(''),
'page-number': z.coerce.number().int().min(1).default(1).catch(1),
'page-size': z.coerce.number().int().min(5).max(20).default(10).catch(10),
})
export const defaultQueryParams = {
q: '',
page: 1,
pageSize: 10,
export const defaultQueryParams: Record<string, any> = {
search: '',
'page-number': 1,
'page-size': 10,
}
export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
@@ -37,12 +40,7 @@ interface UsePaginatedListOptions<T = any> {
}
export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
const {
querySchema = defaultQuerySchema,
defaultQuery = defaultQueryParams,
fetchFn,
entityName,
} = options
const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
// State management
const data = ref<T[]>([])
@@ -64,15 +62,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
// Pagination state - computed from URL params
const paginationMeta = reactive<PaginationMeta>({
recordCount: 0,
page: params.value.page,
pageSize: params.value.pageSize,
page: params.value['page-number'],
pageSize: params.value['page-size'],
totalPage: 0,
hasNext: false,
hasPrev: false,
})
// Search model with debounce
const searchInput = ref(params.value.q || '')
const searchInput = ref(params.value.search || '')
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
// Functions
@@ -92,8 +90,8 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
const pager = responseBody.meta
// Update pagination meta from response
paginationMeta.recordCount = pager.record_totalCount
paginationMeta.page = currentParams.page
paginationMeta.pageSize = currentParams.pageSize
paginationMeta.page = currentParams['page-number']
paginationMeta.pageSize = currentParams['page-size']
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
paginationMeta.hasPrev = paginationMeta.page > 1
@@ -113,32 +111,36 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
// Handle pagination page change
function handlePageChange(page: number) {
// Update URL params - this will trigger watcher
queryParams.page = page
queryParams['page-number'] = 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
queryParams.search = searchValue
queryParams['page-number'] = 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(
params,
(newParams) => {
// Sync search input with URL params (for back/forward navigation)
if (newParams.search !== searchInput.value) {
searchInput.value = newParams.search || ''
}
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
queryParams.search = newValue
queryParams['page-number'] = 1 // Reset to first page when searching
}
})
@@ -162,3 +164,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
handleSearch,
}
}
export function transform(endpoint: string ,params: any): string {
const urlParams = new URLSearchParams()
Object.entries(params).forEach(([key, value]) => {
if (value) {
urlParams.append(key, value.toString())
}
})
return `${endpoint}?${urlParams.toString()}`
}