simrsx-fe/app/components/content/patient/entry.vue

<script setup lang="ts">
import type { PatientEntity, genPatientProps } from '~/models/patient'
import type { ExposedForm } from '~/types/form'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.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 { postPatient } from '~/services/patient.service'

// #region Props & Emits
const payload = ref<PatientEntity>()

// form related state
const personAddressForm = ref<ExposedForm<any> | null>(null)
const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
const personContactForm = ref<ExposedForm<any> | null>(null)
const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
const personFamilyForm = ref<ExposedForm<any> | null>(null)
const personPatientForm = ref<ExposedForm<any> | null>(null)

// #endregion

// #region State & Computed
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
async function submitAll() {
  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
    personPatientForm.value?.validate(),
    personAddressForm.value?.validate(),
    personAddressRelativeForm.value?.validate(),
    personFamilyForm.value?.validate(),
    personContactForm.value?.validate(),
    personEmergencyContactRelative.value?.validate(),
  ])

  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
  console.log(results)
  const allValid = results.every((r) => r?.valid)

  // exit, if form errors happend during validation
  // for example: dropdown not selected
  if (!allValid) return

  const formDataRequest: genPatientProps = {
    patient: patient?.values,
    residentAddress: address?.values,
    cardAddress: addressRelative?.values,
    familyData: families?.values,
    contacts: contacts?.values,
    responsible: emergencyContact?.values,
  }

  const formData = genPatient(formDataRequest)
  payload.value = formData

  try {
    const result = await postPatient(formData)
    if (result.success) {
      console.log('Patient created successfully:', result.body)
      // Navigate to patient list or show success message
      await navigateTo('/client/patient')
    } else {
      console.error('Failed to create patient:', result)
      // Handle error - show error message to user
    }
  } catch (error) {
    console.error('Error creating patient:', error)
    // Handle error - show error message to user
  }
}
// #endregion

// #region Watchers
// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
watch(
  () => personAddressForm.value?.values,
  (newAddressValues) => {
    // Cek apakah alamat KTP harus sama dengan alamat sekarang
    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'

    if (isSameAddress && newAddressValues && personAddressRelativeForm.value) {
      // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
      personAddressRelativeForm.value.setValues(
        {
          ...personAddressRelativeForm.value.values,
          provinceCode: newAddressValues.provinceCode || '',
          regencyId: newAddressValues.regencyId || '',
          districtId: newAddressValues.districtId || '',
          villageId: newAddressValues.villageId || '',
          zipCode: newAddressValues.zipCode || '',
          address: newAddressValues.address || '',
          rt: newAddressValues.rt || '',
          rw: newAddressValues.rw || '',
        },
        false,
      )
    }
  },
  { deep: true },
)

// Watcher untuk memantau perubahan isSameAddress
watch(
  () => personAddressRelativeForm.value?.values?.isSameAddress,
  (isSameAddress) => {
    if (isSameAddress === '1' && personAddressForm.value?.values && personAddressRelativeForm.value) {
      // Ketika isSameAddress diubah menjadi '1', copy alamat sekarang ke alamat KTP
      const currentAddressValues = personAddressForm.value.values
      personAddressRelativeForm.value.setValues(
        {
          ...personAddressRelativeForm.value.values,
          provinceCode: currentAddressValues.provinceCode || '',
          regencyId: currentAddressValues.regencyId || '',
          districtId: currentAddressValues.districtId || '',
          villageId: currentAddressValues.villageId || '',
          zipCode: currentAddressValues.zipCode || '',
          address: currentAddressValues.address || '',
          rt: currentAddressValues.rt || '',
          rw: currentAddressValues.rw || '',
        },
        false,
      )
    }
  },
)
// #endregion
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
  <AppPatientEntryForm
    ref="personPatientForm"
    :schema="PatientSchema"
  />
  <AppPersonAddressEntryForm
    ref="personAddressForm"
    title="Alamat Sekarang"
    :schema="PersonAddressSchema"
  />
  <AppPersonAddressEntryFormRelative
    ref="personAddressRelativeForm"
    title="Alamat KTP"
    :schema="PersonAddressRelativeSchema"
  />
  <AppPersonFamilyParentsForm
    ref="personFamilyForm"
    title="Identitas Orang Tua"
    :schema="PersonFamiliesSchema"
  />
  <AppPersonContactEntryForm
    ref="personContactForm"
    title="Kontak Pasien"
    :contact-limit="10"
    :schema="PersonContactListSchema"
  />
  <AppPersonRelativeEntryForm
    ref="personEmergencyContactRelative"
    title="Penanggung Jawab"
    :schema="ResponsiblePersonSchema"
  />

  <div class="my-2 flex justify-end py-2">
    <Action @click="submitAll" />
  </div>
</template>

<style scoped>
/* component style */
</style>