simrsx-fe/app/components/flow/division/list.vue

<script setup lang="ts">
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 AppDivisonEntryForm from '~/components/app/divison/entry-form.vue'
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
import { division as divisionConf, schema as schemaConf } from './entry'
import { defaultQuery, querySchema } from './schema.query'

// #region State & Computed
const data = ref([])
const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})
const isDialogOpen = ref(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,
})

// Table action rowId provider
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

// 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',
    onClick: () => {
      isDialogOpen.value = true
    },
  },
}

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
// #endregion

// #region Lifecycle Hooks
onMounted(() => {
  getDivisionList()
})
// #endregion

// #region Functions
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 Form event handlers

function onCancelForm(resetForm: () => void) {
  isDialogOpen.value = false
  setTimeout(() => {
    resetForm()
  }, 500)
}

async function onSubmitForm(values: any, resetForm: () => void) {
  let isSuccess = false
  try {
    // TODO: Implement form submission logic
    console.log('Form submitted:', values)

    // Simulate API call
    // const response = await xfetch('/api/v1/division', {
    //   method: 'POST',
    //   body: JSON.stringify(values)
    // })

    // If successful, mark as success and close dialog
    isDialogOpen.value = false
    isSuccess = true

    // Refresh data after successful submission
    await getDivisionList()

    // TODO: Show success message
    console.log('Division created successfully')
  } catch (error: unknown) {
    console.warn('Error submitting form:', error)
    isSuccess = false
    // Don't close dialog or reset form on error
    // TODO: Show error message to user
  } finally {
    if (isSuccess) {
      setTimeout(() => {
        resetForm()
      }, 500)
    }
  }
}
// #endregion

// #region 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 || ''
  }
  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 class="rounded-md border p-4">
    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
    <AppDivisonList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />

    <Dialog v-model:open="isDialogOpen">
      <DialogContent
        class="sm:max-w-[425px]"
        @interact-outside="(e) => e.preventDefault()"
        @pointer-down-outside="(e) => e.preventDefault()"
      >
        <DialogHeader>
          <DialogTitle>Tambah Divisi</DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>

        <AppDivisonEntryForm
          :division="divisionConf"
          :schema="schemaConf"
          :initial-values="{ name: '', code: '', parentId: '' }"
          @submit="onSubmitForm"
          @cancel="onCancelForm"
        />
      </DialogContent>
    </Dialog>
  </div>
</template>

<style scoped>
/* component style */
</style>