Khafid Prayoga
dfc25f0048
feat(treatment-report): add view mode for treatment reports - Introduce new View component for displaying treatment report details - Extend useQueryCRUDMode to support 'view' mode - Update List component to handle view actions - Implement navigation between list, entry and view modes refactor(treatment-report): improve navigation flow between views - Add fromView flag to track navigation origin - Implement smart back navigation (goBack) that returns to previous view - Update edit handlers to pass navigation context - Clean up unused back handlers in form component cleanup set responsive details
68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import mockData from './sample'
|
|
|
|
// types
|
|
import { type TreatmentReportFormData } from '~/schemas/treatment-report.schema'
|
|
import { type Encounter } from '~/models/encounter'
|
|
|
|
// Components
|
|
import AppTreatmentReportPreview from '~/components/app/treatment-report/preview.vue'
|
|
import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
|
|
|
|
// #region Props & Emits
|
|
const router = useRouter()
|
|
const { backToList, goToEntry } = useQueryCRUDMode('mode')
|
|
const { recordId } = useQueryCRUDRecordId('record-id')
|
|
|
|
function onEditFromView() {
|
|
goToEntry({ fromView: true })
|
|
}
|
|
|
|
const props = defineProps<{
|
|
encounter: Encounter
|
|
}>()
|
|
|
|
// #endregion
|
|
|
|
// #region State & Computed
|
|
const reportData = ref<TreatmentReportFormData | null>(null)
|
|
|
|
const headerPrep: HeaderPrep = {
|
|
title: 'Detail Laporan Tindakan',
|
|
icon: 'i-lucide-stethoscope',
|
|
}
|
|
|
|
// #endregion
|
|
|
|
// #region Lifecycle Hooks
|
|
onMounted(async () => {
|
|
reportData.value = mockData as unknown as TreatmentReportFormData
|
|
})
|
|
// #endregion
|
|
|
|
// #region Functions
|
|
// #endregion region
|
|
|
|
// #region Utilities & event handlers
|
|
function onEdit() {
|
|
router.push({
|
|
name: 'treatment-report-id-edit',
|
|
params: { id: 100 },
|
|
})
|
|
}
|
|
function onBack() {}
|
|
// #endregion
|
|
|
|
// #region Watchers
|
|
// #endregion
|
|
</script>
|
|
|
|
<template>
|
|
<AppTreatmentReportPreview
|
|
v-if="reportData"
|
|
:data="reportData"
|
|
@back="backToList"
|
|
@edit="onEditFromView"
|
|
/>
|
|
</template>
|