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.

app/components/content/division/list.vue

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

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

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

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

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

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