feat(medicine-group): refactor + integrate

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

@@ -75,7 +75,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-equipment">
+  <form id="form-equipment" @submit.prevent>
     <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <Cell>
         <Label height="">Kode</Label>

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

@@ -1,37 +1,96 @@
+
 <script setup lang="ts">
-import Block from '~/components/pub/custom-ui/form/block.vue'
+// Components
-import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Block from '~/components/pub/custom-ui/doc-entry/block.vue'
-import Field from '~/components/pub/custom-ui/form/field.vue'
+import Cell from '~/components/pub/custom-ui/doc-entry/cell.vue'
-import Label from '~/components/pub/custom-ui/form/label.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 }>()
+// Types
-const emit = defineEmits(['update:modelValue', 'event'])
+import type { MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-const data = computed({
+// Helpers
-  get: () => props.modelValue,
+import type z from 'zod'
-  set: (val) => emit('update:modelValue', val),
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema?: z.ZodSchema<any>
+  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 emit = defineEmits<{
+  submit: [values: MedicineBaseFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: props.schema ? toTypedSchema(props.schema) : undefined,
+  initialValues: {
+    code: '',
+    name: '',
+  },
 })
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+}
+
+function onSubmitForm() {
+  const formData = {
+    name: name.value || '',
+    code: code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
+  <form id="form-medicine-group" @submit.prevent>
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
-      <div class="flex flex-col justify-between">
+      <Cell>
-        <Block>
+        <Label height="">Kode</Label>
-          <FieldGroup>
+        <Field :errMessage="errors.code">
-            <Label>Nama</Label>
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
-            <Field>
+        </Field>
-              <Input v-model="data.name" />
+      </Cell>
-            </Field>
+      <Cell>
-          </FieldGroup>
+        <Label height="compact">Nama</Label>
-          <FieldGroup>
+        <Field :errMessage="errors.name">
-            <Label>Kode</Label>
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
-            <Field>
+        </Field>
-              <Input />
+      </Cell>
-            </Field>
+    </Block>
-          </FieldGroup>
+    <div class="my-2 flex justify-end gap-2 py-2">
-        </Block>
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
-      </div>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
     </div>
   </form>
 </template>

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

@@ -73,7 +73,7 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-tools">
+  <form id="form-tools" @submit.prevent>
     <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
       <Cell>
         <Label height="compact">Kode</Label>

app/components/content/equipment/list.vue

@@ -36,23 +36,6 @@ import { getSourceUoms } from '~/services/uom.service'
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
-const getEquipmentDetail = async (id: number | string) => {
-  const result = await getSourceMaterialDetail(id)
-  if (result.success) {
-    const currentMaterial = result.body?.data || {}
-    recItem.value = currentMaterial
-    isFormEntryDialogOpen.value = true
-  }
-}
-
-const getUomList = async () => {
-  const result = await getSourceUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 const {
   data,
   isLoading,
@@ -104,16 +87,33 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getSourceMaterialDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getUomList = async () => {
+  const result = await getSourceUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getEquipmentDetail(recId.value)
+      getCurrentMaterialDetail(recId.value)
       title.value = 'Detail Perlengkapan'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getEquipmentDetail(recId.value)
+      getCurrentMaterialDetail(recId.value)
       title.value = 'Edit Perlengkapan'
       isReadonly.value = false
       break

app/components/content/medicine-group/list.vue

@@ -1,75 +1,163 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+// Components
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
-import Modal from '~/components/pub/base/modal/modal.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
+// Helpers
-const entry = ref<any>({})
+import { usePaginatedList } from '~/composables/usePaginatedList'
-const page = ref(1)
+import { toast } from '~/components/pub/ui/toast'
-const rowsPerPage = ref(10)
-const totalPages = 20
 
-const refSearchNav: RefSearchNav = {
+// Types
-  onClick: () => {
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
-    // open filter modal
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
 
-// Loading state management
+// Handlers
-const isLoading = reactive<DataTableLoader>({
+import {
-  summary: false,
+  recId,
-  isTableLoading: false,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineGroupList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineGroups({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
 })
 
-const isOpen = ref(false)
+const headerPrep: HeaderPrep = {
-
+  title: 'Kelompok Obat',
-const recId = ref<number>(0)
+  icon: 'i-lucide-medicine-bottle',
-const recAction = ref<string>('')
+  refSearchNav: {
-const recItem = ref<any>(null)
+    placeholder: 'Cari (min. 3 karakter)...',
-
+    minLength: 3,
-const hreaderPrep: HeaderPrep = {
+    debounceMs: 500,
-  title: 'Golongan Obat',
+    showValidationFeedback: true,
-  icon: 'i-lucide-users',
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentMedicineGroupDetail = async (id: number | string) => {
+  const result = await getMedicineGroupDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineGroupList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="p-4">
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <AppMedicineGroupList :data="data" />
+    <div class="rounded-md border p-4">
-    <Pagination v-model:page="page" v-model:rows-per-page="rowsPerPage" :total-pages="totalPages" />
+      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-  </div>
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <Dialog
-    <AppMedicineGroupEntryForm v-model="entry" />
+      v-model:open="isFormEntryDialogOpen"
-  </Modal>
+      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineGroupEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineGroupList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>

app/components/content/medicine-method/list.vue

@@ -51,7 +51,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Metode Pemberian',
+  title: 'Metode Obat',
   icon: 'i-lucide-medicine-bottle',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -79,26 +79,25 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getMedicineMethodDetail(id)
+  if (result.success) {
+    const currentMaterial = result.body?.data || {}
+    recItem.value = currentMaterial
+    isFormEntryDialogOpen.value = true
+  }
+}
+
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMedicineMethodDetail(recId.value).then((result) => {
+      getCurrentMedicineMethodDetail(recId.value)
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
       title.value = 'Detail Metode Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
-      getMedicineMethodDetail(recId.value).then((result) => {
+      getCurrentMedicineMethodDetail(recId.value)
-        if (result.success) {
-          recItem.value = result.body?.data || {}
-          isFormEntryDialogOpen.value = true
-        }
-      })
       title.value = 'Edit Metode Obat'
       isReadonly.value = false
       break

app/components/content/tools/list.vue

@@ -36,22 +36,6 @@ import { getSourceUoms } from '~/services/uom.service'
 const uoms = ref<{ value: string; label: string }[]>([])
 const title = ref('')
 
-const getToolsDetail = async (id: number | string) => {
-  const result = await getSourceDeviceDetail(id)
-  if (result.success) {
-    const currentDevice = result.body?.data || {}
-    recItem.value = currentDevice
-  }
-}
-
-const getUomList = async () => {
-  const result = await getSourceUoms()
-  if (result.success) {
-    const currentUoms = result.body?.data || []
-    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
-  }
-}
-
 const {
   data,
   isLoading,
@@ -103,17 +87,33 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getSourceDeviceDetail(id)
+  if (result.success) {
+    const currentDevice = result.body?.data || {}
+    recItem.value = currentDevice
+  }
+}
+
+const getUomList = async () => {
+  const result = await getSourceUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
 // Watch for row actions
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getToolsDetail(recId.value)
+      getCurrentToolsDetail(recId.value)
       title.value = 'Detail Peralatan'
       isReadonly.value = true
       isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showEdit:
-      getToolsDetail(recId.value)
+      getCurrentToolsDetail(recId.value)
       title.value = 'Edit Peralatan'
       isReadonly.value = false
       isFormEntryDialogOpen.value = true