simrsx-fe/app/components/app/medicine/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 Button from '~/components/pub/ui/button/Button.vue'

// Helpers
import type z from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

interface Props {
  schema?: z.ZodSchema<any>
  values?: any
  isLoading?: boolean
  isReadonly?: boolean
  medicineGroups?: { value: string; label: string }[]
  medicineMethods?: { value: string; label: string }[]
  medicineForms?: { value: string; label: string }[]
  uoms?: { value: string; label: string }[]
}

const props = defineProps<Props>()
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const emit = defineEmits<{
  submit: [values: any, resetForm: () => void]
  cancel: [resetForm: () => void]
}>()

const { defineField, errors, meta } = useForm({
  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
  initialValues: {
    code: '',
    name: '',
    medicineGroup_code: '',
    medicineMethod_code: '',
    medicineForm_code: '',
    uom_code: '',
    stock: 0,
  },
})

const [code, codeAttrs] = defineField('code')
const [name, nameAttrs] = defineField('name')
const [medicineGroup_code, medicineGroupAttrs] = defineField('medicineGroup_code')
const [medicineMethod_code, medicineMethodAttrs] = defineField('medicineMethod_code')
const [medicineForm_code, medicineFormAttrs] = defineField('medicineForm_code')
const [uom_code, uomAttrs] = defineField('uom_code')
const [stock, stockAttrs] = defineField('stock')

if (props.values) {
  if (props.values.code !== undefined) code.value = props.values.code
  if (props.values.name !== undefined) name.value = props.values.name
  if (props.values.medicineGroup_code !== undefined) medicineGroup_code.value = props.values.medicineGroup_code
  if (props.values.medicineMethod_code !== undefined) medicineMethod_code.value = props.values.medicineMethod_code
  if (props.values.medicineForm_code !== undefined) medicineForm_code.value = props.values.medicineForm_code
  if (props.values.uom_code !== undefined) uom_code.value = props.values.uom_code
  if (props.values.stock !== undefined) stock.value = props.values.stock
}

const resetForm = () => {
  code.value = ''
  name.value = ''
  medicineGroup_code.value = ''
  medicineMethod_code.value = ''
  medicineForm_code.value = '',
  uom_code.value = ''
  stock.value = 0
}

function onSubmitForm() {
  const formData = {
    code: code.value || '',
    name: name.value || '',
    medicineGroup_code: medicineGroup_code.value || '',
    medicineMethod_code: medicineMethod_code.value || '',
    medicineForm_code: medicineForm_code.value || '',
    uom_code: uom_code.value || '',
    stock: stock.value || 0,
  }
  emit('submit', formData, resetForm)
}

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

<template>
  <form id="form-medicine" @submit.prevent>
    <Block class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
      <Cell>
        <Label height="">Kode</Label>
        <Field :errMessage="errors.code">
          <Input
            id="code"
            v-model="code"
            v-bind="codeAttrs"
            :disabled="isLoading || isReadonly"
            class="input input-bordered w-full"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Nama</Label>
        <Field :errMessage="errors.name">
          <Input
            id="name"
            v-model="name"
            v-bind="nameAttrs"
            :disabled="isLoading || isReadonly"
            class="input input-bordered w-full"
          />
        </Field>
      </Cell>
      <Cell>
        <Label >Kelompok Obat</Label>
        <Field :errMessage="errors.medicineGroup_code">
          <Select
            id="medicineGroup_code"
            v-model="medicineGroup_code"
            icon-name="i-lucide-chevron-down"
            placeholder="Pilih kelompok obat"
            v-bind="medicineGroupAttrs"
            :items="props.medicineGroups || []"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Metode Pemberian</Label>
        <Field :errMessage="errors.medicineMethod_code">
          <Select
            id="medicineMethod_code"
            v-model="medicineMethod_code"
            icon-name="i-lucide-chevron-down"
            placeholder="Pilih metode pemberian"
            v-bind="medicineMethodAttrs"
            :items="props.medicineMethods || []"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <Cell>
        <Label height="compact">Sediaan Obat</Label>
        <Field :errMessage="errors.medicineForm_code">
          <Select
            id="medicineForm_code"
            v-model="medicineForm_code"
            icon-name="i-lucide-chevron-down"
            placeholder="Pilih metode pemberian"
            v-bind="medicineFormAttrs"
            :items="props.medicineForms || []"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <Cell>
        <Label>Satuan</Label>
        <Field :errMessage="errors.uom_code">
          <Select
            id="uom_code"
            v-model="uom_code"
            icon-name="i-lucide-chevron-down"
            placeholder="Pilih satuan"
            v-bind="uomAttrs"
            :items="props.uoms || []"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell>
      <!-- <Cell>
        <Label height="compact">Infra</Label>
        <Field :errMessage="errors.infra_id">
          <Select
            id="infra_id"
            v-model="infra_id"
            icon-name="i-lucide-chevron-down"
            placeholder="Tidak ada"
            v-bind="infraAttrs"
            :items="props.infras || []"
            :disabled="isLoading || isReadonly"
          />
        </Field>
      </Cell> -->
      <Cell>
        <Label height="compact">Stok</Label>
        <Field :errMessage="errors.stock">
          <Input
            id="stock"
            v-model="stock"
            type="number"
            v-bind="stockAttrs"
            :disabled="isLoading || isReadonly"
            class="input input-bordered w-full"
          />
        </Field>
      </Cell>
    </Block>
    <div class="my-2 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>