munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/procedure-room-order: finishing

Browse Source
This commit is contained in:
Andrian Roshandy
2025-12-04 10:25:50 +07:00
parent acb573e279
commit a0dfd214e5
5 changed files with 209 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/content/procedure-room-order/entry.vue
+137 -18
View File
@@ -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>
app/components/content/procedure-room-order/list.vue
+42 -25
View File
@@ -2,38 +2,37 @@
// Composables
import { usePaginatedList } from '~/composables/usePaginatedList'
// Handlers
import type { ToastFn } from '~/handlers/_handler'
// Pubs component
import { toast } from '~/components/pub/ui/toast'
import { type HeaderPrep } from '~/components/pub/my-ui/data/types'
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
// Handlers
// Order
import {
recId,
recAction,
recItem,
isReadonly,
isRecordConfirmationOpen,
handleActionRemove,
handleActionSave,
} from '~/handlers/procedure-room-order.handler'
// Services
import { getList, getDetail } from '~/services/procedure-room-order.service'
import List from '~/components/app/procedure-room-order/list.vue'
import { getList, create, submit } from '~/services/procedure-room-order.service'
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
// import { submit } from '~/services/prescription.service'
import type { ToastFn } from '~/handlers/_handler'
import List from '~/components/app/procedure-room-order/list.vue'
// Common prep
const route = useRoute()
const { setQueryParams } = useQueryParam()
const isSubmitConfirmationOpen = ref(false)
const { crudQueryParams } = useQueryCRUD()
const plainEid = route.params.id
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
const isSubmitConfirmationOpen = ref(false)
// Main data
const {
data,
isLoading,
@@ -44,7 +43,7 @@ const {
fetchFn: async (params: any) => {
const result = await getList({
'encounter-id': encounter_id,
// includes: '',
includes: 'items',
search: params.search,
page: params.page,
'page-number': params['page-number'] || 0,
@@ -55,7 +54,7 @@ const {
entityName: 'prescription'
})
const vFn = () => {} // Void function
// Header things
const headerPrep: HeaderPrep = {
title: 'Order Ruang Tindakan',
icon: 'i-lucide-box',
@@ -76,17 +75,35 @@ const headerPrep: HeaderPrep = {
onClick: async () => {
recItem.value = null
recId.value = 0
setQueryParams({
'mode': 'entry',
})
const res = await create({ encounter_id })
if (res.success) {
crudQueryParams.value = { mode: 'entry', recordId: res.body?.data.id.toString() || '0' }
}
},
},
}
// list actions
const timestamp = ref<any>({})
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
provide('timestamp', timestamp)
watch(recAction, () => {
if (!recAction.value) {
return
} else if (recAction.value === ActionEvents.showDetail) {
crudQueryParams.value = { mode: 'entry', recordId: recId.value || '0' }
} else if (recAction.value === ActionEvents.showConfirmSubmit) {
isSubmitConfirmationOpen.value = true
} else if (recAction.value === ActionEvents.showConfirmDelete) {
isRecordConfirmationOpen.value = true
}
recAction.value = ''
})
///// functions
function confirmCancel(data: ProcedureRoomOrder) {
recId.value = data.id
@@ -109,13 +126,13 @@ function confirmSubmit(data: ProcedureRoomOrder) {
}
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' })
// }
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>
@@ -141,7 +158,7 @@ async function handleActionSubmit(id: number, refresh: () => void, toast: ToastF
<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 class="">{{ recItem.createdAt?.substring(0, 10) }}</div>
</div>
<div class="flex">
<div class="w-20">DPJP</div>
app/components/content/procedure-room-order/main.vue
+3 -2
View File
@@ -7,10 +7,11 @@ const props = defineProps<{
encounter_id: number
}>()
const { mode } = useQueryCRUDMode()
const { crudQueryParams } = useQueryCRUD()
</script>
<template>
<List v-if="mode === 'list'" :encounter_id="encounter_id" />
<List v-if="crudQueryParams.mode === 'list'" :encounter_id="encounter_id" />
<Entry v-else :encounter_id="encounter_id" />
<div class="hidden">{{ crudQueryParams.mode }}</div>
</template>
app/models/procedure-room-order.ts
+6 -5
View File
@@ -4,18 +4,19 @@ import { genProcedureRoom, type ProcedureRoom } from "./procedure-room";
export interface ProcedureRoomOrder extends Base {
encounter_id: number
infra_code: string
procedureRoom: ProcedureRoom
materialPackage_code: string
materialPackage_code?: string
materialPackage: MaterialPackage
items?: ProcedureRoom[]
}
export interface CreateDto {
encounter_id: number
}
export function genProcedureRoomOrder(): ProcedureRoomOrder {
return {
...genBase(),
encounter_id: 0,
infra_code: '',
procedureRoom: genProcedureRoom(),
materialPackage_code: '',
materialPackage: genMaterialPackage(),
}
app/services/procedure-room-order.service.ts
+21 -5
View File
@@ -1,11 +1,11 @@
// Base
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
import type { ProcedureRoomOrder, CreateDto } from '~/models/procedure-room-order'
import * as base from './_crud-base'
const name = 'procedure-room'
const name = 'procedure-room-order'
const path = `/api/v1/${name}`
export function create(data: ProcedureRoomOrder) {
export function create(data: CreateDto) {
return base.create(path, data, name)
}
@@ -13,8 +13,8 @@ export function getList(params: any = null) {
return base.getList(path, params, name)
}
export function getDetail(id: number | string) {
return base.getDetail(path, id, name)
export function getDetail(id: number | string, params: any = null) {
return base.getDetail(path, id, name, params)
}
export function update(id: number | string, data: ProcedureRoomOrder) {
@@ -24,3 +24,19 @@ export function update(id: number | string, data: ProcedureRoomOrder) {
export function remove(id: number | string) {
return base.remove(path, id, name)
}
export async function submit(id: number) {
try {
const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
const result: any = {}
if (resp.success) {
result.success = resp.success
result.body = (resp.body as Record<string, any>) || {}
return result
}
} catch (error) {
console.error(`Error submitting ${name}:`, error)
throw new Error(`Failed to submit ${name}`)
}
}