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

feat(patient): enhance patient detail view with accordion and timezone support

Browse Source 
- Add date-fns-tz for timezone-aware date formatting
- Refactor patient detail view to use accordion components
- Improve date display formatting with locale support
- Update navigation handling for edit and back actions
- Extend ClickType enum to include 'edit' action
This commit is contained in:
Khafid Prayoga
2025-12-05 19:24:40 +07:00
parent d848e5bd07
commit 41985ea89f
5 changed files with 241 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/app/patient/preview.vue
+199 -116
View File
@@ -1,9 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Patient } from '~/models/patient' import { format } from 'date-fns'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue' import { formatInTimeZone } from 'date-fns-tz'
import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue' import { id } from 'date-fns/locale'
import { formatAddress } from '~/models/person-address'
// types
import type { Patient } from '~/models/patient'
import type { ClickType } from '~/components/pub/my-ui/nav-footer'
// helper
import { formatAddress } from '~/models/person-address'
import { import {
addressLocationTypeCode, addressLocationTypeCode,
educationCodes, educationCodes,
@@ -15,13 +20,21 @@ import {
} from '~/lib/constants' } from '~/lib/constants'
import { mapToComboboxOptList } from '~/lib/utils' import { mapToComboboxOptList } from '~/lib/utils'
// components
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
import { Fragment } from '~/components/pub/my-ui/form/'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import DetailSection from '~/components/pub/my-ui/form/view/detail-section.vue'
import { toZoned } from '@internationalized/date'
// #region Props & Emits // #region Props & Emits
const props = defineProps<{ const props = defineProps<{
patient: Patient patient: Patient
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'click', type: string): void (e: 'back'): void
(e: 'edit'): void
}>() }>()
// #endregion // #endregion
@@ -70,8 +83,9 @@ const patientAge = computed(() => {
// #endregion region // #endregion region
// #region Utilities & event handlers // #region Utilities & event handlers
function onClick(type: string) { function onNavigate(type: ClickType) {
emit('click', type) if (type == 'back') emit('back')
if (type == 'edit') emit('edit')
} }
// #endregion // #endregion
@@ -80,120 +94,189 @@ function onClick(type: string) {
</script> </script>
<template> <template>
<DetailSection title="Data Pasien"> <Accordion
<DetailRow label="Nomor">{{ patient.number || '-' }}</DetailRow> type="multiple"
<DetailRow label="Nama Lengkap">{{ patient.person.name || '-' }}</DetailRow> class="w-full"
<DetailRow label="Tempat, tanggal lahir"> collapsible
{{ patient.person.birthRegency?.name || '-' }}, :defaultValue="['item-patient', 'item-address', 'item-contact', 'item-parents', 'item-relative']"
{{ patient.person.birthDate ? new Date(patient.person.birthDate).toLocaleDateString('id-ID') : '-' }} >
</DetailRow> <Fragment
<DetailRow label="Usia">{{ patientAge || '-' }} Tahun</DetailRow> v-slot="{ section }"
<DetailRow label="Tanggal Daftar"> title="Data Pasien"
{{ patient.person.createdAt ? new Date(patient.person.createdAt).toLocaleDateString('id-ID') : '-' }} >
</DetailRow> <AccordionItem value="item-patient">
<DetailRow label="Jenis Kelamin"> <AccordionTrigger>{{ section }}</AccordionTrigger>
{{ genderOptions.find((item) => item.code === patient.person.gender_code)?.label || '-' }} <AccordionContent>
</DetailRow> <DetailRow label="Nomor">{{ patient.number || '-' }}</DetailRow>
<DetailRow label="Nama Lengkap">{{ patient.person.name || '-' }}</DetailRow>
<DetailRow label="Tempat, tanggal lahir">
{{ patient.person.birthRegency?.name || '-' }},
{{
patient.person.birthDate
? format(new Date(patient.person.birthDate), 'dd MMMM yyyy', { locale: id })
: '-'
}}
</DetailRow>
<DetailRow label="Usia">{{ patientAge || '-' }} Tahun</DetailRow>
<DetailRow label="Tanggal Daftar">
{{
patient.person.createdAt
? formatInTimeZone(new Date(patient.person.createdAt), 'Asia/Jakarta', "dd MMMM yyyy, HH:mm:ss 'WIB'", {
locale: id,
})
: '-'
}}
</DetailRow>
<DetailRow label="Jenis Kelamin">
{{ genderOptions.find((item) => item.code === patient.person.gender_code)?.label || '-' }}
</DetailRow>
<DetailRow label="NIK">{{ patient.person.residentIdentityNumber || '-' }}</DetailRow> <DetailRow label="NIK">{{ patient.person.residentIdentityNumber || '-' }}</DetailRow>
<DetailRow label="No. SIM">{{ patient.person.drivingLicenseNumber || '-' }}</DetailRow> <DetailRow label="No. SIM">{{ patient.person.drivingLicenseNumber || '-' }}</DetailRow>
<DetailRow label="No. Paspor">{{ patient.person.passportNumber || '-' }}</DetailRow> <DetailRow label="No. Paspor">{{ patient.person.passportNumber || '-' }}</DetailRow>
<DetailRow label="Agama"> <DetailRow label="Agama">
{{ religionOptions.find((item) => item.code === patient.person.religion_code)?.label || '-' }} {{ religionOptions.find((item) => item.code === patient.person.religion_code)?.label || '-' }}
</DetailRow> </DetailRow>
<DetailRow label="Suku">{{ patient.person.ethnic?.name || '-' }}</DetailRow> <DetailRow label="Suku">{{ patient.person.ethnic?.name || '-' }}</DetailRow>
<DetailRow label="Bahasa">{{ patient.person.language?.name || '-' }}</DetailRow> <DetailRow label="Bahasa">{{ patient.person.language?.name || '-' }}</DetailRow>
<DetailRow label="Pendidikan"> <DetailRow label="Pendidikan">
{{ educationOptions.find((item) => item.code === patient.person.education_code)?.label || '-' }} {{ educationOptions.find((item) => item.code === patient.person.education_code)?.label || '-' }}
</DetailRow> </DetailRow>
<DetailRow label="Pekerjaan"> <DetailRow label="Pekerjaan">
{{ {{
occupationOptions.find((item) => item.code === patient.person.occupation_code)?.label || occupationOptions.find((item) => item.code === patient.person.occupation_code)?.label ||
patient.person.occupation_name || patient.person.occupation_name ||
'-' '-'
}} }}
</DetailRow> </DetailRow>
</DetailSection> </AccordionContent>
</AccordionItem>
</Fragment>
<DetailSection title="Alamat"> <Fragment
<DetailRow :label="addressLocationTypeCode.domicile || 'Alamat Domisili'">{{ domicileAddress || '-' }}</DetailRow> v-slot="{ section }"
<DetailRow :label="addressLocationTypeCode.identity || 'Alamat KTP'">{{ identityAddress || '-' }}</DetailRow> title="Alamat"
</DetailSection> >
<DetailSection title="Kontak"> <AccordionItem value="item-address">
<template v-if="patient.person.contacts && patient.person.contacts.length > 0"> <AccordionTrigger>{{ section }}</AccordionTrigger>
<template <AccordionContent>
v-for="contactType in personContactTypeOptions" <DetailRow :label="addressLocationTypeCode.domicile || 'Alamat Domisili'">
:key="contactType.code" {{ domicileAddress || '-' }}
> </DetailRow>
<DetailRow :label="contactType.label"> <DetailRow :label="addressLocationTypeCode.identity || 'Alamat KTP'">
{{ patient.person.contacts.find((item) => item.type_code === contactType.code)?.value || '-' }} {{ identityAddress || '-' }}
</DetailRow> </DetailRow>
</template> </AccordionContent>
</template> </AccordionItem>
<template v-else> </Fragment>
<DetailRow label="Kontak">-</DetailRow>
</template> <Fragment
</DetailSection> v-slot="{ section }"
<DetailSection title="Orang Tua"> title="Kontak"
<template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => !rel.responsible).length > 0"> >
<template <AccordionItem value="item-contact">
v-for="(relative, index) in patient.person.relatives.filter((rel) => !rel.responsible)" <AccordionTrigger>{{ section }}</AccordionTrigger>
:key="relative.id" <AccordionContent>
> <template v-if="patient.person.contacts && patient.person.contacts.length > 0">
<div <template
v-if="index > 0" v-for="contactType in personContactTypeOptions"
class="mt-3 border-t border-gray-200 pt-3" :key="contactType.code"
></div> >
<DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow> <DetailRow :label="contactType.label">
<DetailRow label="Hubungan"> {{ patient.person.contacts.find((item) => item.type_code === contactType.code)?.value || '-' }}
{{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }} </DetailRow>
</DetailRow> </template>
<!-- <DetailRow label="Jenis Kelamin"> </template>
<template v-else>
<DetailRow label="Kontak">-</DetailRow>
</template>
</AccordionContent>
</AccordionItem>
</Fragment>
<Fragment
v-slot="{ section }"
title="Data Orang Tua"
>
<AccordionItem value="item-parents">
<AccordionTrigger>{{ section }}</AccordionTrigger>
<AccordionContent>
<template
v-if="patient.person.relatives && patient.person.relatives.filter((rel) => !rel.responsible).length > 0"
>
<template
v-for="(relative, index) in patient.person.relatives.filter((rel) => !rel.responsible)"
:key="relative.id"
>
<div
v-if="index > 0"
class="mt-3 border-t border-gray-200 pt-3"
></div>
<DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
<DetailRow label="Hubungan">
{{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
</DetailRow>
<!-- <DetailRow label="Jenis Kelamin">
{{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }} {{ genderOptions.find((item) => item.code === relative.gender_code)?.label || '-' }}
</DetailRow> --> </DetailRow> -->
<DetailRow label="Pendidikan"> <DetailRow label="Pendidikan">
{{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }} {{ educationOptions.find((item) => item.code === relative.education_code)?.label || '-' }}
</DetailRow> </DetailRow>
<DetailRow label="Pekerjaan"> <DetailRow label="Pekerjaan">
{{ {{
occupationOptions.find((item) => item.code === relative.occupation_code)?.label || occupationOptions.find((item) => item.code === relative.occupation_code)?.label ||
relative.occupation_name || relative.occupation_name ||
'-' '-'
}} }}
</DetailRow> </DetailRow>
<!-- <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> --> <!-- <DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> -->
<!-- <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> --> <!-- <DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> -->
</template> </template>
</template> </template>
<template v-else> <template v-else>
<DetailRow label="Orang Tua">-</DetailRow> <DetailRow label="Orang Tua">-</DetailRow>
</template> </template>
</DetailSection> </AccordionContent>
<DetailSection title="Penanggung Jawab"> </AccordionItem>
<template v-if="patient.person.relatives && patient.person.relatives.filter((rel) => rel.responsible).length > 0"> </Fragment>
<template
v-for="(relative, index) in patient.person.relatives.filter((rel) => rel.responsible)" <Fragment
:key="relative.id" v-slot="{ section }"
> title="Data Penanggung Jawab"
<div >
v-if="index > 0" <AccordionItem value="item-relative">
class="mt-3 border-t border-gray-200 pt-3" <AccordionTrigger>{{ section }}</AccordionTrigger>
></div> <AccordionContent>
<DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow> <template
<DetailRow label="Hubungan"> v-if="patient.person.relatives && patient.person.relatives.filter((rel) => rel.responsible).length > 0"
{{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }} >
</DetailRow> <template
<DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow> v-for="(relative, index) in patient.person.relatives.filter((rel) => rel.responsible)"
<DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow> :key="relative.id"
</template> >
</template> <div
<template v-else> v-if="index > 0"
<DetailRow label="Penanggung Jawab">-</DetailRow> class="mt-3 border-t border-gray-200 pt-3"
</template> ></div>
</DetailSection> <DetailRow label="Nama">{{ relative.name || '-' }}</DetailRow>
<div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2"> <DetailRow label="Hubungan">
<PubMyUiNavFooterBaEd @click="onClick" /> {{ relationshipOptions.find((item) => item.code === relative.relationship_code)?.label || '-' }}
</DetailRow>
<DetailRow label="Alamat">{{ relative.address || '-' }}</DetailRow>
<DetailRow label="Nomor HP">{{ relative.phoneNumber || '-' }}</DetailRow>
</template>
</template>
<template v-else>
<DetailRow label="Penanggung Jawab">-</DetailRow>
</template>
</AccordionContent>
</AccordionItem>
</Fragment>
</Accordion>
<div class="my-2 flex justify-end py-2">
<PubMyUiNavFooterBaEd @click="onNavigate" />
</div> </div>
</template> </template>
app/components/content/patient/detail.vue
+29 -23
View File
@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { withBase } from '~/models/_base' import { withBase } from '~/models/_base'
import type { HeaderPrep } from '~/components/pub/my-ui/data/types' import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
import type { Patient } from '~/models/patient' import type { PatientEntity } from '~/models/patient'
import type { Person } from '~/models/person' import type { Person } from '~/models/person'
// Components // Components
@@ -18,7 +18,7 @@ const props = defineProps<{
// #region State & Computed // #region State & Computed
const patient = ref( const patient = ref(
withBase<Patient>({ withBase<PatientEntity>({
person: {} as Person, person: {} as Person,
personAddresses: [], personAddresses: [],
personContacts: [], personContacts: [],
@@ -47,19 +47,19 @@ onMounted(async () => {
// #endregion region // #endregion region
// #region Utilities & event handlers // #region Utilities & event handlers
function handleAction(type: string) { async function onBack() {
switch (type) { await navigateTo({
case 'edit': name: 'client-patient',
// TODO: Handle edit action })
console.log('editing data') }
break async function onEdit() {
console.log(props.patientId)
case 'cancel': await navigateTo({
navigateTo({ name: 'client-patient-id-edit',
name: 'client-patient', params: {
}) id: props.patientId,
break },
} })
} }
// #endregion // #endregion
@@ -68,13 +68,19 @@ function handleAction(type: string) {
</script> </script>
<template> <template>
<Header <div
:prep="headerPrep" v-if="patient"
:ref-search-nav="headerPrep.refSearchNav" :key="patient.id"
/> >
<Header
:prep="headerPrep"
:ref-search-nav="headerPrep.refSearchNav"
/>
<AppPatientPreview <AppPatientPreview
:patient="patient" :patient="patient"
@click="handleAction" @back="onBack"
/> @edit="onEdit"
/>
</div>
</template> </template>
app/components/pub/my-ui/nav-footer/index.ts
+1 -1
View File
@@ -1 +1 @@
export type ClickType = 'back' | 'draft' | 'submit' export type ClickType = 'back' | 'draft' | 'submit' | 'edit'
package.json
+1
View File
@@ -21,6 +21,7 @@
"@unovis/ts": "^1.5.1", "@unovis/ts": "^1.5.1",
"@unovis/vue": "^1.5.1", "@unovis/vue": "^1.5.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"embla-carousel": "^8.5.2", "embla-carousel": "^8.5.2",
"embla-carousel-vue": "^8.5.2", "embla-carousel-vue": "^8.5.2",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
pnpm-lock.yaml
Generated
+11
View File
@@ -26,6 +26,9 @@ dependencies:
date-fns: date-fns:
specifier: ^4.1.0 specifier: ^4.1.0
version: 4.1.0 version: 4.1.0
date-fns-tz:
specifier: ^3.2.0
version: 3.2.0([email protected])
embla-carousel: embla-carousel:
specifier: ^8.5.2 specifier: ^8.5.2
version: 8.6.0 version: 8.6.0
@@ -5709,6 +5712,14 @@ packages:
d3-zoom: 3.0.0 d3-zoom: 3.0.0
dev: false dev: false
/[email protected]([email protected]):
resolution: {integrity: sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==}
peerDependencies:
date-fns: ^3.0.0 || ^4.0.0
dependencies:
date-fns: 4.1.0
dev: false
/[email protected]: /[email protected]:
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
dev: false dev: false