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

<script setup lang="ts">
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 { ControlLetterSchema } from '~/schemas/control-letter.schema'
import {  handleActionSave,} from '~/handlers/control-letter.handler'

import { toast } from '~/components/pub/ui/toast'
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
import { type ControlLetter } from '~/models/control-letter'

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

// form related state
const route = useRoute()
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const controlLetterForm = ref<ExposedForm<any> | null>(null)
// #endregion

// #region State & Computed
const router = useRouter()
const isConfirmationOpen = ref(false)

const selectedUnitId = ref<number|null>(null)
const selectedSpecialistId = ref<number|null>(null)
const selectedSubSpecialistId = ref<number|null>(null)
// #endregion

// #region Lifecycle Hooks
// #endregion

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

async function handleConfirmAdd() {
  const controlLetter: ControlLetter = await composeFormData()
  let createdControlLetterId = 0

  const response = await handleActionSave(
    controlLetter,
    () => { },
    () => { },
    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)
  }

  goBack()
}

async function composeFormData(): Promise<ControlLetter> {
  const [controlLetter,] = await Promise.all([
    controlLetterForm.value?.validate(),
  ])

  const results = [controlLetter]
  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
  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
}

provide("selectedUnitId", selectedUnitId);
provide("selectedSpecialistId", selectedSpecialistId);
provide("selectedSubSpecialistId", selectedSubSpecialistId);
// #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">Tambah Surat Kontrol</div>
  <AppControlLetterEntryForm
    ref="controlLetterForm"
    :schema="ControlLetterSchema"
    :selected-unit-id="selectedUnitId"
    :selected-specialist-id="selectedSpecialistId"
    :selected-sub-specialist-id="selectedSubSpecialistId"
  />

  <div class="my-2 flex justify-end py-2">
    <Action :enable-draft="false" @click="handleActionClick" />
  </div>

  <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>