refactor(patient-contact): improve contact form components and validation

- Remove hardcoded contact limit and use prop instead
- Add ButtonAction component to form exports
- Enhance contact schema validation with better error messages
- Refactor contact type select component to use doc-entry components
- Improve form layout and consistency between contact and relative forms

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

@@ -2,16 +2,18 @@
 import { toTypedSchema } from '@vee-validate/zod'
 
 // components
+import * as DE from '~/components/pub/my-ui/doc-entry'
 import { Form } from '~/components/pub/ui/form'
 import { FieldArray } from 'vee-validate'
 import { SelectContactType } from './fields'
-import { InputBase } from '~/components/pub/my-ui/form'
+import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
 
 const props = defineProps<{
   title: string
   schema: any
-  contactLimit: number
+  contactLimit?: number
   initialValues?: any
+  isReadonly?: boolean
 }>()
 
 const { contactLimit = 5 } = props
@@ -24,6 +26,8 @@ defineExpose({
   setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
   values: computed(() => formRef.value?.values),
 })
+
+const { title = 'Kontak Pasien', isReadonly = false } = props
 </script>
 
 <template>
@@ -33,79 +37,67 @@ defineExpose({
     keep-values
     :validation-schema="formSchema"
     :validate-on-mount="false"
+    :initial-values="initialValues ? initialValues : {}"
     validation-mode="onSubmit"
-    :initial-values="initialValues || { contacts: [{ contactType: '', contactNumber: '' }] }"
   >
     <div>
-      <p
-        v-if="props.title"
-        class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base"
-      >
-        {{ props.title || 'Kontak Pasien' }}
+      <p class="text-md mb-2 mt-1 font-semibold">
+        {{ title }}
       </p>
     </div>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
-        <FieldArray
-          v-slot="{ fields, push, remove }"
-          name="contacts"
-        >
-          <div
+    <div class="mb-5 space-y-4">
+      <FieldArray
+        v-slot="{ fields, push, remove }"
+        name="contacts"
+      >
+        <template v-if="fields.length === 0">
+          {{ push({ relation: '', name: '', address: '', phone: '' }) }}
+        </template>
+        <div class="space-y-4">
+          <DE.Block
             v-for="(field, idx) in fields"
             :key="field.key"
-            class="flex-row gap-2 md:flex"
+            :col-count="5"
+            :cell-flex="false"
           >
-            <div class="min-w-0 flex-[2]">
-              <SelectContactType
-                :field-name="`contacts[${idx}].contactType`"
-                :label="`Kontak ${idx + 1}`"
-                :is-required="idx === 0"
-              />
-            </div>
-            <div class="min-w-0 flex-[1.5]">
-              <InputBase
-                :field-name="`contacts[${idx}].contactNumber`"
-                placeholder="081234567890"
-                label="No"
-                numeric-only
-                :max-length="15"
-                :is-required="idx === 0"
-              />
-            </div>
-            <div class="flex-1 self-start md:pt-8">
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                class="text-red-600 hover:border-red-400 hover:bg-red-50 hover:text-red-700 dark:border-red-400 dark:text-red-400 dark:hover:border-red-300 dark:hover:bg-red-900/20"
-                :class="{ invisible: idx === 0 }"
-                @click="remove(idx)"
-              >
-                <Icon
-                  name="i-lucide-trash-2"
-                  class="h-5 w-5"
+            <SelectContactType
+              :label="idx === 0 ? 'Jenis Kontak' : undefined"
+              :field-name="`contacts[${idx}].contactType`"
+              :is-disabled="isReadonly"
+            />
+            <InputBase
+              :label="idx === 0 ? 'Nomor Kontak' : undefined"
+              :field-name="`contacts[${idx}].contactNumber`"
+              placeholder="081234567890"
+              :max-length="15"
+              numeric-only
+              :is-disabled="isReadonly"
+            />
+            <DE.Cell class="flex items-start justify-start">
+              <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+                <ButtonAction
+                  v-if="idx !== 0"
+                  :disabled="isReadonly"
+                  preset="delete"
+                  :title="`Hapus Kontak ${idx + 1}`"
+                  icon-only
+                  @click="remove(idx)"
                 />
-              </Button>
-            </div>
-          </div>
+              </DE.Field>
+            </DE.Cell>
+          </DE.Block>
+        </div>
 
-          <div class="self-center pt-3">
-            <Button
-              :disabled="fields.length >= contactLimit"
-              type="button"
-              variant="outline"
-              size="sm"
-              @click="push({ contactType: '', contactNumber: '' })"
-            >
-              <Icon
-                name="i-lucide-plus"
-                class="h-5 w-5"
-              />
-              Tambah Kontak
-            </Button>
-          </div>
-        </FieldArray>
-      </div>
+        <ButtonAction
+          preset="add"
+          label="Tambah Kontak"
+          title="Tambah Kontak ke Daftar Kontak"
+          :disabled="fields.length >= contactLimit || isReadonly"
+          :full-width-mobile="true"
+          class="mt-4"
+          @click="push({ contactType: '', contactNumber: '' })"
+        />
+      </FieldArray>
     </div>
   </Form>
 </template>

app/components/app/person-contact/fields/select-contact-type.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
-import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Select from '~/components/pub/my-ui/form/select.vue'
+
 const props = defineProps<{
   fieldName: string
-  label: string
+  label?: string
   placeholder?: string
   errors?: FormErrors
   class?: string
@@ -17,11 +16,12 @@ const props = defineProps<{
   labelClass?: string
   isRequired?: boolean
   isDisabled?: boolean
+  colSpan?: number
 }>()
 
 const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass, labelClass } = props
 
-const contactOptions = [
+const opts = [
   { label: 'Nomor HP', value: 'phoneNumber' },
   { label: 'Nomor Telepon Kantor', value: 'officePhoneNumber' },
   { label: 'Nomor Telepon Rumah', value: 'homePhoneNumber' },
@@ -29,17 +29,20 @@ const contactOptions = [
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Label
+  <DE.Cell
+    :col-span="colSpan"
+    :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"
+      :is-required="isRequired"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
-      :errors="errors"
       :class="cn('select-field-wrapper')"
     >
       <FormField
@@ -49,15 +52,15 @@ const contactOptions = [
         <FormItem>
           <FormControl>
             <Select
+              :disabled="isDisabled"
               :id="fieldName"
               v-bind="componentField"
-              :is-disabled="isDisabled"
-              :items="contactOptions"
-              :placeholder="placeholder || 'Pilih jenis kontak'"
+              :items="opts"
+              :placeholder="placeholder"
               :preserve-order="true"
               :class="
                 cn(
-                  'min-w-[190px] text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
                   selectClass,
                 )
               "
@@ -66,6 +69,6 @@ const contactOptions = [
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>

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

@@ -6,14 +6,14 @@ import { FieldArray } from 'vee-validate'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import { Form } from '~/components/pub/ui/form'
 import { SelectRelations } from './fields'
-import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import ButtonAction from '~/components/pub/my-ui/form/button-action.vue'
+import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
 
 const props = defineProps<{
   title: string
   schema: any
   isReadonly?: boolean
   initialValues?: any
+  contactLimit?: number
 }>()
 
 const formSchema = toTypedSchema(props.schema)
@@ -26,7 +26,7 @@ defineExpose({
   values: computed(() => formRef.value?.values),
 })
 
-const { title = 'Kontak Pasien', isReadonly = false } = props
+const { title = 'Kontak Pasien', isReadonly = false, contactLimit = 5 } = props
 </script>
 
 <template>
@@ -102,9 +102,9 @@ const { title = 'Kontak Pasien', isReadonly = false } = props
 
         <ButtonAction
           preset="add"
-          label="Tambah Kontak"
-          title="Tambah Kontak ke Daftar Kontak"
-          :disabled="fields.length >= 5 || isReadonly"
+          label="Tambah Penanggung Jawab"
+          title="Tambah Penanggung Jawab"
+          :disabled="fields.length >= contactLimit || isReadonly"
           :full-width-mobile="true"
           class="mt-4"
           @click="push({ relation: '', name: '', address: '', phone: '' })"

app/components/content/patient/add.vue

@@ -303,7 +303,6 @@ watch(
   <AppPersonContactEntryForm
     ref="personContactForm"
     title="Kontak Pasien"
-    :contact-limit="10"
     :schema="PersonContactListSchema"
   />
   <AppPersonRelativeEntryForm

app/components/pub/my-ui/form/index.ts

@@ -1,4 +1,5 @@
 export { default as Block } from './block.vue'
+export { default as ButtonAction } from './button-action.vue'
 export { default as FieldGroup } from './field-group.vue'
 export { default as Field } from './field.vue'
 export { default as FileField } from './file-field.vue'

app/schemas/person-contact.schema.ts

@@ -1,8 +1,8 @@
 import { z } from 'zod'
 
 const PersonContactBaseSchema = z.object({
-  contactType: z.string().min(1, 'Mohon pilih tipe kontak'),
-  contactNumber: z.string().min(8, 'Nomor minimal 8 digit'),
+  contactType: z.string({ required_error: 'Mohon pilih tipe kontak' }).min(1, 'Mohon pilih tipe kontak'),
+  contactNumber: z.string({ required_error: 'Nomor kontak harus diisi' }).min(8, 'Nomor minimal 8 digit'),
 })
 
 const PersonContactListSchema = z.object({