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

fix: refactors date range handling to use a formatted, reactive approach

Browse Source
This commit is contained in:
riefive
2025-11-17 13:16:01 +07:00
parent d6d1efe61f
commit 4ef0156181
5 changed files with 107 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/sep/entry-form.vue
+3
View File
@@ -180,6 +180,9 @@ onMounted(() => {
if (!isService.value) {
serviceType.value = '2'
}
if (!admissionType.value) {
admissionType.value = '1'
}
})
</script>
app/components/app/sep/list.vue
+2 -1
View File
@@ -11,7 +11,8 @@ const props = defineProps<{
<template>
<PubMyUiDataTable
v-bind="config"
:rows="props.data"
v-bind="config"
v-on="$attrs"
/>
</template>
app/components/content/sep/list.vue
+42 -13
View File
@@ -18,17 +18,33 @@ import { X, Check } from 'lucide-vue-next'
// Types
import type { VclaimSepData } from '~/models/vclaim'
// Libraries
import { getFormatDateId } from '~/lib/date'
// Services
import { getList as geMonitoringVisitList } from '~/services/vclaim-monitoring-visit.service'
const search = ref('')
const dateRange = ref('12 Agustus 2025 - 31 Agustus 2025')
const today = new Date()
const dateSelection = ref<[Date, Date]>([today, today])
const dateRange = ref(`${getFormatDateId(today)} - ${getFormatDateId(today)}`)
const open = ref(false)
const sepData = {
no_sep: 'SP23311224',
kartu: '001234',
nama: 'Kenzie',
const sepData = ref({
sepNumber: '',
cardNumber: '',
patientName: '',
})
function onRowSelected(row: any) {
if (!row) return
// map possible property names from API / table rows
sepData.value.sepNumber = row.letterNumber || ''
sepData.value.cardNumber = row.cardNumber || ''
sepData.value.patientName = row.patientName || ''
recItem.value = row
recId.value = (row && (row.id || row.recId)) || 0
}
const paginationMeta = reactive<PaginationMeta>({
@@ -81,7 +97,7 @@ async function getMonitoringVisitMappers() {
isLoading.dataListLoading = true
data.value = []
const dateFirst = new Date()
const dateFirst = (dateSelection.value && dateSelection.value[0]) ? dateSelection.value[0] : new Date()
const result = await geMonitoringVisitList({
date: dateFirst.toISOString().substring(0, 10),
serviceType: 1,
@@ -157,6 +173,18 @@ onMounted(() => {
getSepList()
})
// When date selection changes, update display and re-fetch
watch(
() => dateSelection.value,
(val) => {
if (!val) return
const [start, end] = val
dateRange.value = `${getFormatDateId(start)} - ${getFormatDateId(end)}`
getSepList()
},
{ deep: true },
)
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
@@ -216,10 +244,11 @@ provide('table_data_loader', isLoading)
</div>
<div class="mt-4">
<AppSepList
v-if="!isLoading.dataListLoading"
:data="data"
/>
<AppSepList
v-if="!isLoading.dataListLoading"
:data="data"
@update:modelValue="onRowSelected"
/>
</div>
<!-- Pagination -->
@@ -244,9 +273,9 @@ provide('table_data_loader', isLoading)
<DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
<div class="mt-4 space-y-2 text-sm">
<p>No. SEP : {{ sepData.no_sep }}</p>
<p>No. Kartu BPJS : {{ sepData.kartu }}</p>
<p>Nama Pasien : {{ sepData.nama }}</p>
<p>No. SEP : {{ sepData.sepNumber }}</p>
<p>No. Kartu BPJS : {{ sepData.cardNumber }}</p>
<p>Nama Pasien : {{ sepData.patientName }}</p>
</div>
<DialogFooter class="mt-6 flex justify-end gap-3">
app/lib/date.ts
+59 -36
View File
@@ -1,44 +1,67 @@
const monthsInId = [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember',
]
export function getAge(dateString: string, comparedDate?: string): { idFormat: string; extFormat: string } {
const birthDate = new Date(dateString);
const today = new Date();
const birthDate = new Date(dateString)
const today = new Date()
if (comparedDate) {
const comparedDateObj = new Date(comparedDate);
today.setFullYear(comparedDateObj.getFullYear());
today.setMonth(comparedDateObj.getMonth());
today.setDate(comparedDateObj.getDate());
}
if (comparedDate) {
const comparedDateObj = new Date(comparedDate)
today.setFullYear(comparedDateObj.getFullYear())
today.setMonth(comparedDateObj.getMonth())
today.setDate(comparedDateObj.getDate())
}
// Format the date part
const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
const idFormat = birthDate.toLocaleDateString('id-ID', options);
// Format the date part
const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }
const idFormat = birthDate.toLocaleDateString('id-ID', options)
// Calculate age
let years = today.getFullYear() - birthDate.getFullYear();
let months = today.getMonth() - birthDate.getMonth();
let days = today.getDate() - birthDate.getDate();
// Calculate age
let years = today.getFullYear() - birthDate.getFullYear()
let months = today.getMonth() - birthDate.getMonth()
let days = today.getDate() - birthDate.getDate()
if (months < 0 || (months === 0 && days < 0)) {
years--;
months += 12;
}
if (months < 0 || (months === 0 && days < 0)) {
years--
months += 12
}
if (days < 0) {
const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
days += prevMonth.getDate();
months--;
}
if (days < 0) {
const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0)
days += prevMonth.getDate()
months--
}
// Format the age part
let extFormat = '';
if ([years, months, days].filter(Boolean).join(' ')) {
extFormat = `${years} Tahun ${months} Bulan ${days} Hari`;
} else {
extFormat = '0';
}
// Format the age part
let extFormat = ''
if ([years, months, days].filter(Boolean).join(' ')) {
extFormat = `${years} Tahun ${months} Bulan ${days} Hari`
} else {
extFormat = '0'
}
return {
idFormat,
extFormat
};
}
return {
idFormat,
extFormat,
}
}
// Date selection: default to today - today
export function getFormatDateId(date: Date) {
const dd = String(date.getDate()).padStart(2, '0')
const mm = monthsInId[date.getMonth()]
const yyyy = date.getFullYear()
return `${dd} ${mm} ${yyyy}`
}
app/services/vclaim-sep.service.ts
+1 -1
View File
@@ -32,7 +32,7 @@ export function makeSepData(
noKartu: data.cardNumber || '',
tglSep: data.sepDate,
ppkPelayanan: data.fromClinic || '',
jnsPelayanan: data.admissionType ? String(data.admissionType) : '1',
jnsPelayanan: data.serviceType ? String(data.serviceType) : '2',
noMR: data.medicalRecordNumber || '',
catatan: data.note || '',
diagAwal: data.initialDiagnosis || '',