feat(medicine): modify entry-form, create handler and service

app/components/app/medicine-method/entry-form.vue

@@ -8,7 +8,7 @@ import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
 
 // Types
-import type { MedicineBaseFormData } from '~/schemas/medicine.schema'
+import { type BaseFormData } from '~/schemas/base.schema'
 
 // Helpers
 import type z from 'zod'
@@ -26,7 +26,7 @@ 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: MedicineBaseFormData, resetForm: () => void]
+  submit: [values: BaseFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 

app/components/app/medicine/entry-form.vue

@@ -1,80 +1,160 @@
 <script setup lang="ts">
-import Block from '~/components/pub/custom-ui/form/block.vue'
-import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
-import Field from '~/components/pub/custom-ui/form/field.vue'
-import Label from '~/components/pub/custom-ui/form/label.vue'
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/custom-ui/doc-entry/field.vue'
+import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+interface Props {
+  schema?: z.ZodSchema<any>
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+  medicineGroups?: { value: string, label: string }[]
+  medicineMethods?: { value: string, label: string }[]
+  uoms?: { value: string, label: string }[]
+  infras?: { value: number|null, label: string }[]
+}
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+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: '',
+    uom_code: '',
+    infra_id: null,
+    stock: 0,
+  },
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+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 [uom_code, uomAttrs] = defineField('uom_code')
+const [infra_id, infraAttrs] = defineField('infra_id')
+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.uom_code !== undefined) uom_code.value = props.values.uom_code
+  if (props.values.infra_id !== undefined) infra_id.value = props.values.infra_id
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  medicineGroup_code.value = ''
+  medicineMethod_code.value = ''
+  uom_code.value = ''
+  infra_id.value = null
+  stock.value = 0
+}
+
+function onSubmitForm() {
+  const formData = {
+    code: code.value || '',
+    name: name.value || '',
+    medicineGroup_code: medicineGroup_code.value || '',
+    medicineMethod_code: medicineMethod_code.value || '',
+    uom_code: uom_code.value || '',
+    infra_id: infra_id.value === '' ? null : infra_id.value,
+    stock: stock.value || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Nama</Label>
-            <Field>
-              <Input type="text" name="identity_number" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode</Label>
-            <Field name="sip_number">
-              <Input type="text" name="sip_no" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Cara Pemberian</Label>
-            <Field name="phone">
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Bentuk Sediaan</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Dosis</Label>
-            <Field>
-              <Input type="number" name="outPatient_rate" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Infra</Label>
-            <Field>
-              <Input />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Stock</Label>
-            <Field>
-              <Input type="number" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Status</Label>
-            <Field>
-              <Input />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form id="form-medicine" @submit.prevent>
+    <Block labelSize="thin" 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 height="compact">Kelompok Obat</Label>
+        <Field :errMessage="errors.medicineGroup_code">
+          <select id="medicineGroup_code" v-model="medicineGroup_code" v-bind="medicineGroupAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full">
+            <option value="">Pilih kelompok obat</option>
+            <option v-for="item in props.medicineGroups || []" :key="item.value" :value="item.value">{{ item.label }}</option>
+          </select>
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Metode Pemberian</Label>
+        <Field :errMessage="errors.medicineMethod_code">
+          <select id="medicineMethod_code" v-model="medicineMethod_code" v-bind="medicineMethodAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full">
+            <option value="">Pilih metode pemberian</option>
+            <option v-for="item in props.medicineMethods || []" :key="item.value" :value="item.value">{{ item.label }}</option>
+          </select>
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <select id="uom_code" v-model="uom_code" v-bind="uomAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full">
+            <option value="">Pilih satuan</option>
+            <option v-for="item in props.uoms || []" :key="item.value" :value="item.value">{{ item.label }}</option>
+          </select>
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Infra</Label>
+        <Field :errMessage="errors.infra_id">
+          <select id="infra_id" v-model="infra_id" v-bind="infraAttrs" :disabled="isLoading || isReadonly" class="input input-bordered w-full">
+            <option value="">Tidak ada</option>
+            <option v-for="item in props.infras || []" :key="String(item.value)" :value="item.value">{{ item.label }}</option>
+          </select>
+        </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>