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

<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>