Merge branch 'dev' into feat/page-cleaning

This commit is contained in:
2025-11-24 12:52:58 +07:00
13 changed files with 593 additions and 35 deletions
+146
View File
@@ -0,0 +1,146 @@
<script setup lang="ts">
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
// Helpers
import type z from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { genBase } from '~/models/_base'
const props = defineProps<{
modelValue: any
schema: z.ZodSchema<any>
excludeFields?: string[]
isReadonly?: boolean
}>()
const emit = defineEmits<{
(e: 'update:modelValue', val: any): void
(e: 'submit', val: any): void
}>()
// Setup form
const {
validate: _validate,
defineField,
handleSubmit,
errors,
values,
} = useForm({
validationSchema: toTypedSchema(props.schema),
initialValues: props.modelValue,
})
watch(values, (val) => emit('update:modelValue', val), { deep: true })
const [subjective, subjectiveAttrs] = defineField('subjective')
const [objective, objectiveAttrs] = defineField('objective')
const [assesment, assesmentAttrs] = defineField('assesment')
const [plan, planAttrs] = defineField('plan')
const [review, reviewAttrs] = defineField('review')
const validate = async () => {
const result = await _validate()
console.log('Component validate() result:', result)
return {
valid: true,
data: result.values,
errors: result.errors,
}
}
defineExpose({ validate })
</script>
<template>
<form id="entry-form">
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div class="my-2">
<h1 class="font-semibold">Data Petugas</h1>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="2">
<Cell>
<Label dynamic>PPA</Label>
<Field>
<Input disabled />
</Field>
</Cell>
<Cell>
<Label dynamic>Nama PPA</Label>
<Field>
<Input disabled />
</Field>
</Cell>
</Block>
</div>
<div class="my-2">
<h1 class="font-semibold">Data S.O.A.P</h1>
</div>
<div class="my-2 rounded-md border border-slate-300 p-4">
<Block :colCount="2">
<Cell>
<Label dynamic>Subjektif</Label>
<Field>
<Textarea
v-model="subjective"
v-bind="subjectiveAttrs"
/>
</Field>
</Cell>
<Cell>
<Label dynamic>Objektif</Label>
<Field>
<Textarea
v-model="objective"
v-bind="objectiveAttrs"
/>
</Field>
</Cell>
</Block>
<Block :colCount="2">
<Cell>
<Label dynamic>Assesmen</Label>
<Field>
<Textarea
v-model="assesment"
v-bind="assesmentAttrs"
/>
</Field>
</Cell>
<Cell>
<Label dynamic>Plan</Label>
<Field>
<Textarea
v-model="plan"
v-bind="planAttrs"
/>
</Field>
</Cell>
</Block>
<Block>
<Cell>
<Label dynamic>Review</Label>
<Field>
<Textarea
v-model="review"
v-bind="reviewAttrs"
/>
</Field>
</Cell>
</Block>
</div>
<Separator class="mt-8" />
</div>
</form>
</template>
+56
View File
@@ -0,0 +1,56 @@
import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
import type { GeneralConsent } from '~/models/general-consent'
type SmallDetailDto = any
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
export const config: Config = {
cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
headers: [
[
{ label: 'Tanggal' },
{ label: 'PPA' },
{ label: 'Hasil' },
{ label: 'Review & Verifikasi' },
{ label: 'Status' },
{ label: 'Aksi' },
],
],
keys: ['date', 'ppa', 'result', 'review', 'status', 'action'],
delKeyNames: [
{ key: 'data', label: 'Tanggal' },
{ key: 'dstDoctor.name', label: 'Dokter' },
],
parses: {
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: action,
props: {
size: 'sm',
},
}
return res
},
date(rec) {
const recX = rec as GeneralConsent
return recX.date?.substring(0, 10) || '-'
},
},
components: {
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: action,
props: {
size: 'sm',
},
}
return res
},
} as RecStrFuncComponent,
htmls: {} as RecStrFuncUnknown,
}
+34
View File
@@ -0,0 +1,34 @@
<script setup lang="ts">
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
import { config } from './list.cfg'
interface Props {
data: any[]
paginationMeta: PaginationMeta
}
const props = defineProps<Props>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<div class="space-y-4">
<PubMyUiDataTable
v-bind="config"
:rows="data"
:skeleton-size="paginationMeta?.pageSize"
/>
<!-- FIXME: pindahkan ke content/division/list.vue -->
<PaginationView
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
</div>
</template>
+6 -2
View File
@@ -3,7 +3,7 @@ import { defineAsyncComponent } from 'vue'
type SmallDetailDto = any
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
export const config: Config = {
cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
@@ -20,7 +20,7 @@ export const config: Config = {
],
],
keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
keys: ['time', 'employee_id', 'main_complaint', 'encounter', 'diagnose', 'status', 'action'],
delKeyNames: [
{ key: 'code', label: 'Kode' },
@@ -44,6 +44,10 @@ export const config: Config = {
return '-'
}
},
encounter(rec: any) {
const data = rec?.encounter ?? {}
return data?.class_code || '-'
},
diagnose(rec: any) {
const { value } = rec ?? {}
+36
View File
@@ -0,0 +1,36 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useQueryMode } from '@/composables/useQueryMode'
import List from './list.vue'
import Form from './form.vue'
// Models
import type { Encounter } from '~/models/encounter'
// Props
interface Props {
encounter: Encounter
}
const props = defineProps<Props>()
const route = useRoute()
const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
</script>
<template>
<div>
<List
v-if="mode === 'list'"
:encounter="props.encounter"
@add="goToEntry"
@edit="goToEntry"
/>
<Form
v-else
@back="backToList"
/>
</div>
</template>
+74
View File
@@ -0,0 +1,74 @@
<script setup lang="ts">
import { z } from 'zod'
import Entry from '~/components/app/cprj/entry.vue'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import { CprjSoapiSchema } from '~/schemas/soapi.schema'
import { toast } from '~/components/pub/ui/toast'
import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
const { backToList } = useQueryMode('mode')
const route = useRoute()
const fungsional = ref([])
const schema = CprjSoapiSchema
const payload = ref({
encounter_id: 0,
time: '',
typeCode: 'dev-record',
value: '',
})
const model = ref({
ppa: '',
ppa_name: '',
subjective: '',
objective: '',
assesment: '',
plan: '',
review: '',
})
const isLoading = reactive<DataTableLoader>({
isTableLoading: false,
})
onMounted(() => {})
const cprjRef = ref()
async function actionHandler(type: string) {
if (type === 'back') {
backToList()
return
}
const result = await cprjRef.value?.validate()
console.log('result', result)
if (result?.valid) {
console.log('data', result.data)
handleActionSave(
{
...payload.value,
value: JSON.stringify(result.data),
encounter_id: +route.params.id,
time: new Date().toISOString(),
},
{},
toast,
)
} else {
console.log('Ada error di form', result)
}
}
provide('table_data_loader', isLoading)
</script>
<template>
<Entry
ref="cprjRef"
v-model="model"
:schema="schema"
type="function"
/>
<div class="my-2 flex justify-end py-2">
<Action @click="actionHandler" />
</div>
</template>
+183
View File
@@ -0,0 +1,183 @@
<script setup lang="ts">
// Components
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
import List from '~/components/app/soapi/list.vue'
import Entry from '~/components/app/cprj/entry.vue'
// Helpers
import { usePaginatedList } from '~/composables/usePaginatedList'
import { toast } from '~/components/pub/ui/toast'
// Types
import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
// Handlers
import {
recId,
recAction,
recItem,
isReadonly,
isProcessing,
isFormEntryDialogOpen,
isRecordConfirmationOpen,
onResetState,
handleActionSave,
handleActionEdit,
handleActionRemove,
handleCancelForm,
} from '~/handlers/consultation.handler'
// Services
import { getList, getDetail } from '~/services/soapi-early.service'
// Models
import type { Encounter } from '~/models/encounter'
// Props
interface Props {
encounter: Encounter
}
const props = defineProps<Props>()
const emits = defineEmits(['add', 'edit'])
const route = useRoute()
const { recordId } = useQueryCRUDRecordId()
const { goToEntry, backToList } = useQueryCRUDMode('mode')
let units = ref<{ value: string; label: string }[]>([])
const encounterId = ref<number>(props?.encounter?.id || 0)
const title = ref('')
const id = route.params.id
const {
data,
isLoading,
paginationMeta,
searchInput,
handlePageChange,
handleSearch,
fetchData: getMyList,
} = usePaginatedList({
fetchFn: async ({ page, search }) => {
const result = await getList({
'encounter-id': id,
typeCode: 'dev-record',
includes: 'encounter',
search,
page,
})
if (result.success) {
data.value = result.body.data
}
return { success: result.success || false, body: result.body || {} }
},
entityName: 'cprj',
})
const headerPrep: HeaderPrep = {
title: 'CPRJ',
icon: 'i-lucide-box',
refSearchNav: {
placeholder: 'Cari (min. 3 karakter)...',
minLength: 3,
debounceMs: 500,
showValidationFeedback: true,
onInput: (value: string) => {
searchInput.value = value
},
onClick: () => {},
onClear: () => {},
},
addNav: {
label: 'Tambah',
icon: 'i-lucide-plus',
onClick: () => {
goToEntry()
emits('add')
},
},
}
const today = new Date()
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
const getMyDetail = async (id: number | string) => {
const result = await getDetail(id)
if (result.success) {
const currentValue = result.body?.data || {}
recItem.value = currentValue
isFormEntryDialogOpen.value = true
}
}
// Watch for row actions when recId or recAction changes
watch([recId, recAction], () => {
switch (recAction.value) {
case ActionEvents.showDetail:
getMyDetail(recId.value)
title.value = 'Detail Konsultasi'
isReadonly.value = true
break
case ActionEvents.showEdit:
emits('edit')
recordId.value = recId.value
console.log('recordId', recId.value)
break
case ActionEvents.showConfirmDelete:
isRecordConfirmationOpen.value = true
break
}
})
onMounted(async () => {
await getMyList()
})
</script>
<template>
<Header
v-model="searchInput"
:prep="headerPrep"
:ref-search-nav="headerPrep.refSearchNav"
@search="handleSearch"
class="mb-4 xl:mb-5"
/>
<List
:data="data"
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
<!-- Record Confirmation Modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen"
action="delete"
:record="recItem"
@confirm="() => handleActionRemove(recId, getMyList, toast)"
@cancel=""
>
<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>
</div>
</template>
</RecordConfirmation>
</template>
@@ -20,8 +20,8 @@ const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
const { getPagePermissions } = useRBAC()
const pagePermission = getPagePermissions(roleAccess)
const {user,userRole} = useUserStore()
const {getUserPermissions} = useRBAC()
// const {user,userRole} = useUserStore()
// const {getUserPermissions} = useRBAC()
// #endregion
// #region State
@@ -121,6 +121,7 @@ watch([recId, recAction, timestamp], () => {
case ActionEvents.showDetail:
isDocPreviewDialogOpen.value = true
break
case ActionEvents.showEdit:
if(pagePermission.canUpdate){
navigateTo({
@@ -131,22 +132,13 @@ watch([recId, recAction, timestamp], () => {
unauthorizedToast()
}
break
case ActionEvents.showConfirmDelete:
if(pagePermission.canDelete){
isRecordConfirmationOpen.value = true
} else {
unauthorizedToast()
}
navigateTo(recItem.value.filePath, { 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
}
})
+14 -6
View File
@@ -21,6 +21,7 @@ import Prescription from '~/components/content/prescription/main.vue'
import CpLabOrder from '~/components/content/cp-lab-order/main.vue'
import Radiology from '~/components/content/radiology-order/main.vue'
import Consultation from '~/components/content/consultation/list.vue'
import Cprj from '~/components/content/cprj/entry.vue'
import DocUploadList from '~/components/content/document-upload/list.vue'
import GeneralConsentList from '~/components/content/general-consent/entry.vue'
import ResumeList from '~/components/content/resume/list.vue'
@@ -42,9 +43,10 @@ const data = ref(genEncounter())
async function fetchDetail() {
const res = await getDetail(id, {
includes: 'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
includes:
'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
})
if(res.body?.data) data.value = res.body?.data
if (res.body?.data) data.value = res.body?.data
}
onMounted(() => {
@@ -73,12 +75,13 @@ const tabs: TabItem[] = [
},
{ value: 'therapy-protocol', label: 'Protokol Terapi' },
{ value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
{ value: 'patient-note', label: 'CPRJ', component: Cprj, props: { encounter: data } },
{ value: 'consent', label: 'General Consent', component: GeneralConsentList, props: { encounter: data } },
{ value: 'patient-note', label: 'CPRJ' },
{ value: 'prescription', label: 'Order Obat', component: Prescription, props: { encounter_id: data.value.id } },
{ value: 'device-order', label: 'Order Alkes', component: DeviceOrder, props: { encounter_id: data.value.id } },
{ value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.value.id } },
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.value.id } },
{ value: 'device', label: 'Order Alkes' },
{ value: 'mcu-radiology', label: 'Order Radiologi', component: Radiology, props: { encounter_id: data.id } },
{ value: 'mcu-lab-cp', label: 'Order Lab PK', component: CpLabOrder, props: { encounter_id: data.id } },
{ value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
{ value: 'mcu-lab-pa', label: 'Order Lab PA' },
{ value: 'medical-action', label: 'Order Ruang Tindakan' },
@@ -87,7 +90,12 @@ const tabs: TabItem[] = [
{ value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
{ value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
{ value: 'screening', label: 'Skrinning MPP' },
{ value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data }, },
{
value: 'supporting-document',
label: 'Upload Dokumen Pendukung',
component: DocUploadList,
props: { encounter: data },
},
]
</script>
+1 -6
View File
@@ -24,12 +24,7 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
<template>
<div>
<SoapiList
v-if="mode === 'list'"
@add="goToEntry"
@edit="goToEntry"
/>
<SoapiList v-if="mode === 'list'" />
<component
v-else
:is="ActiveForm"
+5 -3
View File
@@ -8,7 +8,8 @@ import { EarlySchema } from '~/schemas/soapi.schema'
import { toast } from '~/components/pub/ui/toast'
import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
const { backToList } = useQueryMode('mode')
const { goToEntry, backToList } = useQueryCRUDMode('mode')
const { recordId } = useQueryCRUDMode('record-id')
const route = useRoute()
const isOpenProcedure = ref(false)
const isOpenDiagnose = ref(false)
@@ -20,7 +21,7 @@ const schema = EarlySchema
const payload = ref({
encounter_id: 0,
time: '',
typeCode: 'early',
typeCode: 'early-medic',
value: '',
})
@@ -46,7 +47,7 @@ const isLoading = reactive<DataTableLoader>({
async function getDiagnoses() {
isLoading.isTableLoading = true
const resp = await xfetch('/api/v1/diagnose-src')
const resp = await xfetch(`/api/v1/soapi/${recordId}`)
if (resp.success) {
diagnoses.value = (resp.body as Record<string, any>).data
}
@@ -77,6 +78,7 @@ function handleOpen(type: string) {
const entryRef = ref()
async function actionHandler(type: string) {
console.log(type)
if (type === 'back') {
backToList()
return
+26 -6
View File
@@ -22,10 +22,14 @@ interface Props {
encounter: Encounter
label: string
}
const route = useRoute()
const props = defineProps<Props>()
const emits = defineEmits(['add', 'edit'])
const { recordId } = useQueryCRUDRecordId()
const { goToEntry, backToList } = useQueryCRUDMode('mode')
const router = useRouter()
const route = useRoute()
const data = ref([])
const encounterId = ref<number>(props?.encounter?.id || 0)
const title = ref('')
@@ -56,13 +60,10 @@ const hreaderPrep: HeaderPrep = {
icon: 'i-lucide-users',
addNav: {
label: 'Tambah',
onClick: () => emits('add'),
onClick: () => goToEntry(),
},
}
const { recordId } = useQueryCRUDRecordId()
const { goToEntry, backToList } = useQueryCRUDMode('mode')
const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
onMounted(async () => {
@@ -70,13 +71,24 @@ onMounted(async () => {
})
async function getMyList() {
const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
const url = `/api/v1/soapi?typeCode=${typeCode.value}&includes=encounter,employee&encounter-id=${route.params.id}`
const resp = await xfetch(url)
if (resp.success) {
data.value = (resp.body as Record<string, any>).data
}
}
const goEdit = (id: string) => {
router.replace({
path: route.path,
query: {
...route.query,
mode: 'entry',
'record-id': id,
},
})
}
function handlePageChange(page: number) {
emits('pageChange', page)
}
@@ -142,6 +154,14 @@ watch([recId, recAction], () => {
}
})
// watch(recId, () => {
// console.log('recId', recId.value)
// console.log('recIdaacin', recAction.value)
// if (recAction.value === 'showEdit') {
// goEdit(recId.value)
// }
// })
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
+8
View File
@@ -179,6 +179,14 @@ const InstructionSchema = z.object({
other: z.string().default(''),
})
export const CprjSoapiSchema = z.object({
subjective: z.string().default(''),
objective: z.string().default(''),
assesment: z.string().default(''),
plan: z.string().default(''),
review: z.string().default(''),
})
export const SoapSchema = z.object({
subject: SubjectSchema,
object: ObjectSchema,