Feat: API Integration supporting doc upload

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

@@ -2,10 +2,12 @@
 import { useRouter } from 'vue-router'
 import type { ExposedForm } from '~/types/form'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import { handleActionSave,} from '~/handlers/patient.handler'
+import { handleActionSave,} from '~/handlers/supporting-document.handler'
 import { toast } from '~/components/pub/ui/toast'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
+import { uploadAttachment } from '~/services/supporting-document.service'
+import { printFormData, toFormData } from '~/lib/utils'
 
 // #region Props & Emits
 const props = defineProps<{
@@ -16,11 +18,15 @@ const props = defineProps<{
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
+const { user } = useUserStore()
 // #endregion
 
 // #region State & Computed
 const router = useRouter()
 const isConfirmationOpen = ref(false)
+const initialValues = {
+  officer: user.user_name,
+}
 // #endregion
 
 // #region Lifecycle Hooks
@@ -31,42 +37,42 @@ function goBack() {
   router.go(-1)
 }
 
+
 async function handleConfirmAdd() {
-  const controlLetter = await composeFormData()
-  let createdControlLetterId = 0
-
-  const response = await handleActionSave(
-    controlLetter,
-    () => { },
-    () => { },
-    toast,
-  )
+  const inputData = await composeFormData()
+  const inputFormData: FormData = toFormData(inputData)
 
+  const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
   const data = (response?.body?.data ?? null)
   if (!data) return
-  createdControlLetterId = data.id
 
   // // If has callback provided redirect to callback with patientData
   if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
   }
-
   goBack()
 }
 
 async function composeFormData(): Promise<any> {
-  const [controlLetter,] = await Promise.all([
+  inputForm.value?.setValues({
+    ...inputForm.value?.values,
+    ref_id: encounterId,
+    upload_employee_id: user.user_id
+  })
+
+  const [inputFormState,] = await Promise.all([
     inputForm.value?.validate(),
   ])
 
-  const results = [controlLetter]
+  const results = [inputFormState]
   const allValid = results.every((r) => r?.valid)
 
   // exit, if form errors happend during validation
-  if (!allValid) return Promise.reject('Form validation failed')
-
-  const formData = controlLetter?.values
-  formData.encounter_id = encounterId
+  if (!allValid) {
+    toast({ title: 'Form validation failed', variant: 'destructive',})
+    return Promise.reject('Form validation failed')
+  }
+  const formData = inputFormState?.values
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -82,7 +88,6 @@ async function handleActionClick(eventType: string) {
       await navigateTo(props.callbackUrl)
       return
     }
-
     goBack()
   }
 }
@@ -103,6 +108,7 @@ function handleCancelAdd() {
   <AppDocumentUploadEntryForm
     ref="inputForm"
     :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
   />
 
   <div class="mb-2 flex justify-end py-2">

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

@@ -2,10 +2,11 @@
 import { useRouter } from 'vue-router'
 import type { ExposedForm } from '~/types/form'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
-import { handleActionSave,} from '~/handlers/patient.handler'
+import { handleActionSave,} from '~/handlers/supporting-document.handler'
 import { toast } from '~/components/pub/ui/toast'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
+import { getDetail } from '~/services/supporting-document.service'
 
 // #region Props & Emits
 const props = defineProps<{
@@ -15,15 +16,26 @@ const props = defineProps<{
 // form related state
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region State & Computed
 const router = useRouter()
 const isConfirmationOpen = ref(false)
+const { user } = useUserStore()
+const initialValues = {
+  officer: user.user_name,
+}
 // #endregion
 
 // #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(docId)
+  if (result.success) {
+    inputForm.value?.setValues(result.body.data)
+  }
+})
 // #endregion
 
 // #region Functions
@@ -32,40 +44,39 @@ function goBack() {
 }
 
 async function handleConfirmAdd() {
-  const controlLetter = await composeFormData()
-  let createdControlLetterId = 0
+  const inputData = await composeFormData()
+  let createdDataId = 0
 
-  const response = await handleActionSave(
-    controlLetter,
-    () => { },
-    () => { },
-    toast,
-  )
+  // const response = await handleActionSave(
+  //   inputData,
+  //   () => { },
+  //   () => { },
+  //   toast,
+  // )
 
-  const data = (response?.body?.data ?? null)
-  if (!data) return
-  createdControlLetterId = data.id
+  // const data = (response?.body?.data ?? null)
+  // if (!data) return
+  // createdDataId = data.id
 
-  // // If has callback provided redirect to callback with patientData
-  if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
-  }
-
-  goBack()
+  // // // If has callback provided redirect to callback with patientData
+  // if (props.callbackUrl) {
+  //   navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
+  // }
+  // goBack()
 }
 
 async function composeFormData(): Promise<any> {
-  const [controlLetter,] = await Promise.all([
+  const [inputFormState,] = await Promise.all([
     inputForm.value?.validate(),
   ])
 
-  const results = [controlLetter]
+  const results = [inputFormState]
   const allValid = results.every((r) => r?.valid)
 
   // exit, if form errors happend during validation
   if (!allValid) return Promise.reject('Form validation failed')
 
-  const formData = controlLetter?.values
+  const formData = inputFormState?.values
   formData.encounter_id = encounterId
   return new Promise((resolve) => resolve(formData))
 }
@@ -103,6 +114,7 @@ function handleCancelAdd() {
   <AppDocumentUploadEntryForm
     ref="inputForm"
     :schema="DocumentUploadSchema"
+    :initial-values="initialValues"
   />
 
   <div class="my-2 flex justify-end py-2">

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

@@ -4,28 +4,31 @@ import { ActionEvents } from '~/components/pub/my-ui/data/types'
 import type { HeaderPrep, } 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/control-letter.service'
+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
 const props = defineProps<{
   encounter?: Encounter
+  refresh: () => void
 }>()
+
 const route = useRoute()
 const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 
-const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
-  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
-  entityName: 'control-letter',
+const dummy = computed(() => {
+  return props.encounter?.encounterDocuments || []
 })
 
 const isRecordConfirmationOpen = ref(false)
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
+const timestamp = ref<number>(0)
 
 const headerPrep: HeaderPrep = {
   title: "Upload Dokumen",
@@ -53,7 +56,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' })
-        await fetchData()
+        props.refresh()
       } else {
         toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
       }
@@ -63,6 +66,7 @@ async function handleConfirmDelete(record: any, action: string) {
   }
 }
 
+
 function handleCancelConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
@@ -75,13 +79,14 @@ function handleCancelConfirmation() {
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
+provide('timestamp', timestamp)
 // #endregion
 
 // #region Watchers
-watch([recId, recAction], () => {
+watch([recId, recAction, timestamp], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo("https://google.com", { external: true, open: { target: '_blank' } })
+      navigateTo(recItem.value.filePath, { external: true, open: { target: '_blank' } })
       break
     case ActionEvents.showEdit:
       navigateTo({
@@ -99,7 +104,7 @@ watch([recId, recAction], () => {
 
 <template>
   <Header :prep="{ ...headerPrep }"/>
-  <AppDocumentUploadList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  <AppDocumentUploadList :data="dummy"/>
 
   <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
@@ -111,11 +116,7 @@ watch([recId, recAction], () => {
           </p>
           <p v-if="record?.firstName">
             <strong>Nama:</strong>
-            {{ record.firstName }}
-          </p>
-          <p v-if="record?.code">
-            <strong>Kode:</strong>
-            {{ record.cellphone }}
+            {{ record.name }}
           </p>
         </div>
       </template>