Fix: debug Uplaod Doc

app/components/content/document-upload/add.vue

@@ -57,7 +57,7 @@ async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
     ref_id: encounterId,
-    upload_employee_id: user.user_id
+    upload_employee_id: user.employee_id
   })
 
   const [inputFormState,] = await Promise.all([

app/components/content/document-upload/list.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 // #region Imports
 import { ActionEvents } from '~/components/pub/my-ui/data/types'
-import type { HeaderPrep, } from '~/components/pub/my-ui/data/types'
+import type { HeaderPrep, RefSearchNav, } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-import { usePaginatedList } from '~/composables/usePaginatedList'
 import { getList, remove } from '~/services/supporting-document.service'
 import { toast } from '~/components/pub/ui/toast'
 import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
-import { genEncounterDocument } from '~/models/encounter-document'
 // #endregion
 
 // #region State
@@ -20,8 +18,9 @@ const props = defineProps<{
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
-const dummy = computed(() => {
-  return props.encounter?.encounterDocuments || []
+const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ 'encounter-id': encounterId, ...params }),
+  entityName: 'encounter-document',
 })
 
 const isRecordConfirmationOpen = ref(false)
@@ -41,6 +40,18 @@ const headerPrep: HeaderPrep = {
       }),
   },
 }
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
 // #endregion
 
 // #region Lifecycle Hooks
@@ -56,7 +67,7 @@ async function handleConfirmDelete(record: any, action: string) {
       const result = await remove(record.id)
       if (result.success) {
         toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
-        props.refresh()
+        fetchData()
       } else {
         toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
       }
@@ -103,8 +114,12 @@ watch([recId, recAction, timestamp], () => {
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }"/>
-  <AppDocumentUploadList :data="dummy"/>
+  <Header :prep="{ ...headerPrep }"
+      v-model:search="searchInput"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch"
+  />
+  <AppDocumentUploadList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange"/>
 
   <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
@@ -114,9 +129,9 @@ watch([recId, recAction, timestamp], () => {
             <strong>ID:</strong>
             {{ record?.id }}
           </p>
-          <p v-if="record?.firstName">
+          <p v-if="record?.name">
             <strong>Nama:</strong>
-            {{ record.name }}
+            {{ record?.name }}
           </p>
         </div>
       </template>