feat/device-order: final
This commit is contained in:
Andrian Roshandy
@@ -1,24 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/ba-su.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
|
||||
// Composables
|
||||
import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
|
||||
// Pub components
|
||||
import Nav from '~/components/pub/my-ui/nav-footer/ba-de-su.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
|
||||
// Refs / src
|
||||
import { type Device } from '~/models/device'
|
||||
import { getList as getDeviceList } from '~/services/device.service'
|
||||
|
||||
// Device order things
|
||||
import { getDetail, remove, submit } from '~/services/device-order.service'
|
||||
import EntryForm from '~/components/app/device-order/entry-form.vue'
|
||||
|
||||
// Items
|
||||
import {
|
||||
getList as getItemList,
|
||||
create as createItem,
|
||||
update as updateItem,
|
||||
} from '~/services/device-order-item.service'
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
handleActionRemove,
|
||||
} from '~/handlers/device-order-item.handler'
|
||||
import { genDeviceOrderItem, type DeviceOrderItem } from '~/models/device-order-item'
|
||||
import ItemListEntry from '~/components/app/device-order-item/list-entry.vue'
|
||||
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
const { backToList } = useQueryCRUDMode()
|
||||
import ItemEntry from '~/components/app/device-order-item/entry-form.vue'
|
||||
|
||||
// Header
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Tambah Order Alkes',
|
||||
icon: 'i-lucide-box',
|
||||
}
|
||||
|
||||
function navClick(type: 'cancel' | 'submit') {
|
||||
if (type === 'cancel') {
|
||||
backToList()
|
||||
}
|
||||
// Device order things
|
||||
const { getQueryParam } = useQueryParam()
|
||||
const rawId = getQueryParam('id')
|
||||
const id = typeof rawId === 'string' ? parseInt(rawId) : 0
|
||||
const dataRes = await getDetail(id, { includes: 'doctor,doctor-employee,doctor-employee-person' })
|
||||
const data = ref(dataRes.body?.data || null)
|
||||
const devices = ref<Device[]>([])
|
||||
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
const isDeleteConfirmationOpen = ref(false)
|
||||
|
||||
// Items
|
||||
const {
|
||||
data: items,
|
||||
isLoading,
|
||||
fetchData: getDeviceOrderItems,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getItemList({
|
||||
'device-order-id': id,
|
||||
includes: 'device',
|
||||
search: params.search,
|
||||
sort: 'createdAt:asc',
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'division',
|
||||
})
|
||||
const selectedItem = ref<DeviceOrderItem>(genDeviceOrderItem())
|
||||
const isItemDetailDialogOpen = ref(false)
|
||||
const isItemEntryDialogOpen = ref(false)
|
||||
const isItemDelConfirmDialogOpen = ref(false)
|
||||
|
||||
selectedItem.value.deviceOrder_id = id
|
||||
|
||||
// Last navs
|
||||
const { backToList } = useQueryCRUDMode()
|
||||
|
||||
// Reactivities
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch([recId, recAction], () => {
|
||||
let item: DeviceOrderItem | null
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
item = pickItem()
|
||||
if (item) {
|
||||
isItemDetailDialogOpen.value = true
|
||||
}
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
item = pickItem()
|
||||
if (item) {
|
||||
isItemEntryDialogOpen.value = true
|
||||
getDevices('', item.device_code)
|
||||
}
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isItemDelConfirmDialogOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await getDeviceOrderItems()
|
||||
})
|
||||
|
||||
// Functions
|
||||
function navClick(type: 'back' | 'delete' | 'draft' | 'submit') {
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
} else if (type === 'delete') {
|
||||
isDeleteConfirmationOpen.value = true
|
||||
} else if (type === 'submit') {
|
||||
isSubmitConfirmationOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function removeOrder() {
|
||||
const res = await remove(id)
|
||||
if (res.success) {
|
||||
backToList()
|
||||
}
|
||||
}
|
||||
|
||||
async function submitOrder() {
|
||||
const res = await submit(id)
|
||||
if (res.success) {
|
||||
backToList()
|
||||
}
|
||||
}
|
||||
|
||||
function addItem() {
|
||||
isItemEntryDialogOpen.value = true
|
||||
}
|
||||
|
||||
async function getDevices(value: string, code?: string) {
|
||||
const res = await getDeviceList({ 'search': value, 'code': code })
|
||||
if (res.success) {
|
||||
devices.value = res.body.data
|
||||
} else {
|
||||
devices.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function pickItem(): DeviceOrderItem | null {
|
||||
const item = items.value.find(item => item.id === recId.value)
|
||||
selectedItem.value = item
|
||||
return item
|
||||
}
|
||||
|
||||
async function saveItem() {
|
||||
let res: any;
|
||||
if(!selectedItem.value.id) {
|
||||
res = await createItem(selectedItem.value)
|
||||
} else {
|
||||
res = await updateItem(selectedItem.value.id, selectedItem.value)
|
||||
}
|
||||
if (res.success) {
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
getDeviceOrderItems()
|
||||
isItemEntryDialogOpen.value = false
|
||||
selectedItem.value = genDeviceOrderItem()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -28,10 +181,74 @@ const headerPrep: HeaderPrep = {
|
||||
class="mb-4 xl:mb-5"
|
||||
/>
|
||||
|
||||
<ItemListEntry />
|
||||
<EntryForm :data="data" @add="addItem" />
|
||||
|
||||
<ItemListEntry :data="items" @add="addItem" />
|
||||
|
||||
<Separator class="my-5" />
|
||||
|
||||
<div class="w-full flex justify-center">
|
||||
<Nav @click="navClick" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm delete -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isDeleteConfirmationOpen"
|
||||
action="delete"
|
||||
:record="data"
|
||||
@confirm="removeOrder()"
|
||||
/>
|
||||
|
||||
<!-- Confirm submit -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isSubmitConfirmationOpen"
|
||||
customTitle="Ajukan Order"
|
||||
customMessage="Akan dilakukan pengajuan order alat kesehatan"
|
||||
customConfirmText="Ajukan"
|
||||
:record="data"
|
||||
@confirm="submitOrder"
|
||||
@cancel=""
|
||||
/>
|
||||
|
||||
<!-- Item entry -->
|
||||
<Dialog
|
||||
v-model:open="isItemEntryDialogOpen"
|
||||
title="Item Order"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
<ItemEntry
|
||||
:data="selectedItem"
|
||||
:devices="devices"
|
||||
@close="isItemEntryDialogOpen = false"
|
||||
@save="saveItem"
|
||||
@update:searchText="getDevices"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isItemDelConfirmDialogOpen"
|
||||
action="delete"
|
||||
size="md"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getDeviceOrderItems, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<DE.Block mode="preview" label-size="small">
|
||||
<DE.Cell>
|
||||
<DE.Label>Nama</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.device.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Dosis</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ recItem.quantity }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
|
||||
@@ -1,72 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
|
||||
// Components
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import List from '~/components/app/device-order/list.vue'
|
||||
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
// import { useQueryMode } from '~/composables/useQueryMode'
|
||||
import { useQueryCRUDMode } from '~/composables/useQueryCRUD'
|
||||
|
||||
// Types
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import { type DeviceOrderFormData, DeviceOrderSchema } from '~/schemas/device-order.schema'
|
||||
import type { DeviceOrder } from "~/models/device-order";
|
||||
|
||||
// Handlers
|
||||
// Device order things
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isProcessing,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
onResetState,
|
||||
handleActionSave,
|
||||
handleActionEdit,
|
||||
handleActionRemove,
|
||||
handleCancelForm,
|
||||
} from '~/handlers/device-order.handler'
|
||||
import { getList, submit } from '~/services/device-order.service'
|
||||
import type { ToastFn } from '~/handlers/_handler'
|
||||
import { type DeviceOrder } from "~/models/device-order";
|
||||
import ConfirmationInfo from '~/components/app/device-order/confirmation-info.vue'
|
||||
|
||||
// Services
|
||||
import { getList, getDetail } from '~/services/device-order.service'
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const { setQueryParams } = useQueryParam()
|
||||
|
||||
const plainEid = route.params.id
|
||||
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
|
||||
|
||||
// const { mode, openForm, backToList } = useQueryMode()
|
||||
const { mode, goToEntry, backToList } = useQueryCRUDMode()
|
||||
// const { recordId } = useQueryCRUDRecordId()
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getList({
|
||||
'encounter-id': encounter_id,
|
||||
search: params.search,
|
||||
includes: 'doctor,doctor-employee,doctor-employee-person,items',
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'device-order',
|
||||
})
|
||||
const encounter_id = props.encounter_id
|
||||
|
||||
// Header
|
||||
const voidFn = () => {}
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Order Alkes',
|
||||
@@ -96,77 +62,81 @@ const headerPrep: HeaderPrep = {
|
||||
'id': saveResp.body?.data?.id.toString()
|
||||
})
|
||||
}
|
||||
// await handleActionSave(recItem, getMyList, () => {}, () => {})
|
||||
// goToEntry()
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// List
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getList({
|
||||
'encounter-id': encounter_id,
|
||||
search: params.search,
|
||||
includes: 'doctor,doctor-employee,doctor-employee-person,items,items-device',
|
||||
page: params.page,
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'device-order',
|
||||
})
|
||||
|
||||
// Selected item
|
||||
const selectedItem = ref<DeviceOrder | null>()
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
const isDeleteConfirmationOpen = ref(false)
|
||||
const { setQueryParams } = useQueryParam()
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
watch([recId, recAction], () => {
|
||||
let item: DeviceOrder | null
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
getMyDetail(recId.value)
|
||||
isReadonly.value = true
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
'id': recId.value.toString()
|
||||
})
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
getMyDetail(recId.value)
|
||||
isReadonly.value = false
|
||||
case ActionEvents.showConfirmSubmit:
|
||||
selectedItem.value = pickItem()
|
||||
isSubmitConfirmationOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
selectedItem.value = pickItem()
|
||||
isDeleteConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
recAction.value = '';
|
||||
})
|
||||
|
||||
// watch([isFormEntryDialogOpen], async () => {
|
||||
// if (isFormEntryDialogOpen.value) {
|
||||
// isFormEntryDialogOpen.value = false;
|
||||
// const saveResp = await handleActionSave({ encounter_id }, getMyList, () =>{}, toast)
|
||||
// if (saveResp.success) {
|
||||
// setQueryParams({
|
||||
// 'mode': 'entry',
|
||||
// 'id': saveResp.body?.data?.id.toString()
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// Watch for row actions when recId or recAction changes
|
||||
// onMounted(async () => {
|
||||
// await getMyList()
|
||||
// })
|
||||
|
||||
// Functions
|
||||
const getMyDetail = async (id: number | string) => {
|
||||
const result = await getDetail(id)
|
||||
async function handleActionSubmit(id: number, refresh: () => void, toast: ToastFn) {
|
||||
const result = await submit(id)
|
||||
if (result.success) {
|
||||
const currentValue = result.body?.data || {}
|
||||
recItem.value = currentValue
|
||||
isFormEntryDialogOpen.value = true
|
||||
toast({ title: 'Berhasil', description: 'Resep telah di ajukan', variant: 'default' })
|
||||
setTimeout(refresh, 300)
|
||||
} else {
|
||||
toast({ title: 'Gagal', description: 'Gagal menjalankan perintah', variant: 'destructive' })
|
||||
}
|
||||
}
|
||||
|
||||
function cancel(data: DeviceOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isRecordConfirmationOpen.value = true
|
||||
function pickItem(): DeviceOrder | null {
|
||||
const item = data.value.find(item => item.id === recId.value)
|
||||
selectedItem.value = item
|
||||
return item
|
||||
}
|
||||
|
||||
function edit(data: DeviceOrder) {
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
'id': data.id.toString()
|
||||
})
|
||||
recItem.value = data
|
||||
}
|
||||
|
||||
function submit(data: DeviceOrder) {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -175,42 +145,39 @@ function submit(data: DeviceOrder) {
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="headerPrep.refSearchNav"
|
||||
@search="handleSearch"
|
||||
class="mb-4 xl:mb-5"
|
||||
/>
|
||||
|
||||
<List
|
||||
v-if="!isLoading.dataListLoading"
|
||||
:data="data"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
<!--
|
||||
@cancel="cancel"
|
||||
@edit="edit"
|
||||
@submit="submit"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
-->
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<!-- Submit Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
v-model:open="isSubmitConfirmationOpen"
|
||||
customTitle="Ajukan Order"
|
||||
customMessage="Akan dilakukan pengajuan order alat kesehatan"
|
||||
customConfirmText="Ajukan"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionSubmit(recId, getMyList, toast)"
|
||||
>
|
||||
<ConfirmationInfo :data="selectedItem" />
|
||||
</RecordConfirmation>
|
||||
|
||||
<!-- Del Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isDeleteConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p>
|
||||
<strong>ID:</strong>
|
||||
{{ record?.id }}
|
||||
</p>
|
||||
<p v-if="record?.name">
|
||||
<strong>Nama:</strong>
|
||||
{{ record.name }}
|
||||
</p>
|
||||
<p v-if="record?.code">
|
||||
<strong>Kode:</strong>
|
||||
{{ record.code }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<ConfirmationInfo :data="selectedItem" />
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
|
||||
@@ -3,10 +3,14 @@
|
||||
import List from './list.vue'
|
||||
import Entry from './entry.vue'
|
||||
|
||||
const { mode } = useQueryMode()
|
||||
defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const { mode } = useQueryCRUDMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List v-if="mode === 'list'" />
|
||||
<Entry v-else />
|
||||
<List v-if="mode === 'list'" :encounter_id="encounter_id" />
|
||||
<Entry v-else :encounter_id="encounter_id" />
|
||||
</template>
|
||||
|
||||
@@ -64,9 +64,7 @@ const tabs: TabItem[] = [
|
||||
{ value: 'consent', label: 'General Consent' },
|
||||
{ value: 'patient-note', label: 'CPRJ' },
|
||||
{ value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
|
||||
{ value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter: data } },
|
||||
{ value: 'mcu-radiology', label: 'Order Radiologi' },
|
||||
{ value: 'mcu-lab-pc', label: 'Order Lab PK' },
|
||||
{ value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.id } },
|
||||
{ value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
|
||||
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
|
||||
{ value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
|
||||
|
||||
Reference in New Issue
Block a user