simrsx-fe/app/components/app/patient/preview.vue

<script setup lang="ts">
import type { Person } from '~/models/person'
import type { PersonAddress } from '~/models/person-address'
import type { PersonContact } from '~/models/person-contact'
import type { PersonRelative } from '~/models/person-relative'

import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'

import { educationCodes, genderCodes, personContactTypes, relationshipCodes, religionCodes } from '~/lib/constants'
import { mapToComboboxOptList } from '~/lib/utils'

// #region Props & Emits
const props = defineProps<{
  person: Person
  personAddresses: PersonAddress[]
  personContacts: PersonContact[]
  personRelatives: PersonRelative[]
}>()

const emit = defineEmits<{
  (e: 'click', type: string): void
}>()

// #endregion

// #region State & Computed
const genderOptions = mapToComboboxOptList(genderCodes)
const religionOptions = mapToComboboxOptList(religionCodes)
const educationOptions = mapToComboboxOptList(educationCodes)
const relationshipOptions = mapToComboboxOptList(relationshipCodes)
const personContactTypeOptions = mapToComboboxOptList(personContactTypes)

const residentAddress = 'Jl. Puncak Borobudur Blok M No. 321, Lowokwaru, Kota Malang, Jawa Timur'
const primaryAddress = 'Perumahan Araya Cluster B, No 22, Blimbing, Kota Malang, Jawa Timur'

const patientAge = computed(() => {
  if (!props.person.birthDate) {
    return '-'
  }
  const birthDate = new Date(props.person.birthDate)
  const today = new Date()
  let age = today.getFullYear() - birthDate.getFullYear()
  const monthDiff = today.getMonth() - birthDate.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--
  }
  return age
})
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
function onClick(type: string) {
  emit('click', type)
}
// #endregion

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

<template>
  <DetailSection title="Data Pasien">
    <DetailRow label="Nomor ID">{{ person.id || '-' }}</DetailRow>
    <DetailRow label="Sapaan">{{ person.alias || '-' }}</DetailRow>
    <DetailRow label="Nama Lengkap">{{ person.name || '-' }}</DetailRow>
    <DetailRow label="Tempat, tanggal lahir">
      {{ person.birthRegency_code || '-' }},
      {{ person.birthDate ? new Date(person.birthDate).toLocaleDateString() : '-' }}
    </DetailRow>
    <DetailRow label="Usia">{{ patientAge || '-' }}</DetailRow>
    <DetailRow label="Tanggal Daftar">
      {{ person.createdAt ? new Date(person.createdAt).toLocaleDateString() : '-' }}
    </DetailRow>
    <DetailRow label="Jenis Kelamin">
      {{ genderOptions.find((item) => item.code === person.gender_code)?.label || '-' }}
    </DetailRow>

    <DetailRow label="NIK">{{ person.residentIdentityNumber || '-' }}</DetailRow>
    <DetailRow label="No. SIM">{{ person.drivingLicenseNumber || '-' }}</DetailRow>
    <DetailRow label="No. Paspor">{{ person.passportNumber || '-' }}</DetailRow>

    <DetailRow label="Agama">
      {{ religionOptions.find((item) => item.code === person.religion_code)?.label || '-' }}
    </DetailRow>
    <DetailRow label="Suku">{{ person.ethnic_code || '-' }}</DetailRow>
    <DetailRow label="Bahasa">{{ person.language_code || '-' }}</DetailRow>
    <DetailRow label="Pendidikan">
      {{ educationOptions.find((item) => item.code === person.education_code)?.label || '-' }}
    </DetailRow>
    <DetailRow label="Pekerjaan">{{ person.occupation_name || '-' }}</DetailRow>
  </DetailSection>

  <DetailSection title="Alamat">
    <DetailRow label="Alamat Domisili">{{ residentAddress || '-' }}</DetailRow>
    <DetailRow label="Alamat KTP">{{ primaryAddress || '-' }}</DetailRow>
  </DetailSection>
  <DetailSection title="Kontak">
    <template v-if="personContacts && personContacts.length > 0">
      <template
        v-for="contactType in personContactTypeOptions"
        :key="contactType.code"
      >
        <DetailRow :label="contactType.label">
          {{ personContacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
        </DetailRow>
      </template>
    </template>
    <template v-else>
      <DetailRow label="Kontak">-</DetailRow>
    </template>
  </DetailSection>
  <DetailSection title="Penanggung Jawab">
    <template v-if="personRelatives && personRelatives.filter((rel) => rel.responsible).length > 0">
      <template
        v-for="(relative, index) in personRelatives.filter((rel) => rel.responsible)"
        :key="relative.id"
      >
        <div
          v-if="index > 0"
          class="mt-3 border-t border-gray-200 pt-3"
        ></div>
        <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
        <DetailRow label="Hubungan">
          {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
        </DetailRow>
        <DetailRow label="Jenis Kelamin">
          {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
        </DetailRow>
        <DetailRow label="Pendidikan">
          {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
        </DetailRow>
        <DetailRow label="Pekerjaan">{{ relative.occupation_name || '-' }}</DetailRow>
        <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
        <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
      </template>
    </template>
    <template v-else>
      <DetailRow label="Penanggung Jawab">-</DetailRow>
    </template>
  </DetailSection>
  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
    <PubMyUiNavFooterBaEd @click="onClick" />
  </div>
</template>

<style scoped></style>