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

feat(specialist): add installation-unit relationship to specialist form

Browse Source 
- Implement installation-unit mapping and filtering logic
- Update entry form to handle installation selection and unit filtering
- Add installation and unit dropdowns with combobox components
This commit is contained in:
Khafid Prayoga
2025-09-12 14:42:05 +07:00
parent 41d87623e2
commit 87c36b94ea
3 changed files with 228 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/content/specialist/entry.ts
+75 -1
View File
@@ -1,6 +1,6 @@
import * as z from 'zod'
export const schemaConf = z.object({
export const specialistConf = z.object({
name: z
.string({
required_error: 'Nama spesialisasi harus diisi',
@@ -13,9 +13,83 @@ export const schemaConf = z.object({
})
.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),
}
}
app/components/content/specialist/list.vue
+60 -22
View File
@@ -6,7 +6,7 @@ import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-c
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 { schemaConf } from './entry'
import { createFilteredUnitConf, installationConf, specialistConf, unitConf } from './entry'
// #region State & Computed
// Dialog state
@@ -18,12 +18,17 @@ const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
async function fetchSpecialistData(params: any) {
const endpoint = transform('/api/v1/patient', params)
return await xfetch(endpoint)
}
// 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)
})
// Menggunakan composable untuk pagination
const {
data,
isLoading,
@@ -71,6 +76,10 @@ 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 {
@@ -98,17 +107,40 @@ async function handleDeleteRow(record: any) {
}
}
// 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 {
@@ -125,6 +157,9 @@ async function onSubmitForm(values: any, resetForm: () => void) {
isFormEntryDialogOpen.value = false
isSuccess = true
// Reset installation selection ketika form berhasil submit
selectedInstallationId.value = ''
// Refresh data after successful submission
await getSpecialistList()
@@ -161,18 +196,8 @@ watch(recId, () => {
}
})
// 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
}
// Note: Installation change logic is now handled by the entry-form component
// through the onInstallationChanged event handler
// #endregion
</script>
@@ -182,12 +207,25 @@ function handleCancelConfirmation() {
<AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
<AppSpecialistEntryForm :schema="schemaConf" :initial-values="{ name: '', code: '', encounterClassCode: '' }"
@submit="onSubmitForm" @cancel="onCancelForm" />
<AppSpecialistEntryForm
:installation="installationConf"
:unit="filteredUnitConf"
:schema="specialistConf"
: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">
<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>