From 8d2d1541417634c71d182a1e47df4ca18f488d5f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 26 Sep 2025 13:12:48 +0700
Subject: [PATCH] feat(medicine-group): refactor list

---
 app/components/app/equipment/list.vue         |  1 -
 app/components/app/medicine-group/list.vue    | 36 +++++++++++++------
 app/components/app/medicine-method/list.vue   | 36 +++++++++++++------
 app/components/app/tools/list.vue             | 10 ++++--
 .../content/medicine-group/list.vue           | 13 ++++---
 .../content/medicine-method/list.vue          |  1 -
 6 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index c64c64a2..d44aa4d8 100644
--- a/app/components/app/equipment/list.vue
+++ b/app/components/app/equipment/list.vue
@@ -30,7 +30,6 @@ function handlePageChange(page: number) {
       :func-html="funcHtml"
       :func-component="funcComponent"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/app/medicine-group/list.vue b/app/components/app/medicine-group/list.vue
index 5b8778d9..d44aa4d8 100644
--- a/app/components/app/medicine-group/list.vue
+++ b/app/components/app/medicine-group/list.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/components/app/medicine-method/list.vue b/app/components/app/medicine-method/list.vue
index 5b8778d9..d44aa4d8 100644
--- a/app/components/app/medicine-method/list.vue
+++ b/app/components/app/medicine-method/list.vue
@@ -1,19 +1,35 @@
 <script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 076f0f41..d44aa4d8 100644
--- a/app/components/app/tools/list.vue
+++ b/app/components/app/tools/list.vue
@@ -22,10 +22,14 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-      :func-html="funcHtml" :func-component="funcComponent"
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
     />
-
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>
diff --git a/app/components/content/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
index d437b0c5..34e8d628 100644
--- a/app/components/content/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -2,8 +2,7 @@
 // Components
 import Dialog from '~/components/pub/base/modal/dialog.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 AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
 // Helpers
@@ -27,7 +26,7 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/medicine-method.handler'
+} from '~/handlers/medicine-group.handler'
 
 // Services
 import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
@@ -47,7 +46,7 @@ const {
     const result = await getMedicineGroups({ search, page })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'medicine-method',
+  entityName: 'medicine-group',
 })
 
 const headerPrep: HeaderPrep = {
@@ -93,12 +92,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentMedicineGroupDetail(recId.value)
-      title.value = 'Detail Metode Obat'
+      title.value = 'Detail Kelompok Obat'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentMedicineGroupDetail(recId.value)
-      title.value = 'Edit Metode Obat'
+      title.value = 'Edit Kelompok Obat'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -121,7 +120,7 @@ onMounted(async () => {
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      :title="!!recItem ? title : 'Tambah Kelompok Obat'"
       size="lg"
       prevent-outside
     >
diff --git a/app/components/content/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
index 9a400c05..fee2e16f 100644
--- a/app/components/content/medicine-method/list.vue
+++ b/app/components/content/medicine-method/list.vue
@@ -3,7 +3,6 @@
 import Dialog from '~/components/pub/base/modal/dialog.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'
 
 // Helpers