feat/procedure-room-order: finishing

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

@@ -1,40 +1,135 @@
 <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 PRSingleOptPicker  from '~/components/app/procedure-room/single-opt-picker.vue'
+import PRPicker  from '~/components/app/procedure-room/picker.vue'
 
-// Material Package & Item
+// 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 { getValueLabelList } from '~/services/material-package.service'
-import { getList as getMaterialPackageItemList } from '~/services/material-package-item.service'
+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'
 
-const vFn = () => {} // Void function
+// 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 materialPackageItems = await getValueLabelList()
-const selectedMaterialPackage = ref('')
 
-const materialPackageItemList = ref<MaterialPackageItem[]>([])
+//
+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 getMaterialPackageItemList({ 'material-package-code': newValue, includes: 'material' })
+  const res = await getmaterialPackageItems({
+    'material-package-code': selectedMaterialPackage.value,
+    includes: 'material'
+  })
   if (res.success) {
-    materialPackageItemList.value = res.body.data
+    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>
@@ -42,13 +137,37 @@ watch(selectedMaterialPackage, async (newValue) => {
 
   <Separator class="mb-4" />
 
-  <PRSwitcher v-model="procedureRoomType" />
+  <Detail :data="data" />
 
-  <PRMultiOptPicker v-if="procedureRoomType == 'procedure'" />
+  <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" />
 
-  <PRSingleOptPicker v-else />
+  <div class="w-full flex justify-center">
+    <NavEntry v-if="data.status_code == 'new'" @click="navClick" />
+    <NavDetail v-else @click="navClick" />
+  </div>
 
-  <MPSwitcher :items="materialPackageItems" v-model="selectedMaterialPackage" />
+  <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"
+    />
 
-  <MPIQuickList :data="materialPackageItemList" />
+    <Separator />
+    <NavOk @click="() => pickerDialogOpen = false" class="justify-center" />
+  </Dialog>
 </template>