feat(division): implement division list with pagination and search

- Add schema validation for query parameters - Create pagination component with type definitions - Implement division list view with search functionality - Add data table configuration for division listing - Handle pagination state and URL synchronization
2025-09-01 14:45:32 +07:00
parent b1b324e688
commit 132068fcde
9 changed files with 556 additions and 75 deletions
@@ -1,51 +1,166 @@
 <script setup lang="ts">
-// #region Props & Emits
-const props = defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update', value: string): void
-}>()
-// #endregion
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import { refDebounced, useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { defaultQuery, querySchema } from './schema.query'

 // #region State & Computed
-// =============================
-const count = ref(0)
-const double = computed(() => count.value * 2)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+// URL state management
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data || defaultQuery
+})
+
+// Pagination state - computed from URL params
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: params.value.page,
+  pageSize: params.value.pageSize,
+  totalPage: 0,
+  hasNext: false,
+  hasPrev: false,
+})
+
+// Search model with debounce
+const searchInput = ref(params.value.q || '')
+const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Divisi',
+    icon: 'i-lucide-send',
+    // todo: open modal form
+    onClick: () => navigateTo('/org-src/division/add'),
+  },
+}
+
+provide('table_data_loader', isLoading)
 // #endregion

 // #region Lifecycle Hooks
 onMounted(() => {
-  // init code
-  fetchData()
+  getDivisionList()
 })
 // #endregion

 // #region Functions
-async function fetchData() {
-  console.log('fetched')
+async function getDivisionList() {
+  isLoading.isTableLoading = true
+
+  try {
+    // Use current params from URL state
+    const currentParams = params.value
+
+    // Prepare query parameters for pagination and search
+    const urlParams = new URLSearchParams({
+      'page-number': currentParams.page.toString(),
+      'page-size': currentParams.pageSize.toString(),
+    })
+
+    if (currentParams.q) {
+      urlParams.append('search', currentParams.q)
+    }
+
+    const resp = await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+
+    if (resp.success) {
+      const responseBody = resp.body as Record<string, any>
+      data.value = responseBody.data || []
+
+      const pager = responseBody.meta
+      // Update pagination meta from response
+      // Fallback if meta is not provided by API
+      paginationMeta.recordCount = pager.record_totalCount
+      paginationMeta.page = currentParams.page
+      paginationMeta.pageSize = currentParams.pageSize
+      paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
+      paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
+      paginationMeta.hasPrev = paginationMeta.page > 1
+    }
+  } catch (error) {
+    console.error('Error fetching division list:', error)
+    data.value = []
+    paginationMeta.recordCount = 0
+    paginationMeta.totalPage = 0
+    paginationMeta.hasNext = false
+    paginationMeta.hasPrev = false
+  } finally {
+    isLoading.isTableLoading = false
+  }
 }
+
+// Handle pagination page change
+function handlePageChange(page: number) {
+  // Update URL params - this will trigger watcher
+  queryParams.page = page
+}
+
 // #endregion region

 // #region Utilities & event handlers
-function increment() {
-  count.value++
-}
 // #endregion

 // #region Watchers
-watch(count, (newVal, oldVal) => {
-  console.log('count changed:', oldVal, '->', newVal)
+// 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 || ''
+  }
+  getDivisionList()
+}, { deep: true })
+
+// 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
+}
+
+// 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
+  }
 })
 // #endregion
 </script>

 <template>
-  <div>
-    <p>Count: {{ count }}</p>
-    <p>Double: {{ double }}</p>
-    <button @click="increment">+1</button>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
  </div>
 </template>

@@ -0,0 +1,15 @@
+import * as z from 'zod'
+
+export const querySchema = 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),
+})
+
+export const defaultQuery = {
+  q: '',
+  page: 1,
+  pageSize: 10,
+}
+
+export type QueryParams = z.infer<typeof querySchema>