From 26b0cf12e375c928a7c81254bde7d678ef5ab98b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 11 Sep 2025 13:28:07 +0700
Subject: [PATCH] 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     | 14 +---
 app/components/content/equipment/list.vue    | 27 ++-----
 app/components/content/installation/list.vue | 26 ++-----
 app/components/content/specialist/list.vue   | 26 ++-----
 app/components/content/tools/list.vue        | 14 +---
 app/components/content/unit/list.vue         | 14 +---
 app/composables/usePaginatedList.ts          | 74 ++++++++++++--------
 7 files changed, 70 insertions(+), 125 deletions(-)

diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index f4bf78e6..f6a3efc7 100644
--- a/app/components/content/division/list.vue
+++ b/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
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 61d2a0b0..4c82ed92 100644
--- a/app/components/content/equipment/list.vue
+++ b/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>
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 01a05baf..5ecf55f7 100644
--- a/app/components/content/installation/list.vue
+++ b/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>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 01a05baf..04125aa1 100644
--- a/app/components/content/specialist/list.vue
+++ b/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>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 580dda40..b16ccaec 100644
--- a/app/components/content/tools/list.vue
+++ b/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
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 404da13e..03ee6c9a 100644
--- a/app/components/content/unit/list.vue
+++ b/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
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 10f6863a..d0edafb2 100644
--- a/app/composables/usePaginatedList.ts
+++ b/app/composables/usePaginatedList.ts
@@ -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()}`
+}