feat/device-order: final

app/components/content/device-order/list.vue

@@ -1,72 +1,38 @@
 <script setup lang="ts">
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
 // Components
-import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import List from '~/components/app/device-order/list.vue'
-
-// Helpers
-import { usePaginatedList } from '~/composables/usePaginatedList'
 import { toast } from '~/components/pub/ui/toast'
-// import { useQueryMode } from '~/composables/useQueryMode'
-import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { type DeviceOrderFormData, DeviceOrderSchema  } from '~/schemas/device-order.schema'
-import type { DeviceOrder } from "~/models/device-order";
 
-// Handlers
+// Device order things
 import {
   recId,
   recAction,
   recItem,
   isReadonly,
-  isProcessing,
-  isFormEntryDialogOpen,
-  isRecordConfirmationOpen,
-  onResetState,
   handleActionSave,
-  handleActionEdit,
   handleActionRemove,
-  handleCancelForm,
 } from '~/handlers/device-order.handler'
+import { getList, submit } from '~/services/device-order.service'
+import type { ToastFn } from '~/handlers/_handler'
+import { type DeviceOrder } from "~/models/device-order";
+import ConfirmationInfo from '~/components/app/device-order/confirmation-info.vue'
 
-// Services
-import { getList, getDetail } from '~/services/device-order.service'
+// Props
+const props = defineProps<{
+  encounter_id: number
+}>()
 
-const route = useRoute()
-const { setQueryParams } = useQueryParam()
-
-const plainEid = route.params.id
-const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
-
-// const { mode, openForm, backToList } = useQueryMode()
-const { mode, goToEntry, backToList } = useQueryCRUDMode()
-// const { recordId } = useQueryCRUDRecordId()
-
-const {
-  data,
-  isLoading,
-  paginationMeta,
-  searchInput,
-  handlePageChange,
-  handleSearch,
-  fetchData: getMyList,
-} = usePaginatedList({
-  fetchFn: async (params: any) => {
-    const result = await getList({
-      'encounter-id': encounter_id,
-      search: params.search,
-      includes: 'doctor,doctor-employee,doctor-employee-person,items',
-      'page-number': params['page-number'] || 0,
-      'page-size': params['page-size'] || 10,
-    })
-    return { success: result.success || false, body: result.body || {} }
-  },
-  entityName: 'device-order',
-})
+const encounter_id = props.encounter_id
 
+// Header
 const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Alkes',
@@ -96,77 +62,81 @@ const headerPrep: HeaderPrep = {
           'id': saveResp.body?.data?.id.toString()
         })
       }
-      // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      // goToEntry()
     },
   },
 }
 
+// List
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'encounter-id': encounter_id,
+      search: params.search,
+      includes: 'doctor,doctor-employee,doctor-employee-person,items,items-device',
+      page: params.page,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device-order',
+})
+
+// Selected item
+const selectedItem = ref<DeviceOrder | null>()
+const isSubmitConfirmationOpen = ref(false)
+const isDeleteConfirmationOpen = ref(false)
+const { setQueryParams } = useQueryParam()
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
 watch([recId, recAction], () => {
+  let item: DeviceOrder | null
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getMyDetail(recId.value)
-      isReadonly.value = true
+      setQueryParams({
+        'mode': 'entry',
+        'id': recId.value.toString()
+      })
       break
-    case ActionEvents.showEdit:
-      getMyDetail(recId.value)
-      isReadonly.value = false
+    case ActionEvents.showConfirmSubmit:
+      selectedItem.value = pickItem()
+      isSubmitConfirmationOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
+      selectedItem.value = pickItem()
+      isDeleteConfirmationOpen.value = true
       break
   }
+  recAction.value = '';
 })
 
-// watch([isFormEntryDialogOpen], async () => {
-//   if (isFormEntryDialogOpen.value) {
-//     isFormEntryDialogOpen.value = false;
-//     const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
-//     if (saveResp.success) {
-//       setQueryParams({
-//         'mode': 'entry',
-//         'id': saveResp.body?.data?.id.toString()
-//       })
-//     }
-//   }
-// })
-
-// Watch for row actions when recId or recAction changes
-// onMounted(async () => {
-//   await getMyList()
-// })
-
-// Functions
-const getMyDetail = async (id: number | string) => {
-  const result = await getDetail(id)
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
   if (result.success) {
-    const currentValue = result.body?.data || {}
-    recItem.value = currentValue
-    isFormEntryDialogOpen.value = true
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
   }
 }
 
-function cancel(data: DeviceOrder) {
-  recId.value = data.id
-  recItem.value = data
-  isRecordConfirmationOpen.value = true
+function pickItem(): DeviceOrder | null {
+  const item = data.value.find(item => item.id === recId.value)
+  selectedItem.value = item
+  return item
 }
-
-function edit(data: DeviceOrder) {
-  setQueryParams({
-    'mode': 'entry',
-    'id': data.id.toString()
-  })
-  recItem.value = data
-}
-
-function submit(data: DeviceOrder) {
-}
-
 </script>
 
 <template>
@@ -175,42 +145,39 @@ function submit(data: DeviceOrder) {
     :prep="headerPrep"
     :ref-search-nav="headerPrep.refSearchNav"
     @search="handleSearch"
-    class="mb-4 xl:mb-5"
   />
 
   <List
     v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+  <!-- 
     @cancel="cancel"
     @edit="edit"
     @submit="submit"
-    @page-change="handlePageChange"
-  />
+   -->
 
-  <!-- Record Confirmation Modal -->
+  <!-- Submit Record Confirmation Modal -->
   <RecordConfirmation
-    v-model:open="isRecordConfirmationOpen"
+    v-model:open="isSubmitConfirmationOpen"
+    customTitle="Ajukan Order"
+    customMessage="Akan dilakukan pengajuan order alat kesehatan"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+  >
+    <ConfirmationInfo :data="selectedItem" />
+  </RecordConfirmation>
+
+  <!-- Del Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isDeleteConfirmationOpen"
     action="delete"
     :record="recItem"
     @confirm="() => handleActionRemove(recId, getMyList, 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>
+    <ConfirmationInfo :data="selectedItem" />
   </RecordConfirmation>
 </template>