feat(medicine-method): integrate + refactor entry

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

@@ -1,74 +1,154 @@
+
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Modal from '~/components/pub/base/modal/modal.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import { getMedicineMethods } from '~/services/medicine-method.service'
+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'
+import { toast } from '~/components/pub/ui/toast'
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
 
-const data = ref([])
-const entry = ref<any>({})
+const title = ref('')
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineMethods({ search, page })
+    return { success: result.success || false, body: result.body || {} }
   },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+  entityName: 'medicine-method',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Metode Pemberian',
   icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    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 getData() {
-  try {
-    isLoading.isTableLoading = true
-    data.value = await getMedicineMethods()
-  } catch (err) {
-    console.error(err)
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-onMounted(() => {
-  getData()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMedicineMethodDetail(recId.value).then(result => {
+        if (result.success) {
+          recItem.value = result.body?.data || {}
+          isFormEntryDialogOpen.value = true
+        }
+      })
+      title.value = 'Detail Metode Pemberian'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMedicineMethodDetail(recId.value).then(result => {
+        if (result.success) {
+          recItem.value = result.body?.data || {}
+          isFormEntryDialogOpen.value = true
+        }
+      })
+      title.value = 'Edit Metode Pemberian'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineMethodList :data="data" />
-  </div>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
-    <AppMedicineMethodEntryForm v-model="entry" />
-  </Modal>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Metode Pemberian'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineMethodEntryForm
+        :model-value="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineMethodList, 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>