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/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()}`
+}