feat(subspecialist): add detail view and position management
- Implement detail view for subspecialist with specialist relation - Add position management functionality including CRUD operations - Create new components for detail display and position listing - Update service to handle position-related requests - Include employee selection for position assignments
This commit is contained in:
Khafid Prayoga
@@ -0,0 +1,239 @@
|
||||
<script setup lang="ts">
|
||||
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
|
||||
// Components
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
|
||||
// Service
|
||||
import type { Subspecialist } from '~/models/subspecialist'
|
||||
import { getDetail as getDetailSubSpecialist } from '~/services/subspecialist.service'
|
||||
|
||||
// #region subspecialist positions
|
||||
import { config } from '~/components/app/subspecialist/detail/list.cfg'
|
||||
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
|
||||
// Types
|
||||
import {
|
||||
type SubSpecialistPositionFormData,
|
||||
SubSpecialistPositionSchema,
|
||||
} from '~/schemas/subspecialist-position.schema'
|
||||
|
||||
// Handlers
|
||||
import {
|
||||
recId,
|
||||
recAction,
|
||||
recItem,
|
||||
isReadonly,
|
||||
isProcessing,
|
||||
isFormEntryDialogOpen,
|
||||
isRecordConfirmationOpen,
|
||||
onResetState,
|
||||
handleActionSave,
|
||||
handleActionEdit,
|
||||
handleActionRemove,
|
||||
handleCancelForm,
|
||||
} from '~/handlers/subspecialist-position.handler'
|
||||
|
||||
// Services
|
||||
import { getList, getDetail as getDetailSubSpecialistPosition } from '~/services/subspecialist-position.service'
|
||||
import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
|
||||
|
||||
const employees = ref<{ value: string | number; label: string }[]>([])
|
||||
|
||||
const title = ref('')
|
||||
// #endregion
|
||||
|
||||
// #region Props & Emits
|
||||
const props = defineProps<{
|
||||
subspecialistId: number
|
||||
}>()
|
||||
const subSpecialist = ref<Subspecialist>({} as Subspecialist)
|
||||
// #endregion
|
||||
|
||||
// #region State & Computed
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getPositionList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: async (params: any) => {
|
||||
console.log(props.subspecialistId)
|
||||
const result = await getList({
|
||||
'subspecialist-id': props.subspecialistId,
|
||||
includes: 'Employee.Person',
|
||||
search: params.search,
|
||||
sort: 'createdAt:asc',
|
||||
'page-no-limit': true,
|
||||
})
|
||||
return { success: result.success || false, body: result.body || {} }
|
||||
},
|
||||
entityName: 'subspecialist-position',
|
||||
})
|
||||
|
||||
const dataMap = computed(() => {
|
||||
return data.value.map((v, i) => {
|
||||
return {
|
||||
...v,
|
||||
index: i + 1,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Detail Sub Spesialis',
|
||||
icon: 'i-lucide-user',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (value: string) => {
|
||||
searchInput.value = value
|
||||
},
|
||||
onClick: () => {},
|
||||
onClear: () => {},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah Posisi',
|
||||
icon: 'i-lucide-plus',
|
||||
onClick: () => {
|
||||
recItem.value = null
|
||||
recId.value = 0
|
||||
isFormEntryDialogOpen.value = true
|
||||
isReadonly.value = false
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
// #region Lifecycle Hooks
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const result = await getDetailSubSpecialist(props.subspecialistId, {
|
||||
includes: 'specialist',
|
||||
})
|
||||
if (result.success) {
|
||||
subSpecialist.value = result.body.data || {}
|
||||
}
|
||||
|
||||
const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
|
||||
employees.value = res
|
||||
} catch (err) {
|
||||
// show toast
|
||||
toast({
|
||||
title: 'Terjadi Kesalahan',
|
||||
description: 'Terjadi kesalahan saat memuat data',
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
// #endregion region
|
||||
|
||||
// #region Utilities & event handlers
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
// #endregion
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
|
||||
// Watch for row actions when recId or recAction changes
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
getDetailSubSpecialistPosition(recId.value)
|
||||
title.value = 'Edit Posisi'
|
||||
isReadonly.value = false
|
||||
isFormEntryDialogOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header
|
||||
:prep="headerPrep"
|
||||
:ref-search-nav="headerPrep.refSearchNav"
|
||||
/>
|
||||
|
||||
<AppSubspecialistDetail :subspecialist="subSpecialist" />
|
||||
<div class="h-6"></div>
|
||||
|
||||
<AppSubspecialistDetailList
|
||||
:data="dataMap"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
v-model:open="isFormEntryDialogOpen"
|
||||
:title="!!recItem ? title : 'Tambah Posisi'"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
@update:open="
|
||||
(value: any) => {
|
||||
onResetState()
|
||||
isFormEntryDialogOpen = value
|
||||
}
|
||||
"
|
||||
>
|
||||
<AppSubspecialistPositionEntryDetail
|
||||
:schema="SubSpecialistPositionSchema"
|
||||
:subspecialist-id="subspecialistId"
|
||||
:employees="employees"
|
||||
:values="recItem"
|
||||
:is-loading="isProcessing"
|
||||
:is-readonly="isReadonly"
|
||||
@submit="
|
||||
(values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
|
||||
console.log(values)
|
||||
if (recId > 0) {
|
||||
handleActionEdit(recId, values, getPositionList, onResetState, toast)
|
||||
return
|
||||
}
|
||||
handleActionSave(values, getPositionList, onResetState, toast)
|
||||
}
|
||||
"
|
||||
@cancel="handleCancelForm"
|
||||
/>
|
||||
</Dialog>
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="() => handleActionRemove(recId, getPositionList, toast)"
|
||||
@cancel=""
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="space-y-1 text-sm">
|
||||
<p
|
||||
v-for="field in config.delKeyNames"
|
||||
:key="field.key"
|
||||
:v-if="record?.[field.key]"
|
||||
>
|
||||
<span class="font-semibold">{{ field.label }}:</span>
|
||||
{{ record[field.key] }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</template>
|
||||
@@ -1,98 +0,0 @@
|
||||
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),
|
||||
}
|
||||
}
|
||||
@@ -103,9 +103,23 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showDetail:
|
||||
getCurrentSubSpecialistDetail(recId.value)
|
||||
title.value = 'Detail Sub Spesialis'
|
||||
isReadonly.value = true
|
||||
if (Number(recId.value) > 0) {
|
||||
const id = Number(recId.value)
|
||||
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
recId.value = 0
|
||||
isFormEntryDialogOpen.value = false
|
||||
isReadonly.value = false
|
||||
|
||||
navigateTo({
|
||||
name: 'org-src-subspecialist-id',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
break
|
||||
case ActionEvents.showEdit:
|
||||
getCurrentSubSpecialistDetail(recId.value)
|
||||
|
||||
Reference in New Issue
Block a user