feat(patient): doc preview, integration to select ethnic and lang (#229)

* impl: opts for ethnic and lang

* fix: doc related for preview

fix: upload dokumen kk dan ktp

fix dokumen preview

fix: add preview doc on edit form

app/components/content/patient/detail.vue

@@ -6,6 +6,8 @@ import type { Person } from '~/models/person'
 
 // Components
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 import { getPatientDetail } from '~/services/patient.service'
 
@@ -17,6 +19,9 @@ const props = defineProps<{
 // #endregion
 
 // #region State & Computed
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
 const patient = ref(
   withBase<PatientEntity>({
     person: {} as Person,
@@ -80,6 +85,19 @@ async function onEdit() {
       :patient="patient"
       @back="onBack"
       @edit="onEdit"
+      @preview="
+        (url: string) => {
+          docPreviewUrl = url
+          isDocPreviewDialogOpen = true
+        }
+      "
     />
+    <Dialog
+      v-model:open="isDocPreviewDialogOpen"
+      title="Preview Dokumen"
+      size="2xl"
+    >
+      <DocPreviewDialog :link="docPreviewUrl" />
+    </Dialog>
   </div>
 </template>

app/components/content/patient/form.vue

@@ -17,6 +17,8 @@ import AppPersonAddressEntryFormRelative from '~/components/app/person-address/e
 import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form.vue'
 import AppPersonContactEntryForm from '~/components/app/person-contact/entry-form.vue'
 import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-form.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 // helper
 import { format, parseISO } from 'date-fns'
@@ -24,6 +26,8 @@ import { id as localeID } from 'date-fns/locale'
 
 // services
 import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
+import { getValueLabelList as getEthnicOpts } from '~/services/ethnic.service'
+import { getValueLabelList as getLanguageOpts } from '~/services/language.service'
 
 import { isReadonly, isProcessing, handleActionSave, handleActionEdit } from '~/handlers/patient.handler'
 
@@ -47,6 +51,23 @@ const props = defineProps<{
 const residentIdentityFile = ref<File>()
 const familyCardFile = ref<File>()
 
+// Dialog preview dokumen
+const isDocPreviewDialogOpen = ref<boolean>(false)
+const docPreviewUrl = ref<string>('')
+
+// Computed untuk URL dokumen tersimpan
+const identityFileUrl = computed(() => {
+  return patientDetail.value.person?.residentIdentityFileUrl || ''
+})
+const familyCardFileUrl = computed(() => {
+  return patientDetail.value.person?.familyIdentityFileUrl || ''
+})
+
+function handlePreviewDoc(url: string) {
+  docPreviewUrl.value = url
+  isDocPreviewDialogOpen.value = true
+}
+
 // form related state
 const personAddressForm = ref<ExposedForm<any> | null>(null)
 const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
@@ -58,6 +79,9 @@ const personPatientForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
 // #region State & Computed
+const ethnicOptions = ref<{ value: string; label: string }[]>([])
+const languageOptions = ref<{ value: string; label: string }[]>([])
+
 const patientDetail = ref(
   withBase<PatientEntity>({
     person: {} as Person,
@@ -223,6 +247,13 @@ const responsibleFormInitialValues = computed(() => {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
+  const optsReq = {
+    'page-no-limit': true,
+  }
+
+  ethnicOptions.value = await getEthnicOpts(optsReq, true)
+  languageOptions.value = await getLanguageOpts(optsReq, true)
+
   // if edit mode, fetch patient detail
   if (props.mode === 'edit' && props.patientId) {
     await loadInitData(props.patientId)
@@ -309,7 +340,9 @@ async function handleActionClick(eventType: string) {
       const patient: Patient = await composeFormData()
 
       let createdPatientId = 0
+      let createdPersonId = 0
       let response: any
+
       // return
       if (props.mode === 'edit' && props.patientId) {
         response = await handleActionEdit(
@@ -330,13 +363,15 @@ async function handleActionClick(eventType: string) {
 
       const data = (response?.body?.data ?? null) as PatientBase | null
       if (!data) return
+
       createdPatientId = data.id
+      createdPersonId = data.person_id!
 
       if (residentIdentityFile.value) {
-        void uploadAttachment(residentIdentityFile.value, createdPatientId, 'ktp')
+        void uploadAttachment(residentIdentityFile.value, createdPersonId, 'ktp')
       }
       if (familyCardFile.value) {
-        void uploadAttachment(familyCardFile.value, createdPatientId, 'kk')
+        void uploadAttachment(familyCardFile.value, createdPersonId, 'kk')
       }
 
       // If has callback provided redirect to callback with patientData
@@ -435,10 +470,16 @@ watch(
     {{ mode === 'edit' ? 'Edit Pasien' : 'Tambah Pasien' }}
   </div>
   <AppPatientEntryForm
-    :key="`patient-${formKey}`"
     ref="personPatientForm"
+    :key="`patient-${formKey}`"
     :is-readonly="isProcessing || isReadonly"
     :initial-values="patientFormInitialValues"
+    :language-options="languageOptions"
+    :ethnic-options="ethnicOptions"
+    :mode="mode"
+    :identity-file-url="identityFileUrl"
+    :family-card-file-url="familyCardFileUrl"
+    @preview="handlePreviewDoc"
   />
   <div class="h-6"></div>
   <AppPersonAddressEntryForm
@@ -483,6 +524,15 @@ watch(
   <div class="my-2 flex justify-end py-2">
     <Action @click="handleActionClick" />
   </div>
+
+  <!-- Dialog Preview Dokumen -->
+  <Dialog
+    v-model:open="isDocPreviewDialogOpen"
+    title="Preview Dokumen"
+    size="2xl"
+  >
+    <DocPreviewDialog :link="docPreviewUrl" />
+  </Dialog>
 </template>
 
 <style scoped>