fix: refactor process content

This commit is contained in:
riefive
2025-11-20 14:16:21 +07:00
parent 3c546e19a6
commit bbdc79f7f5
5 changed files with 388 additions and 114 deletions
@@ -0,0 +1,290 @@
<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// Components
import EncounterPatientInfo from '~/components/app/encounter/collapsible-patient-info.vue'
import EncounterHistoryButtonMenu from '~/components/app/encounter/history-button-menu.vue'
import CompMenu from '~/components/pub/my-ui/comp-menu/comp-menu.vue'
// Libraries
import { getPositionAs } from '~/lib/roles'
// Types
import type { EncounterProps } from '~/handlers/encounter-process.handler'
// Services
import { getDetail } from '~/services/encounter.service'
// Handlers
import { getIndexById, listItems, mapResponseToEncounter } from '~/handlers/encounter-process.handler'
const StatusAsync = defineAsyncComponent(() => import('~/components/content/encounter/status.vue'))
const AssesmentFunctionListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
const EarlyMedicalAssesmentListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
const EarlyMedicalRehabListAsync = defineAsyncComponent(() => import('~/components/content/soapi/entry.vue'))
const PrescriptionAsync = defineAsyncComponent(() => import('~/components/content/prescription/main.vue'))
// const PrescriptionListAsync = defineAsyncComponent(() => import('~/components/content/prescription/list.vue'))
const CpLabOrderAsync = defineAsyncComponent(() => import('~/components/content/cp-lab-order/main.vue'))
const RadiologyAsync = defineAsyncComponent(() => import('~/components/content/radiology-order/main.vue'))
const ConsultationAsync = defineAsyncComponent(() => import('~/components/content/consultation/list.vue'))
const ControlLetterListAsync = defineAsyncComponent(() => import('~/components/content/control-letter/list.vue'))
const ProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.protocol.vue'))
const MedicineProtocolListAsync = defineAsyncComponent(() => import('~/components/app/chemotherapy/list.medicine.vue'))
const { user, getActiveRole } = useUserStore()
const route = useRoute()
const router = useRouter()
const props = defineProps<{
classCode?: EncounterProps['classCode']
subClassCode?: EncounterProps['subClassCode']
}>()
const activeRole = getActiveRole()
const activePosition = ref(getPositionAs(activeRole))
const menus = ref([] as any)
const activeMenu = computed({
get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
set: (value: string) => {
router.replace({ path: route.path, query: { menu: value } })
},
})
const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const data = ref<any>(null)
const isShowPatient = computed(() => data.value && data.value?.patient?.person)
if (activePosition.value === 'none') { // if user position is none, redirect to home page
router.push('/')
}
console.log(JSON.stringify(user, null, 4))
// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
const protocolRows = [
{
number: '1',
tanggal: new Date().toISOString().substring(0, 10),
siklus: 'I',
periode: 'Siklus I',
kehadiran: 'Hadir',
action: '',
},
{
number: '2',
tanggal: new Date().toISOString().substring(0, 10),
siklus: 'II',
periode: 'Siklus II',
kehadiran: 'Tidak Hadir',
action: '',
},
]
const paginationMeta = {
recordCount: protocolRows.length,
page: 1,
pageSize: 10,
totalPage: 1,
hasNext: false,
hasPrev: false,
}
async function getData() {
try {
const dataRes = await getDetail(id, {
includes:
'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person',
})
const dataResBody = dataRes.body ?? null
const result = dataResBody?.data ?? null
if (result) {
const mappedData = mapResponseToEncounter(result)
if (mappedData) {
data.value = mappedData
} else {
data.value = null
}
} else {
data.value = null
}
} catch (error) {
console.error('Error fetching encounter data:', error)
data.value = null
}
}
function getMenus() {
const currentListItems = listItems[`installation|${props.classCode}`];
if (!currentListItems) return []
const unitCode = user?.unit?.code ? `unit|${user.unit.code}` : 'all';
const currentUnitItems = currentListItems[`${unitCode}`];
if (!currentUnitItems) return []
if (currentUnitItems.roles && currentUnitItems.roles?.some((role: string) => role !== activePosition.value)) return []
let menus = [...currentUnitItems.items]
const indexStatus = getIndexById('status', menus)
const indexEarlyMedicalAssessment = getIndexById('early-medical-assessment', menus)
const indexRehabMedicalAssessment = getIndexById('rehab-medical-assessment', menus)
const indexFunctionAssessment = getIndexById('function-assessment', menus)
const indexTherapyProtocol = getIndexById('therapy-protocol', menus)
const indexChemotherapyProtocol = getIndexById('chemotherapy-protocol', menus)
const indexChemotherapyMedicine = getIndexById('chemotherapy-medicine', menus)
const indexPrescription = getIndexById('prescription', menus)
const indexDevice = getIndexById('device', menus)
const indexMcuRadiology = getIndexById('mcu-radiology', menus)
const indexMcuLabPc = getIndexById('mcu-lab-pc', menus)
const indexMcuLabMicro = getIndexById('mcu-lab-micro', menus)
const indexMcuLabPa = getIndexById('mcu-lab-pa', menus)
const indexMedicalAction = getIndexById('medical-action', menus)
const indexMcuResult = getIndexById('mcu-result', menus)
const indexConsultation = getIndexById('consultation', menus)
const indexResume = getIndexById('resume', menus)
const indexControlLetter = getIndexById('control', menus)
const indexScreening = getIndexById('screening', menus)
const indexSupportingDocument = getIndexById('supporting-document', menus)
const indexPriceList = getIndexById('price-list', menus)
if (indexStatus > -1) {
menus.splice(indexStatus, 1, {
...menus[indexStatus],
component: StatusAsync,
props: { encounter: data },
})
}
if (indexEarlyMedicalAssessment > -1) {
menus.splice(indexEarlyMedicalAssessment, 1, {
...menus[indexEarlyMedicalAssessment],
component: EarlyMedicalAssesmentListAsync,
props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
})
}
if (indexRehabMedicalAssessment > -1) {
menus.splice(indexRehabMedicalAssessment, 1, {
...menus[indexRehabMedicalAssessment],
component: EarlyMedicalRehabListAsync,
props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
})
}
if (indexFunctionAssessment > -1) {
menus.splice(indexFunctionAssessment, 1, {
...menus[indexFunctionAssessment],
component: AssesmentFunctionListAsync,
props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
})
}
if (indexTherapyProtocol > -1) {
menus.splice(indexTherapyProtocol, 1, {
...menus[indexTherapyProtocol],
component: ProtocolListAsync,
props: { data: protocolRows, paginationMeta },
})
}
if (indexChemotherapyProtocol > -1) {
menus.splice(indexChemotherapyProtocol, 1, {
...menus[indexChemotherapyProtocol],
component: ProtocolListAsync,
props: { data: protocolRows, paginationMeta },
})
}
if (indexChemotherapyMedicine > -1) {
menus.splice(indexChemotherapyMedicine, 1, {
...menus[indexChemotherapyMedicine],
component: MedicineProtocolListAsync,
props: { data: protocolRows, paginationMeta },
})
}
if (indexPrescription > -1) {
menus.splice(indexPrescription, 1, {
...menus[indexPrescription],
component: PrescriptionAsync,
props: { encounter_id: id }
})
}
if (indexDevice > -1) {
menus.splice(indexDevice, 1, { ...menus[indexDevice], component: null })
}
if (indexMcuRadiology > -1) {
menus.splice(indexMcuRadiology, 1, {
...menus[indexMcuRadiology],
component: RadiologyAsync,
props: { encounter_id: id }
})
}
if (indexMcuLabPc > -1) {
menus.splice(indexMcuLabPc, 1, {
...menus[indexMcuLabPc],
component: CpLabOrderAsync,
props: { encounter_id: id }
})
}
if (indexMcuLabMicro > -1) {
menus.splice(indexMcuLabMicro, 1, { ...menus[indexMcuLabMicro], component: null })
}
if (indexMcuLabPa > -1) {
menus.splice(indexMcuLabPa, 1, { ...menus[indexMcuLabPa], component: null })
}
if (indexMedicalAction > -1) {
menus.splice(indexMcuLabPa, 1, { ...menus[indexMcuLabPa], component: null })
}
if (indexConsultation > -1) {
menus.splice(indexConsultation, 1, {
...menus[indexConsultation],
component: ConsultationAsync,
props: { encounter: data }
})
}
if (indexMcuResult > -1) {
menus.splice(indexMcuResult, 1, { ...menus[indexMcuResult], component: null })
}
if (indexResume > -1) {
menus.splice(indexResume, 1, { ...menus[indexResume], component: null })
}
if (indexControlLetter > -1) {
menus.splice(indexControlLetter, 1, {
...menus[indexControlLetter],
component: ControlLetterListAsync,
props: { encounter: data }
})
}
if (indexScreening > -1) {
menus.splice(indexScreening, 1, { ...menus[indexScreening], component: null })
}
if (indexSupportingDocument > -1) {
menus.splice(indexSupportingDocument, 1, { ...menus[indexSupportingDocument], component: null })
}
if (indexPriceList > -1) {
menus.splice(indexPriceList, 1, { ...menus[indexPriceList], component: null })
}
return menus
}
function handleClick(type: string) {
if (type === 'draft') {
router.back()
}
}
watch(getActiveRole, () => {
const activeRole = getActiveRole()
activePosition.value = getPositionAs(activeRole)
menus.value = getMenus()
})
onMounted(async () => {
await getData()
menus.value = getMenus()
})
</script>
<template>
<div class="w-full">
<div class="mb-4">
<PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" @click="handleClick" />
</div>
<EncounterPatientInfo v-if="isShowPatient" :data="data" />
<EncounterHistoryButtonMenu v-if="isShowPatient" />
<CompMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
</div>
</template>
@@ -1,94 +0,0 @@
<script setup lang="ts">
//
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDetail } from '~/services/encounter.service'
//
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
// PLASE ORDER BY TAB POSITION
import Status from '~/components/content/encounter/status.vue'
import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
import Prescription from '~/components/content/prescription/main.vue'
import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
import Radiology from '~/components/content/radiology-order/main.vue'
import Consultation from '~/components/content/consultation/list.vue'
import ControlLetterList from '~/components/content/control-letter/list.vue'
const route = useRoute()
const router = useRouter()
// activeTab selalu sinkron dengan query param
const activeTab = computed({
get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
set: (val: string) => {
router.replace({ path: route.path, query: { tab: val } })
},
})
const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const dataRes = await getDetail(id, {
includes:
'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
})
const dataResBody = dataRes.body ?? null
const data = dataResBody?.data ?? null
const tabs: TabItem[] = [
{ value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
{
value: 'early-medical-assessment',
label: 'Pengkajian Awal Medis',
component: EarlyMedicalAssesmentList,
props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
},
{
value: 'rehab-medical-assessment',
label: 'Pengkajian Awal Medis Rehabilitasi Medis',
component: EarlyMedicalRehabList,
props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
},
{
value: 'function-assessment',
label: 'Asesmen Fungsi',
component: AssesmentFunctionList,
props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
},
{ value: 'therapy-protocol', label: 'Protokol Terapi' },
{ value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
{ value: 'consent', label: 'General Consent' },
{ value: 'patient-note', label: 'CPRJ' },
{ value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.id } },
{ value: 'device', label: 'Order Alkes' },
{ 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' },
{ value: 'mcu-lab-pa', label: 'Order Lab PA' },
{ value: 'medical-action', label: 'Order Ruang Tindakan' },
{ value: 'mcu-result', label: 'Hasil Penunjang' },
{ value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
{ value: 'resume', label: 'Resume' },
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
{ value: 'screening', label: 'Skrinning MPP' },
{ value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
]
</script>
<template>
<div class="w-full">
<div class="mb-4">
<PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
</div>
<AppEncounterQuickInfo :data="data" />
<CompTab
:data="tabs"
:initial-active-tab="activeTab"
@change-tab="activeTab = $event"
/>
</div>
</template>
+83 -19
View File
@@ -1,11 +1,19 @@
import { medicalPositions } from "~/lib/roles"
import { isValidDate } from '~/lib/date'
import { medicalPositions } from '~/lib/roles'
export interface EncounterItem {
id: string
title: string
classCode?: string[]
unit?: string,
unit?: string
afterId?: string
component?: any
props?: Record<string, any>
}
export interface EncounterProps {
classCode: 'ambulatory' | 'emergency' | 'inpatient' | 'outpatient'
subClassCode: 'reg' | 'rehab' | 'chemo' | 'emg' | 'eon' | 'op' | 'icu' | 'hcu' | 'vk'
}
export const defaultItems: EncounterItem[] = [
@@ -174,11 +182,11 @@ const getItemsByUnit = (unit: string, items: EncounterItem[]) => {
return items.filter((item) => item.unit === unit)
}
const getItemsByIds = (ids: string[], items: EncounterItem[]) => {
export const getItemsByIds = (ids: string[], items: EncounterItem[]) => {
return items.filter((item) => ids.includes(item.id))
}
const getIndexById = (id: string, items: EncounterItem[]) => {
export const getIndexById = (id: string, items: EncounterItem[]) => {
return items.findIndex((item) => item.id === id)
}
@@ -189,17 +197,13 @@ export function insertItemByAfterId(id: string, items: EncounterItem[], newItem:
}
}
export function mergeArrayAt<T>(
arraysOne: T[],
arraysTwo: T[] | T,
deleteCount = 0,
): T[] {
export function mergeArrayAt<T>(arraysOne: T[], arraysTwo: T[] | T, deleteCount = 0): T[] {
const prevItems = arraysOne.slice()
if (!prevItems) return prevItems
const nextItems = Array.isArray(arraysTwo) ? arraysTwo : [arraysTwo]
if (nextItems.length === 0) return prevItems
// determine insertion position using the first item's `id` if available
const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
const firstId = (nextItems[0] as any)?.afterId || (prevItems[0] as any)?.id
let pos = prevItems.length
if (typeof firstId === 'string') {
const index = prevItems.findIndex((item: any) => item.id === firstId)
@@ -216,6 +220,66 @@ export const getItemsAll = (classCode: string, unit: string, items: EncounterIte
return updateItems
}
// Function to map API response to Encounter structure
export function mapResponseToEncounter(result: any): any {
if (!result) return null
// Check if patient and patient.person exist (minimal validation)
if (!result.patient || !result.patient.person) {
return null
}
const mapped: any = {
id: result.id || 0,
patient_id: result.patient_id || result.patient?.id || 0,
patient: {
id: result.patient?.id || 0,
number: result.patient?.number || '',
person: {
id: result.patient?.person?.id || 0,
name: result.patient?.person?.name || '',
birthDate: result.patient?.person?.birthDate || null,
gender_code: result.patient?.person?.gender_code || '',
residentIdentityNumber: result.patient?.person?.residentIdentityNumber || null,
frontTitle: result.patient?.person?.frontTitle || '',
endTitle: result.patient?.person?.endTitle || '',
addresses: result.patient?.person?.addresses || [],
},
},
registeredAt: result.registeredAt || result.patient?.registeredAt || null,
class_code: result.class_code || '',
unit_id: result.unit_id || 0,
unit: result.unit || null,
specialist_id: result.specialist_id || null,
subspecialist_id: result.subspecialist_id || null,
visitDate: isValidDate(result.visitDate)
? result.visitDate
: result.registeredAt || result.patient?.registeredAt || null,
adm_employee_id: result.adm_employee_id || 0,
appointment_doctor_id: result.appointment_doctor_id || null,
responsible_doctor_id: result.responsible_doctor_id || null,
appointment_doctor: result.appointment_doctor || null,
responsible_doctor: result.responsible_doctor || null,
refSource_name: result.refSource_name || null,
appointment_id: result.appointment_id || null,
earlyEducation: result.earlyEducation || null,
medicalDischargeEducation: result.medicalDischargeEducation || '',
admDischargeEducation: result.admDischargeEducation || null,
discharge_method_code: result.discharge_method_code || null,
discharge_reason: result.dischargeReason || result.discharge_reason || null,
discharge_date: result.discharge_date || null,
status_code: result.status_code || '',
// Payment related fields
paymentMethod_code:
result.paymentMethod_code && result.paymentMethod_code.trim() !== '' ? result.paymentMethod_code : null,
trx_number: result.trx_number || null,
member_number: result.member_number || null,
ref_number: result.ref_number || null,
}
return mapped
}
const listItemsForOutpatientRehab = mergeArrayAt(
getItemsAll('ambulatory', 'all', defaultItems),
getItemsAll('ambulatory', 'rehab', defaultItems),
@@ -226,22 +290,22 @@ const listItemsForOutpatientChemo = mergeArrayAt(
getItemsAll('ambulatory', 'chemo', defaultItems),
)
export const listItems = {
export const listItems: Record<string, Record<string, Record<string, any>>> = {
'installation|outpatient': {
'unit|rehab': {
'items': listItemsForOutpatientRehab,
'roles': medicalPositions,
items: listItemsForOutpatientRehab,
roles: medicalPositions,
},
'unit|chemo': {
'items': listItemsForOutpatientChemo,
'roles': medicalPositions,
items: listItemsForOutpatientChemo,
roles: medicalPositions,
},
'all': getItemsAll('ambulatory', 'all', defaultItems),
all: getItemsAll('ambulatory', 'all', defaultItems),
},
'installation|emergency': {
'all': getItemsAll('emergency', 'all', defaultItems),
all: getItemsAll('emergency', 'all', defaultItems),
},
'installation|inpatient': {
'all': getItemsAll('inpatient', 'all', defaultItems),
}
all: getItemsAll('inpatient', 'all', defaultItems),
},
}
+13
View File
@@ -73,3 +73,16 @@ export function formatDateYyyyMmDd(isoDateString: string): string {
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
// Function to check if date is invalid (like "0001-01-01T00:00:00Z")
export function isValidDate(dateString: string | null | undefined): boolean {
if (!dateString) return false
// Check for invalid date patterns
if (dateString.startsWith('0001-01-01')) return false
try {
const date = new Date(dateString)
return !isNaN(date.getTime())
} catch {
return false
}
}
@@ -2,6 +2,7 @@
import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/my-ui/error/error.vue'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
import EncounterProcess from '~/components/content/encounter/process-next.vue'
definePageMeta({
middleware: ['rbac'],
@@ -35,7 +36,7 @@ const canCreate = hasCreateAccess(roleAccess)
<template>
<div v-if="canCreate">
<ContentEncounterHome display="menu" class-code="ambulatory" sub-class-code="reg" />
<EncounterProcess class-code="ambulatory" sub-class-code="reg" />
</div>
<Error
v-else