Files
simrsx-fe/app/components/content/document-upload/list.vue
T
2025-11-07 14:02:54 +07:00

124 lines
3.6 KiB
Vue

<script setup lang="ts">
// #region Imports
import { ActionEvents } from '~/components/pub/my-ui/data/types'
import type { HeaderPrep, } from '~/components/pub/my-ui/data/types'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import { usePaginatedList } from '~/composables/usePaginatedList'
import { getList, remove } from '~/services/control-letter.service'
import { toast } from '~/components/pub/ui/toast'
import type { Encounter } from '~/models/encounter'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
// #endregion
// #region State
const props = defineProps<{
encounter?: Encounter
}>()
const route = useRoute()
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
entityName: 'control-letter',
})
const isRecordConfirmationOpen = ref(false)
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const headerPrep: HeaderPrep = {
title: "Upload Dokumen",
icon: 'i-lucide-newspaper',
addNav: {
label: "Upload Dokumen",
onClick: () => navigateTo({
name: 'rehab-encounter-id-document-upload-add',
params: { id: encounterId },
}),
},
}
// #endregion
// #region Lifecycle Hooks
onMounted(() => {
})
// #endregion
// #region Functions
async function handleConfirmDelete(record: any, action: string) {
if (action === 'delete' && record?.id) {
try {
const result = await remove(record.id)
if (result.success) {
toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
await fetchData()
} else {
toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
}
} catch (error) {
toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
}
}
}
function handleCancelConfirmation() {
// Reset record state when cancelled
recId.value = 0
recAction.value = ''
recItem.value = null
}
// #endregion
// #region Provide
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
// #endregion
// #region Watchers
watch([recId, recAction], () => {
switch (recAction.value) {
case ActionEvents.showDetail:
navigateTo("https://google.com", { external: true, open: { target: '_blank' } })
break
case ActionEvents.showEdit:
navigateTo({
name: 'rehab-encounter-id-document-upload-document_id-edit',
params: { id: encounterId, "document_id": recId.value },
})
break
case ActionEvents.showConfirmDelete:
isRecordConfirmationOpen.value = true
break
}
})
// #endregion
</script>
<template>
<Header :prep="{ ...headerPrep }"/>
<AppDocumentUploadList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
<template #default="{ record }">
<div class="text-sm">
<p>
<strong>ID:</strong>
{{ record?.id }}
</p>
<p v-if="record?.firstName">
<strong>Nama:</strong>
{{ record.firstName }}
</p>
<p v-if="record?.code">
<strong>Kode:</strong>
{{ record.cellphone }}
</p>
</div>
</template>
</RecordConfirmation>
</template>