simrsx-fe/app/components/content/control-letter/detail.vue

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { withBase } from '~/models/_base'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
import type { Patient } from '~/models/patient'
import type { Person } from '~/models/person'
import { getDetail } from '~/services/control-letter.service'

// Components
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import type { ControlLetter } from '~/models/control-letter'

// #region Props & Emits
const props = defineProps<{
}>()

// #endregion

// #region State & Computed

const route = useRoute()
const router = useRouter()
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0

const controlLetter = ref<ControlLetter | null>(null)

const headerPrep: HeaderPrep = {
  title: 'Detail Surat Kontrol',
  icon: 'i-lucide-newspaper',
}

// #endregion

// #region Lifecycle Hooks
onMounted(async () => {
  const result = await getDetail(controlLetterId, {
    includes: "unit,specialist,subspecialist,doctor-employee-person",
  })
  if (result.success) {
    controlLetter.value = result.body?.data
  }
})
// #endregion

// #region Functions
function goBack() {
  router.go(-1)
}

// #endregion region

// #region Utilities & event handlers
function handleAction(type: string) {
  switch (type) {
    case 'edit':
      // TODO: Handle edit action
      navigateTo({
        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
        params: { id: encounterId, "control_letter_id": controlLetterId },
      })
      break

    case 'back':
      goBack()
      break
  }
}
// #endregion

// #region Watchers
// #endregion
</script>

<template>
  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />

  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
</template>