Merge branch 'feat/mcu-order' into feat/micro-lab-order-50

app/components/app/mcu-order/confirmation-info.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrder } from '~/models/mcu-order';
+
+defineProps<{
+  recItem: McuOrder
+}>()
+</script>
+
+<template>
+    <div class="flex mb-2">
+      <div class="w-20">Tanggal</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.createdAt?.substring(0, 10) }}</div>
+    </div>
+    <div class="flex">
+      <div class="w-20">DPJP</div>
+      <div class="w-4">:</div>
+      <div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
+    </div>
+</template>

app/components/app/mcu-order/detail.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
     <div class="text-sm 2xl:text-base font-semibold mb-3">
-      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data?.status_code }}
     </div>
     <div class="max-w-[1000px]">
       <DE.Block mode="preview" :col-count=5 class="!mb-3">

app/components/content/mcu-order/entry.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
+import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
+import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// mcu src category
+import ScrCategorySwitcher from '~/components/app/mcu-src-category/switcher.vue'
+import { getList as getMcuCategoryList } from '~/services/mcu-src-category.service'
+
+// mcu src
+import { type McuSrc } from '~/models/mcu-src'
+import { getList as getMcuSrcList } from '~/services/mcu-src.service'
+import McuSrcPicker from '~/components/app/mcu-src/picker-accordion.vue'
+
+// mcu order
+import { getDetail } from '~/services/mcu-order.service'
+import Detail from '~/components/app/mcu-order/detail.vue'
+
+// mcu order item, manually not using composable
+import {
+  getList as getMcuOrderItemList,
+  create as createMcuOrderItem,
+  remove as removeMcuOrderItem,
+} from '~/services/mcu-order-item.service'
+import { type McuOrderItem } from '~/models/mcu-order-item'
+import ItemListEntry from '~/components/app/mcu-order-item/list-entry.vue'
+
+// props
+const props = defineProps<{
+  encounter_id: number
+  scopeCode: string
+}>()
+
+// declaration & flows
+
+// MCU Order
+const { backToList, crudQueryParams } = useQueryCRUD()
+const id = crudQueryParams.value.recordId
+const dataRes = await getDetail(
+  typeof id === 'string' ? parseInt(id) : 0,
+  { includes: 'encounter,doctor,doctor-employee,doctor-employee-person' }
+)
+const data = dataRes.body?.data
+
+// MCU items
+const items = ref<McuOrderItem[]>([])
+
+// MCU Categories
+const mcuSrcCategoryRes = await getMcuCategoryList({ 'scope-code': props.scopeCode })
+const mcuSrcCategories = mcuSrcCategoryRes.body?.data
+const selectedMcuSrcCategory_code = ref('')
+
+// MCU Sources
+const mcuSrcs = ref<McuSrc[]>([])
+
+// const {
+//   data: items,
+//   fetchData: getItems,
+// } = usePaginatedList<McuOrderItem> ({
+//   fetchFn: async ({ page, search }) => {
+//     const result = await getMcuOrderItemList({ 'mcu-order-id': id, search, page })
+//     if (result.success) {
+//       items.value = result.body.data
+//     }
+//     return { success: result.success || false, body: result.body || {} }
+//   },
+//   entityName: 'mcu-order-item',
+// })
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail dan List Item Order Radiologi ',
+  icon: 'i-lucide-box',
+}
+
+const pickerDialogOpen = ref(false)
+
+onMounted(async () => {
+  await getItems()
+})
+
+watch(selectedMcuSrcCategory_code, async () => {
+  const res = await getMcuSrcList({ 'mcu-src-category-code': selectedMcuSrcCategory_code.value })
+  mcuSrcs.value = res.body?.data
+})
+
+function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
+  if (type === 'back') {
+    backToList()
+  }
+}
+
+function requestItem() {
+  pickerDialogOpen.value = true
+}
+
+async function pickItem(item: McuSrc) {
+  const exItem = items.value.find(e => e.mcuSrc_code === item.code)
+  if (exItem) {
+    await removeMcuOrderItem(exItem.id)
+    await getItems()
+  } else {
+    const intId = parseInt(id?.toString() || '0')
+    await createMcuOrderItem({
+      mcuOrder_id: intId,
+      mcuSrc_code: item.code,
+    })
+    await getItems()
+  }
+}
+
+async function getItems() {
+  const itemsRes = await getMcuOrderItemList({ 'mcu-order-id': id, includes: 'mcuSrc,mcuSrc-mcuSrcCategory' })
+  if (itemsRes.success) {
+      items.value = itemsRes.body.data
+  } else {
+    items.value = []
+  }
+}
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+
+  <Detail :data="data" />
+
+  <ItemListEntry
+    :data="items"
+    @requestItem="requestItem"/>
+  <Separator class="my-5" />
+
+  <div class="w-full flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+
+  <Dialog
+    v-model:open="pickerDialogOpen"
+    title="Pilih Item"
+    size="2xl"
+    prevent-outside
+  >
+    <ScrCategorySwitcher :data="mcuSrcCategories" v-model="selectedMcuSrcCategory_code" />
+    <McuSrcPicker v-model="items" :data-source="mcuSrcs" @pick="pickItem" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
+</template>

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+
+// Handlers
+import type { ToastFn } from '~/handlers/_handler'
+
+// Apps
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionRemove,
+} from '~/handlers/mcu-order.handler'
+import { getList, getDetail, submit } from '~/services/mcu-order.service'
+import type { McuOrder } from '~/models/mcu-order'
+// import List from '~/components/app/mcu-order/micro-list.vue'
+import ConfirmationInfo from '~/components/app/mcu-order/confirmation-info.vue'
+
+// Props
+const props = defineProps<{
+  scopeCode: string
+}>()
+
+// Common preparations
+const route = useRoute()
+const { crudQueryParams } = useQueryCRUD()
+
+const title = ref('')
+const plainEid = route.params.id
+const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0 // here the
+const isSubmitConfirmationOpen = ref(false)
+
+// Data
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  fetchData: getMyList,
+} = usePaginatedList<McuOrder>({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({
+      search,
+      page,
+      'scope-code': props.scopeCode,
+      'encounter-id': encounter_id,
+      includes: 'doctor,doctor-employee,doctor-employee-person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'mcu-order'
+})
+
+// Header
+const headerPrep: HeaderPrep = {
+  title: 'Order Lab Mikro',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: async () => {
+      const saveResp = await handleActionSave({ encounter_id, scope_code: props.scopeCode }, () => {}, () =>{}, toast)
+      if (saveResp.success) {
+        crudQueryParams.value = { mode: 'entry', recordId: saveResp.body?.data?.id.toString() }
+      }
+    },
+  },
+}
+
+// List component
+let List: Component
+if(props.scopeCode == 'radiology') {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+} else if(props.scopeCode == 'cp-lab') {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+} else if (props.scopeCode == 'micro-lab') {
+  List = defineAsyncComponent(() => import('~/components/app/mcu-order/micro-list.vue'))
+} else {
+  List = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
+}
+
+// Reactivities
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Order Lab PK'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Order Lab PK'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+///// Functions
+async function getMyDetail (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: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isRecordConfirmationOpen.value = true
+}
+
+function edit(data: McuOrder) {
+  crudQueryParams.value = { mode: 'entry', recordId: data.id.toString() }
+}
+
+function confirmSubmit(data: McuOrder) {
+  recId.value = data.id
+  recItem.value = data
+  isSubmitConfirmationOpen.value = true
+}
+
+async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
+  const result = await submit(id)
+  if (result.success) {
+    toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
+    setTimeout(refresh, 300)
+  } else {
+    toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
+  }
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <List
+    v-if="!isLoading.dataListLoading"
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @cancel="cancel"
+    @edit="edit"
+    @submit="confirmSubmit"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <ConfirmationInfo :rec-item="recItem" />
+  </RecordConfirmation>
+
+  <RecordConfirmation
+    v-model:open="isSubmitConfirmationOpen"
+    action="delete"
+    customTitle="Ajukan Resep"
+    customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
+    customConfirmText="Ajukan"
+    :record="recItem"
+    @confirm="() => handleActionSubmit(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <ConfirmationInfo :rec-item="recItem" />
+  </RecordConfirmation>
+</template>

app/components/content/mcu-order/main.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+//
+import List from './list.vue'
+import Entry from './entry.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { mode } = useQueryCRUDMode()
+</script>
+
+<template>
+  <List v-if="mode === 'list'" :encounter_id="encounter_id" />
+  <Entry v-else :encounter_id="encounter_id" />
+</template>