refactor(person-relative): update contact form fields and conditional label

- Change form field names from medicines to contacts
- Update default contact object structure
- Make label in select-relations conditional
- Improve delete button title with contact number
This commit is contained in:
Khafid Prayoga
2025-11-24 13:02:56 +07:00
parent 044de2d965
commit 6c63d15b9e
2 changed files with 6 additions and 6 deletions

No files matched your search

@@ -47,10 +47,10 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
<div class="mb-5 space-y-4"> <div class="mb-5 space-y-4">
<FieldArray <FieldArray
v-slot="{ fields, push, remove }" v-slot="{ fields, push, remove }"
name="medicines" name="contacts"
> >
<template v-if="fields.length === 0"> <template v-if="fields.length === 0">
{{ push({ name: '', dose: '', unit: '' }) }} {{ push({ relation: '', name: '', address: '', phone: '' }) }}
</template> </template>
<div class="space-y-4"> <div class="space-y-4">
<DE.Block <DE.Block
@@ -63,7 +63,6 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
:label="idx === 0 ? 'Hubungan dengan Pasien' : undefined" :label="idx === 0 ? 'Hubungan dengan Pasien' : undefined"
:field-name="`contacts[${idx}].relation`" :field-name="`contacts[${idx}].relation`"
placeholder="Pilih" placeholder="Pilih"
field-group-class="mb-0"
:is-disabled="isReadonly" :is-disabled="isReadonly"
/> />
<InputBase <InputBase
@@ -90,7 +89,7 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
<ButtonAction <ButtonAction
:disabled="isReadonly" :disabled="isReadonly"
preset="delete" preset="delete"
title="Hapus" :title="`Hapus Kontak ${idx + 1}`"
icon-only icon-only
@click="remove(idx)" @click="remove(idx)"
/> />
@@ -100,12 +99,12 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
<ButtonAction <ButtonAction
preset="add" preset="add"
label="Tambah Obat" label="Tambah Kontak"
title="Tambah Kontak ke Daftar Kontak" title="Tambah Kontak ke Daftar Kontak"
:disabled="fields.length >= 5 || isReadonly" :disabled="fields.length >= 5 || isReadonly"
:full-width-mobile="true" :full-width-mobile="true"
class="mt-4" class="mt-4"
@click="push({ name: '', dose: '', unit: '' })" @click="push({ relation: '', name: '', address: '', phone: '' })"
/> />
</FieldArray> </FieldArray>
</div> </div>
@@ -33,6 +33,7 @@ const opts = Object.entries(relationshipCodes).map(([value, label]) => ({
:class="cn('select-field-group', fieldGroupClass, containerClass)" :class="cn('select-field-group', fieldGroupClass, containerClass)"
> >
<DE.Label <DE.Label
v-if="label"
:label-for="fieldName" :label-for="fieldName"
:class="cn('select-field-label', labelClass)" :class="cn('select-field-label', labelClass)"
:is-required="isRequired" :is-required="isRequired"