feat/device-order: adjustment wip

app/components/app/device-order/list.config.ts

@@ -1,13 +1,20 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import type { DeviceOrder } from '~/models/device-order'
-import { defineAsyncComponent } from 'vue'
+// import type {} from 
+// import { defineAsyncComponent } from 'vue'
+
+// const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
 export const config: Config = {
-  cols: [{ width: 120 }, { }, { }, { width: 50 }],
+  cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
-  headers: [[{ label: 'Tanggal' }, { label: 'DPJP' }, { label: 'Alat Kesehatan' }, { label: '' }]],
+  headers: [[
-  keys: ['createdAt', 'encounter.doctor.person.name', 'items', 'action'],
+    { label: 'Tanggal' },
+    { label: 'DPJP' },
+    { label: 'Alat Kesehatan' },
+    { label: 'Status' },
+    { label: '' }]],
+  keys: ['createdAt', 'doctor.employee.person.name', 'items', 'status_code', 'action'],
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
@@ -18,13 +25,17 @@ export const config: Config = {
       const recX = rec as DeviceOrder
       return recX.items?.length || 0
     },
-  }
+  },
-  // funcParsed: {
+  parses: {
-  //   parent: (rec: unknown): unknown => {
+    createdAt: (rec: unknown): unknown => {
-  //     const recX = rec as SmallDetailDto
+      const recX = rec as DeviceOrder
-  //     return recX.parent?.name || '-'
+      return recX.createdAt ? new Date(recX.createdAt).toLocaleDateString() : '-'
-  //   },
+    },
-  // },
+    // parent: (rec: unknown): unknown => {
+    //   const recX = rec as SmallDetailDto
+    //   return recX.parent?.name || '-'
+    // },
+  },
   // funcComponent: {
   //   action(rec: object, idx: any) {
   //     const res: RecComponent = {

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

@@ -8,12 +8,10 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 // Configs
 import { config } from './list.config'
 
-interface Props {
+defineProps<{
   data: any[]
   paginationMeta: PaginationMeta
-}
+}>()
-
-defineProps<Props>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -28,7 +26,7 @@ function handlePageChange(page: number) {
   <div class="space-y-4">
     <PubMyUiDataTable
       v-bind="config"
-      :rows="[]"
+      :rows="data"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>

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

@@ -32,21 +32,18 @@ import {
   handleCancelForm,
 } from '~/handlers/device-order.handler'
 
-// 
+// Services
-import { getList } from '~/services/device-order.service'
+import { getList, getDetail } from '~/services/device-order.service'
-
-// Props
-interface Props {
-  encounter_id: number
-}
-const props = defineProps<Props>()
 
 const route = useRoute()
-const title = ref('')
+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 { recordId } = useQueryCRUDRecordId()
 
 const {
   data,
@@ -59,18 +56,18 @@ const {
 } = usePaginatedList({
   fetchFn: async (params: any) => {
     const result = await getList({
+      'encounter-id': encounter_id,
       search: params.search,
-      sort: 'createdAt:asc',
+      includes: 'doctor,doctor-employee,doctor-employee-person,items',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      // includes: 'encounter',
-      includes: 'parent,childrens',
     })
     return { success: result.success || false, body: result.body || {} }
   },
   entityName: 'device-order',
 })
 
+const voidFn = () => {}
 const headerPrep: HeaderPrep = {
   title: 'Order Alkes',
   icon: 'i-lucide-box',
@@ -89,19 +86,18 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: async () => {
-      const data = {
-        encounter_id: props.encounter_id,
-      }
-      const dateResp = await handleActionSave(data, getMyList, () => {}, () => {})
-      if (dateResp.success) {
-        const currentData = dateResp.body.data || []
-        // goToEntry()
-      }
       recItem.value = null
       recId.value = 0
       isReadonly.value = false
+      const saveResp = await handleActionSave({ encounter_id }, voidFn, voidFn, voidFn)
+      if (saveResp.success) {
+        setQueryParams({
+          'mode': 'entry',
+          'id': saveResp.body?.data?.id.toString()
+        })
+      }
       // await handleActionSave(recItem, getMyList, () => {}, () => {})
-      goToEntry()
+      // goToEntry()
     },
   },
 }
@@ -111,10 +107,66 @@ 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], () => {
-onMounted(async () => {
+  switch (recAction.value) {
-  await getMyList()
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      break
+  }
 })
+
+// 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)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+function cancel(data: DeviceOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: DeviceOrder) {
+  setQueryParams({
+    'mode': 'entry',
+    'id': data.id.toString()
+  })
+  recItem.value = data
+}
+
+function submit(data: DeviceOrder) {
+}
+
 </script>
 
 <template>
@@ -127,8 +179,12 @@ onMounted(async () => {
   />
 
   <List
+    v-if="!isLoading.dataListLoading"
     :data="data"
     :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="submit"
     @page-change="handlePageChange"
   />
 

app/models/device-order.ts

@@ -1,9 +1,11 @@
 import { type Base, genBase } from "./_base"
+import type { DeviceOrderItem } from "./device-order-item"
 
 export interface DeviceOrder extends Base {
   encounter_id: number
   doctor_id: number
   status_code?: string
+  items: DeviceOrderItem[]
 }
 
 export function genDeviceOrder(): DeviceOrder {
@@ -11,5 +13,6 @@ export function genDeviceOrder(): DeviceOrder {
     ...genBase(),
     encounter_id: 0,
     doctor_id: 0,
+    items: []
   }
 }