Merge remote-tracking branch 'origin/dev' into fe-refactor-division-40
This commit is contained in:
Khafid Prayoga
@@ -17,20 +17,9 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
async function fetchDivisionData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
// return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
return await xfetch('/api/v1/_dev/division/list')
|
||||
async function fetchDivisionData(_params: any) {
|
||||
const endpoint = '/api/v1/_dev/division/list'
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -193,22 +182,18 @@ function handleCancelConfirmation() {
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
|
||||
|
||||
<AppDivisionEntryForm
|
||||
:division="divisionConf"
|
||||
:division-tree="divisionTreeConfig"
|
||||
:schema="schema"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
/>
|
||||
<AppDivisionEntryForm
|
||||
:division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
|
||||
/>
|
||||
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
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>
|
||||
|
||||
@@ -24,19 +24,10 @@ const items = [
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
// Fungsi untuk fetch data equipment
|
||||
async function fetchEquipmentData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/equipment', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -188,17 +179,13 @@ const handleCancelConfirmation = () => {
|
||||
</div>
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
|
||||
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
|
||||
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
|
||||
@submit="onSubmitForm" />
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="handleConfirmDelete"
|
||||
@cancel="handleCancelConfirmation"
|
||||
>
|
||||
<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>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { transform, usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { installationConf, schemaConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
@@ -21,16 +21,8 @@ const recItem = ref<any>(null)
|
||||
// Fungsi untuk fetch data installation
|
||||
async function fetchInstallationData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -192,18 +184,14 @@ function handleCancelConfirmation() {
|
||||
<AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
|
||||
<AppInstallationEntryForm
|
||||
:installation="installationConf" :schema="schemaConf"
|
||||
<AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
/>
|
||||
@cancel="onCancelForm" />
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
const openPatient = ref(false)
|
||||
const openLetter = ref(false)
|
||||
const openHistory = ref(false)
|
||||
const selectedPatient = ref('3456512345678880')
|
||||
const selectedLetter = ref('SK22334442')
|
||||
|
||||
const patients = [
|
||||
{
|
||||
ktp: '3456512345678880',
|
||||
rm: 'RM23311224',
|
||||
bpjs: '334423213214',
|
||||
nama: 'Ahmad Baidowi',
|
||||
},
|
||||
{
|
||||
ktp: '345678804565123',
|
||||
rm: 'RM23455667',
|
||||
bpjs: '33442367656',
|
||||
nama: 'Bian Maulana',
|
||||
},
|
||||
]
|
||||
|
||||
const letters = [
|
||||
{
|
||||
noSurat: 'SK22334442',
|
||||
tglRencana: '12 Agustus 2025',
|
||||
noSep: 'SEP3232332',
|
||||
namaPasien: 'Ahmad Baidowi',
|
||||
noBpjs: '33442331214',
|
||||
klinik: 'Penyakit Dalam',
|
||||
dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
|
||||
},
|
||||
{
|
||||
noSurat: 'SK99120039',
|
||||
tglRencana: '12 Agustus 2025',
|
||||
noSep: 'SEP4443232',
|
||||
namaPasien: 'Bian Maulana',
|
||||
noBpjs: '33442367656',
|
||||
klinik: 'Gigi',
|
||||
dokter: 'dr. Achmad Suparjo',
|
||||
},
|
||||
]
|
||||
|
||||
const histories = [
|
||||
{
|
||||
no_sep: "SP23311224",
|
||||
tgl_sep: "12 Agustus 2025",
|
||||
no_rujukan: "123444",
|
||||
diagnosis: "C34.9 – Karsinoma Paru",
|
||||
pelayanan: "Rawat Jalan",
|
||||
kelas: "Kelas II",
|
||||
},
|
||||
{
|
||||
no_sep: "SP23455667",
|
||||
tgl_sep: "11 Agustus 2025",
|
||||
no_rujukan: "2331221",
|
||||
diagnosis: "K35 – Apendisitis akut",
|
||||
pelayanan: "Rawat Jalan",
|
||||
kelas: "Kelas II",
|
||||
},
|
||||
]
|
||||
|
||||
function handleSavePatient() {
|
||||
console.log('Pasien dipilih:', selectedPatient.value)
|
||||
}
|
||||
|
||||
function handleSaveLetter() {
|
||||
console.log('Letter dipilih:', selectedLetter.value)
|
||||
}
|
||||
|
||||
function handleEvent(value: string) {
|
||||
if (value === 'search-patient') {
|
||||
openPatient.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'search-letter') {
|
||||
openLetter.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'history-sep') {
|
||||
openHistory.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'back') {
|
||||
navigateTo('/bpjs/sep')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Icon name="i-lucide-panel-bottom" class="me-2" />
|
||||
<span class="font-semibold">Tambah</span> SEP
|
||||
</div>
|
||||
<AppSepEntryForm @event="handleEvent" />
|
||||
<AppSepTableSearchPatient
|
||||
v-model:open="openPatient"
|
||||
v-model:selected="selectedPatient"
|
||||
:patients="patients"
|
||||
@save="handleSavePatient"
|
||||
/>
|
||||
<AppSepTableSearchLetter
|
||||
v-model:open="openLetter"
|
||||
v-model:selected="selectedLetter"
|
||||
:letters="letters"
|
||||
@save="handleSaveLetter"
|
||||
/>
|
||||
<AppSepTableHistorySep
|
||||
v-model:open="openHistory"
|
||||
:histories="histories"
|
||||
/>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from '~/components/pub/ui/dropdown-menu'
|
||||
import { X, Check } from 'lucide-vue-next'
|
||||
|
||||
const search = ref('')
|
||||
const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
|
||||
const open = ref(false)
|
||||
|
||||
const sepData = {
|
||||
no_sep: 'SP23311224',
|
||||
kartu: '001234',
|
||||
nama: 'Kenzie',
|
||||
}
|
||||
|
||||
interface SepData {
|
||||
tgl_sep: string
|
||||
no_sep: string
|
||||
pelayanan: string
|
||||
jalur: string
|
||||
no_rm: string
|
||||
nama_pasien: string
|
||||
no_kartu_bpjs: string
|
||||
no_surat_kontrol: string
|
||||
tgl_surat_kontrol: string
|
||||
klinik_tujuan: string
|
||||
dpjp: string
|
||||
diagnosis_awal: string
|
||||
}
|
||||
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 5,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
console.log('pageChange', page)
|
||||
}
|
||||
|
||||
const data = ref<SepData[]>([])
|
||||
|
||||
// contoh data dummy
|
||||
const rows = [
|
||||
{
|
||||
tgl_sep: '12 Agustus 2025',
|
||||
no_sep: 'SP23311224',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM23311224',
|
||||
nama_pasien: 'Ahmad Baidowi',
|
||||
no_kartu_bpjs: '334423231214',
|
||||
no_surat_kontrol: 'SK22334442',
|
||||
tgl_surat_kontrol: '13 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
|
||||
diagnosis_awal: 'C34.9 - Karsinoma Paru',
|
||||
},
|
||||
{
|
||||
tgl_sep: '12 Agustus 2025',
|
||||
no_sep: 'SP23311224',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM001234',
|
||||
nama_pasien: 'Kenzie',
|
||||
no_kartu_bpjs: '12301234',
|
||||
no_surat_kontrol: '123456',
|
||||
tgl_surat_kontrol: '10 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'Dr. Andreas Sutaji',
|
||||
diagnosis_awal: 'Bronchitis',
|
||||
},
|
||||
{
|
||||
tgl_sep: '11 Agustus 2025',
|
||||
no_sep: 'SP23455667',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM001009',
|
||||
nama_pasien: 'Abraham Sulaiman',
|
||||
no_kartu_bpjs: '334235',
|
||||
no_surat_kontrol: '123334',
|
||||
tgl_surat_kontrol: '11 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'Dr. Andreas Sutaji',
|
||||
diagnosis_awal: 'Paru-paru basah',
|
||||
},
|
||||
]
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
},
|
||||
}
|
||||
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Daftar SEP Prosedur',
|
||||
icon: 'i-lucide-panel-bottom',
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
onClick: () => {
|
||||
navigateTo('/bpjs/sep/add')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
async function getSepList() {
|
||||
isLoading.dataListLoading = true
|
||||
data.value = [...rows]
|
||||
isLoading.dataListLoading = false
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
console.log('Ekspor CSV dipilih')
|
||||
// tambahkan logic untuk generate CSV
|
||||
}
|
||||
|
||||
function exportExcel() {
|
||||
console.log('Ekspor Excel dipilih')
|
||||
// tambahkan logic untuk generate Excel
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
console.log('Data dihapus:', sepData)
|
||||
open.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => recAction.value,
|
||||
() => {
|
||||
if (recAction.value === 'showConfirmDel') {
|
||||
open.value = true
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getSepList()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header :prep="{ ...headerPrep }" />
|
||||
<!-- Filter Bar -->
|
||||
<div class="my-2 flex flex-wrap items-center gap-2">
|
||||
<!-- Search -->
|
||||
<Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
|
||||
|
||||
<!-- Date Range -->
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
|
||||
{{ dateRange }}
|
||||
<Icon name="i-lucide-calendar" class="h-5 w-5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-2">
|
||||
<Calendar mode="range" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<!-- Export -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
||||
>
|
||||
<Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-40">
|
||||
<DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
|
||||
<DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md border p-4">
|
||||
<AppSepList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Trigger button -->
|
||||
<Dialog v-model:open="open">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Hapus SEP</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<DialogFooter class="mt-6 flex justify-end gap-3">
|
||||
<Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
|
||||
<X class="mr-1 h-4 w-4" /> Tidak
|
||||
</Button>
|
||||
<Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
|
||||
<Check class="mr-1 h-4 w-4" /> Ya
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
|
||||
import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
|
||||
|
||||
const data = ref({
|
||||
name: '',
|
||||
password: '',
|
||||
status: '',
|
||||
type: 'doctor',
|
||||
})
|
||||
|
||||
function onClick(type: string) {
|
||||
if (type === 'cancel') {
|
||||
navigateTo('/human-src/specialist-intern')
|
||||
} else if (type === 'draft') {
|
||||
// do something
|
||||
} else if (type === 'submit') {
|
||||
// do something
|
||||
}
|
||||
}
|
||||
|
||||
const items = [
|
||||
{ value: 'doctor', label: 'Dokter' },
|
||||
{ value: 'nurse', label: 'Perawat' },
|
||||
{ value: 'nutritionist', label: 'Ahli Gizi' },
|
||||
{ value: 'laborant', label: 'Laboran' },
|
||||
{ value: 'pharmacy', label: 'Farmasi' },
|
||||
{ value: 'payment', label: 'Pembayaran' },
|
||||
{ value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
|
||||
{ value: 'management', label: 'Management' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Icon name="i-lucide-user" class="me-2" />
|
||||
<span class="font-semibold">Tambah</span> Karyawan
|
||||
</div>
|
||||
|
||||
<AppUserEntryForm v-model="data" />
|
||||
|
||||
<AppSpecialistInternEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
|
||||
|
||||
<AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="onClick" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
},
|
||||
}
|
||||
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'User',
|
||||
icon: 'i-lucide-users',
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
onClick: () => navigateTo('/human-src/specialist-intern/add'),
|
||||
},
|
||||
}
|
||||
|
||||
async function getDoctorList() {
|
||||
isLoading.dataListLoading = true
|
||||
|
||||
const resp = await xfetch('/api/v1/doctor')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
|
||||
isLoading.dataListLoading = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDoctorList()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
||||
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const schemaConf = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Nama spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Nama spesialisasi minimal 3 karakter'),
|
||||
|
||||
code: z
|
||||
.string({
|
||||
required_error: 'Kode spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Kode spesialisasi minimal 3 karakter'),
|
||||
|
||||
installationId: z
|
||||
.string({
|
||||
required_error: 'Instalasi harus dipilih',
|
||||
})
|
||||
.min(1, 'Instalasi harus dipilih'),
|
||||
|
||||
unitId: z
|
||||
.string({
|
||||
required_error: 'Unit harus dipilih',
|
||||
})
|
||||
.min(1, 'Unit harus dipilih'),
|
||||
})
|
||||
|
||||
// Unit mapping berdasarkan installation
|
||||
export const installationUnitMapping: Record<string, string[]> = {
|
||||
'1': ['1', '3', '5'],
|
||||
'2': ['2', '4', '6'],
|
||||
'3': ['7', '8', '9', '10', '11'],
|
||||
}
|
||||
|
||||
export const unitConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih unit',
|
||||
search: 'kode, nama unit',
|
||||
empty: 'unit tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Instalasi Medis', code: 'MED' },
|
||||
{ value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
|
||||
{ value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
|
||||
{ value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
|
||||
{ value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
|
||||
{ value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
|
||||
{ value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
|
||||
{ value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
|
||||
{ value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
|
||||
{ value: '10', label: 'Instalasi SDM', code: 'HR' },
|
||||
{ value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
|
||||
{ value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
|
||||
{ value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
|
||||
{ value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
|
||||
{ value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
|
||||
{ value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
|
||||
{ value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
|
||||
{ value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
|
||||
{ value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
|
||||
{ value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
|
||||
],
|
||||
}
|
||||
|
||||
export const installationConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih instalasi',
|
||||
search: 'kode, nama instalasi',
|
||||
empty: 'instalasi tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Ambulatory', code: 'AMB' },
|
||||
{ value: '2', label: 'Inpatient', code: 'IMP' },
|
||||
{ value: '3', label: 'Emergency', code: 'EMER' },
|
||||
],
|
||||
}
|
||||
|
||||
// Helper function untuk filter unit berdasarkan installation
|
||||
export function getFilteredUnits(installationId: string) {
|
||||
if (!installationId || !installationUnitMapping[installationId]) {
|
||||
return []
|
||||
}
|
||||
|
||||
const allowedUnitIds = installationUnitMapping[installationId]
|
||||
return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
|
||||
}
|
||||
|
||||
// Helper function untuk membuat unit config yang ter-filter
|
||||
export function createFilteredUnitConf(installationId: string) {
|
||||
return {
|
||||
...unitConf,
|
||||
items: getFilteredUnits(installationId),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// State untuk tracking installation yang dipilih di form
|
||||
const selectedInstallationId = ref<string>('')
|
||||
|
||||
// Computed untuk filtered unit berdasarkan installation yang dipilih
|
||||
const filteredUnitConf = computed(() => {
|
||||
if (!selectedInstallationId.value) {
|
||||
return { ...unitConf, items: [] }
|
||||
}
|
||||
return createFilteredUnitConf(selectedInstallationId.value)
|
||||
})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getSpecialistList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchSpecialistData,
|
||||
entityName: 'specialist',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Specialist',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (_val: string) => {
|
||||
// Handle search input - this will be triggered by the header component
|
||||
},
|
||||
onClick: () => {
|
||||
// Handle search button click if needed
|
||||
},
|
||||
onClear: () => {
|
||||
// Handle search clear
|
||||
},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah Specialist',
|
||||
icon: 'i-lucide-send',
|
||||
onClick: () => {
|
||||
isFormEntryDialogOpen.value = true
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function fetchSpecialistData(params: any) {
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
// TODO : hit backend request untuk delete
|
||||
console.log('Deleting record:', record)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch(`/api/v1/Installation/${record.id}`, {
|
||||
// method: 'DELETE'
|
||||
// })
|
||||
|
||||
// Refresh data setelah berhasil delete
|
||||
await getSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Record deleted successfully')
|
||||
} catch (error) {
|
||||
console.error('Error deleting record:', error)
|
||||
// TODO: Show error message
|
||||
} finally {
|
||||
// Reset record state
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Handle confirmation result
|
||||
function handleConfirmDelete(record: any, action: string) {
|
||||
console.log('Confirmed action:', action, 'for record:', record)
|
||||
handleDeleteRow(record)
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Form event handlers
|
||||
|
||||
function onCancelForm(resetForm: () => void) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
// Reset installation selection ketika form dibatal
|
||||
selectedInstallationId.value = ''
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function onInstallationChanged(installationId: string) {
|
||||
// Update local state untuk trigger re-render filtered units
|
||||
selectedInstallationId.value = installationId
|
||||
|
||||
// The filteredUnitConf computed will automatically update
|
||||
// based on the new selectedInstallationId value
|
||||
}
|
||||
|
||||
async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
let isSuccess = false
|
||||
try {
|
||||
// TODO: Implement form submission logic
|
||||
console.log('Form submitted:', values)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch('/api/v1/Installation', {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(values)
|
||||
// })
|
||||
|
||||
// If successful, mark as success and close dialog
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
|
||||
// Reset installation selection ketika form berhasil submit
|
||||
selectedInstallationId.value = ''
|
||||
|
||||
// Refresh data after successful submission
|
||||
await getSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Installation created successfully')
|
||||
} catch (error: unknown) {
|
||||
console.warn('Error submitting form:', error)
|
||||
isSuccess = false
|
||||
// Don't close dialog or reset form on error
|
||||
// TODO: Show error message to user
|
||||
} finally {
|
||||
if (isSuccess) {
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
// TODO: Handle edit action
|
||||
// isFormEntryDialogOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
// Trigger confirmation modal open
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// Note: Installation change logic is now handled by the entry-form component
|
||||
// through the onInstallationChanged event handler
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||
<AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
|
||||
<AppSpecialistEntryForm
|
||||
:installation="installationConf"
|
||||
:unit="filteredUnitConf"
|
||||
:schema="schemaConf"
|
||||
:disabled-unit="!selectedInstallationId"
|
||||
:initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
@installation-changed="onInstallationChanged"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* component style */
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const schemaConf = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Nama spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Nama spesialisasi minimal 3 karakter'),
|
||||
|
||||
code: z
|
||||
.string({
|
||||
required_error: 'Kode spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Kode spesialisasi minimal 3 karakter'),
|
||||
|
||||
installationId: z
|
||||
.string({
|
||||
required_error: 'Instalasi harus dipilih',
|
||||
})
|
||||
.min(1, 'Instalasi harus dipilih'),
|
||||
|
||||
unitId: z
|
||||
.string({
|
||||
required_error: 'Unit harus dipilih',
|
||||
})
|
||||
.min(1, 'Unit harus dipilih'),
|
||||
specialistId: z
|
||||
.string({
|
||||
required_error: 'Specialist harus dipilih',
|
||||
})
|
||||
.min(1, 'Specialist harus dipilih'),
|
||||
})
|
||||
|
||||
// Unit mapping berdasarkan installation
|
||||
export const installationUnitMapping: Record<string, string[]> = {
|
||||
'1': ['1', '3'],
|
||||
'2': ['2', '3'],
|
||||
'3': ['1', '2', '3'],
|
||||
}
|
||||
|
||||
export const unitConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih unit',
|
||||
search: 'kode, nama unit',
|
||||
empty: 'unit tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Instalasi Medis', code: 'MED' },
|
||||
{ value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
|
||||
{ value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
|
||||
],
|
||||
}
|
||||
|
||||
export const specialistConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih specialist',
|
||||
search: 'kode, nama specialist',
|
||||
empty: 'specialist tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Spesialis Jantung', code: 'CARD' },
|
||||
{ value: '2', label: 'Spesialis Mata', code: 'OPHT' },
|
||||
{ value: '3', label: 'Spesialis Bedah', code: 'SURG' },
|
||||
{ value: '4', label: 'Spesialis Anak', code: 'PEDI' },
|
||||
{ value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
|
||||
],
|
||||
}
|
||||
|
||||
export const installationConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih instalasi',
|
||||
search: 'kode, nama instalasi',
|
||||
empty: 'instalasi tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Ambulatory', code: 'AMB' },
|
||||
{ value: '2', label: 'Inpatient', code: 'IMP' },
|
||||
{ value: '3', label: 'Emergency', code: 'EMER' },
|
||||
],
|
||||
}
|
||||
|
||||
// Helper function untuk filter unit berdasarkan installation
|
||||
export function getFilteredUnits(installationId: string) {
|
||||
if (!installationId || !installationUnitMapping[installationId]) {
|
||||
return []
|
||||
}
|
||||
|
||||
const allowedUnitIds = installationUnitMapping[installationId]
|
||||
return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
|
||||
}
|
||||
|
||||
// Helper function untuk membuat unit config yang ter-filter
|
||||
export function createFilteredUnitConf(installationId: string) {
|
||||
return {
|
||||
...unitConf,
|
||||
items: getFilteredUnits(installationId),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import AppSubspecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { createFilteredUnitConf, installationConf, schemaConf, specialistConf, unitConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// State untuk tracking installation, unit, dan specialist yang dipilih di form
|
||||
const selectedInstallationId = ref<string>('')
|
||||
const selectedUnitId = ref<string>('')
|
||||
|
||||
// Computed untuk filtered unit berdasarkan installation yang dipilih
|
||||
const filteredUnitConf = computed(() => {
|
||||
if (!selectedInstallationId.value) {
|
||||
return { ...unitConf, items: [] }
|
||||
}
|
||||
return createFilteredUnitConf(selectedInstallationId.value)
|
||||
})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getSubSpecialistList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchSubSpecialistData,
|
||||
entityName: 'subspecialist',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Sub Specialist',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (_val: string) => {
|
||||
// Handle search input - this will be triggered by the header component
|
||||
},
|
||||
onClick: () => {
|
||||
// Handle search button click if needed
|
||||
},
|
||||
onClear: () => {
|
||||
// Handle search clear
|
||||
},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah Sub Specialist',
|
||||
icon: 'i-lucide-send',
|
||||
onClick: () => {
|
||||
isFormEntryDialogOpen.value = true
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function fetchSubSpecialistData(params: any) {
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
// TODO : hit backend request untuk delete
|
||||
console.log('Deleting record:', record)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch(`/api/v1/subspecialist/${record.id}`, {
|
||||
// method: 'DELETE'
|
||||
// })
|
||||
|
||||
// Refresh data setelah berhasil delete
|
||||
await getSubSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Record deleted successfully')
|
||||
} catch (error) {
|
||||
console.error('Error deleting record:', error)
|
||||
// TODO: Show error message
|
||||
} finally {
|
||||
// Reset record state
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Handle confirmation result
|
||||
function handleConfirmDelete(record: any, action: string) {
|
||||
console.log('Confirmed action:', action, 'for record:', record)
|
||||
handleDeleteRow(record)
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Form event handlers
|
||||
|
||||
function onCancelForm(resetForm: () => void) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
selectedInstallationId.value = ''
|
||||
selectedUnitId.value = ''
|
||||
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function onInstallationChanged(installationId: string) {
|
||||
selectedInstallationId.value = installationId
|
||||
}
|
||||
|
||||
function onUnitChanged(unitId: string) {
|
||||
selectedUnitId.value = unitId
|
||||
}
|
||||
|
||||
async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
let isSuccess = false
|
||||
try {
|
||||
// TODO: Implement form submission logic
|
||||
console.log('Form submitted:', values)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch('/api/v1/subspecialist', {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(values)
|
||||
// })
|
||||
|
||||
// If successful, mark as success and close dialog
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
|
||||
// Reset selection ketika form berhasil submit
|
||||
selectedInstallationId.value = ''
|
||||
selectedUnitId.value = ''
|
||||
|
||||
// Refresh data after successful submission
|
||||
await getSubSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Sub Specialist created successfully')
|
||||
} catch (error: unknown) {
|
||||
console.warn('Error submitting form:', error)
|
||||
isSuccess = false
|
||||
// Don't close dialog or reset form on error
|
||||
// TODO: Show error message to user
|
||||
} finally {
|
||||
if (isSuccess) {
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
// TODO: Handle edit action
|
||||
// isFormEntryDialogOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
// Trigger confirmation modal open
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||
<AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
|
||||
<AppSubspecialistEntryForm
|
||||
:installation="installationConf"
|
||||
:unit="filteredUnitConf"
|
||||
:specialist="specialistConf"
|
||||
:schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
@installation-changed="onInstallationChanged"
|
||||
@unit-changed="onUnitChanged"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<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?.name"><strong>Nama:</strong> {{ record.name }}</p>
|
||||
<p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
|
||||
<p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,19 +24,9 @@ const items = [
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
async function fetchDeviceData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/device?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/device', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
|
||||
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Fungsi untuk fetch data unit
|
||||
async function fetchUnitData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
|
||||
Reference in New Issue
Block a user