simrsx-fe/app/components/app/chemotherapy/entry-form.vue

<script setup lang="ts">
// Components
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
import Input from '~/components/pub/ui/input/Input.vue'
import Button from '~/components/pub/ui/button/Button.vue'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'

// Helpers
import type z from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { chemotherapySchema } from "~/schemas/chemotherapy.schema"

interface Props {
  values?: any
  isLoading?: boolean
  isReadonly?: boolean
}

const props = defineProps<Props>()
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false

const items = [
  { value: 'item-1', label: 'Item 1' },
  { value: 'item-2', label: 'Item 2' },
  { value: 'item-3', label: 'Item 3' },
]

const emit = defineEmits<{
  submit: [values: any, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const { defineField, errors, meta } = useForm({
  validationSchema: toTypedSchema(chemotherapySchema),
  initialValues: {
    namaPasien: '',
    tanggalLahir: '',
    noRM: '',
    alamat: '',
    beratBadan: '',
    tinggiBadan: '',
    diagnosa: '',
    siklus: '',
    periodeAwal: '',
    periodeAkhir: '',
    tanggalKemoterapi: '',
    dokterKRJ: '',
  },
})

// Define form fields
const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
const [noRM, noRMAttrs] = defineField('noRM')
const [alamat, alamatAttrs] = defineField('alamat')
const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
const [siklus, siklusAttrs] = defineField('siklus')
const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')

// Set initial values if provided
if (props.values) {
  // Object.entries(props.values).forEach(([key, value]) => {
  //   if (value !== undefined) {
  //     const field = defineField(key)[0]
  //     field.value = value
  //   }
  // })
}

const resetForm = () => {
  // Object.keys(meta.value.initialValues).forEach((key) => {
  //   const field = defineField(key)[0]
  //   field.value = ''
  // })
}

function onSubmitForm() {
  const formData = {
    namaPasien: namaPasien.value,
    tanggalLahir: tanggalLahir.value,
    noRM: noRM.value,
    alamat: alamat.value,
    beratBadan: beratBadan.value,
    tinggiBadan: tinggiBadan.value,
    diagnosa: diagnosa.value,
    siklus: siklus.value,
    periodeAwal: periodeAwal.value,
    periodeAkhir: periodeAkhir.value,
    tanggalKemoterapi: tanggalKemoterapi.value,
    dokterKRJ: dokterKRJ.value,
  }
  emit('submit', formData, resetForm)
}

function onCancelForm() {
  emit('cancel', resetForm)
}
</script>

<template>
  <form @submit.prevent>
    <!-- Data Pasien Section -->
    <div class="mb-6">
      <h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
      <Block
        labelSize="thin"
        class="!mb-2.5 !pt-0 xl:!mb-3"
      >
        <Cell>
          <Label height="compact">Nama Pasien</Label>
          <Field :errMessage="errors.namaPasien">
            <Input
              v-model="namaPasien"
              v-bind="namaPasienAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan nama pasien"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Tanggal Lahir</Label>
          <Field :errMessage="errors.tanggalLahir">
            <DatePicker
              v-model="tanggalLahir"
              v-bind="tanggalLahirAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Pilih tanggal lahir"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">No. RM</Label>
          <Field :errMessage="errors.noRM">
            <Input
              v-model="noRM"
              v-bind="noRMAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan nomor RM"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Alamat</Label>
          <Field :errMessage="errors.alamat">
            <Input
              v-model="alamat"
              v-bind="alamatAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan alamat"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Berat Badan</Label>
          <Field :errMessage="errors.beratBadan">
            <Input
              v-model="beratBadan"
              v-bind="beratBadanAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan berat badan"
              type="number"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Tinggi Badan</Label>
          <Field :errMessage="errors.tinggiBadan">
            <Input
              v-model="tinggiBadan"
              v-bind="tinggiBadanAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan tinggi badan"
              type="number"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Diagnosa</Label>
          <Field :errMessage="errors.diagnosa">
            <Combobox
              id="diagnose"
              v-model="diagnosa"
              v-bind="diagnosaAttrs"
              :items="items"
              :is-disabled="isLoading || isReadonly"
              placeholder="Tentukan diagnosa pasien"
              search-placeholder="Cari diagnosa"
              empty-message="Diagnosa tidak ditemukan"
            />
          </Field>
        </Cell>
      </Block>
    </div>

    <!-- Protokol Kemoterapi Section -->
    <div class="mb-6">
      <h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
      <Block
        labelSize="thin"
        class="!mb-2.5 !pt-0 xl:!mb-3"
      >
        <Cell>
          <Label height="compact">Siklus</Label>
          <Field :errMessage="errors.siklus">
            <Input
              v-model="siklus"
              v-bind="siklusAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Masukkan siklus"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Periode</Label>
          <div class="flex items-center gap-4">
            <Field
              :errMessage="errors.periodeAwal"
              class="flex-1"
            >
              <DatepickerSingle
                v-model="periodeAwal"
                v-bind="periodeAwalAttrs"
                :disabled="isLoading || isReadonly"
                placeholder="Mulai Periode"
              />
            </Field>
            <span>Sampai</span>
            <Field
              :errMessage="errors.periodeAkhir"
              class="flex-1"
            >
              <DatepickerSingle
                v-model="periodeAkhir"
                v-bind="periodeAkhirAttrs"
                :disabled="isLoading || isReadonly"
                placeholder="Akhir Periode"
              />
            </Field>
          </div>
        </Cell>
        <Cell>
          <Label height="compact">Tanggal Kemoterapi</Label>
          <Field :errMessage="errors.tanggalKemoterapi">
            <DatepickerSingle
              v-model="tanggalKemoterapi"
              v-bind="tanggalKemoterapiAttrs"
              :disabled="isLoading || isReadonly"
              placeholder="Pilih tanggal kemoterapi"
            />
          </Field>
        </Cell>
        <Cell>
          <Label height="compact">Dokter Ruang Tindakan</Label>
          <Field :errMessage="errors.dokterKRJ">
            <Combobox
              id="doctor"
              v-model="dokterKRJ"
              v-bind="dokterKRJAttrs"
              :items="items"
              :is-disabled="isLoading || isReadonly"
              placeholder="Pilih dokter"
              search-placeholder="Cari dokter"
              empty-message="Dokter tidak ditemukan"
            />
          </Field>
        </Cell>
      </Block>
    </div>

    <!-- Form Actions -->
    <div class="flex justify-end gap-2 py-2">
      <Button
        type="button"
        variant="secondary"
        class="w-[120px]"
        @click="onCancelForm"
      >
        Kembali
      </Button>
      <Button
        v-if="!isReadonly"
        type="button"
        class="w-[120px]"
        :disabled="isLoading || !meta.valid"
        @click="onSubmitForm"
      >
        Simpan
      </Button>
    </div>
  </form>
</template>