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

<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
import InputName from './_common/input-name.vue'
import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
import RadioDisability from './_common/radio-disability.vue'
import SelectGender from './_common/select-gender.vue'
import RadioNationality from './_common/radio-nationality.vue'
import RadioNewborn from './_common/radio-newborn.vue'
import SelectBirthPlace from '~/components/app/person/_common/select-birth-place.vue'
import SelectDisability from './_common/select-disability.vue'
import SelectDob from './_common/select-dob.vue'
import SelectEducation from './_common/select-education.vue'
import SelectEthnicity from './_common/select-ethnicity.vue'
import SelectJob from './_common/select-job.vue'
import SelectLanguage from './_common/select-lang.vue'
import SelectMaritalStatus from './_common/select-marital-status.vue'
import SelectReligion from './_common/select-religion.vue'
import Separator from '~/components/pub/ui/separator/Separator.vue'

import * as DE from '~/components/pub/my-ui/doc-entry'

const props = defineProps<{
  schema: any
  initialValues?: any
  errors?: FormErrors
}>()

const formSchema = toTypedSchema(props.schema)
const formRef = ref()

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})
</script>

<template>
  <Form
    ref="formRef"
    v-slot="{ values }"
    as=""
    keep-values
    :validation-schema="formSchema"
    :validate-on-mount="false"
    validation-mode="onSubmit"
    :initial-values="initialValues ? initialValues : {}"
  >
    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Data Diri Pasien</p>
    <DE.Block :col-count="4" :cell-flex="false">
      <InputBase
        field-name="identityNumber"
        label="No. KTP"
        placeholder="Masukkan NIK"
        :errors="errors"
        numeric-only
      />
      <InputBase
        field-name="drivingLicenseNumber"
        label="No. SIM"
        placeholder="Masukkan nomor SIM"
        numeric-only
        :max-length="20"
        :errors="errors"
      />
      <InputBase
        field-name="passportNumber"
        label="No. Paspor"
        placeholder="Masukkan nomor paspor"
        :max-length="20"
        :errors="errors"
      />
      <InputName
        field-name-alias="alias"
        field-name-input="fullName"
        label-for-input="Nama Lengkap"
        placeholder="Masukkan nama lengkap pasien"
        :errors="errors"
        is-required
      />
      <RadioNewborn
        field-name="isNewBorn"
        label="Pasien Bayi"
        placeholder="Pilih status pasien"
        :errors="errors"
        is-required
      />
      <SelectGender
        field-name="gender"
        label="Jenis Kelamin"
        placeholder="Pilih jenis kelamin"
        :errors="errors"
        is-required
      />
      <SelectBirthPlace
        field-name="birthPlace"
        label="Tempat Lahir"
        placeholder="Pilih tempat lahir"
        :errors="errors"
        is-required
      />
      <SelectDob
        label="Tanggal Lahir"
        :errors="errors"
        is-required
      />
      <SelectEducation
        field-name="education"
        label="Pendidikan"
        placeholder="Pilih pendidikan"
        :errors="errors"
        is-required
      />
      <SelectJob
        field-name="job"
        label="Pekerjaan"
        placeholder="Pilih pekerjaan"
        :errors="errors"
        is-required
      />
      <SelectMaritalStatus
        field-name="maritalStatus"
        label="Status Perkawinan"
        placeholder="Pilih status Perkawinan"
        :errors="errors"
        is-required
      />
      <DE.Cell />
      <RadioNationality
        field-name="nationality"
        label="Kebangsaan"
        placeholder="Pilih kebangsaan"
        :errors="errors"
        is-required
      />
      <SelectEthnicity
        field-name="ethnicity"
        label="Suku"
        placeholder="Pilih suku bangsa"
        :errors="errors"
        :is-disabled="values.nationality !== 'WNI'"
      />
      <SelectLanguage
        field-name="language"
        label="Bahasa"
        placeholder="Pilih preferensi bahasa"
        :errors="errors"
        is-required
      />
      <SelectReligion
        field-name="religion"
        label="Agama"
        placeholder="Pilih agama"
        :errors="errors"
        is-required
      />
      <RadioCommunicationBarrier
        field-name="communicationBarrier"
        label="Hambatan Berkomunikasi"
        :errors="errors"
        is-required
      />
      <RadioDisability
        field-name="disability"
        label="Disabilitas"
        :errors="errors"
        is-required
      />
      <SelectDisability
        label="Jenis Disabilitas"
        field-name="disabilityType"
        :errors="errors"
        :is-disabled="values.disability !== 'YA'"
        :is-required="values.disability === 'YA'"
      />
      <InputBase
        field-name="note"
        label="Kepercayaan"
        placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
        :errors="errors"
      />
    </DE.Block>

    <div class="h-6"></div>

    <p class="text-sm 2xl:text-base mb-2 2xl:mb-3 font-semibold">Dokumen Identitas</p>
    <DE.Block :col-count="2" :cell-flex="false">
      <FileUpload
        field-name="identityCardFile"
        label="Dokumen KTP"
        placeholder="Unggah scan dokumen KTP"
        :errors="errors"
        :accept="['pdf', 'jpg', 'png']"
        :max-size-mb="1"
      />
      <FileUpload
        field-name="familyCardFile"
        label="Dokumen KK"
        placeholder="Unggah scan dokumen KK"
        :errors="errors"
        :accept="['pdf', 'jpg', 'png']"
        :max-size-mb="1"
      />
    </DE.Block>
  </Form>
</template>