munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit-mode: unwrap detail data and use strict type

Browse Source 
refactor(patient-form): simplify address synchronization logic

- Extract address sync logic into helper functions
- Remove unused schema imports
- Streamline mounted hook with new loadInitData function
- Consolidate watchers into single efficient watcher

feat(forms): add readonly support across all form components

Implement readonly state handling for patient, relative, contact, and address forms
Add isDisabled prop to all form fields to support readonly mode
Update form components to respect isReadonly prop from parent

refactor(patient-form): reorganize imports and improve type usage

- Group related imports and move type imports to the top
- Replace genPatient with genPatientEntity for better type safety
- Remove console.log statement
- Fix formatting and indentation issues
This commit is contained in:
Khafid Prayoga
2025-12-06 09:13:28 +07:00
parent 1f6ca8a7f9
commit 05e2f32197
18 changed files with 392 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/patient/entry-form.vue
+50 -4
View File
@@ -27,8 +27,35 @@ import {
} from './fields'
interface FormData extends PatientFormData {}
// Type untuk initial values (sebelum transform schema)
interface PatientFormInput {
identityNumber?: string
drivingLicenseNumber?: string
passportNumber?: string
fullName?: string
isNewBorn?: 'YA' | 'TIDAK'
gender?: string
birthPlace?: string
birthDate?: string
education?: string
job?: string
maritalStatus?: string
nationality?: string
ethnicity?: string
language?: string
religion?: string
communicationBarrier?: 'YA' | 'TIDAK'
disability?: 'YA' | 'TIDAK'
disabilityType?: string
note?: string
residentIdentityFile?: File
familyIdentityFile?: File
}
interface Props {
initialValues?: FormData
isReadonly: boolean
initialValues?: PatientFormInput
}
const props = defineProps<Props>()
@@ -37,7 +64,7 @@ const formSchema = toTypedSchema(PatientSchema)
const { values, resetForm, setValues, validate } = useForm<FormData>({
name: 'patientForm',
validationSchema: formSchema,
initialValues: props.initialValues && {},
initialValues: (props.initialValues ?? {}) as any,
validateOnMount: false,
})
@@ -61,6 +88,7 @@ defineExpose({
label="No. KTP"
placeholder="Masukkan NIK"
numeric-only
:is-disabled="isReadonly"
/>
<InputBase
field-name="drivingLicenseNumber"
@@ -68,12 +96,14 @@ defineExpose({
placeholder="Masukkan nomor SIM"
numeric-only
:max-length="20"
:is-disabled="isReadonly"
/>
<InputBase
field-name="passportNumber"
label="No. Paspor"
placeholder="Masukkan nomor paspor"
:max-length="20"
:is-disabled="isReadonly"
/>
<InputName
field-name-alias="alias"
@@ -81,46 +111,54 @@ defineExpose({
label-for-input="Nama Lengkap"
placeholder="Masukkan nama lengkap pasien"
is-required
:is-disabled="isReadonly"
/>
<RadioNewborn
field-name="isNewBorn"
label="Pasien Bayi"
placeholder="Pilih status pasien"
is-required
:is-disabled="isReadonly"
/>
<SelectGender
field-name="gender"
label="Jenis Kelamin"
placeholder="Pilih jenis kelamin"
is-required
:is-disabled="isReadonly"
/>
<SelectBirthPlace
field-name="birthPlace"
label="Tempat Lahir"
placeholder="Pilih tempat lahir"
is-required
:is-disabled="isReadonly"
/>
<SelectDob
label="Tanggal Lahir"
is-required
:is-disabled="isReadonly"
/>
<SelectEducation
field-name="education"
label="Pendidikan"
placeholder="Pilih pendidikan"
is-required
:is-disabled="isReadonly"
/>
<SelectJob
field-name="job"
label="Pekerjaan"
placeholder="Pilih pekerjaan"
is-required
:is-disabled="isReadonly"
/>
<SelectMaritalStatus
field-name="maritalStatus"
label="Status Perkawinan"
placeholder="Pilih status Perkawinan"
is-required
:is-disabled="isReadonly"
/>
<DE.Cell />
<RadioNationality
@@ -128,45 +166,51 @@ defineExpose({
label="Kebangsaan"
placeholder="Pilih kebangsaan"
is-required
:is-disabled="isReadonly"
/>
<SelectEthnicity
field-name="ethnicity"
label="Suku"
placeholder="Pilih suku bangsa"
:is-disabled="values.nationality !== 'WNI'"
:is-disabled="isReadonly || values.nationality !== 'WNI'"
/>
<SelectLanguage
field-name="language"
label="Bahasa"
placeholder="Pilih preferensi bahasa"
is-required
:is-disabled="isReadonly"
/>
<SelectReligion
field-name="religion"
label="Agama"
placeholder="Pilih agama"
is-required
:is-disabled="isReadonly"
/>
<RadioCommunicationBarrier
field-name="communicationBarrier"
label="Hambatan Berkomunikasi"
is-required
:is-disabled="isReadonly"
/>
<RadioDisability
field-name="disability"
label="Disabilitas"
is-required
:is-disabled="isReadonly"
/>
<SelectDisability
label="Jenis Disabilitas"
field-name="disabilityType"
:is-disabled="values.disability !== 'YA'"
:is-disabled="isReadonly || values.disability !== 'YA'"
:is-required="values.disability === 'YA'"
/>
<InputBase
field-name="note"
label="Kepercayaan"
placeholder="Contoh: tidak ingin diperiksa oleh dokter laki-laki"
:is-disabled="isReadonly"
/>
</DE.Block>
@@ -183,6 +227,7 @@ defineExpose({
placeholder="Unggah scan dokumen KTP"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
:is-disabled="isReadonly"
/>
<FileUpload
field-name="familyCardFile"
@@ -190,6 +235,7 @@ defineExpose({
placeholder="Unggah scan dokumen KK"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
:is-disabled="isReadonly"
/>
</DE.Block>
</form>
app/components/app/patient/fields/input-name.vue
+2
View File
@@ -17,6 +17,7 @@ defineProps<{
labelClass?: string
maxLength?: number
isRequired?: boolean
isDisabled?: boolean
}>()
</script>
@@ -40,6 +41,7 @@ defineProps<{
<FormItem>
<FormControl>
<Input
:disabled="isDisabled"
v-bind="componentField"
type="text"
:placeholder="placeholder"
app/components/app/patient/fields/radio-communication-barrier.vue
+9 -3
View File
@@ -15,6 +15,7 @@ const props = defineProps<{
radioItemClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -55,6 +56,7 @@ const genderOptions = [
<FormControl>
<RadioGroup
v-bind="componentField"
:disabled="isDisabled"
:class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
>
<div
@@ -63,20 +65,24 @@ const genderOptions = [
:class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
>
<RadioGroupItem
:disabled="isDisabled"
:id="`${fieldName}-${index}`"
:value="option.value"
:class="
cn(
'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
'peer relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
containerClass,
)
"
/>
<RadioLabel
:for="`${fieldName}-${index}`"
:for="isDisabled ? undefined : `${fieldName}-${index}`"
:class="
cn(
'cursor-pointer select-none font-normal text-xs leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
'select-none text-xs !font-normal leading-none transition-colors sm:text-sm',
isDisabled
? 'cursor-not-allowed opacity-70'
: 'cursor-pointer hover:text-primary',
labelClass,
)
"
app/components/app/patient/fields/radio-disability.vue
+9 -3
View File
@@ -15,6 +15,7 @@ const props = defineProps<{
radioItemClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -55,6 +56,7 @@ const dissabilityOptions = [
<FormControl>
<RadioGroup
v-bind="componentField"
:disabled="isDisabled"
:class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
>
<div
@@ -63,20 +65,24 @@ const dissabilityOptions = [
:class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
>
<RadioGroupItem
:disabled="isDisabled"
:id="`${fieldName}-${index}`"
:value="option.value"
:class="
cn(
'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
'peer border-1 relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
containerClass,
)
"
/>
<RadioLabel
:for="`${fieldName}-${index}`"
:for="isDisabled ? undefined : `${fieldName}-${index}`"
:class="
cn(
'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
'select-none text-xs !font-normal leading-none transition-colors',
isDisabled
? 'cursor-not-allowed opacity-70'
: 'cursor-pointer hover:text-primary',
labelClass,
)
"
app/components/app/patient/fields/radio-nationality.vue
+9 -3
View File
@@ -15,6 +15,7 @@ const props = defineProps<{
radioItemClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -55,6 +56,7 @@ const nationalityOptions = [
<FormControl>
<RadioGroup
v-bind="componentField"
:disabled="isDisabled"
:class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
>
<div
@@ -63,20 +65,24 @@ const nationalityOptions = [
:class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
>
<RadioGroupItem
:disabled="isDisabled"
:id="`${fieldName}-${index}`"
:value="option.value"
:class="
cn(
'relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
'peer relative h-4 w-4 rounded-full border-1 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
containerClass,
)
"
/>
<RadioLabel
:for="`${fieldName}-${index}`"
:for="isDisabled ? undefined : `${fieldName}-${index}`"
:class="
cn(
'cursor-pointer select-none text-xs !font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
'select-none text-xs !font-normal leading-none transition-colors sm:text-sm',
isDisabled
? 'cursor-not-allowed opacity-70'
: 'cursor-pointer hover:text-primary',
labelClass,
)
"
app/components/app/patient/fields/radio-newborn.vue
+13 -4
View File
@@ -15,6 +15,7 @@ const props = defineProps<{
radioItemClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -34,7 +35,10 @@ const newbornOptions = [
</script>
<template>
<DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
<DE.Cell
:class="cn('radio-group-field', containerClass)"
:col-span="2"
>
<DE.Label
:label-for="fieldName"
:is-required="isRequired"
@@ -52,6 +56,7 @@ const newbornOptions = [
<FormItem>
<FormControl>
<RadioGroup
:disabled="isDisabled"
v-bind="componentField"
:class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
>
@@ -61,20 +66,24 @@ const newbornOptions = [
:class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
>
<RadioGroupItem
:disabled="isDisabled"
:id="`${fieldName}-${index}`"
:value="option.value"
:class="
cn(
'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
'peer relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
containerClass,
)
"
/>
<RadioLabel
:for="`${fieldName}-${index}`"
:for="isDisabled ? undefined : `${fieldName}-${index}`"
:class="
cn(
'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
'select-none text-xs !font-normal leading-none transition-colors',
isDisabled
? 'cursor-not-allowed opacity-70'
: 'cursor-pointer hover:text-primary',
labelClass,
)
"
app/components/app/patient/fields/select-dob.vue
+2
View File
@@ -16,6 +16,7 @@ const props = defineProps<{
fieldGroupClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -95,6 +96,7 @@ function calculateAge(birthDate: string | Date | undefined): string {
<FormItem>
<FormControl>
<Input
:disabled="isDisabled"
id="birthDate"
type="date"
min="1900-01-01"
app/components/app/patient/fields/select-job.vue
+3 -1
View File
@@ -16,6 +16,7 @@ const props = defineProps<{
fieldGroupClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -53,8 +54,9 @@ const jobOptions = mapToComboboxOptList(occupationCodes)
<FormItem>
<FormControl>
<Combobox
:id="fieldName"
v-bind="componentField"
:is-disabled="isDisabled"
:id="fieldName"
:items="jobOptions"
:placeholder="placeholder"
search-placeholder="Cari..."
app/components/app/patient/fields/select-lang.vue
+2
View File
@@ -15,6 +15,7 @@ const props = defineProps<{
fieldGroupClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -60,6 +61,7 @@ const langOptions = [
<FormItem>
<FormControl>
<Select
:is-disabled="isDisabled"
:id="fieldName"
v-bind="componentField"
:items="langOptions"
app/components/app/patient/fields/select-marital-status.vue
+3 -1
View File
@@ -14,6 +14,7 @@ const props = defineProps<{
fieldGroupClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
placeholder?: string
}>()
@@ -56,8 +57,9 @@ const maritalStatusOptions = [
<FormItem>
<FormControl>
<Select
:id="fieldName"
v-bind="componentField"
:is-disabled="isDisabled"
:id="fieldName"
:items="maritalStatusOptions"
:placeholder="placeholder"
:preserve-order="true"
app/components/app/patient/fields/select-religion.vue
+2
View File
@@ -16,6 +16,7 @@ const props = defineProps<{
fieldGroupClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -68,6 +69,7 @@ const religionOptions = Array.from(
<FormItem>
<FormControl>
<Select
:is-disabled="isDisabled"
:id="fieldName"
v-bind="componentField"
:items="religionOptions"
app/components/app/person-address/entry-form-relative.vue
+10 -8
View File
@@ -19,6 +19,7 @@ interface FormData extends PersonAddressRelativeFormData {}
interface Props {
title: string
isReadonly: boolean
conf?: {
withAddressName?: boolean
}
@@ -313,6 +314,7 @@ watch(
class="flex min-w-fit items-center space-x-2"
>
<RadioGroupItem
:disabled="isReadonly"
:id="`isSameAddress-${index}`"
:value="option.value"
class="relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5"
@@ -334,32 +336,32 @@ watch(
<SelectProvince
field-name="province_code"
placeholder="Pilih"
:is-disabled="isSameAddress"
:is-disabled="isReadonly || isSameAddress"
:is-required="!isSameAddress"
/>
<SelectRegency
field-name="regency_code"
:province-code="values.province_code"
:is-disabled="getFieldState('regency_code').disabled"
:is-disabled="isReadonly || getFieldState('regency_code').disabled"
:is-required="!isSameAddress"
/>
<SelectDistrict
field-name="district_code"
:regency-code="values.regency_code"
:is-disabled="getFieldState('district_code').disabled"
:is-disabled="isReadonly || getFieldState('district_code').disabled"
:is-required="!isSameAddress"
/>
<SelectVillage
field-name="village_code"
:district-code="values.district_code"
:is-disabled="getFieldState('village_code').disabled"
:is-disabled="isReadonly || getFieldState('village_code').disabled"
:is-required="!isSameAddress"
/>
<InputBase
field-name="address"
label="Alamat"
:placeholder="getFieldState('address').placeholder"
:is-disabled="getFieldState('address').disabled"
:is-disabled="isReadonly || getFieldState('address').disabled"
:is-required="!isSameAddress"
:col-span="2"
/>
@@ -370,13 +372,13 @@ watch(
numeric-only
:max-length="2"
:placeholder="getFieldState('rt').placeholder"
:is-disabled="getFieldState('rt').disabled"
:is-disabled="isReadonly || getFieldState('rt').disabled"
/>
<InputBase
field-name="rw"
label="RW"
:placeholder="getFieldState('rw').placeholder"
:is-disabled="getFieldState('rw').disabled"
:is-disabled="isReadonly || getFieldState('rw').disabled"
:max-length="2"
numeric-only
/>
@@ -385,7 +387,7 @@ watch(
field-name="postalRegion_code"
:village-code="values.village_code"
:placeholder="getFieldState('postalRegion_code').placeholder"
:is-disabled="getFieldState('postalRegion_code').disabled || !values.village_code"
:is-disabled="isReadonly || getFieldState('postalRegion_code').disabled || !values.village_code"
/>
</DE.Block>
</form>
app/components/app/person-address/entry-form.vue
+8
View File
@@ -15,6 +15,7 @@ interface FormData extends PersonAddressFormData {}
interface Props {
title: string
isReadonly: boolean
conf?: {
withAddressName?: boolean
}
@@ -188,21 +189,25 @@ watch(
<SelectProvince
field-name="province_code"
placeholder="Pilih"
:is-disabled="isReadonly"
is-required
/>
<SelectRegency
field-name="regency_code"
:province-code="values.province_code"
:is-disabled="isReadonly"
is-required
/>
<SelectDistrict
field-name="district_code"
:regency-code="values.regency_code"
:is-disabled="isReadonly"
is-required
/>
<SelectVillage
field-name="village_code"
:district-code="values.district_code"
:is-disabled="isReadonly"
is-required
/>
<InputBase
@@ -210,6 +215,7 @@ watch(
label="Alamat"
placeholder="Masukkan alamat"
is-required
:is-disabled="isReadonly"
:col-span="2"
/>
<DE.Cell class="flex-row gap-2">
@@ -220,6 +226,7 @@ watch(
placeholder="01"
numeric-only
:max-length="2"
:is-disabled="isReadonly"
/>
<InputBase
field-name="rw"
@@ -227,6 +234,7 @@ watch(
placeholder="02"
:max-length="2"
numeric-only
:is-disabled="isReadonly"
/>
</div>
</DE.Cell>
app/components/app/person-contact/entry-form.vue
+2 -4
View File
@@ -14,9 +14,9 @@ interface FormData extends PersonContactFormData {}
interface Props {
title: string
isReadonly: boolean
contactLimit?: number
initialValues?: any
isReadonly?: boolean
}
const props = defineProps<Props>()
@@ -36,8 +36,6 @@ defineExpose({
setValues,
values,
})
const { title = 'Kontak Pasien', isReadonly = false } = props
</script>
<template>
@@ -94,7 +92,7 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
preset="add"
label="Tambah Kontak"
title="Tambah Kontak ke Daftar Kontak"
:disabled="fields.length >= contactLimit || isReadonly"
:disabled="isReadonly || fields.length >= contactLimit"
:full-width-mobile="true"
class="mt-4"
@click="push({ contactType: '', contactNumber: '' })"
app/components/app/person-relative/entry-form.vue
+2 -2
View File
@@ -14,7 +14,7 @@ interface FormData extends PersonRelativeFormData {}
interface Props {
title: string
isReadonly?: boolean
isReadonly: boolean
initialValues?: any
contactLimit?: number
}
@@ -36,7 +36,7 @@ defineExpose({
values: values,
})
const { title = 'Kontak Pasien', isReadonly = false, contactLimit = 5 } = props
const { title = 'Kontak Pasien', contactLimit = 5 } = props
</script>
<template>
app/components/app/person/family-parents-form.vue
+8 -4
View File
@@ -14,6 +14,7 @@ interface FormData extends PersonFamiliesFormData {}
interface Props {
title: string
isReadonly: boolean
initialValues?: any
}
@@ -84,7 +85,10 @@ watch(
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div class="mb-6">
<RadioParentsInput field-name="shareFamilyData" />
<RadioParentsInput
field-name="shareFamilyData"
:is-disabled="isReadonly"
/>
</div>
<div
@@ -111,21 +115,21 @@ watch(
:field-name="`families[${idx}].name`"
label="Nama"
placeholder="Masukkan nama"
:is-disabled="isFamilyFormDisabled"
:is-disabled="isReadonly || isFamilyFormDisabled"
/>
<SelectEducation
:field-name="`families[${idx}].education`"
label="Pendidikan"
placeholder="Pilih"
:is-disabled="isFamilyFormDisabled"
:is-disabled="isReadonly || isFamilyFormDisabled"
/>
<InputBase
:field-name="`families[${idx}].occupation`"
label="Pekerjaan"
placeholder="Masukkan pekerjaan"
:is-disabled="isFamilyFormDisabled"
:is-disabled="isReadonly || isFamilyFormDisabled"
/>
</DE.Block>
</div>
app/components/app/person/fields/radio-parents-input.vue
+7 -3
View File
@@ -16,6 +16,7 @@ const props = defineProps<{
radioItemClass?: string
labelClass?: string
isRequired?: boolean
isDisabled?: boolean
}>()
const {
@@ -55,6 +56,7 @@ const residenceOptions = [
<FormControl>
<RadioGroup
v-bind="componentField"
:disabled="isDisabled"
:class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
>
<div
@@ -63,20 +65,22 @@ const residenceOptions = [
:class="cn('flex min-w-fit items-center space-x-2', radioItemClass)"
>
<RadioGroupItem
:disabled="isDisabled"
:id="`${fieldName}-${index}`"
:value="option.value"
:class="
cn(
'relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
'peer relative h-4 w-4 rounded-full border-2 border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
containerClass,
)
"
/>
<RadioLabel
:for="`${fieldName}-${index}`"
:for="isDisabled ? undefined : `${fieldName}-${index}`"
:class="
cn(
'cursor-pointer select-none text-xs font-medium leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
'select-none text-xs font-medium leading-none transition-colors sm:text-sm',
isDisabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer hover:text-primary',
labelClass,
)
"
app/components/content/patient/form.vue
+251 -137
View File
@@ -1,20 +1,13 @@
<script setup lang="ts">
// type
import { withBase } from '~/models/_base'
import type { PatientEntity, PatientBase, Patient, genPatientProps } from '~/models/patient'
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 type { ExposedForm } from '~/types/form'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
// schema and models
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 type { PatientEntity, PatientBase, Patient, genPatientProps } from '~/models/patient'
import { genPatientEntity } from '~/models/patient'
// components
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
@@ -29,7 +22,6 @@ import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-f
import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
import {
// for form entry
isReadonly,
isProcessing,
isFormEntryDialogOpen,
@@ -41,6 +33,14 @@ import {
import { toast } from '~/components/pub/ui/toast'
// reverse mapping untuk contact type (backend → UI)
const reverseContactTypeMapping: Record<string, string> = {
'm-phone': 'phoneNumber',
phone: 'homePhoneNumber',
email: 'email',
fax: 'fax',
}
// #region Props & Emits
const props = defineProps<{
callbackUrl?: string
@@ -70,51 +70,178 @@ const patient = ref(
personRelatives: [],
}),
)
// Key untuk memaksa re-render form saat data berubah
const formKey = ref(0)
// Computed: unwrap patient data untuk form patient
const patientFormInitialValues = computed(() => {
const p = patient.value
const person = p.person
if (!person || !person.name) return undefined
return {
identityNumber: person.residentIdentityNumber || '',
drivingLicenseNumber: person.drivingLicenseNumber || '',
passportNumber: person.passportNumber || '',
fullName: person.name || '',
isNewBorn: (p.newBornStatus ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
gender: person.gender_code || '',
birthPlace: person.birthRegency_code || '',
birthDate: person.birthDate ? new Date(person.birthDate).toISOString().split('T')[0] : '',
education: person.education_code || '',
job: person.occupation_code || '',
maritalStatus: '', // perlu mapping jika ada field ini
nationality: person.nationality || 'WNI',
ethnicity: person.ethnic_code || '',
language: person.language_code || '',
religion: person.religion_code || '',
communicationBarrier: (person.communicationIssueStatus ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
disability: (person.disability ? 'YA' : 'TIDAK') as 'YA' | 'TIDAK',
disabilityType: person.disability || '',
note: '',
}
})
// Computed: unwrap alamat domisili (alamat sekarang)
const addressFormInitialValues = computed(() => {
const addresses = patient.value.person?.addresses || patient.value.personAddresses || []
const domicileAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'domicile')
if (!domicileAddress) return undefined
// extract kode wilayah dari preload data
const village = domicileAddress.postalRegion?.village
const district = village?.district
const regency = district?.regency
const province = regency?.province
return {
locationType_code: 'domicile',
province_code: province?.code || '',
regency_code: regency?.code || '',
district_code: district?.code || '',
village_code: village?.code || domicileAddress.village_code || '',
postalRegion_code: domicileAddress.postalRegion_code || '',
address: domicileAddress.address || '',
rt: domicileAddress.rt || '',
rw: domicileAddress.rw || '',
}
})
// Computed: unwrap alamat KTP (identity)
const addressRelativeFormInitialValues = computed(() => {
const addresses = patient.value.person?.addresses || patient.value.personAddresses || []
const domicileAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'domicile')
const identityAddress = addresses.find((a: PersonAddress) => a.locationType_code === 'identity')
// Jika tidak ada alamat KTP terpisah, berarti sama dengan domisili
if (!identityAddress) {
return {
isSameAddress: '1',
locationType_code: 'identity',
}
}
// Cek apakah alamat sama dengan domisili
const isSame =
domicileAddress &&
identityAddress.village_code === domicileAddress.village_code &&
identityAddress.address === domicileAddress.address
if (isSame) {
return {
isSameAddress: '1',
locationType_code: 'identity',
}
}
// extract kode wilayah dari preload data
const village = identityAddress.postalRegion?.village
const district = village?.district
const regency = district?.regency
const province = regency?.province
return {
isSameAddress: '0',
locationType_code: 'identity',
province_code: province?.code || '',
regency_code: regency?.code || '',
district_code: district?.code || '',
village_code: village?.code || identityAddress.village_code || '',
postalRegion_code: identityAddress.postalRegion_code || '',
address: identityAddress.address || '',
rt: identityAddress.rt || '',
rw: identityAddress.rw || '',
}
})
// Computed: unwrap data orang tua
const familyFormInitialValues = computed(() => {
const relatives = patient.value.person?.relatives || patient.value.personRelatives || []
const parents = relatives.filter(
(r: PersonRelative) => !r.responsible && (r.relationship_code === 'mother' || r.relationship_code === 'father'),
)
if (parents.length === 0) {
return {
shareFamilyData: '0',
families: [],
}
}
return {
shareFamilyData: '1',
families: parents.map((parent: PersonRelative) => ({
relation: parent.relationship_code || '',
name: parent.name || '',
education: parent.education_code || '',
occupation: parent.occupation_name || parent.occupation_code || '',
})),
}
})
// Computed: unwrap kontak pasien
const contactFormInitialValues = computed(() => {
const contacts = patient.value.person?.contacts || patient.value.personContacts || []
if (contacts.length === 0) return undefined
return {
contacts: contacts.map((contact: PersonContact) => ({
contactType: reverseContactTypeMapping[contact.type_code] || contact.type_code || '',
contactNumber: contact.value || '',
})),
}
})
// Computed: unwrap penanggung jawab
const responsibleFormInitialValues = computed(() => {
const relatives = patient.value.person?.relatives || patient.value.personRelatives || []
const responsibles = relatives.filter((r: PersonRelative) => r.responsible === true)
if (responsibles.length === 0) return undefined
return {
contacts: responsibles.map((r: PersonRelative) => ({
relation: r.relationship_code || '',
name: r.name || '',
address: r.address || '',
phone: r.phoneNumber || '',
})),
}
})
// #endregion
// #region Lifecycle Hooks
onMounted(() => {
// Initial synchronization when forms are mounted and isSameAddress is true by default
nextTick(() => {
const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
if (
(isSameAddress === true || isSameAddress === '1') &&
personAddressForm.value?.values &&
personAddressRelativeForm.value
) {
const currentAddressValues = personAddressForm.value.values
if (Object.keys(currentAddressValues).length > 0) {
personAddressRelativeForm.value.setValues(
{
...personAddressRelativeForm.value.values,
province_code: currentAddressValues.province_code || undefined,
regency_code: currentAddressValues.regency_code || undefined,
district_code: currentAddressValues.district_code || undefined,
village_code: currentAddressValues.village_code || undefined,
postalRegion_code: currentAddressValues.postalRegion_code || undefined,
address: currentAddressValues.address || undefined,
rt: currentAddressValues.rt || undefined,
rw: currentAddressValues.rw || undefined,
},
false,
)
}
}
})
onMounted(async () => {
// if edit mode, fetch patient detail
if (props.mode === 'edit' && props.patientId) {
void getPatientDetail(props.patientId as number).then((v) => {
if (v.success) {
patient.value = v.body.data || {}
}
})
await loadInitData(props.patientId)
}
})
// #endregion
// #region Functions
async function composeFormData(): Promise<Patient> {
async function composeFormData(): Promise<PatientEntity> {
const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
personPatientForm.value?.validate(),
personAddressForm.value?.validate(),
@@ -141,7 +268,7 @@ async function composeFormData(): Promise<Patient> {
responsible: emergencyContact?.values,
}
const formData = genPatient()
const formData = genPatientEntity(formDataRequest)
if (patient?.values.residentIdentityFile) {
residentIdentityFile.value = patient?.values.residentIdentityFile
@@ -156,6 +283,20 @@ async function composeFormData(): Promise<Patient> {
// #endregion region
// #region Utilities & event handlers
async function loadInitData(id: number | string) {
isProcessing.value = true
try {
const response = await getPatientDetail(id as number)
if (response.success) {
patient.value = response.body.data || {}
// Increment key untuk memaksa re-render form dengan data baru
formKey.value++
}
} finally {
isProcessing.value = false
}
}
async function handleActionClick(eventType: string) {
try {
if (eventType === 'submit') {
@@ -197,10 +338,12 @@ async function handleActionClick(eventType: string) {
return
}
// handleCancelForm()
}
if (eventType === 'back') {
await navigateTo({
name: 'client-patient',
})
// handleCancelForm()
}
} catch (error) {
// Show error toast to user
@@ -228,124 +371,95 @@ async function handleActionClick(eventType: string) {
// #endregion
// #region Watchers
// Watcher untuk sinkronisasi initial ketika kedua form sudah ready
// Helper: Cek apakah isSameAddress aktif
const isSameAddressActive = () => {
const val = personAddressRelativeForm.value?.values?.isSameAddress
return val === true || val === '1'
}
// Helper: Sinkronkan alamat sekarang ke alamat KTP
const syncAddressToRelative = () => {
const source = personAddressForm.value?.values
const target = personAddressRelativeForm.value
if (!source || !target) return
const addressFields = [
'province_code',
'regency_code',
'district_code',
'village_code',
'postalRegion_code',
'address',
'rt',
'rw',
] as const
const syncedValues = Object.fromEntries(addressFields.map((key) => [key, source[key] || undefined]))
target.setValues({ ...target.values, ...syncedValues }, false)
}
// Watcher: Sinkronisasi saat nilai alamat berubah atau isSameAddress diaktifkan
watch(
[() => personAddressForm.value, () => personAddressRelativeForm.value],
([addressForm, relativeForm]) => {
if (addressForm && relativeForm) {
// Trigger initial sync jika isSameAddress adalah true
nextTick(() => {
const isSameAddress = relativeForm.values?.isSameAddress
if ((isSameAddress === true || isSameAddress === '1') && addressForm.values) {
const currentAddressValues = addressForm.values
if (Object.keys(currentAddressValues).length > 0) {
relativeForm.setValues(
{
...relativeForm.values,
province_code: currentAddressValues.province_code || undefined,
regency_code: currentAddressValues.regency_code || undefined,
district_code: currentAddressValues.district_code || undefined,
village_code: currentAddressValues.village_code || undefined,
postalRegion_code: currentAddressValues.postalRegion_code || undefined,
address: currentAddressValues.address || undefined,
rt: currentAddressValues.rt || undefined,
rw: currentAddressValues.rw || undefined,
},
false,
)
}
}
})
}
},
{ immediate: true },
)
// Watcher untuk sinkronisasi alamat ketika isSameAddress = true
watch(
() => personAddressForm.value?.values,
(newAddressValues) => {
// Cek apakah alamat KTP harus sama dengan alamat sekarang
const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress
if ((isSameAddress === true || isSameAddress === '1') && newAddressValues && personAddressRelativeForm.value) {
// Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
personAddressRelativeForm.value.setValues(
{
...personAddressRelativeForm.value.values,
province_code: newAddressValues.province_code || undefined,
regency_code: newAddressValues.regency_code || undefined,
district_code: newAddressValues.district_code || undefined,
village_code: newAddressValues.village_code || undefined,
postalRegion_code: newAddressValues.postalRegion_code || undefined,
address: newAddressValues.address || undefined,
rt: newAddressValues.rt || undefined,
rw: newAddressValues.rw || undefined,
},
false,
)
}
},
{ deep: true },
)
// Watcher untuk memantau perubahan isSameAddress
watch(
() => personAddressRelativeForm.value?.values?.isSameAddress,
(isSameAddress) => {
if (
(isSameAddress === true || isSameAddress === '1') &&
personAddressForm.value?.values &&
personAddressRelativeForm.value?.values
) {
// Ketika isSameAddress diubah menjadi true, copy alamat sekarang ke alamat KTP
const currentAddressValues = personAddressForm.value.values
personAddressRelativeForm.value.setValues(
{
...personAddressRelativeForm.value.values,
province_code: currentAddressValues.province_code || undefined,
regency_code: currentAddressValues.regency_code || undefined,
district_code: currentAddressValues.district_code || undefined,
village_code: currentAddressValues.village_code || undefined,
postalRegion_code: currentAddressValues.postalRegion_code || undefined,
address: currentAddressValues.address || undefined,
rt: currentAddressValues.rt || undefined,
rw: currentAddressValues.rw || undefined,
},
false,
)
[() => personAddressForm.value?.values, () => personAddressRelativeForm.value?.values?.isSameAddress],
() => {
if (isSameAddressActive()) {
syncAddressToRelative()
}
},
{ deep: true, immediate: true },
)
// #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" />
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
{{ mode === 'edit' ? 'Edit Pasien' : 'Tambah Pasien' }}
</div>
<AppPatientEntryForm
:key="`patient-${formKey}`"
ref="personPatientForm"
:is-readonly="isProcessing || isReadonly"
:initial-values="patientFormInitialValues"
/>
<div class="h-6"></div>
<AppPersonAddressEntryForm
:key="`address-${formKey}`"
ref="personAddressForm"
title="Alamat Sekarang"
:is-readonly="isProcessing || isReadonly"
:initial-values="addressFormInitialValues"
/>
<div class="h-6"></div>
<AppPersonAddressEntryFormRelative
:key="`address-rel-${formKey}`"
ref="personAddressRelativeForm"
title="Alamat KTP"
:is-readonly="isProcessing || isReadonly"
:initial-values="addressRelativeFormInitialValues"
/>
<div class="h-6"></div>
<AppPersonFamilyParentsForm
:key="`family-${formKey}`"
ref="personFamilyForm"
title="Identitas Orang Tua"
:is-readonly="isProcessing || isReadonly"
:initial-values="familyFormInitialValues"
/>
<div class="h-6"></div>
<AppPersonContactEntryForm
:key="`contact-${formKey}`"
ref="personContactForm"
title="Kontak Pasien"
:is-readonly="isProcessing || isReadonly"
:initial-values="contactFormInitialValues"
/>
<AppPersonRelativeEntryForm
:key="`responsible-${formKey}`"
ref="personEmergencyContactRelative"
title="Penanggung Jawab"
:is-readonly="isProcessing || isReadonly"
:initial-values="responsibleFormInitialValues"
/>
<div class="my-2 flex justify-end py-2">