riefive
133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
// Components
|
|
import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
|
|
import AppViewPatient from '~/components/app/patient/view-patient.vue'
|
|
|
|
// Types
|
|
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
|
|
|
|
// Constants
|
|
import { paymentTypes, sepRefTypeCodes, participantGroups } from '~/lib/constants.vclaim'
|
|
|
|
// Handlers
|
|
import {
|
|
patients,
|
|
selectedPatient,
|
|
selectedPatientObject,
|
|
paginationMeta,
|
|
getPatientsList,
|
|
getPatientCurrent,
|
|
getPatientByIdentifierSearch,
|
|
} from '~/handlers/patient.handler'
|
|
|
|
const props = defineProps<{
|
|
id: number
|
|
formType: string
|
|
}>()
|
|
|
|
const openPatient = ref(false)
|
|
const isLoading = reactive<DataTableLoader>({
|
|
isTableLoading: false,
|
|
})
|
|
const paymentsList = ref<Array<{ value: string; label: string }>>([])
|
|
const sepsList = ref<Array<{ value: string; label: string }>>([])
|
|
const participantGroupsList = ref<Array<{ value: string; label: string }>>([])
|
|
|
|
function handleSavePatient() {
|
|
selectedPatientObject.value = null
|
|
setTimeout(() => {
|
|
getPatientCurrent(selectedPatient.value)
|
|
}, 150)
|
|
}
|
|
|
|
function toKebabCase(str: string): string {
|
|
return str.replace(/([A-Z])/g, '-$1').toLowerCase()
|
|
}
|
|
|
|
function toNavigateSep(values: any) {
|
|
const queryParams = new URLSearchParams()
|
|
Object.keys(values).forEach((field) => {
|
|
if (values[field]) {
|
|
queryParams.append(toKebabCase(field), values[field])
|
|
}
|
|
})
|
|
navigateTo('/integration/bpjs/sep/add' + `?${queryParams.toString()}`)
|
|
}
|
|
|
|
function handleEvent(menu: string, value?: any) {
|
|
if (menu === 'search') {
|
|
getPatientsList({ 'page-size': 10, includes: 'person' }).then(() => {
|
|
openPatient.value = true
|
|
})
|
|
} else if (menu === 'add') {
|
|
navigateTo('/client/patient/add')
|
|
} else if (menu === 'add-sep') {
|
|
console.log('formValues', value)
|
|
toNavigateSep({ resource: 'encounter', isService: 'false', ...value })
|
|
} else if (menu === 'save') {
|
|
console.log('Save encounter:', value)
|
|
} else if (menu === 'cancel') {
|
|
console.log('Cancel')
|
|
}
|
|
}
|
|
|
|
async function handleInit() {
|
|
paymentsList.value = Object.keys(paymentTypes).map((item) => ({
|
|
value: item.toString(),
|
|
label: paymentTypes[item],
|
|
})) as any
|
|
sepsList.value = Object.keys(sepRefTypeCodes).map((item) => ({
|
|
value: item.toString(),
|
|
label: sepRefTypeCodes[item],
|
|
})) as any
|
|
participantGroupsList.value = Object.keys(participantGroups).map((item) => ({
|
|
value: item.toString(),
|
|
label: participantGroups[item],
|
|
})) as any
|
|
}
|
|
|
|
provide('table_data_loader', isLoading)
|
|
|
|
onMounted(async () => {
|
|
await handleInit()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<Icon
|
|
name="i-lucide-user"
|
|
class="me-2"
|
|
/>
|
|
<span class="font-semibold">{{ props.formType }}</span>
|
|
Kunjungan
|
|
</div>
|
|
|
|
<AppEncounterEntryForm
|
|
:payments="paymentsList"
|
|
:seps="sepsList"
|
|
:participant-groups="participantGroupsList"
|
|
:patient="selectedPatientObject"
|
|
@event="handleEvent"
|
|
/>
|
|
|
|
<AppViewPatient
|
|
v-model:open="openPatient"
|
|
v-model:selected="selectedPatient"
|
|
:patients="patients"
|
|
:pagination-meta="paginationMeta"
|
|
@fetch="
|
|
(value) => {
|
|
if (value.search && value.search.length >= 3) {
|
|
// Use identifier search for specific searches (NIK, RM, etc.)
|
|
getPatientByIdentifierSearch(value.search)
|
|
} else {
|
|
// Use regular search for general searches
|
|
getPatientsList({ ...value, 'page-size': 10, includes: 'person' })
|
|
}
|
|
}
|
|
"
|
|
@save="handleSavePatient"
|
|
/>
|
|
</template>
|