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

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
+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>