progress

app/components/content/surgery-report/entry.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/surgery-report.service'
+import type { SurgeryReport } from '~/models/surgery-report'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { SurgeryReportSchema } from '~/schemas/surgery-report.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { getList, remove } from '~/services/surgery-report.service'
+import { handleActionEdit } from '~/handlers/surgery-report.handler'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'surgery-report',
+})
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const surgeryReportId = typeof route.params.surgery_report_id == 'string' ? parseInt(route.params.surgery_report_id) : 0
+
+const inputForm = ref<ExposedForm<any> | null>(null)
+const surgeryReport = ref({})
+const isConfirmationOpen = ref(false)
+const selectedOperativeAction = ref<any>(null)
+const isOperativeActionDialogOpen = ref(false)
+provide("isOperativeActionDialogOpen", isOperativeActionDialogOpen);
+
+const headerPrep: HeaderPrep = {
+  title: "Pilih Tindakan",
+  icon: 'i-lucide-history',
+}
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(surgeryReportId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    surgeryReport.value = responseData
+    inputForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    surgeryReportId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<SurgeryReport> {
+  const [input,] = await Promise.all([
+    inputForm.value?.validate(),
+  ])
+
+  const results = [input]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = input?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    // icdPreview.value.procedures = selectedOperativeAction.value || []
+  }
+  isOperativeActionDialogOpen.value = false
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Laporan Operasi</div>
+  <AppSurgeryReportEntry
+    ref="inputForm"
+    :schema="SurgeryReportSchema"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  
+  <Dialog
+    v-model:open="isOperativeActionDialogOpen"
+    title=""
+    size="xl"
+  >
+    <Header
+      :prep="headerPrep"
+      :ref-search-nav="refSearchNav"
+      v-model:search="searchInput"
+      @search="handleSearch" />
+
+    <AppSurgeryReportPicker
+      v-model:model-value="selectedOperativeAction"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>