simrsx-fe/app/components/app/treatment-report/entry-form.vue

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

// schema
import { type TreatmentReportFormData, TreatmentReportSchema } from '~/schemas/treatment-report.schema'

// type
import type { Doctor } from '~/models/doctor'

// components
import { Form } from '~/components/pub/ui/form'
import * as DE from '~/components/pub/my-ui/doc-entry'
import Separator from '~/components/pub/ui/separator/Separator.vue'

// form field components
import { ButtonAction, Fragment, InputBase } from '~/components/pub/my-ui/form/'
import { SelectDoctor } from '~/components/app/doctor/fields'
// Helpers

// #region Props & Emits
interface FormData extends TreatmentReportFormData {
  hiddenNyc: number
}

interface Props {
  isLoading: boolean
  mode?: 'create' | 'update' | 'view'
  initialValues?: Partial<FormData>

  // form related
  doctors: Doctor[]
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'submit', payload: FormData): void
}>()
const { isLoading, mode = 'create' } = props
const isReadonly = computed(() => {
  if (isLoading) {
    return true
  }

  if (mode === 'view') {
    return true
  }

  return false
})
const formSchema = toTypedSchema(TreatmentReportSchema)

const { handleSubmit, values, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
  name: 'treatmentReportForm',
  validationSchema: formSchema,
  initialValues: props.initialValues ? props.initialValues : {},
  validateOnMount: false,
})

defineExpose({
  validate,
  resetForm,
  setValues,
  values,
})
// #endregion

// #region State & Computed
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
const onSubmit = handleSubmit((formValues: FormData) => emit('submit', formValues))
// #endregion
</script>

<template>
  <form @submit="onSubmit">
    <Fragment
      v-slot="{ section }"
      title="Tim Pelaksana Tindakan"
    >
      <p class="text-lg font-semibold">{{ section }}</p>

      <DE.Block
        :col-count="4"
        :cell-flex="false"
      >
        <SelectDoctor
          fieldName="operatorTeam.dpjpId"
          label="Dokter Pemeriksa"
          placeholder="Pilih dokter"
          :doctors="doctors"
          :is-disabled="isReadonly"
        />
        <InputBase
          field-name="operatorTeam.operatorId"
          label="Operator"
          placeholder="Masukkan operator"
        />
        <InputBase
          field-name="assistantOperatorId"
          label="Asisten Operator"
          placeholder="Masukkan asisten operator"
        />
        <InputBase
          field-name="instrumentNurseId"
          label="Instrumentir"
          placeholder="Masukkan instrumentir"
        />
        <InputBase
          field-name="surgeryDate"
          label="Tanggal Pembedahan"
          placeholder="Pilih Tanggal"
          icon-name="i-lucide-calendar"
          is-disabled
        />
      </DE.Block>
      <DE.Block
        :col-count="4"
        :cell-flex="false"
      >
        <InputBase
          field-name="actionDiagnosis"
          label="Diagnosa Tindakan"
          placeholder="Masukkan diagnosa tindakan"
          :col-span="2"
        />
        <InputBase
          field-name="postSurgeryNurseId"
          label="Perawat Pasca Bedah"
          placeholder="Masukkan perawat pasca bedah"
        />
      </DE.Block>
    </Fragment>

    <Separator class="my-4" />

    <Fragment
      v-slot="{ section }"
      title="Tindakan Operatif/Non Operatif Lain"
    >
      <p class="text-lg font-semibold">{{ section }}</p>

      <DE.Block
        :col-count="4"
        :cell-flex="false"
      >
        <InputBase
          field-name="operationType"
          label="Tindakan Opearatif/Non"
          placeholder="Masukkan tindakan operatif/non"
          :col-span="2"
        />
      </DE.Block>
    </Fragment>

    <Separator class="my-4" />

    <Fragment
      v-slot="{ section }"
      title="Data Pelaksanaan Operasi"
    >
      <p class="text-lg font-semibold">{{ section }}</p>

      <DE.Block
        :col-count="3"
        :cell-flex="false"
      >
        <InputBase
          field-name="operationType"
          label="Tindakan Opearatif/Non"
          placeholder="Masukkan tindakan operatif/non"
          :col-span="2"
        />
      </DE.Block>
    </Fragment>
    <div class="mt-4 flex justify-end">
      <button
        type="submit"
        class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
        :disabled="isLoading"
      >
        {{ isLoading ? 'Menyimpan...' : 'Simpan' }}
      </button>
    </div>
  </form>
</template>