feat/procedure-room-order: wip #3
This commit is contained in:
Andrian Roshandy
@@ -0,0 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [{}, {}, {}, {}, {}, { width: 50 }],
|
||||
|
||||
headers: [[
|
||||
{ label: 'Tgl. Order' },
|
||||
{ label: 'No. Order' },
|
||||
{ label: 'Ruangan' },
|
||||
{ label: 'Status' },
|
||||
{ label: 'Resume' },
|
||||
{ label: '' },
|
||||
]],
|
||||
|
||||
keys: ['date', 'number', 'room', 'status', 'resume', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'createdAt', label: 'Tgl. Order' },
|
||||
{ key: 'id', label: 'No. Order' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
date: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
return recX.createdAt ? recX.createdAt.substring(0, 10) : ''
|
||||
|
||||
},
|
||||
number: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
return `ORT-${recX.id}`
|
||||
},
|
||||
room: (rec: any) => {
|
||||
const recX = rec as ProcedureRoomOrder
|
||||
return recX.procedureRoom?.infra?.name || '--belum terdata0--'
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
},
|
||||
|
||||
htmls: {},
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { config } from './list.cfg'
|
||||
import type { Config } from '~/components/pub/my-ui/data-table'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
tableConfig?: Config
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tableConfig: () => config,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubMyUiDataTable
|
||||
v-bind="props.tableConfig"
|
||||
:rows="data"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import * as CH from '~/components/pub/my-ui/content-header'
|
||||
|
||||
//
|
||||
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'
|
||||
|
||||
// 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 MPSwitcher from '~/components/app/material-package/switcher.vue'
|
||||
import MPIQuickList from '~/components/app/material-package-item/quick-list.vue'
|
||||
|
||||
const vFn = () => {} // Void function
|
||||
const headerConfig: CH.Config = {
|
||||
title: 'Order Ruang Tindakan',
|
||||
icon: 'i-lucide-box',
|
||||
}
|
||||
|
||||
const procedureRoomType = ref('procedure')
|
||||
watch(procedureRoomType, async (newValue) => {
|
||||
|
||||
})
|
||||
const materialPackageItems = await getValueLabelList()
|
||||
const selectedMaterialPackage = ref('')
|
||||
|
||||
const materialPackageItemList = ref<MaterialPackageItem[]>([])
|
||||
watch(selectedMaterialPackage, async (newValue) => {
|
||||
const res = await getMaterialPackageItemList({ 'material-package-code': newValue, includes: 'material' })
|
||||
if (res.success) {
|
||||
materialPackageItemList.value = res.body.data
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CH.ContentHeader v-bind="headerConfig" />
|
||||
|
||||
<Separator class="mb-4" />
|
||||
|
||||
<PRSwitcher v-model="procedureRoomType" />
|
||||
|
||||
<PRMultiOptPicker v-if="procedureRoomType == 'procedure'" />
|
||||
|
||||
<PRSingleOptPicker v-else />
|
||||
|
||||
<MPSwitcher :items="materialPackageItems" v-model="selectedMaterialPackage" />
|
||||
|
||||
<MPIQuickList :data="materialPackageItemList" />
|
||||
</template>
|
||||
@@ -0,0 +1,174 @@
|
||||
<script setup lang="ts">
|
||||
// Composables
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
|
||||
// Pubs component
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
import { 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
|
||||
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 type { ProcedureRoomOrder } from '~/models/procedure-room-order'
|
||||
// import { submit } from '~/services/prescription.service'
|
||||
import type { ToastFn } from '~/handlers/_handler'
|
||||
|
||||
const route = useRoute()
|
||||
const { setQueryParams } = useQueryParam()
|
||||
|
||||
const isSubmitConfirmationOpen = ref(false)
|
||||
|
||||
const plainEid = route.params.id
|
||||
const encounter_id = (plainEid && typeof plainEid == 'string') ? parseInt(plainEid) : 0
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
fetchData: getMyList,
|
||||
} = usePaginatedList<ProcedureRoomOrder>({
|
||||
fetchFn: async (params: any) => {
|
||||
const result = await getList({
|
||||
'encounter-id': encounter_id,
|
||||
// includes: '',
|
||||
search: params.search,
|
||||
page: params.page,
|
||||
'page-number': params['page-number'] || 0,
|
||||
'page-size': params['page-size'] || 10,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'prescription'
|
||||
})
|
||||
|
||||
const vFn = () => {} // Void function
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Order Ruang Tindakan',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (value: string) => {
|
||||
searchInput.value = value
|
||||
},
|
||||
onClick: () => {},
|
||||
onClear: () => {},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
icon: 'i-lucide-plus',
|
||||
onClick: async () => {
|
||||
recItem.value = null
|
||||
recId.value = 0
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
function confirmCancel(data: ProcedureRoomOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isRecordConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
function goToEdit(data: ProcedureRoomOrder) {
|
||||
setQueryParams({
|
||||
'mode': 'entry',
|
||||
'id': data.id.toString()
|
||||
})
|
||||
recItem.value = data
|
||||
}
|
||||
|
||||
function confirmSubmit(data: ProcedureRoomOrder) {
|
||||
recId.value = data.id
|
||||
recItem.value = data
|
||||
isSubmitConfirmationOpen.value = true
|
||||
}
|
||||
|
||||
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' })
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" />
|
||||
|
||||
<List
|
||||
v-if="!isLoading.dataListLoading"
|
||||
:data="data"
|
||||
:pagination-meta="paginationMeta"
|
||||
@cancel="confirmCancel"
|
||||
@edit="goToEdit"
|
||||
@submit="confirmSubmit"
|
||||
/>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<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>
|
||||
<div class="flex">
|
||||
<div class="w-20">DPJP</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
|
||||
</div>
|
||||
</RecordConfirmation>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isSubmitConfirmationOpen"
|
||||
action="delete"
|
||||
customTitle="Ajukan Resep"
|
||||
customMessage="Proses akan mengajukan resep ini untuk diproses lebih lanjut. Lanjutkan?"
|
||||
customConfirmText="Ajukan"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionSubmit(recId, getMyList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<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>
|
||||
<div class="flex">
|
||||
<div class="w-20">DPJP</div>
|
||||
<div class="w-4">:</div>
|
||||
<div class="">{{ recItem.doctor?.employee?.person?.name }}</div>
|
||||
</div>
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import List from './list.vue'
|
||||
import Entry from './entry.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
encounter_id: number
|
||||
}>()
|
||||
|
||||
const { mode } = useQueryCRUDMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<List v-if="mode === 'list'" :encounter_id="encounter_id" />
|
||||
<Entry v-else :encounter_id="encounter_id" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user