simrsx-fe/app/components/app/prb/entry.vue

<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import SelectDate from './_common/select-date.vue'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
import ObatPicker from './obat-picker/picker-dialog.vue'
import SepPicker from './sep-picker/picker-dialog.vue'
import SelectDpjp from './_common/select-dpjp.vue'
import SelectProgram from './_common/select-program.vue'
import * as DE from '~/components/pub/my-ui/doc-entry'
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'

const props = withDefaults(defineProps<{
  schema: any
  initialValues?: any
  errors?: FormErrors
  isBpjs?: boolean
}>(), {
  isBpjs: false,
})

const formSchema = toTypedSchema(props.schema)
const formRef = ref()

const isSepDialogOpen = ref(false)
provide("isSepDialogOpen", isSepDialogOpen);
const handleToggleSepDialog = () => isSepDialogOpen.value = !isSepDialogOpen.value
const setNoSep = (inputValue: string) => formRef.value?.setValues({ a0: inputValue }, false)

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 : {}"
  >
    <DE.Block :col-count="2" :cell-flex="false">
      <DE.Cell :col-span="2" v-if="isBpjs">
        <div class="w-1/2 flex items-end gap-3">
          <InputBase :errors="errors"
            field-name="a0"
            label="No. RM/Kartu BPJS" placeholder="Masukkan No. RM/Kartu BPJS"
          />
          <Button @click="handleToggleSepDialog" size="icon" variant="outline"
            class="text-orange-400 border-orange-400 bg-transparent">
            <Icon name="i-lucide-search" class="h-4 w-4 align-middle transition-colors" />
          </Button>
        </div>
      </DE.Cell>     
      <InputBase :errors="errors"
        field-name="a1"
        label="No. PRB" placeholder="Akan terisi otomatis"
        is-disabled
      />      
      <SelectDate
        field-name="a2"
        label="Waktu & Tanggal"
        :errors="errors"
        is-disabled
        is-with-time
      />
      <SelectProgram :errors="errors"
        field-name="a3"
        label="Program PRB" placeholder="Pilih Program PRB"
        is-required
      />
      <SelectDpjp :errors="errors"
        field-name="a4"
        label="DPJP" placeholder="Pilih DPJP"
        is-required
      />    
      <TextAreaInput :errors="errors"
        field-name="a5"
        label="Keterangan" placeholder="Isi Keterangan"
      />
      <TextAreaInput :errors="errors"
        field-name="a6"
        label="Saran" placeholder="Isi Saran"
      />
    </DE.Block>
        
    <!-- PICKER -->
    <DE.Block :col-count="1" :cell-flex="false">
      <ObatPicker field-name="a7" title="Obat" />
    </DE.Block>
    <SepPicker title="SEP" :choose-fn="setNoSep" />
    <!-- -->
  </Form>
</template>