+
Menampilkan {{ startRecord }}
- hingga {{ endRecord }}
+ hingga {{ Number(endRecord).toLocaleString('id-ID') }}
dari {{ formattedRecordCount }} data
-
+
-
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
= {
+ search: '',
+ 'page-number': 1,
+ 'page-size': 10,
}
export type DefaultQueryParams = z.infer
@@ -37,12 +40,7 @@ interface UsePaginatedListOptions {
}
export function usePaginatedList(options: UsePaginatedListOptions) {
- const {
- querySchema = defaultQuerySchema,
- defaultQuery = defaultQueryParams,
- fetchFn,
- entityName,
- } = options
+ const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
// State management
const data = ref([])
@@ -64,15 +62,15 @@ export function usePaginatedList(options: UsePaginatedListOptions) {
// Pagination state - computed from URL params
const paginationMeta = reactive({
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(options: UsePaginatedListOptions) {
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(options: UsePaginatedListOptions) {
// 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(options: UsePaginatedListOptions) {
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()}`
+}
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
new file mode 100644
index 00000000..85ea283e
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist/index.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
diff --git a/app/pages/(features)/org-src/subspecialist/index.vue b/app/pages/(features)/org-src/subspecialist/index.vue
new file mode 100644
index 00000000..a7a489d2
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist/index.vue
@@ -0,0 +1,41 @@
+
+
+
+
+