simrsx-fe/app/components/content/procedure-room-order/entry.vue

<script setup lang="ts">
//
import * as CH from '~/components/pub/my-ui/content-header'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import NavEntry from '~/components/pub/my-ui/nav-footer/ba-de-dr-su.vue'
import NavDetail from '~/components/pub/my-ui/nav-footer/ba.vue'
import NavOk from '~/components/pub/my-ui/nav-footer/ok.vue'

// Procedure Room
import type { ProcedureRoom } from '~/models/procedure-room'
import { getList as getProcedureRoomList } from '~/services/procedure-room.service'
import PRSwitcher from '~/components/app/procedure-room/switcher.vue'
import PRMultiOptPicker  from '~/components/app/procedure-room/multi-opt-picker.vue'
import PRPicker  from '~/components/app/procedure-room/picker.vue'

// Material Package
import type { MaterialPackage } from '~/models/material-package'
import { getList as getMaterialPackageList } from '~/services/material-package.service'

// Material Package Item
import type { MaterialPackageItem } from '~/models/material-package-item'
import { getList as getmaterialPackageItems } from '~/services/material-package-item.service'
import MPSwitcher from '~/components/app/material-package/switcher.vue'
import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'

// Main data
import { getDetail } from '~/services/procedure-room-order.service'
import Detail from '~/components/app/procedure-room-order/detail.vue'

// Items data
import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item'
import {
  getList as getOrderItemList,
  create as createOrderItem,
  remove as removeOrderItem,
} from '~/services/procedure-room-order-item.service'
import ItemListEntry from '~/components/app/procedure-room-order-item/list-entry.vue'
import ItemListDetail from '~/components/app/procedure-room-order-item/list-detail.vue'

// data
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
const items = ref<ProcedureRoomOrderItem[]>([])

// Header
const headerConfig: CH.Config = {
  title: 'Order Ruang Tindakan',
  icon: 'i-lucide-box',
}

//
const pickerDialogOpen = ref(false)
const procedureRooms = ref<ProcedureRoom[]>([])
const procedureRoomType = ref('procedure')
getProcedureRooms(procedureRoomType.value)
watch(procedureRoomType, async (newValue) => {
  getProcedureRooms(newValue)
})

//
const materialPackages = ref<MaterialPackage[]>([])
const selectedMaterialPackage = ref('')
const res = await getMaterialPackageList()
if (res.success) {
  materialPackages.value = res.body.data
}

//
const materialPackageItems = ref<MaterialPackageItem[]>([])
watch(selectedMaterialPackage, async (newValue) => {
  const res = await getmaterialPackageItems({
    'material-package-code': selectedMaterialPackage.value,
    includes: 'material'
  })
  if (res.success) {
    materialPackageItems.value = res.body.data
  }
})

// last flow
onMounted(async () => {
  await getItems()
})

///// functions
async function getProcedureRooms(typeCode: string) {
  const res = await getProcedureRoomList({ 'type-code': typeCode, includes: 'infra' })
  if (res.success) {
    procedureRooms.value = res.body.data
  }
}

async function getItems() {
  const res = await getOrderItemList({
    'procedure-room-order-id': crudQueryParams.value.recordId,
    includes: 'procedureRoom,procedureRoom-infra',
  })
  if (res.success) {
    items.value = res.body.data
  }
}

async function pickItem(item: ProcedureRoom) {
  const exItem = items.value.find(e => e.procedureRoom_code === item.code)
  if (exItem) {
    await removeOrderItem(exItem.id)
    await getItems()
  } else {
    const intId = parseInt(id?.toString() || '0')
    await createOrderItem({
      procedureRoomOrder_id: intId,
      procedureRoom_code: item.code,
    })
    await getItems()
  }
}

function requestItem() {
  pickerDialogOpen.value = true
}

function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
  if (type === 'back') {
    backToList()
  }
}

</script>

<template>
  <CH.ContentHeader v-bind="headerConfig" />

  <Separator class="mb-4" />

  <Detail :data="data" />

  <template v-if="data.status_code == 'new'">
    <ItemListEntry :data="items" @requestItem="requestItem" />
    <MPSwitcher :data="materialPackages" v-model="selectedMaterialPackage" />
  </template>
  <template v-else>
    <ItemListDetail :data="items" @requestItem="requestItem" />
  </template>
  <MPIQuickList :data="materialPackageItems" />

  <div class="w-full flex justify-center">
    <NavEntry v-if="data.status_code == 'new'" @click="navClick" />
    <NavDetail v-else @click="navClick" />
  </div>

  <Dialog
    v-model:open="pickerDialogOpen"
    title="Pilih Item"
    size="2xl"
    prevent-outside
  >
    <PRSwitcher v-model="procedureRoomType" />
    <PRPicker
      :data="procedureRooms"
      :pick-mode="procedureRoomType == 'procedure' ? 'multi' : 'single'"
      v-model="items"
      @pick="pickItem"
    />

    <Separator />
    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
  </Dialog>
</template>