refactor(person-relative): update schema and form components for family data

- Change value format in radio-parents-input from '1'/'0' to 'yes'/'no'
- Remove default labels from select-education and select-job components
- Update schema to make fields optional and add new fields
- Modify family-parents-form to use new schema and improve UI
- Update patient form and models to align with schema changes

app/components/app/patient/fields/select-education.vue

@@ -21,7 +21,6 @@ const props = defineProps<{
 
 const {
   fieldName = 'education',
-  label = 'Pendidikan',
   placeholder = 'Pilih pendidikan terakhir',
   errors,
   class: containerClass,
@@ -47,6 +46,7 @@ const educationOptions = [
 <template>
   <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
     <DE.Label
+      v-if="label"
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
       :is-required="isRequired && !isDisabled"

app/components/app/patient/fields/select-job.vue

@@ -21,7 +21,6 @@ const props = defineProps<{
 
 const {
   fieldName = 'job',
-  label = 'Pekerjaan',
   placeholder = 'Pilih pekerjaan',
   errors,
   class: containerClass,
@@ -39,9 +38,10 @@ const jobOptions = mapToComboboxOptList(occupationCodes).map(({ label, value })
 <template>
   <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
     <DE.Label
+      v-if="label"
       :label-for="fieldName"
       :class="cn('select-field-label', labelClass)"
-      :is-required="isRequired"
+      :is-required="isRequired && !isDisabled"
     >
       {{ label }}
     </DE.Label>

app/components/app/person-relative/entry-form.vue

@@ -3,7 +3,7 @@ import { useForm, FieldArray } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 
 // schemas
-import { type PersonRelativeFormData, ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { type PersonRelativeFormData, ResponsiblePersonRelativeSchema } from '~/schemas/person-relative.schema'
 
 // components
 import * as DE from '~/components/pub/my-ui/doc-entry'
@@ -20,7 +20,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const formSchema = toTypedSchema(ResponsiblePersonSchema)
+const formSchema = toTypedSchema(ResponsiblePersonRelativeSchema)
 
 const { values, resetForm, setValues, validate } = useForm<FormData>({
   name: 'personRelativeForm',

app/components/app/person/family-parents-form.vue

@@ -1,37 +1,32 @@
 <script setup lang="ts">
-import type { PersonFamilyFormData as FamilyData, PersonFamiliesFormData } from '~/schemas/person-family.schema'
-import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { type PersonRelativeFormData, ResponsiblePersonRelativeSchema } from '~/schemas/person-relative.schema'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm, FieldArray } from 'vee-validate'
 
 // component
 import * as DE from '~/components/pub/my-ui/doc-entry'
-import { SelectEducation } from '~/components/app/patient/fields'
 import { InputBase } from '~/components/pub/my-ui/form'
 import { RadioParentsInput } from './fields'
+import { SelectJob, SelectEducation } from '~/components/app/patient/fields'
+import { SelectRelations } from '~/components/app/person-relative/fields'
 
-interface FormData extends PersonFamiliesFormData {}
+interface FormData extends PersonRelativeFormData {}
 
 interface Props {
   title: string
   isReadonly: boolean
-  initialValues?: any
+  initialValues?: FormData
 }
 
 const props = defineProps<Props>()
 
-const formSchema = toTypedSchema(PersonFamiliesSchema)
+const formSchema = toTypedSchema(ResponsiblePersonRelativeSchema)
 const isFamilyFormDisabled = ref(true)
 
 const { values, resetForm, setValues, validate, setFieldValue } = useForm<FormData>({
   name: 'familyParentsForm',
   validationSchema: formSchema,
-  initialValues: props.initialValues
-    ? props.initialValues
-    : {
-        shareFamilyData: '0',
-        families: [],
-      },
+  initialValues: props.initialValues ? props.initialValues : {},
   validateOnMount: false,
 })
 
@@ -43,11 +38,11 @@ defineExpose({
 })
 
 watch(
-  () => values.shareFamilyData,
+  () => values._shareFamilyData,
   (newValue) => {
     if (!newValue) return
 
-    if (newValue === '1') {
+    if (newValue === 'yes') {
       isFamilyFormDisabled.value = false
 
       const fam = values?.families || []
@@ -56,8 +51,8 @@ watch(
 
       if (needsReset) {
         setFieldValue('families', [
-          { relation: 'mother', name: '', education: '', occupation: '' },
-          { relation: 'father', name: '', education: '', occupation: '' },
+          { relation: 'mother', name: '', education_code: '', occupation_code: '' },
+          { relation: 'father', name: '', education_code: '', occupation_code: '' },
         ])
       }
 
@@ -83,95 +78,59 @@ watch(
       </p>
     </div>
 
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="mb-6">
+    <div class="mb-5 pb-3 text-lg xl:text-xl">
+      <div>
         <RadioParentsInput
-          field-name="shareFamilyData"
+          field-name="_shareFamilyData"
           :is-disabled="isReadonly"
         />
       </div>
 
-      <div
-        class="space-y-6"
-        :key="values.shareFamilyData"
-      >
-        <template v-if="values.shareFamilyData === '1'">
-          <FieldArray
-            v-slot="{ fields }"
-            name="families"
-          >
-            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-              <div
-                v-for="(field, idx) in fields"
-                :key="field.key"
-                class="space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
-              >
-                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  {{ (field.value as FamilyData).relation === 'mother' ? 'Data Ibu' : 'Data Ayah' }}
-                </h4>
-
-                <DE.Block>
-                  <InputBase
-                    :field-name="`families[${idx}].name`"
-                    label="Nama"
-                    placeholder="Masukkan nama"
-                    :is-disabled="isReadonly || isFamilyFormDisabled"
-                  />
-
-                  <SelectEducation
-                    :field-name="`families[${idx}].education`"
-                    label="Pendidikan"
-                    placeholder="Pilih"
-                    :is-disabled="isReadonly || isFamilyFormDisabled"
-                  />
-
-                  <InputBase
-                    :field-name="`families[${idx}].occupation`"
-                    label="Pekerjaan"
-                    placeholder="Masukkan pekerjaan"
-                    :is-disabled="isReadonly || isFamilyFormDisabled"
-                  />
-                </DE.Block>
-              </div>
-            </div>
-          </FieldArray>
-        </template>
-        <template v-else>
-          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <div
-              v-for="relation in ['mother', 'father']"
-              :key="relation"
-              class="space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
+      <div :key="values._shareFamilyData">
+        <FieldArray
+          v-slot="{ fields, push, remove }"
+          name="families"
+        >
+          <template v-if="fields.length === 0">
+            {{ push({ relation: 'mother', name: '', address: '', education_code: '' }) }}
+            {{ push({ relation: 'father', name: '', address: '', education_code: '' }) }}
+          </template>
+          <div class="space-y-4">
+            <DE.Block
+              v-for="(field, idx) in fields"
+              :key="field.key"
+              :col-count="5"
+              :cell-flex="false"
             >
-              <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                {{ relation === 'mother' ? 'Data Ibu' : 'Data Ayah' }}
-              </h4>
-
-              <DE.Block>
-                <InputBase
-                  :field-name="`families[${relation}].name`"
-                  is-disabled
-                  label="Nama"
-                  placeholder="-"
-                />
-
-                <SelectEducation
-                  :field-name="`families[${relation}].education`"
-                  is-disabled
-                  label="Pendidikan"
-                  placeholder="-"
-                />
-
-                <InputBase
-                  :field-name="`families[${relation}].occupation`"
-                  is-disabled
-                  label="Pekerjaan"
-                  placeholder="-"
-                />
-              </DE.Block>
-            </div>
+              <SelectRelations
+                :label="idx === 0 ? 'Hubungan dengan Pasien' : undefined"
+                :field-name="`families[${idx}].relation`"
+                placeholder="Pilih"
+                is-disabled
+              />
+              <InputBase
+                :label="idx === 0 ? 'Nama' : undefined"
+                :field-name="`families[${idx}].name`"
+                placeholder="Masukkan Nama"
+                :is-disabled="isReadonly || values._shareFamilyData === 'no'"
+              />
+              <!-- <SelectJob
+                :label="idx === 0 ? 'Pekerjaan' : undefined"
+                :field-name="`families[${idx}].occupation_code`"
+                placeholder="Pilih pekerjaan"
+                is-required
+                :is-disabled="isReadonly || values.shareFamilyData === 'no'"
+              /> -->
+              <SelectEducation
+                :label="idx === 0 ? 'Pendidikan' : undefined"
+                :field-name="`families[${idx}].education_code`"
+                placeholder="Pilih pendidikan"
+                is-required
+                :is-disabled="isReadonly || values._shareFamilyData === 'no'"
+              />
+            </DE.Block>
           </div>
-        </template>
+        </FieldArray>
       </div>
     </div>
   </form>

app/components/app/person/fields/radio-parents-input.vue

@@ -29,8 +29,8 @@ const {
 } = props
 
 const residenceOptions = [
-  { label: 'Ya', value: '1' },
-  { label: 'Tidak', value: '0' },
+  { label: 'Ya', value: 'yes' },
+  { label: 'Tidak', value: 'no' },
 ]
 </script>
 

app/components/content/patient/add.vue

@@ -18,7 +18,7 @@ import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 import AppPatientEntryForm from '~/components/app/patient/entry-form.vue'
 import AppPersonAddressEntryForm from '~/components/app/person-address/entry-form.vue'
 import AppPersonAddressEntryFormRelative from '~/components/app/person-address/entry-form-relative.vue'
-import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form.vue'
+import AppPersonFamilyParentsForm from '~/components/app/person/family-parents-form-bak.vue'
 import AppPersonContactEntryForm from '~/components/app/person-contact/entry-form.vue'
 import AppPersonRelativeEntryForm from '~/components/app/person-relative/entry-form.vue'
 

app/components/content/patient/form.vue

@@ -25,16 +25,7 @@ import { id as localeID } from 'date-fns/locale'
 // services
 import { getPatientDetail, uploadAttachment } from '~/services/patient.service'
 
-import {
-  isReadonly,
-  isProcessing,
-  isFormEntryDialogOpen,
-  isRecordConfirmationOpen,
-  onResetState,
-  handleActionSave,
-  handleActionEdit,
-  handleCancelForm,
-} from '~/handlers/patient.handler'
+import { isReadonly, isProcessing, handleActionSave, handleActionEdit } from '~/handlers/patient.handler'
 
 import { toast } from '~/components/pub/ui/toast'
 
@@ -180,19 +171,19 @@ const familyFormInitialValues = computed(() => {
 
   if (parents.length === 0) {
     return {
-      shareFamilyData: '0',
+      _shareFamilyData: 'no' as const,
       families: [],
     }
   }
 
   return {
-    shareFamilyData: '1',
+    _shareFamilyData: 'yes' as const,
     families: parents.map((parent: PersonRelative) => ({
       id: parent.id || 0,
       relation: parent.relationship_code || '',
       name: parent.name || '',
-      education: parent.education_code || '',
-      occupation: parent.occupation_name || parent.occupation_code || '',
+      occupation_code: parent.occupation_code || '',
+      education_code: parent.education_code || '',
     })),
   }
 })
@@ -253,6 +244,7 @@ async function composeFormData(): Promise<PatientEntity> {
   const results = [patient, address, addressRelative, families, contacts, emergencyContact]
   const allValid = results.every((r) => r?.valid)
 
+  console.log(results)
   // exit, if form errors happend during validation
   // for example: dropdown not selected
   if (!allValid) return Promise.reject('Form validation failed')

app/components/content/surgery-report/entry.vue

@@ -11,7 +11,7 @@ import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.s
 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 { ResponsiblePersonRelativeSchema } from '~/schemas/person-relative.schema'
 import { uploadAttachment } from '~/services/patient.service'
 import { getDetail, update } from '~/services/surgery-report.service'
 import type { SurgeryReport } from '~/models/surgery-report'
@@ -28,17 +28,18 @@ import { handleActionEdit } from '~/handlers/surgery-report.handler'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
 
 // #region Props & Emits
-const props = withDefaults(defineProps<{ 
-  encounter_id: number
-  callbackUrl?: string
-  record_id: number 
-}>(), {
-
-})
+const props = withDefaults(
+  defineProps<{
+    encounter_id: number
+    callbackUrl?: string
+    record_id: number
+  }>(),
+  {},
+)
 
 // form related state
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
-  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person' }),
   entityName: 'surgery-report',
 })
 // #endregion
@@ -56,7 +57,7 @@ const selectedOperativeAction = ref<any>(null)
 onMounted(async () => {
   const result = await getDetail(props.record_id)
   if (result.success) {
-    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    const responseData = { ...result.body.data, date: formatDateYyyyMmDd(result.body.data.date) }
     surgeryReport.value = responseData
     inputForm.value?.setValues(responseData)
   }
@@ -72,17 +73,15 @@ async function handleConfirmAdd() {
   const response = await handleActionEdit(
     props.record_id,
     await composeFormData(),
-    () => { },
-    () => { },
+    () => {},
+    () => {},
     toast,
   )
   goBack()
 }
 
 async function composeFormData(): Promise<SurgeryReport> {
-  const [input,] = await Promise.all([
-    inputForm.value?.validate(),
-  ])
+  const [input] = await Promise.all([inputForm.value?.validate()])
 
   const results = [input]
   const allValid = results.every((r) => r?.valid)
@@ -129,9 +128,12 @@ function handleCancelAdd() {
     :schema="SurgeryReportSchema"
     :operative-action-list="[]"
   />
-  
+
   <div class="my-2 flex justify-end py-2">
-    <Action :enable-draft="false" @click="handleActionClick" />
+    <Action
+      :enable-draft="false"
+      @click="handleActionClick"
+    />
   </div>
 
   <Confirmation

app/models/patient.ts

@@ -4,7 +4,6 @@ import { type Person, genPerson } from './person'
 import type { PatientFormData } from '~/schemas/patient.schema'
 import type { PersonAddressFormData } from '~/schemas/person-address.schema'
 import type { PersonAddressRelativeFormData } from '~/schemas/person-address-relative.schema'
-import type { PersonFamiliesFormData } from '~/schemas/person-family.schema'
 import type { PersonContactFormData } from '~/schemas/person-contact.schema'
 import type { PersonRelativeFormData } from '~/schemas/person-relative.schema'
 import type { PersonAddress } from './person-address'
@@ -32,7 +31,7 @@ export interface genPatientProps {
   patient: PatientFormData
   residentAddress: PersonAddressFormData
   cardAddress: PersonAddressRelativeFormData
-  familyData: PersonFamiliesFormData
+  familyData: PersonRelativeFormData
   contacts: PersonContactFormData
   responsible: PersonRelativeFormData
 }
@@ -75,15 +74,15 @@ export function genPatientEntity(props: genPatientProps, patientData: PatientEnt
   }
 
   // add data orang tua
-  if (familyData.shareFamilyData === '1') {
+  if (familyData._shareFamilyData === 'yes' && familyData.families && familyData.families.length > 0) {
     for (const family of familyData.families) {
       familiesContact.push({
         id: family.id || 0,
         relationship_code: family.relation,
         name: family.name,
-        education_code: family.education,
-        occupation_name: family.occupation,
-        occupation_code: family.occupation,
+        education_code: family.education_code,
+        occupation_name: family.occupation_name,
+        occupation_code: family.occupation_code,
         responsible: false,
       })
     }
@@ -106,7 +105,7 @@ export function genPatientEntity(props: genPatientProps, patientData: PatientEnt
   }
 
   // add penanggung jawab
-  if (responsible) {
+  if (responsible.contacts && responsible.contacts.length > 0) {
     for (const contact of responsible.contacts) {
       familiesContact.push({
         id: contact.id || 0,

app/schemas/person-relative.schema.ts

@@ -1,22 +1,28 @@
 import { z } from 'zod'
 
-const ResponsibleContactPersonSchema = z.object({
+const PersonRelativeSchema = z.object({
   id: z.number().optional(),
 
   relation: z.string({ required_error: 'Pilih jenis Penanggung Jawab' }).min(1, 'Pilih jenis Penanggung Jawab'),
-  name: z.string({ required_error: 'Mohon lengkapi Nama' }).min(3, 'Mohon lengkapi Nama'),
-  address: z.string({ required_error: 'Mohon lengkapi Alamat' }).min(3, 'Mohon lengkapi Alamat'),
+  name: z.string({ required_error: 'Mohon lengkapi Nama' }).optional(),
+  address: z.string({ required_error: 'Mohon lengkapi Alamat' }).optional(),
   phone: z
     .string({ required_error: 'Mohon lengkapi Nomor HP' })
     .min(8, 'Nomor HP minimal 10 digit')
-    .max(15, 'Nomor HP maksimal 15 digit'),
+    .max(15, 'Nomor HP maksimal 15 digit')
+    .optional(),
+  occupation_name: z.string().optional(),
+  occupation_code: z.string().optional(),
+  education_code: z.string().optional(),
 })
 
-const ResponsiblePersonSchema = z.object({
-  contacts: z.array(ResponsibleContactPersonSchema).min(1, 'Minimal harus ada 1 penanggung jawab'),
+const ResponsiblePersonRelativeSchema = z.object({
+  contacts: z.array(PersonRelativeSchema).optional(),
+  families: z.array(PersonRelativeSchema).optional(),
+  _shareFamilyData: z.enum(['yes', 'no']).optional(),
 })
 
-type PersonRelativeFormData = z.infer<typeof ResponsiblePersonSchema>
+type PersonRelativeFormData = z.infer<typeof ResponsiblePersonRelativeSchema>
 
-export { ResponsiblePersonSchema }
+export { ResponsiblePersonRelativeSchema }
 export type { PersonRelativeFormData }