Files
simrsx-fe/app/components/content/encounter/list.vue
2025-10-17 02:19:12 +07:00

110 lines
3.2 KiB
Vue

<script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
import type { Summary } from '~/components/pub/my-ui/summary-card/type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
const props = defineProps<{
type: string
}>()
const data = ref([])
const isLoading = reactive<DataTableLoader>({
summary: false,
isTableLoading: false,
})
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const isFormEntryDialogOpen = ref(false)
const hreaderPrep: HeaderPrep = {
title: 'Kunjungan',
icon: 'i-lucide-users',
addNav: {
label: 'Tambah',
onClick: () => navigateTo('/rehab/encounter/add'),
},
}
const refSearchNav: RefSearchNav = {
onClick: () => {
// open filter modal
isFormEntryDialogOpen.value = true
console.log(' 1open filter modal')
},
onInput: (_val: string) => {
// filter patient list
},
onClear: () => {
// clear url param
},
}
// Loading state management
async function getPatientList() {
isLoading.isTableLoading = true
const resp = await xfetch('/api/v1/encounter?includes=patient,patient-person')
if (resp.success) {
data.value = (resp.body as Record<string, any>).data
}
isLoading.isTableLoading = false
}
onMounted(() => {
getPatientList()
})
watch(
() => recAction.value,
() => {
console.log('recAction.value', recAction.value)
if (props.type === 'encounter') {
if (recAction.value === 'showDetail') {
navigateTo(`/rehab/encounter/${recId.value}/detail`)
} else if (recAction.value === 'showEdit') {
navigateTo(`/rehab/encounter/${recId.value}/edit`)
} else if (recAction.value === 'showProcess') {
navigateTo(`/rehab/encounter/${recId.value}/process`)
} else {
// handle other actions
}
} else if (props.type === 'registration') {
if (recAction.value === 'showDetail') {
navigateTo(`/rehab/registration/${recId.value}/detail`)
} else if (recAction.value === 'showEdit') {
navigateTo(`/rehab/registration/${recId.value}/edit`)
} else if (recAction.value === 'showProcess') {
navigateTo(`/rehab/registration/${recId.value}/process`)
} else {
// handle other actions
}
}
},
)
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
</script>
<template>
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
<Separator class="my-4 xl:my-5" />
<Filter :ref-search-nav="refSearchNav" />
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
<AppEncounterList :data="data" />
</div>
<Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
<AppEncounterFilter />
</Dialog>
<!-- <Pagination :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
</template>