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

Merge pull request #200 from dikstub-rssa/feat/encounter-adjustment-163

Browse Source 
Feat: Encounter Adjustment
This commit is contained in:
Munawwirul Jamal
2025-12-04 11:51:35 +07:00
committed by GitHub
parent 56e34119d5 f94e8df57f
commit c9b10c93c2
61 changed files with 1542 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/encounter/dropdown-action.vue
+27 -18
View File
@@ -13,32 +13,39 @@ const activeServicePosition = inject<Ref<string>>('activeServicePosition')! // p
const activeKey = ref<string | null>(null)
const linkItemsFiltered = ref<LinkItem[]>([])
const baseLinkItems: LinkItem[] = [
{
label: 'Detail',
value: 'detail',
groups: ['medical', 'registration'],
onClick: () => {
proceedItem(ActionEvents.showDetail)
},
icon: 'i-lucide-eye',
},
]
const medicalLinkItems: LinkItem[] = [
{
label: 'Edit',
value: 'edit',
groups: ['registration'],
onClick: () => {
proceedItem(ActionEvents.showEdit)
},
icon: 'i-lucide-pencil',
},
{
label: 'Process',
value: 'process',
groups: ['medical'],
onClick: () => {
proceedItem(ActionEvents.showProcess)
},
icon: 'i-lucide-shuffle',
},
]
const regLinkItems: LinkItem[] = [
{
label: 'Print',
value: 'print',
groups: ['registration'],
onClick: () => {
proceedItem(ActionEvents.showPrint)
},
@@ -47,6 +54,7 @@ const regLinkItems: LinkItem[] = [
{
label: 'Batalkan',
value: 'cancel',
groups: ['registration'],
onClick: () => {
proceedItem(ActionEvents.showCancel)
},
@@ -55,6 +63,7 @@ const regLinkItems: LinkItem[] = [
{
label: 'Hapus',
value: 'remove',
groups: ['registration'],
onClick: () => {
proceedItem(ActionEvents.showConfirmDelete)
},
@@ -62,7 +71,7 @@ const regLinkItems: LinkItem[] = [
},
]
const voidLinkItems: LinkItem[] = [
const noneLinkItems: LinkItem[] = [
{
label: 'Nothing',
value: 'nothing',
@@ -72,12 +81,6 @@ const voidLinkItems: LinkItem[] = [
linkItemsFiltered.value = [...baseLinkItems]
getLinks()
watch(activeServicePosition, () => {
getLinks()
})
function proceedItem(action: string) {
recId.value = props.rec.id || 0
recItem.value = props.rec
@@ -87,18 +90,24 @@ function proceedItem(action: string) {
function getLinks() {
switch (activeServicePosition.value) {
case 'medical':
linkItemsFiltered.value = [...baseLinkItems, ...medicalLinkItems]
linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('medical'))
break
case 'registration':
linkItemsFiltered.value = [...baseLinkItems, ...regLinkItems]
case 'unit|resp':
linkItemsFiltered.value = [...baseLinkItems]
linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('registration'))
break
default:
linkItemsFiltered.value = voidLinkItems
linkItemsFiltered.value = noneLinkItems
break
}
}
watch(activeServicePosition, () => {
getLinks()
})
onMounted(() => {
getLinks()
})
</script>
<template>
app/components/app/encounter/entry-form.vue
+245 -119
View File
@@ -26,19 +26,21 @@ import { genEncounter, type Encounter } from '~/models/encounter'
// Props
const props = defineProps<{
mode?: string
isLoading?: boolean
isReadonly?: boolean
isSepValid?: boolean
isMemberValid?: boolean
isCheckingSep?: boolean
doctorItems?: CB.Item[]
selectedDoctor: Doctor
// subSpecialist?: any[]
// specialists?: TreeItem[]
// paymentMethods: PaymentMethodCode[]
payments?: any[]
participantGroups?: any[]
seps: any[]
patient?: PatientEntity | null | undefined
// objects?: any
objects?: any
}>()
// Model
@@ -73,17 +75,37 @@ const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
const [patientName, patientNameAttrs] = defineField('patientName')
const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
const [sepFile, sepFileAttrs] = defineField('sepFile')
const [sippFile, sippFileAttrs] = defineField('sippFile')
const patientId = ref('')
const sepReference = ref('')
const sepControlDate = ref('')
const sepTrafficStatus = ref('')
const diagnosis = ref('')
const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const mode = props.mode !== undefined ? props.mode : 'add'
// SEP validation state from props
const isSepValid = computed(() => props.isSepValid || false)
const isCheckingSep = computed(() => props.isCheckingSep || false)
const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
const isDateLoading = ref(false)
const debouncedSepNumber = refDebounced(sepNumber, 500)
const debouncedCardNumber = refDebounced(cardNumber, 500)
const unitFullName = ref('') // Unit, specialist, subspecialist
if (mode === 'add') {
// Set default sepDate to current date in YYYY-MM-DD format
const today = new Date()
const year = today.getFullYear()
const month = String(today.getMonth() + 1).padStart(2, '0')
const day = String(today.getDate()).padStart(2, '0')
registerDate.value = `${year}-${month}-${day}`
}
// Unit, specialist, subspecialist
const unitFullName = ref('')
watch(() => props.selectedDoctor, (doctor) => {
unitFullName.value = doctor.subspecialist?.name ??
doctor.specialist?.name ??
@@ -94,65 +116,31 @@ watch(() => props.selectedDoctor, (doctor) => {
model.value!.subspecialist_code = doctor.subspecialist_code || ''
},
)
// const doctorOpts = computed(() => {
// const defaultOption = [{ label: 'Pilih', value: '' }]
// const doctors = props.doctors || []
// return [...defaultOption, ...doctors]
// })
// watch(doctorCode, (newValue) => {
// // doctor.value = props.doctors?.find(doc => doc.code === newValue)
// unitFullName.value = doctor.value?.subspecialist?.name ??
// doctor.value?.specialist?.name ??
// doctor.value?.unit?.name ??
// 'tidak diketahui'
// model.value!.responsible_doctor_code = doctor.value?.code
// // const unitName = selectedDoctor?.specialist?.name || ''
// // emit('event', 'unit-changed', unitName)
// })
const isJKNPayment = computed(() => paymentMethodCode.value === 'jkn')
// async function onFetchChildren(parentId: string): Promise<void> {
// console.log('onFetchChildren', parentId)
// }
// Watch specialist/subspecialist selection to fetch doctors
// watch(subSpecialistCode, async (newValue) => {
// if (newValue) {
// console.log('SubSpecialist changed:', newValue)
// // Reset doctor selection
// doctorCode.value = ''
// // Emit fetch event to parent
// emit('fetch', { subSpecialistCode: newValue })
// }
// })
// Debounced SEP number watcher: emit change only after user stops typing
const debouncedSepNumber = refDebounced(sepNumber, 500)
watch(debouncedSepNumber, (newValue) => {
emit('event', 'sep-number-changed', newValue)
})
// Sync props to form fields
// watch(
// () => props.objects,
// (objects) => {
// if (objects && Object.keys(objects).length > 0) {
// patientName.value = objects?.patientName || ''
// nationalIdentity.value = objects?.nationalIdentity || ''
// medicalRecordNumber.value = objects?.medicalRecordNumber || ''
// doctorCode.value = objects?.doctorCode || ''
// subSpecialistCode.value = objects?.subSpecialistCode || ''
// registerDate.value = objects?.registerDate || ''
// paymentMethodCode.value = objects?.paymentMethodCode || ''
// patientCategory.value = objects?.patientCategory || ''
// cardNumber.value = objects?.cardNumber || ''
// sepType.value = objects?.sepType || ''
// sepNumber.value = objects?.sepNumber || ''
// }
// },
// { deep: true, immediate: true },
// )
watch(
() => props.objects,
(objects) => {
if (objects && Object.keys(objects).length > 0) {
patientName.value = objects?.patientName || ''
nationalIdentity.value = objects?.nationalIdentity || ''
medicalRecordNumber.value = objects?.medicalRecordNumber || ''
doctorCode.value = objects?.doctorCode || ''
// subSpecialistCode.value = objects?.subSpecialistCode || ''
paymentMethodCode.value = objects?.paymentMethodCode || ''
patientCategory.value = objects?.patientCategory || ''
cardNumber.value = objects?.cardNumber || ''
sepType.value = objects?.sepType || ''
sepNumber.value = objects?.sepNumber || ''
isDateLoading.value = true
setTimeout(() => {
registerDate.value = objects?.registerDate || ''
isDateLoading.value = false
}, 100)
}
},
{ deep: true, immediate: true },
)
watch(
() => props.patient,
@@ -167,6 +155,28 @@ watch(
{ deep: true, immediate: true },
)
watch(
() => props.isSepValid,
(value) => {
if (!value) return
const objects = props.objects
if (objects && Object.keys(objects).length > 0) {
sepReference.value = objects?.sepReference || ''
sepControlDate.value = objects?.sepControlDate || ''
sepTrafficStatus.value = objects?.sepTrafficStatus || ''
diagnosis.value = objects?.diagnosis || ''
}
},
)
watch(debouncedSepNumber, (newValue) => {
emit('event', 'sep-number-changed', newValue)
})
watch(debouncedCardNumber, (newValue) => {
emit('event', 'member-changed', newValue)
})
function onAddSep() {
const formValues = {
patientId: patientId.value || '',
@@ -180,6 +190,10 @@ function onAddSep() {
emit('event', 'add-sep', formValues)
}
function onSearchSep() {
emit('event', 'search-sep', { cardNumber: cardNumber.value })
}
// Submit handler
const onSubmit = handleSubmit((values) => {
console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
@@ -190,23 +204,11 @@ const onSubmit = handleSubmit((values) => {
const formRef = ref<HTMLFormElement | null>(null)
function submitForm() {
console.log('🔵 submitForm called, formRef:', formRef.value)
console.log('🔵 Form values:', {
doctorCode: doctorCode.value,
// subSpecialistCode: subSpecialistCode.value,
registerDate: registerDate.value,
paymentMethodCode: paymentMethodCode.value,
})
console.log('🔵 Form errors:', errors.value)
console.log('🔵 Form meta:', meta.value)
// Trigger form submit using native form submit
// This will trigger validation and onSubmit handler
if (formRef.value) {
console.log('🔵 Calling formRef.value.requestSubmit()')
formRef.value.requestSubmit()
} else {
console.warn('⚠️ formRef.value is null, cannot submit form')
// Fallback: directly call onSubmit handler
// Create a mock event object
const mockEvent = {
@@ -215,7 +217,6 @@ function submitForm() {
} as SubmitEvent
// Call onSubmit directly
console.log('🔵 Calling onSubmit with mock event')
onSubmit(mockEvent)
}
}
@@ -345,14 +346,23 @@ defineExpose({
<span class="text-red-500">*</span>
</DE.Label>
<DE.Field :errMessage="errors.unit_code">
<Input :value="unitFullName"/>
<!-- <TreeSelect
id="subSpecialistCode"
v-model="subSpecialistCode"
v-bind="subSpecialistCodeAttrs"
:data="specialists || []"
:on-fetch-children="onFetchChildren"
/> -->
<Input :value="unitFullName" :disabled="true"/>
</DE.Field>
</DE.Cell>
<DE.Cell>
<DE.Label height="compact">
Tanggal Daftar
<span class="text-red-500">*</span>
</DE.Label>
<DE.Field :errMessage="errors.registerDate">
<DatepickerSingle
v-if="!isDateLoading"
id="registerDate"
v-model="registerDate"
v-bind="registerDateAttrs"
placeholder="Pilih tanggal"
/>
</DE.Field>
</DE.Cell>
</DE.Block>
@@ -363,21 +373,6 @@ defineExpose({
:colCount="3"
:cellFlex="false"
>
<DE.Cell>
<DE.Label height="compact">
Tanggal Daftar
<span class="text-red-500">*</span>
</DE.Label>
<DE.Field :errMessage="errors.registerDate">
<DatepickerSingle
id="registerDate"
v-model="registerDate"
v-bind="registerDateAttrs"
placeholder="Pilih tanggal"
/>
</DE.Field>
</DE.Cell>
<DE.Cell>
<DE.Label height="compact">
Jenis Pembayaran
@@ -397,7 +392,7 @@ defineExpose({
</DE.Block>
<!-- BPJS Fields (conditional) -->
<template v-if="isJKNPayment">
<template v-if="isInsurancePayment">
<DE.Block
labelSize="thin"
class="!pt-0"
@@ -419,6 +414,9 @@ defineExpose({
placeholder="Pilih Kelompok Peserta"
/>
</DE.Field>
<span class="text-sm text-gray-500">
{{ noteReference }}
</span>
</DE.Cell>
<DE.Cell>
@@ -435,6 +433,26 @@ defineExpose({
placeholder="Masukkan nomor kartu BPJS"
/>
</DE.Field>
<div
v-if="isMemberValid"
class="mt-1 flex items-center gap-2"
>
<Icon
name="i-lucide-badge-check"
class="h-4 w-4 bg-green-500 text-white"
/>
<span class="text-sm text-green-500">Aktif</span>
</div>
<div
v-if="!isMemberValid"
class="mt-1 flex items-center gap-2"
>
<Icon
name="i-lucide-x"
class="h-4 w-4 bg-red-500 text-white"
/>
<span class="text-sm text-red-500">Tidak aktif</span>
</div>
</DE.Cell>
<DE.Cell>
@@ -474,7 +492,7 @@ defineExpose({
v-bind="sepNumberAttrs"
placeholder="Tambah SEP terlebih dahulu"
class="flex-1"
:disabled="isLoading || isReadonly"
:disabled="isLoading || isReadonly || isSepValid"
/>
<Button
v-if="!isSepValid"
@@ -490,44 +508,152 @@ defineExpose({
name="i-lucide-loader-2"
class="h-4 w-4 animate-spin"
/>
<Icon
<Icon
v-else
name="i-lucide-plus"
class="h-4 w-4"
/>
</Button>
<Button
v-else
v-if="isMemberValid"
variant="outline"
type="button"
class="bg-green-500 text-white hover:bg-green-600"
class="bg-primary"
size="sm"
disabled
@click="onSearchSep"
>
<Icon
name="i-lucide-check"
name="i-lucide-search"
class="h-4 w-4"
/>
</Button>
</div>
</DE.Field>
<div
v-if="isSepValid"
class="mt-1 flex items-center gap-2"
>
<Icon
name="i-lucide-badge-check"
class="h-4 w-4 bg-green-500 text-white"
/>
<span class="text-sm text-green-500">Aktif</span>
</div>
<span class="text-sm text-gray-500">
{{ noteReference }}
</span>
</DE.Cell>
<FileUpload
field-name="sepFile"
label="Dokumen SEP"
placeholder="Unggah dokumen SEP"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
/>
<DE.Cell>
<FileUpload
field-name="sepFile"
label="Dokumen SEP"
placeholder="Pilih file"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
v-model="sepFile"
v-bind="sepFileAttrs"
@file-selected="(file: any) => { console.log(file) }"
/>
<span class="mt-1 text-sm text-gray-500">
{{ noteFile }}
</span>
</DE.Cell>
<FileUpload
field-name="sippFile"
label="Dokumen SIPP"
placeholder="Unggah dokumen SIPP"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
/>
<DE.Cell>
<FileUpload
field-name="sippFile"
label="Dokumen SIPP"
placeholder="Pilih file"
:accept="['pdf', 'jpg', 'png']"
:max-size-mb="1"
v-model="sippFile"
v-bind="sippFileAttrs"
@file-selected="(file: any) => { console.log(file) }"
/>
<span class="mt-1 text-sm text-gray-500">
{{ noteFile }}
</span>
</DE.Cell>
</DE.Block>
</template>
<template v-if="isSepValid">
<hr />
<!-- Data SEP -->
<h3 class="text-lg font-semibold">Data SEP</h3>
<DE.Block
labelSize="thin"
class="!pt-0"
:colCount="3"
:cellFlex="false"
>
<DE.Cell>
<Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
<Field>
<Input
id="sepReference"
v-model="sepReference"
:disabled="true"
/>
</Field>
</DE.Cell>
<DE.Cell>
<Label height="compact">No. Rujukan / Surat Kontrol</Label>
<DE.Field>
<Input
id="sepReference"
v-model="sepNumber"
:disabled="true"
/>
</DE.Field>
</DE.Cell>
<DE.Cell>
<Label height="compact">
Tanggal Rujukan / Surat Kontrol
<span class="ml-1 text-red-500">*</span>
</Label>
<DE.Field>
<DatepickerSingle
id="sepControlDate"
v-model="sepControlDate"
:disabled="true"
placeholder="Pilih tanggal sep"
/>
</DE.Field>
</DE.Cell>
</DE.Block>
<DE.Block
labelSize="thin"
class="!pt-0"
:colCount="3"
:cellFlex="false"
>
<DE.Cell :col-span="2">
<Label height="compact">Diagnosis</Label>
<Field>
<Input
id="diagnosis"
v-model="diagnosis"
:disabled="true"
/>
</Field>
</DE.Cell>
<DE.Cell>
<Label height="compact">Status Kecelakaan</Label>
<DE.Field>
<Input
id="sepTrafficStatus"
v-model="sepTrafficStatus"
:disabled="true"
/>
</DE.Field>
</DE.Cell>
</DE.Block>
</template>
</form>
app/components/app/encounter/filter-nav.vue
+5 -2
View File
@@ -8,6 +8,7 @@ import { cn } from '~/lib/utils'
import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
const props = defineProps<{
activePositon?: string
refSearchNav?: RefSearchNav
enableExport?: boolean
refExportNav?: RefExportNav
@@ -30,6 +31,8 @@ const props = defineProps<{
// }
const searchQuery = ref('')
const isRoleRegistration = props.activePositon === 'registration'
const isRoleMedical = props.activePositon === 'medical'
const dateRange = ref<{ from: Date | null; to: Date | null }>({
from: new Date(),
to: new Date(),
@@ -70,7 +73,7 @@ const value = ref({
<PopoverTrigger as-child>
<Button
variant="outline"
:class="cn('w-[200px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
:class="cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
>
<CalendarIcon class="mr-2 h-4 w-4" />
<template v-if="value.start">
@@ -101,7 +104,7 @@ const value = ref({
Filter
</Button>
<DropdownMenu v-show="props.enableExport">
<DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
<DropdownMenuTrigger as-child>
<Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
<Icon name="i-lucide-download" class="h-4 w-4" />
app/components/app/sep/action-history.vue
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { inject, type Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// Components
import { Button } from '~/components/pub/ui/button'
const props = defineProps<{
rec: { sepNumber: string; }
}>()
const route = useRoute()
const router = useRouter()
const record = props.rec || {}
const recSepId = inject('rec_sep_id') as Ref<string>
function handleSelection() {
recSepId.value = record.sepNumber || ''
const pathUrl = `/integration/bpjs-vclaim/sep/${record.sepNumber || ''}/link?source-path=${route.path}`
router.push(pathUrl)
}
</script>
<template>
<Button
variant="outline"
type="button"
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
@click="handleSelection"
>
Detail SEP
</Button>
</template>
app/components/app/sep/entry-form.vue
+184 -26
View File
@@ -24,11 +24,11 @@ import { useForm } from 'vee-validate'
import { refDebounced } from '@vueuse/core'
const props = defineProps<{
mode?: string
isLoading?: boolean
isReadonly?: boolean
isService?: boolean
isShowPatient?: boolean;
mode?: string
isShowPatient?: boolean
doctors: any[]
diagnoses: any[]
facilitiesFrom: any[]
@@ -102,14 +102,17 @@ const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat K
const titleLetterDate = computed(() =>
admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
)
const mode = props.mode !== undefined ? props.mode : 'add'
const attendingDoctorName = ref('')
const diagnosisName = ref('')
const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
const isProvinceSelected = computed(() => accidentProvince.value !== '')
const isCitySelected = computed(() => accidentCity.value !== '')
const mode = props.mode !== undefined ? props.mode : 'add'
const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
const isService = ref(props.isService || false)
const isShowPatient = ref(props.isShowPatient || false)
const isShowSpecialist = ref(false)
const isDateReload = ref(false)
// Debounced search for bpjsNumber and nationalId
@@ -129,32 +132,139 @@ async function onFetchChildren(parentId: string): Promise<void> {
console.log('onFetchChildren', parentId)
}
const onBack = () => {
emit('event', 'back')
}
const onSaveNumber = () => {
emit('event', 'save-sep-number', { sepNumber: props?.objects?.sepNumber || '' })
}
// Submit handler
const onSubmit = handleSubmit((values) => {
console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
emit('event', 'save-sep', values)
})
const onInitialized = (objects: any) => {
sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
cardNumber.value = objects?.cardNumber || '-'
nationalId.value = objects?.nationalIdentity || '-'
medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
patientName.value = objects?.patientName || '-'
phoneNumber.value = objects?.phoneNumber || '-'
if (objects?.sepType === 'internal') {
admissionType.value = '4'
}
if (objects?.sepType === 'external') {
admissionType.value = '1'
}
if (objects?.diagnosisName) {
diagnosisName.value = objects?.diagnosisName
}
// Patient data
if (objects?.serviceType) {
serviceType.value = objects?.serviceType
}
if (objects?.fromClinic) {
fromClinic.value = objects?.fromClinic
}
if (objects?.destinationClinic) {
destinationClinic.value = objects?.destinationClinic
}
// Doctor & Support data
if (objects?.attendingDoctor) {
attendingDoctor.value = objects?.attendingDoctor
}
if (objects?.attendingDoctorName) {
attendingDoctorName.value = objects?.attendingDoctorName
}
if (objects?.cob) {
cob.value = objects?.cob
}
if (objects?.cataract) {
cataract.value = objects?.cataract
}
if (objects?.clinicExcecutive) {
clinicExcecutive.value = objects?.clinicExcecutive
}
if (objects?.procedureType) {
procedureType.value = objects?.procedureType
}
if (objects?.supportCode) {
supportCode.value = objects?.supportCode
}
// Class & Payment data
if (objects?.classLevel) {
classLevel.value = objects?.classLevel
}
if (objects?.classLevelUpgrade) {
classLevelUpgrade.value = objects?.classLevelUpgrade
}
if (objects?.classPaySource) {
classPaySource.value = objects?.classPaySource
}
if (objects?.responsiblePerson) {
responsiblePerson.value = objects?.responsiblePerson
}
// Accident data
if (objects?.trafficAccident) {
accident.value = objects?.trafficAccident
}
if (objects?.lpNumber) {
lpNumber.value = objects?.lpNumber
}
if (objects?.accidentDate) {
accidentDate.value = objects?.accidentDate
}
if (objects?.accidentNote) {
accidentNote.value = objects?.accidentNote
}
if (objects?.accidentProvince) {
accidentProvince.value = objects?.accidentProvince
}
if (objects?.accidentCity) {
accidentCity.value = objects?.accidentCity
}
if (objects?.accidentDistrict) {
accidentDistrict.value = objects?.accidentDistrict
}
if (objects?.suplesi) {
suplesi.value = objects?.suplesi
}
if (objects?.suplesiNumber) {
suplesiNumber.value = objects?.suplesiNumber
}
// Visit purpose & Assessment
if (objects?.purposeOfVisit) {
purposeOfVisit.value = objects?.purposeOfVisit
}
if (objects?.serviceAssessment) {
serviceAssessment.value = objects?.serviceAssessment
}
// Note & Specialist
if (objects?.note) {
note.value = objects?.note
}
if (objects?.subSpecialistId) {
subSpecialistId.value = objects?.subSpecialistId
}
// Referral letter
if (objects?.referralLetterNumber) {
referralLetterNumber.value = objects?.referralLetterNumber
}
}
watch(props, (value) => {
const objects = value.objects || ({} as any)
if (Object.keys(objects).length > 0) {
sepDate.value = objects?.registerDate || new Date().toISOString().substring(0, 10)
cardNumber.value = objects?.cardNumber || '-'
nationalId.value = objects?.nationalIdentity || '-'
medicalRecordNumber.value = objects?.medicalRecordNumber || '-'
patientName.value = objects?.patientName || '-'
phoneNumber.value = objects?.phoneNumber || '-'
if (objects?.sepType === 'internal') {
admissionType.value = '4'
}
if (objects?.sepType === 'external') {
admissionType.value = '1'
}
if (objects?.diagnoseLabel) {
initialDiagnosis.value = objects?.diagnoseLabel
}
onInitialized(objects)
isDateReload.value = true
setTimeout(() => {
if (objects?.sepDate) {
sepDate.value = objects?.sepDate
referralLetterDate.value = objects?.sepDate
}
if (objects?.letterDate) {
referralLetterDate.value = objects?.letterDate
}
@@ -206,10 +316,11 @@ onMounted(() => {
</Label>
<Field :errMessage="errors.sepDate">
<DatepickerSingle
v-if="!isDateReload"
id="sepDate"
v-model="sepDate"
v-bind="sepDateAttrs"
:disabled="true"
:disabled="isLoading || isReadonly"
placeholder="Pilih tanggal sep"
/>
</Field>
@@ -284,7 +395,7 @@ onMounted(() => {
id="cardNumber"
v-model="cardNumber"
v-bind="cardNumberAttrs"
:disabled="false"
:disabled="isLoading || isReadonly"
/>
</Field>
</Cell>
@@ -299,7 +410,7 @@ onMounted(() => {
id="nationalId"
v-model="nationalId"
v-bind="nationalIdAttrs"
:disabled="false"
:disabled="isLoading || isReadonly"
/>
</Field>
</Cell>
@@ -378,6 +489,7 @@ onMounted(() => {
"
/>
<Button
v-if="!isReadonly"
variant="outline"
type="button"
class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
@@ -406,7 +518,7 @@ onMounted(() => {
id="referralLetterDate"
v-model="referralLetterDate"
v-bind="referralLetterDateAttrs"
:disabled="true"
:disabled="isLoading || isReadonly"
placeholder="Pilih tanggal surat"
/>
</Field>
@@ -417,11 +529,12 @@ onMounted(() => {
Klinik Eksekutif
<span class="text-red-500">*</span>
</Label>
<Field :errMessage="errors.cob">
<Field :errMessage="errors.clinicExcecutive">
<RadioGroup
v-model="clinicExcecutive"
v-bind="clinicExcecutiveAttrs"
class="flex items-center gap-2"
:disabled="isLoading || isReadonly"
>
<div class="flex items-center space-x-2">
<RadioGroupItem
@@ -481,7 +594,7 @@ onMounted(() => {
</Field>
</Cell>
<Cell>
<Cell v-if="!isReadonly && isShowSpecialist">
<Label height="compact">
Spesialis / Subspesialis
<span class="text-red-500">*</span>
@@ -504,6 +617,7 @@ onMounted(() => {
</Label>
<Field :errMessage="errors.attendingDoctor">
<Combobox
v-if="!isReadonly"
id="attendingDoctor"
v-model="attendingDoctor"
v-bind="attendingDoctorAttrs"
@@ -514,6 +628,12 @@ onMounted(() => {
empty-message="Item tidak ditemukan"
@update:searchText="emit('fetch', { menu: 'doctor', value: $event })"
/>
<Input
v-else
v-model="attendingDoctorName"
v-bind="attendingDoctorAttrs"
:disabled="isLoading || isReadonly"
/>
</Field>
</Cell>
@@ -524,6 +644,7 @@ onMounted(() => {
</Label>
<Field :errMessage="errors.initialDiagnosis">
<Combobox
v-if="!isReadonly"
id="initialDiagnosis"
v-model="initialDiagnosis"
v-bind="initialDiagnosisAttrs"
@@ -534,6 +655,12 @@ onMounted(() => {
empty-message="Item tidak ditemukan"
@update:searchText="emit('fetch', { menu: 'diagnosis', value: $event })"
/>
<Input
v-else
v-model="diagnosisName"
v-bind="initialDiagnosisAttrs"
:disabled="isLoading || isReadonly"
/>
</Field>
</Cell>
</Block>
@@ -658,6 +785,7 @@ onMounted(() => {
v-model="cob"
v-bind="cobAttrs"
class="flex items-center gap-2"
:disabled="isLoading || isReadonly"
>
<div class="flex items-center space-x-2">
<RadioGroupItem
@@ -668,7 +796,7 @@ onMounted(() => {
</div>
<div class="flex items-center space-x-2">
<RadioGroupItem
value="Tidak"
value="no"
id="cob-no"
/>
<Label for="cob-no">Tidak</Label>
@@ -687,6 +815,7 @@ onMounted(() => {
v-model="cataract"
v-bind="cataractAttrs"
class="flex items-center gap-2"
:disabled="isLoading || isReadonly"
>
<div class="flex items-center space-x-2">
<RadioGroupItem
@@ -756,7 +885,7 @@ onMounted(() => {
id="accidentDate"
v-model="accidentDate"
v-bind="accidentDateAttrs"
:disabled="true"
:disabled="isLoading || isReadonly"
placeholder="Pilih tanggal kejadian"
/>
</Field>
@@ -966,6 +1095,7 @@ onMounted(() => {
<!-- Actions -->
<div class="mt-6 flex justify-end gap-2">
<Button
v-if="props.mode === 'detail'"
variant="ghost"
type="button"
class="h-[40px] min-w-[120px] text-orange-400 hover:bg-green-50"
@@ -978,6 +1108,7 @@ onMounted(() => {
Riwayat SEP
</Button>
<Button
v-if="props.mode === 'detail'"
variant="outline"
type="button"
class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
@@ -989,6 +1120,7 @@ onMounted(() => {
Preview
</Button>
<Button
v-if="props.mode === 'add'"
type="button"
class="h-[40px] min-w-[120px] text-white"
:disabled="isLoading"
@@ -1000,6 +1132,32 @@ onMounted(() => {
/>
Simpan
</Button>
<Button
v-if="props.mode === 'detail'"
type="button"
class="h-[40px] min-w-[120px] text-white"
:disabled="isLoading"
@click="onBack"
>
<Icon
name="i-lucide-chevron-left"
class="h-5 w-5"
/>
Kembali
</Button>
<Button
v-if="props.mode === 'link'"
type="button"
class="h-[40px] min-w-[120px] text-white"
:disabled="isLoading"
@click="onSaveNumber"
>
<Icon
name="i-lucide-save"
class="h-5 w-5"
/>
Terapkan
</Button>
</div>
</form>
</div>
app/components/app/sep/list-cfg.history.ts
+40 -12
View File
@@ -9,21 +9,25 @@ export interface SepHistoryData {
careClass: string
}
const ActionHistory = defineAsyncComponent(() => import('~/components/app/sep/action-history.vue'))
const keysDefault = ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass']
const colsDefault = [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }]
const headersDefault = [
{ label: 'NO. SEP' },
{ label: 'TGL. SEP' },
{ label: 'NO. RUJUKAN' },
{ label: 'DIAGNOSIS AWAL' },
{ label: 'JENIS PELAYANAN' },
{ label: 'KELAS RAWAT' },
]
export const config: Config = {
cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
cols: [...colsDefault],
headers: [
[
{ label: 'NO. SEP' },
{ label: 'TGL. SEP' },
{ label: 'NO. RUJUKAN' },
{ label: 'DIAGNOSIS AWAL' },
{ label: 'JENIS PELAYANAN' },
{ label: 'KELAS RAWAT' },
],
],
headers: [[...headersDefault]],
keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
keys: [...keysDefault],
delKeyNames: [{ key: 'code', label: 'Kode' }],
@@ -33,3 +37,27 @@ export const config: Config = {
htmls: {},
}
export const configDetail: Config = {
cols: [...colsDefault, { width: 50 }],
headers: [[...headersDefault, { label: 'AKSI' }]],
keys: [...keysDefault, 'action'],
delKeyNames: [{ key: 'code', label: 'Kode' }],
parses: {},
components: {
action(rec, idx) {
return {
idx,
rec: { ...(rec as object) },
component: ActionHistory,
}
},
},
htmls: {},
}
app/components/app/sep/list-cfg.ts
+1 -3
View File
@@ -1,9 +1,7 @@
import type { Config } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
type SepDto = any
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
export const config: Config = {
cols: [
app/components/app/sep/list-history.vue
+3 -2
View File
@@ -7,9 +7,10 @@ import type { SepHistoryData } from './list-cfg.history'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
// Configs
import { config } from './list-cfg.history'
import { config, configDetail } from './list-cfg.history'
const props = defineProps<{
isAction?: boolean
data: SepHistoryData[]
paginationMeta?: PaginationMeta
}>()
@@ -25,7 +26,7 @@ function handlePageChange(page: number) {
<template>
<PubMyUiDataTable
v-bind="config"
v-bind="isAction ? configDetail : config"
:rows="props.data"
/>
<PaginationView
app/components/app/sep/view-history.vue
+2 -1
View File
@@ -16,6 +16,7 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
const props = defineProps<{
open: boolean
isAction?: boolean
histories: Array<SepHistoryData>
paginationMeta?: PaginationMeta
}>()
@@ -37,7 +38,7 @@ const emit = defineEmits<{
</DialogHeader>
<div class="overflow-x-auto rounded-lg border">
<ListHistory :data="histories" :pagination-meta="paginationMeta" />
<ListHistory :data="histories" :is-action="props.isAction || false" :pagination-meta="paginationMeta" />
</div>
<DialogFooter></DialogFooter>
app/components/content/encounter/entry.vue
+66 -40
View File
@@ -3,14 +3,14 @@
import { Button } from '~/components/pub/ui/button'
import AppEncounterEntryForm from '~/components/app/encounter/entry-form.vue'
import AppViewPatient from '~/components/app/patient/view-patient.vue'
import AppViewHistory from '~/components/app/sep/view-history.vue'
// Helpers
import { refDebounced } from '@vueuse/core'
// Handlers
import { getDetail as getDoctorDetail } from '~/services/doctor.service'
import { useEncounterEntry } from '~/handlers/encounter-entry.handler'
import { genDoctor, type Doctor } from '~/models/doctor'
import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
// Props
const props = defineProps<{
@@ -34,54 +34,33 @@ const {
isLoadingDetail,
formObjects,
openPatient,
isMemberValid,
isSepValid,
isCheckingSep,
isSaveDisabled,
isSaving,
isLoading,
patients,
selectedDoctor,
selectedPatient,
selectedPatientObject,
paginationMeta,
toNavigateSep,
getListPath,
handleInit,
loadEncounterDetail,
getFetchEncounterDetail,
handleSaveEncounter,
getPatientsList,
getPatientCurrent,
getPatientByIdentifierSearch,
getIsSubspecialist,
// getIsSubspecialist,
getDoctorInfo,
getValidateMember,
getValidateSepNumber,
handleFetchDoctors,
} = useEncounterEntry(props)
const { recSepId, openHistory, histories, getMonitoringHistoryMappers } = useIntegrationSepEntry()
const debouncedSepNumber = refDebounced(sepNumber, 500)
const selectedDoctor = ref<Doctor>(genDoctor())
provide('rec_select_id', recSelectId)
provide('table_data_loader', isLoading)
watch(debouncedSepNumber, async (newValue) => {
await getValidateSepNumber(newValue)
})
watch(
() => formObjects.value?.paymentType,
(newValue) => {
isSepValid.value = false
if (newValue !== 'jkn') {
sepNumber.value = ''
}
},
)
onMounted(async () => {
await handleInit()
if (props.id > 0) {
await loadEncounterDetail()
}
})
///// Functions
function handleSavePatient() {
@@ -116,12 +95,28 @@ async function handleEvent(menu: string, value?: any) {
}
toNavigateSep({
isService: 'false',
encounterId: props.id || null,
sourcePath: route.path,
resource: `${props.classCode}-${props.subClassCode}`,
...value,
})
} else if (menu === 'sep-number-changed') {
await getValidateSepNumber(String(value || ''))
const sepNumberText = String(value || '').trim()
if (sepNumberText.length > 5) {
await getValidateSepNumber(sepNumberText)
}
} else if (menu === 'member-changed') {
const memberText = String(value || '').trim()
if (memberText.length > 5) {
await getValidateMember(memberText)
}
} else if (menu === 'search-sep') {
const memberText = String(value?.cardNumber || '').trim()
if (memberText.length < 5) return
getMonitoringHistoryMappers(memberText).then(() => {
openHistory.value = true
})
return
} else if (menu === 'save') {
await handleSaveEncounter(value)
} else if (menu === 'cancel') {
@@ -129,13 +124,39 @@ async function handleEvent(menu: string, value?: any) {
}
}
async function getDoctorInfo(value: string) {
const resp = await getDoctorDetail(value, { includes: 'unit,specialist,subspecialist'})
if (resp.success) {
selectedDoctor.value = resp.body.data
// console.log(selectedDoctor.value)
provide('rec_select_id', recSelectId)
provide('rec_sep_id', recSepId)
provide('table_data_loader', isLoading)
watch(debouncedSepNumber, async (newValue) => {
await getValidateSepNumber(newValue)
})
watch(
() => formObjects.value?.paymentType,
(newValue) => {
isSepValid.value = false
if (newValue !== 'jkn') {
sepNumber.value = ''
}
},
)
watch(
() => props.id,
async (newId) => {
if (props.formType === 'edit' && newId > 0) {
await getFetchEncounterDetail()
}
},
)
onMounted(async () => {
await handleInit()
if (props.formType === 'edit' && props.id > 0) {
await getFetchEncounterDetail()
}
}
})
</script>
<template>
@@ -144,13 +165,15 @@ async function getDoctorInfo(value: string) {
name="i-lucide-user"
class="me-2"
/>
<span class="font-semibold">{{ props.formType }}</span>
<span class="font-semibold">{{ props.formType === 'add' ? 'Tambah' : 'Ubah' }}</span>
Kunjungan
</div>
<AppEncounterEntryForm
ref="formRef"
:mode="props.formType"
:is-loading="isLoadingDetail"
:is-member-valid="isMemberValid"
:is-sep-valid="isSepValid"
:is-checking-sep="isCheckingSep"
:payments="paymentsList"
@@ -165,7 +188,6 @@ async function getDoctorInfo(value: string) {
@event="handleEvent"
@fetch="handleFetch"
/>
<AppViewPatient
v-model:open="openPatient"
v-model:selected="selectedPatient"
@@ -184,7 +206,11 @@ async function getDoctorInfo(value: string) {
"
@save="handleSavePatient"
/>
<AppViewHistory
v-model:open="openHistory"
:is-action="true"
:histories="histories"
/>
<!-- Footer Actions -->
<div class="mt-6 flex justify-end gap-2 border-t border-t-slate-300 pt-4">
<Button
app/components/content/encounter/list.vue
+15 -11
View File
@@ -34,8 +34,13 @@ const props = defineProps<{
const { setOpen } = useSidebar()
setOpen(true)
// Role reactivities
const { getActiveRole } = useUserStore()
// Main data
const data = ref([])
const dataFiltered = ref([])
const activeServicePosition = ref(getServicePosition(getActiveRole()))
const isLoading = reactive<DataTableLoader>({
summary: false,
isTableLoading: false,
@@ -87,29 +92,25 @@ const filter = ref<{
schema: {},
})
// Role reactivities
const { getActiveRole } = useUserStore()
const activeServicePosition = ref(getServicePosition(getActiveRole()))
provide('activeServicePosition', activeServicePosition)
watch(getActiveRole, (role? : string) => {
activeServicePosition.value = getServicePosition(role)
})
// Recrod reactivities
provide('activeServicePosition', activeServicePosition)
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
watch(getActiveRole, (role? : string) => {
activeServicePosition.value = getServicePosition(role)
})
watch(() => recAction.value, () => {
const basePath = `/${props.classCode}/encounter`
// console.log(`${basePath}/${recId.value}`, recAction.value)
// return
if (recAction.value === ActionEvents.showConfirmDelete) {
isRecordConfirmationOpen.value = true
} else if (recAction.value === ActionEvents.showCancel) {
isRecordCancelOpen.value = true
} else if (recAction.value === ActionEvents.showDetail) {
navigateTo(`${basePath}/${recId.value}`)
navigateTo(`${basePath}/${recId.value}/detail`)
} else if (recAction.value === ActionEvents.showEdit) {
navigateTo(`${basePath}/${recId.value}/edit`)
} else if (recAction.value === ActionEvents.showProcess) {
@@ -138,6 +139,7 @@ async function getPatientList() {
const result = await getEncounterList(params)
if (result.success) {
data.value = result.body?.data || []
dataFiltered.value = [...data.value]
}
} catch (error) {
console.error('Error fetching encounter list:', error)
@@ -240,6 +242,7 @@ function handleRemoveConfirmation() {
<template>
<CH.ContentHeader v-bind="hreaderPrep">
<FilterNav
:active-positon="activeServicePosition"
@onFilterClick="() => isFilterFormDialogOpen = true"
@onExportPdf="() => {}"
@onExportExcel="() => {}"
@@ -261,6 +264,7 @@ function handleRemoveConfirmation() {
<!-- Batal -->
<RecordConfirmation
v-if="canDelete"
v-model:open="isRecordCancelOpen"
custom-title="Batalkan Kunjungan"
custom-message="Apakah anda yakin ingin membatalkan kunjungan pasien berikut?"
app/components/content/sep/entry.vue
+15 -3
View File
@@ -8,7 +8,8 @@ import AppViewHistory from '~/components/app/sep/view-history.vue'
import AppViewLetter from '~/components/app/sep/view-letter.vue'
// Handler
import useIntegrationSepEntry from '~/handlers/integration-sep-entry.handler'
import { useIntegrationSepEntry } from '~/handlers/integration-sep-entry.handler'
import { useIntegrationSepDetail } from '~/handlers/integration-sep-detail.handler'
const {
histories,
@@ -55,8 +56,18 @@ const {
handleInit,
} = useIntegrationSepEntry()
const { valueObjects, getSepDetail } = useIntegrationSepDetail()
const props = defineProps<{
mode: 'add' | 'edit' | 'detail' | 'link'
}>()
onMounted(async () => {
await handleInit()
if (['detail', 'link'].includes(props.mode)) {
await getSepDetail()
selectedObjects.value = { ...selectedObjects.value, ...valueObjects.value }
}
})
</script>
@@ -66,12 +77,13 @@ onMounted(async () => {
name="i-lucide-panel-bottom"
class="me-2"
/>
<span class="font-semibold">Tambah</span>
SEP
<span class="font-semibold">{{ ['detail', 'link'].includes(props.mode) ? 'Detail' : 'Tambah' }} SEP</span>
</div>
<AppSepEntryForm
:mode="props.mode"
:is-save-loading="isSaveLoading"
:is-service="isServiceHidden"
:is-readonly="['detail', 'link'].includes(props.mode)"
:doctors="doctors"
:diagnoses="diagnoses"
:facilities-from="facilitiesFrom"
app/components/content/sep/list.vue
+98 -32
View File
@@ -13,8 +13,11 @@ import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
// Icons
import { X, Check } from 'lucide-vue-next'
// Libraries
import useIntegrationSepList from '~/handlers/integration-sep-list.handler'
// Handlers
import { useIntegrationSepList } from '~/handlers/integration-sep-list.handler'
// Helpers
import { refDebounced } from '@vueuse/core'
// use handler to provide state and functions
const {
@@ -42,26 +45,42 @@ const {
handleRemove,
} = useIntegrationSepList()
const dataFiltered = ref<any>([])
const debouncedSearch = refDebounced(search, 500)
// expose provides so component can also use provide/inject if needed
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
watch(
[recId, recAction],
() => {
if (recAction.value === 'showConfirmDel') {
open.value = true
}
},
)
watch([recId, recAction], () => {
if (recAction.value === 'showConfirmDel') {
open.value = true
}
if (recAction.value === 'showDetail') {
navigateTo(`/integration/bpjs-vclaim/sep/${recItem.value?.letterNumber}/detail`)
}
})
watch(debouncedSearch, (newValue) => {
if (newValue && newValue !== '-' && newValue.length >= 3) {
dataFiltered.value = data.value.filter(
(item: any) =>
item.patientName.toLowerCase().includes(newValue.toLowerCase()) ||
item.letterNumber.toLowerCase().includes(newValue.toLowerCase()) ||
item.cardNumber.toLowerCase().includes(newValue.toLowerCase()),
)
}
})
watch(
() => dateSelection.value,
(val) => {
async (val) => {
if (!val) return
setDateRange()
await getSepList()
dataFiltered.value = [...data.value]
},
{ deep: true },
)
@@ -73,9 +92,10 @@ watch(
},
)
onMounted(() => {
onMounted(async () => {
setServiceTypes()
getSepList()
await getSepList()
dataFiltered.value = [...data.value]
})
</script>
@@ -85,20 +105,35 @@ onMounted(() => {
<!-- Filter Bar -->
<div class="my-2 flex flex-wrap items-center gap-2">
<!-- Search -->
<Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
<Input
v-model="search"
placeholder="Cari No. SEP / No. Kartu BPJS..."
class="w-72"
/>
<!-- Filter -->
<div class="w-72">
<Select id="serviceType" icon-name="i-lucide-chevron-down" v-model="serviceType" :items="serviceTypesList"
placeholder="Pilih Pelayanan" />
<Select
id="serviceType"
icon-name="i-lucide-chevron-down"
v-model="serviceType"
:items="serviceTypesList"
placeholder="Pilih Pelayanan"
/>
</div>
<!-- Date Range -->
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
<Button
variant="outline"
class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal"
>
{{ dateRange }}
<Icon name="i-lucide-calendar" class="h-5 w-5" />
<Icon
name="i-lucide-calendar"
class="h-5 w-5"
/>
</Button>
</PopoverTrigger>
<PopoverContent class="p-2">
@@ -109,9 +144,14 @@ onMounted(() => {
<!-- Export -->
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline"
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
<Icon name="i-lucide-download" class="h-5 w-5" />
<Button
variant="outline"
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
>
<Icon
name="i-lucide-download"
class="h-5 w-5"
/>
Ekspor
</Button>
</DropdownMenuTrigger>
@@ -123,13 +163,20 @@ onMounted(() => {
</div>
<div class="mt-4">
<AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="handleRowSelected" />
<AppSepList
v-if="!isLoading.dataListLoading"
:data="dataFiltered"
@update:modelValue="handleRowSelected"
/>
</div>
<!-- Pagination -->
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<PubMyUiPagination
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
</div>
</template>
@@ -142,20 +189,39 @@ onMounted(() => {
</DialogHeader>
<DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
<div class="mt-4 space-y-2 text-sm">
<p><strong>No. SEP:</strong> {{ sepData.sepNumber }}</p>
<p><strong>No. Kartu BPJS:</strong> {{ sepData.cardNumber }}</p>
<p><strong>Nama Pasien:</strong> {{ sepData.patientName }}</p>
<p>
<strong>No. SEP:</strong>
{{ sepData.sepNumber }}
</p>
<p>
<strong>No. Kartu BPJS:</strong>
{{ sepData.cardNumber }}
</p>
<p>
<strong>Nama Pasien:</strong>
{{ sepData.patientName }}
</p>
</div>
<DialogFooter class="mt-6 flex justify-end gap-3">
<Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="() => {
recId = 0
recAction = ''
open = false
}">
<Button
variant="outline"
class="border-green-600 text-green-600 hover:bg-green-50"
@click="
() => {
recId = 0
recAction = ''
open = false
}
"
>
<X class="mr-1 h-4 w-4" />
Tidak
</Button>
<Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleRemove">
<Button
variant="destructive"
class="bg-red-600 hover:bg-red-700"
@click="handleRemove"
>
<Check class="mr-1 h-4 w-4" />
Ya
</Button>
app/components/pub/my-ui/data/types.ts
+1
View File
@@ -75,6 +75,7 @@ export interface LinkItem {
icon?: string
href?: string // to cover the needs of stating full external origins full url
action?: string // for local paths
groups?: string[]
onClick?: (event: Event) => void
headerStatus?: boolean
}
app/components/pub/my-ui/form/file-field.vue
+34 -2
View File
@@ -8,7 +8,7 @@ import { cn } from '~/lib/utils'
import * as DE from '~/components/pub/my-ui/doc-entry'
const props = defineProps<{
interface Props {
fieldName: string
label?: string
placeholder?: string
@@ -21,6 +21,19 @@ const props = defineProps<{
isRequired?: boolean
isDisabled?: boolean
icons?: string
}
const props = withDefaults(defineProps<Props>(), {
label: '',
placeholder: 'Choose file...',
maxSizeMb: 1,
isDisabled: false,
isRequired: false,
})
const emit = defineEmits<{
(e: 'update:modelValue', value: File | null): void
(e: 'fileSelected', file: File | null): void
}>()
const hintMsg = computed(() => {
@@ -35,7 +48,26 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
if (!file) {
handleChange(null)
emit('update:modelValue', null)
emit('fileSelected', null)
return
}
// Validate file size
const maxSizeBytes = props.maxSizeMb * 1024 * 1024
if (file.size > maxSizeBytes) {
console.warn(`File size exceeds ${props.maxSizeMb}MB limit`)
handleChange(null)
emit('update:modelValue', null)
emit('fileSelected', null)
return
}
handleChange(file)
emit('update:modelValue', file)
emit('fileSelected', file)
}
</script>
@@ -62,7 +94,7 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
@change="onFileChange($event, handleChange)"
type="file"
:disabled="isDisabled"
v-bind="{ onBlur: componentField.onBlur }"
v-bind="{ onBlur: componentField.onBlur }"
:placeholder="placeholder"
:class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
/>