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'

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

import { InputBase, FileField as FileUpload } from '~/components/pub/my-ui/form'
import { SelectBirthPlace } from '~/components/app/person/fields'
import {
  InputName,
  RadioCommunicationBarrier,
  RadioDisability,
  SelectGender,
  RadioNationality,
  RadioNewborn,
  SelectDisability,
  SelectDob,
  SelectEducation,
  SelectEthnicity,
  SelectJob,
  SelectLang as SelectLanguage,
  SelectMaritalStatus,
  SelectReligion,
} from './fields'

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="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">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="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">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>