Merge branch 'dev' into feat/surat-kontrol-135
This commit is contained in:
Muhammad Hasyim Chaidir Ali
+3
-1
@@ -23,4 +23,6 @@ logs
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
.vscode
|
||||
# editor
|
||||
.vscode
|
||||
*.swp
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
--primary-hover: 26, 92%, 65%;
|
||||
|
||||
/* Secondary - Clean Blue */
|
||||
--secondary: 210 50% 96%;
|
||||
--secondary-foreground: 210 20% 20%;
|
||||
--secondary: 40 70% 60%;
|
||||
--secondary-foreground: 210 20% 100%;
|
||||
--muted: 210 25% 95%;
|
||||
--muted-foreground: 210 15% 50%;
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucideCheck } from 'lucide-vue-next';
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
// Components
|
||||
import type z from 'zod'
|
||||
import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { CheckInFormData } from '~/schemas/encounter.schema'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
values: any
|
||||
doctors: { value: string; label: string }[]
|
||||
employees: { value: string; label: string }[]
|
||||
encounter: Encounter
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: CheckInFormData]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
responsible_doctor_id: 0,
|
||||
adm_employee_id: 0,
|
||||
registeredAt: props.values.values?.registeredAt || '',
|
||||
} as Partial<CheckInFormData>,
|
||||
})
|
||||
|
||||
const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
|
||||
const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
|
||||
const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
|
||||
|
||||
function submitForm() {
|
||||
const formData: CheckInFormData = {
|
||||
responsible_doctor_id: responsible_doctor_id.value,
|
||||
adm_employee_id: adm_employee_id.value,
|
||||
// registeredAt: registeredAt.value || '',
|
||||
}
|
||||
emit('submit', formData)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cell-flex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label>Dokter</DE.Label>
|
||||
<DE.Field>
|
||||
<ComboBox
|
||||
id="doctor"
|
||||
v-model="responsible_doctor_id"
|
||||
v-bind="responsible_doctor_idAttrs"
|
||||
:items="doctors"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter DPJP"
|
||||
search-placeholder="Pilih DPJP"
|
||||
empty-message="DPJP tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>PJ Berkas</DE.Label>
|
||||
<DE.Field>
|
||||
<ComboBox
|
||||
id="doctor"
|
||||
v-model="adm_employee_id"
|
||||
v-bind="adm_employee_idAttrs"
|
||||
:items="employees"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter DPJP"
|
||||
search-placeholder="Pilih petugas"
|
||||
empty-message="Petugas tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label>Waktu Masuk</DE.Label>
|
||||
<DE.Field>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="registeredAt"
|
||||
v-bind="registeredAtAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="submitForm">
|
||||
<LucideCheck />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts" setup>
|
||||
// Components
|
||||
import { LucidePen } from 'lucide-vue-next';
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import Input from '~/components/pub/ui/input/Input.vue';
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
const doctor = ref('-belum dipilih-')
|
||||
const adm = ref('-belum dipilih-')
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: []
|
||||
}>()
|
||||
|
||||
watch(props.encounter, () => {
|
||||
doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
|
||||
adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cell-flex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Dokter</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">PJ Berkas</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Waktu Masuk</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="() => emit('edit')">
|
||||
<LucidePen />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucideCheck } from 'lucide-vue-next';
|
||||
import { useForm, useFieldArray } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
//
|
||||
import type z from 'zod'
|
||||
import * as CB from '~/components/pub/my-ui/combobox'
|
||||
import { dischargeMethodCodes } from '~/lib/constants';
|
||||
import type {
|
||||
CheckOutFormData,
|
||||
CheckOutDeathFormData,
|
||||
CheckOutInternalReferenceFormData
|
||||
} from '~/schemas/encounter.schema'
|
||||
|
||||
import * as Table from '~/components/pub/ui/table'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
values: any
|
||||
units: any[]
|
||||
doctors: any[]
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: CheckOutFormData]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
discharge_method_code: '',
|
||||
discharge_date: '',
|
||||
internalReferences: [{ unit_id: 0, doctor_id: 0 }],
|
||||
deathCauses: [""],
|
||||
} as Partial<CheckOutFormData>,
|
||||
})
|
||||
const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
|
||||
const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date')
|
||||
const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');
|
||||
|
||||
function submitForm(values: any) {
|
||||
if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
|
||||
const formData: CheckOutInternalReferenceFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
internalReferences: [{ unit_id: 0, doctor_id: 0 }],
|
||||
}
|
||||
emit('submit', formData)
|
||||
} else if (discharge_method_code.value === 'death') {
|
||||
const formData: CheckOutDeathFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
death_cause: [""],
|
||||
}
|
||||
emit('submit', formData)
|
||||
} else {
|
||||
const formData: CheckOutFormData = {
|
||||
discharge_method_code: discharge_method_code.value,
|
||||
discharge_date: discharge_date.value,
|
||||
}
|
||||
emit('submit', formData)
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
discharge_method_code.value = ''
|
||||
discharge_date.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cellFlex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label>Alasan Keluar</DE.Label>
|
||||
<DE.Field>
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
v-model="discharge_method_code"
|
||||
v-bind="discharge_method_codeAttrs"
|
||||
:items="dischargeMethodItems"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Cara Keluar"
|
||||
search-placeholder="Cari Cara Keluar"
|
||||
empty-message="Cara Keluar tidak ditemukan"
|
||||
/>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label>Waktu Keluar</DE.Label>
|
||||
<DE.Cell>
|
||||
<Input
|
||||
id="discharge_date"
|
||||
v-model="discharge_date"
|
||||
v-bind="discharge_dateAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="'death' == discharge_method_code">
|
||||
<DE.Label>Sebab Meninggal</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="mb-3">
|
||||
<Input />
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="submitForm"
|
||||
>
|
||||
Tambah Sebab meninggal
|
||||
</Button>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
|
||||
<DE.Label>Tujuan</DE.Label>
|
||||
<DE.Field>
|
||||
<Table.Table class="border mb-3">
|
||||
<Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
|
||||
<Table.TableCell class="text-center">Poly</Table.TableCell>
|
||||
<Table.TableCell class="text-center">DPJP</Table.TableCell>
|
||||
<Table.TableCell class="text-center !w-10"></Table.TableCell>
|
||||
</Table.TableHeader>
|
||||
<Table.TableBody>
|
||||
<Table.TableRow v-for="(item, index) in fields" :key="index">
|
||||
<Table.TableCell class="!p-0.5">
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
:v-model.number="item.value.unit_id"
|
||||
:items="units"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Poly"
|
||||
search-placeholder="Cari Poly"
|
||||
empty-message="Poly tidak ditemukan"
|
||||
/>
|
||||
</Table.TableCell>
|
||||
<Table.TableCell class="!p-0.5">
|
||||
<CB.Combobox
|
||||
id="dischargeMethodItems"
|
||||
:v-model.number="item.value.doctor_id"
|
||||
:items="units"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Dokter"
|
||||
search-placeholder="Pilih Dokter"
|
||||
empty-message="Dokter tidak ditemukan"
|
||||
/>
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
<Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
|
||||
X
|
||||
</Button>
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
</Table.TableBody>
|
||||
</Table.Table>
|
||||
<div>
|
||||
<Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
|
||||
</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center">
|
||||
<Button @click="submitForm">>
|
||||
<LucideCheck />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
import { LucidePen, LucideCheck } from 'lucide-vue-next';
|
||||
|
||||
//
|
||||
import * as CB from '~/components/pub/my-ui/combobox'
|
||||
import { dischargeMethodCodes } from '~/lib/constants';
|
||||
|
||||
import * as Table from '~/components/pub/ui/table'
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import type { Encounter } from '~/models/encounter';
|
||||
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [],
|
||||
finish: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DE.Block :cellFlex="false">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Alasan Keluar</DE.Label>
|
||||
<DE.Field>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_method_code || '-belum ditentukan-' }}</div>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Waktu Keluar</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date || '-belum ditentukan-' }}</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="'death' == encounter.discharge_method_code">
|
||||
<DE.Label class="font-semibold">Sebab Meninggal</DE.Label>
|
||||
<DE.Cell>
|
||||
<div class="mb-3">
|
||||
<div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date }}</div>
|
||||
</div>
|
||||
</DE.Cell>
|
||||
</DE.Cell>
|
||||
|
||||
<DE.Cell v-if="['consul-poly', 'consul-executive'].includes(encounter.discharge_method_code || '')">
|
||||
<DE.Label class="font-semibold">Tujuan</DE.Label>
|
||||
<DE.Field>
|
||||
<Table.Table class="border mb-3">
|
||||
<Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
|
||||
<Table.TableCell class="text-center">Poly</Table.TableCell>
|
||||
<Table.TableCell class="text-center">DPJP</Table.TableCell>
|
||||
<Table.TableCell class="text-center !w-10"></Table.TableCell>
|
||||
</Table.TableHeader>
|
||||
<Table.TableBody>
|
||||
<Table.TableRow v-for="(item, index) in encounter.internalReferences" :key="index">
|
||||
<Table.TableCell class="!p-0.5">
|
||||
</Table.TableCell>
|
||||
<Table.TableCell class="!p-0.5">
|
||||
</Table.TableCell>
|
||||
<Table.TableCell>
|
||||
</Table.TableCell>
|
||||
</Table.TableRow>
|
||||
</Table.TableBody>
|
||||
</Table.Table>
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
<div class="text-center [&>*]:mx-1">
|
||||
<Button @click="() => emit('edit')">
|
||||
<LucidePen />
|
||||
Edit
|
||||
</Button>
|
||||
<Button @click="() => emit('finish')">
|
||||
<LucideCheck />
|
||||
Selesai
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,6 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-10 text-center">Hello World!!!</div>
|
||||
</template>
|
||||
@@ -7,94 +7,18 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
|
||||
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 120 },
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{},
|
||||
{ width: 50 },
|
||||
],
|
||||
cols: [{}, {}, {}, {}],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Rekam Medis' },
|
||||
{ label: 'KTP' },
|
||||
{ label: 'Tgl Lahir' },
|
||||
{ label: 'Umur' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'Pendidikan' },
|
||||
{ label: 'Status' },
|
||||
{ label: '' },
|
||||
],
|
||||
],
|
||||
headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
|
||||
|
||||
keys: [
|
||||
'name',
|
||||
'medicalRecord_number',
|
||||
'identity_number',
|
||||
'birth_date',
|
||||
'patient_age',
|
||||
'gender',
|
||||
'education',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
keys: ['code', 'name', 'indName', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
],
|
||||
|
||||
parses: {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
|
||||
},
|
||||
identity_number: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
|
||||
return '(TANPA NIK)'
|
||||
}
|
||||
return recX.identity_number
|
||||
},
|
||||
birth_date: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.birth_date == 'object' && recX.birth_date) {
|
||||
return (recX.birth_date as Date).toLocaleDateString()
|
||||
} else if (typeof recX.birth_date == 'string') {
|
||||
return (recX.birth_date as string).substring(0, 10)
|
||||
}
|
||||
return recX.birth_date
|
||||
},
|
||||
patient_age: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.birth_date?.split('T')[0]
|
||||
},
|
||||
gender: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
|
||||
return 'Tidak Diketahui'
|
||||
}
|
||||
return recX.gender_code
|
||||
},
|
||||
education: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
|
||||
return recX.education_code
|
||||
} else if (typeof recX.education_code) {
|
||||
return recX.education_code
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
parses: {},
|
||||
|
||||
components: {
|
||||
action(rec, idx) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { config } from './list-cfg'
|
||||
|
||||
defineProps<{ data: any[] }>()
|
||||
const modelValue = defineModel<any | null>()
|
||||
const modelValue = defineModel<any[]>('modelValue', { default: [] })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Trash2 } from 'lucide-vue-next'
|
||||
// import { Button } from '@/components/ui/button'
|
||||
// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
|
||||
interface Diagnosa {
|
||||
id: number
|
||||
@@ -10,10 +7,10 @@ interface Diagnosa {
|
||||
icd: string
|
||||
}
|
||||
|
||||
const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
|
||||
const modelValue = defineModel<Diagnosa[]>({ default: [] })
|
||||
|
||||
function removeItem(id: number) {
|
||||
list.value = list.value.filter((item) => item.id !== id)
|
||||
modelValue.value = modelValue.value.filter((item) => item.id !== id)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -30,12 +27,19 @@ function removeItem(id: number) {
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
<TableRow v-for="(item, i) in list" :key="item.id">
|
||||
<TableRow
|
||||
v-for="(item, i) in modelValue"
|
||||
:key="item.id"
|
||||
>
|
||||
<TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
|
||||
<TableCell>{{ item.diagnosa }}</TableCell>
|
||||
<TableCell>{{ item.icd }}</TableCell>
|
||||
<TableCell>{{ item.code }}</TableCell>
|
||||
<TableCell>{{ item.name }}</TableCell>
|
||||
<TableCell class="text-center">
|
||||
<Button variant="ghost" size="icon" @click="removeItem(item.id)">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="removeItem(item.id)"
|
||||
>
|
||||
<Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
|
||||
@@ -63,13 +63,13 @@ const validate = async () => {
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="entry-form">
|
||||
{{ errors }}
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Block>
|
||||
<Cell>
|
||||
@@ -285,7 +285,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('modal', 'diagnosa')"
|
||||
@click="emit('modal', 'diagnosa')"
|
||||
>
|
||||
+ Pilih Diagnosa
|
||||
</Button>
|
||||
@@ -298,7 +298,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('modal', 'prosedur')"
|
||||
@click="emit('modal', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
@@ -307,8 +307,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</Block>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
<AppIcdPreview v-model="icdPreview.procedures" />
|
||||
</div>
|
||||
|
||||
<Block :colCount="3">
|
||||
|
||||
@@ -85,6 +85,7 @@ const validate = async () => {
|
||||
}
|
||||
|
||||
defineExpose({ validate })
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
@@ -452,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
|
||||
|
||||
<Button
|
||||
class="rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emit('click', 'fungsional')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
|
||||
@@ -43,5 +43,6 @@ defineExpose({ validate })
|
||||
@click="$emit('click', $event)"
|
||||
@submit="$emit('submit', $event)"
|
||||
@cancel="$emit('cancel', $event)"
|
||||
@modal="$emit('modal', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -86,6 +86,8 @@ const validate = async () => {
|
||||
|
||||
defineExpose({ validate })
|
||||
|
||||
const icdPreview = inject('icdPreview')
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
const disorders = ref<string[]>([])
|
||||
const therapies = ref<string[]>([])
|
||||
@@ -558,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
@click="emit('click', 'diagnosa')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.diagnoses" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Fungsional (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emit('click', 'fungsional')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview v-model="icdPreview.fungsional" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Medis (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
@click="emit('click', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Medis (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
<AppIcdPreview v-model="icdPreview.procedures" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,46 +6,21 @@ type SmallDetailDto = any
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const config: Config = {
|
||||
cols: [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 120 },
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{ width: 100 },
|
||||
{ width: 100 },
|
||||
{},
|
||||
{ width: 50 },
|
||||
],
|
||||
cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
|
||||
|
||||
headers: [
|
||||
[
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Rekam Medis' },
|
||||
{ label: 'KTP' },
|
||||
{ label: 'Tgl Lahir' },
|
||||
{ label: 'Umur' },
|
||||
{ label: 'JK' },
|
||||
{ label: 'Pendidikan' },
|
||||
{ label: 'Tanggal' },
|
||||
{ label: 'DPJP' },
|
||||
{ label: 'Keluhan & Riwayat' },
|
||||
{ label: 'Pemeriksaan' },
|
||||
{ label: 'Diagnosa' },
|
||||
{ label: 'Status' },
|
||||
{ label: '' },
|
||||
{ label: 'Aksi' },
|
||||
],
|
||||
],
|
||||
|
||||
keys: [
|
||||
'name',
|
||||
'medicalRecord_number',
|
||||
'identity_number',
|
||||
'birth_date',
|
||||
'patient_age',
|
||||
'gender',
|
||||
'education',
|
||||
'status',
|
||||
'action',
|
||||
],
|
||||
keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
|
||||
|
||||
delKeyNames: [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
@@ -53,45 +28,34 @@ export const config: Config = {
|
||||
],
|
||||
|
||||
parses: {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
|
||||
time(rec: any) {
|
||||
return rec.time ? new Date(rec.time).toLocaleDateString() : ''
|
||||
},
|
||||
identity_number: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
|
||||
return '(TANPA NIK)'
|
||||
main_complaint(rec: any) {
|
||||
const { value } = rec ?? {}
|
||||
|
||||
if (typeof value !== 'string') return '-'
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
console.log('parsed', parsed)
|
||||
return parsed?.['prim-compl'] || '-'
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
return recX.identity_number
|
||||
},
|
||||
birth_date: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.birth_date === 'object' && recX.birth_date) {
|
||||
return (recX.birth_date as Date).toLocaleDateString()
|
||||
} else if (typeof recX.birth_date === 'string') {
|
||||
return recX.birth_date.substring(0, 10)
|
||||
diagnose(rec: any) {
|
||||
const { value } = rec ?? {}
|
||||
|
||||
if (typeof value !== 'string') return '-'
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
const diagnose = parsed?.diagnose || []
|
||||
return diagnose.map((d: any) => d.name).join(', ')
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
return recX.birth_date
|
||||
},
|
||||
patient_age: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.birth_date?.split('T')[0]
|
||||
},
|
||||
gender: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
|
||||
return 'Tidak Diketahui'
|
||||
}
|
||||
return recX.gender_code
|
||||
},
|
||||
education: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
|
||||
return recX.education_code
|
||||
} else if (typeof recX.education_code !== 'undefined') {
|
||||
return recX.education_code
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div>halo</div>
|
||||
</template>
|
||||
@@ -1,64 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
label: string
|
||||
}>()
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
},
|
||||
}
|
||||
|
||||
// Loading state management
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
const hreaderPrep: HeaderPrep = {
|
||||
title: props.label,
|
||||
icon: 'i-lucide-users',
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
|
||||
},
|
||||
}
|
||||
|
||||
async function getPatientList() {
|
||||
const resp = await xfetch('/api/v1/patient')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
|
||||
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
||||
<AssesmentFunctionList :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -5,15 +5,16 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { getDetail } from '~/services/encounter.service'
|
||||
|
||||
// Components
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
//
|
||||
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
|
||||
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
|
||||
|
||||
// PLASE ORDER BY TAB POSITION
|
||||
import Status from '~/components/content/encounter/status.vue'
|
||||
import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
|
||||
import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
|
||||
import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
|
||||
import PrescriptionList from '~/components/content/prescription/list.vue'
|
||||
import Status from '~/components/app/encounter/status.vue'
|
||||
import Consultation from '~/components/content/consultation/list.vue'
|
||||
import EncounterList from '~/components/content/outpatient/encounter/list.vue'
|
||||
|
||||
@@ -38,13 +39,24 @@ const data = dataResBody?.data ?? null
|
||||
|
||||
const tabs: TabItem[] = [
|
||||
{ value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
|
||||
{ value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
|
||||
{
|
||||
value: 'early-medical-assessment',
|
||||
label: 'Pengkajian Awal Medis',
|
||||
component: EarlyMedicalAssesmentList,
|
||||
props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
|
||||
},
|
||||
{
|
||||
value: 'rehab-medical-assessment',
|
||||
label: 'Pengkajian Awal Medis Rehabilitasi Medis',
|
||||
component: EarlyMedicalRehabList,
|
||||
props: { encounter: data, type: 'early-rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
|
||||
},
|
||||
{
|
||||
value: 'function-assessment',
|
||||
label: 'Asesmen Fungsi',
|
||||
component: AssesmentFunctionList,
|
||||
props: { encounter: data, type: 'function', label: 'Asesmen Fungsi' },
|
||||
},
|
||||
{ value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
|
||||
{ value: 'therapy-protocol', label: 'Protokol Terapi' },
|
||||
{ value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
|
||||
{ value: 'consent', label: 'General Consent' },
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup lang="ts">
|
||||
//
|
||||
import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
|
||||
import { getValueLabelList as getEmployeeValueLabelList } from '~/services/employee.service'
|
||||
import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
|
||||
import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
|
||||
import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'
|
||||
|
||||
//
|
||||
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
||||
import CheckInView from '~/components/app/encounter/check-in-view.vue'
|
||||
import CheckInEntry from '~/components/app/encounter/check-in-entry.vue'
|
||||
import CheckOutView from '~/components/app/encounter/check-out-view.vue'
|
||||
import CheckOutEntry from '~/components/app/encounter/check-out-entry.vue'
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
import { checkIn } from '~/services/encounter.service'
|
||||
|
||||
//
|
||||
const props = defineProps<{
|
||||
encounter: Encounter
|
||||
}>()
|
||||
|
||||
// doctors
|
||||
const doctors = await getDoctorValueLabelList({'includes': 'employee,employee-person'})
|
||||
const employees = await getEmployeeValueLabelList({'includes': 'person', 'position-code': 'reg'})
|
||||
const units = await getUnitValueLabelList()
|
||||
|
||||
// check in
|
||||
const checkInValues = ref<any>({
|
||||
discharge_method_code: '',
|
||||
responsible_doctor_id: 0,
|
||||
// registeredAt: '',
|
||||
})
|
||||
const checkInIsLoading = ref(false)
|
||||
const checkInIsReadonly = ref(false)
|
||||
const checkInDialogOpen = ref(false)
|
||||
|
||||
// check out
|
||||
const checkOutValues = ref<any>({
|
||||
dischargeMethod_code: '',
|
||||
unit_id: 0,
|
||||
responsibleDoctor_id: 0,
|
||||
})
|
||||
const checkOutIsLoading = ref(false)
|
||||
const checkOutIsReadonly = ref(false)
|
||||
const checkOutDialogOpen = ref(false)
|
||||
|
||||
function editCheckIn() {
|
||||
checkInDialogOpen.value = true
|
||||
}
|
||||
|
||||
function submitCheckIn(values: CheckInFormData) {
|
||||
checkIn(props.encounter.id, values)
|
||||
}
|
||||
|
||||
function editCheckOut() {
|
||||
checkOutDialogOpen.value = true
|
||||
}
|
||||
|
||||
function submitCheckOut(values: CheckOutFormData) {
|
||||
console.log(values)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="lg:grid grid-cols-2">
|
||||
<div class="border-r lg:pe-4 xl:pe-5 mb-10">
|
||||
<div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
|
||||
<CheckInView
|
||||
:encounter="encounter"
|
||||
:is-loading="checkInIsLoading"
|
||||
:is-readonly="checkInIsReadonly"
|
||||
@edit="editCheckIn"
|
||||
/>
|
||||
</div>
|
||||
<div class="lg:ps-4 xl:ps-5">
|
||||
<Separator class="lg:hidden my-4 xl:my-5" />
|
||||
<div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
|
||||
<CheckOutView
|
||||
:encounter="encounter"
|
||||
:is-loading="checkOutIsLoading"
|
||||
:is-readonly="checkOutIsReadonly"
|
||||
@edit="editCheckOut"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
v-model:open="checkInDialogOpen"
|
||||
title="Ubah Informasi Masuk"
|
||||
size="md"
|
||||
prevent-outside
|
||||
>
|
||||
<CheckInEntry
|
||||
:schema="CheckInSchema"
|
||||
:values="checkInValues"
|
||||
:encounter="encounter"
|
||||
:doctors="doctors"
|
||||
:employees="employees"
|
||||
:is-loading="checkInIsLoading"
|
||||
:is-readonly="checkInIsReadonly"
|
||||
@submit="submitCheckIn"
|
||||
@cancel="checkInDialogOpen = false"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
v-model:open="checkOutDialogOpen"
|
||||
title="Ubah Informasi Keluar"
|
||||
size="lg"
|
||||
prevent-outside
|
||||
>
|
||||
<CheckOutEntry
|
||||
:schema="CheckOutSchema"
|
||||
:values="checkOutValues"
|
||||
:encounter="encounter"
|
||||
:units="units"
|
||||
:doctors="doctors"
|
||||
:is-loading="checkInIsLoading"
|
||||
:is-readonly="checkInIsReadonly"
|
||||
@submit="submitCheckOut"
|
||||
@cancel="checkInDialogOpen = false"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -11,7 +11,7 @@ import FunctionForm from './form-function.vue'
|
||||
const route = useRoute()
|
||||
const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
|
||||
|
||||
const { mode, openForm, backToList } = useQueryMode('mode')
|
||||
const { mode, goToEntry, backToList } = useQueryCRUDMode('mode')
|
||||
|
||||
const formMap = {
|
||||
'early-medical-assessment': EarlyForm,
|
||||
@@ -26,7 +26,8 @@ const ActiveForm = computed(() => formMap[type.value] || EarlyForm)
|
||||
<div>
|
||||
<SoapiList
|
||||
v-if="mode === 'list'"
|
||||
@add="openForm"
|
||||
@add="goToEntry"
|
||||
@edit="goToEntry"
|
||||
/>
|
||||
|
||||
<component
|
||||
|
||||
@@ -2,14 +2,23 @@
|
||||
import { z } from 'zod'
|
||||
import Entry from '~/components/app/soapi/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 { FunctionSoapiSchema } 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 isOpen = ref(false)
|
||||
const data = ref([])
|
||||
const isOpenProcedure = ref(false)
|
||||
const isOpenDiagnose = ref(false)
|
||||
const isOpenFungsional = ref(false)
|
||||
const procedures = ref([])
|
||||
const diagnoses = ref([])
|
||||
const fungsional = ref([])
|
||||
const selectedProcedure = ref<any>(null)
|
||||
const selectedDiagnose = ref<any>(null)
|
||||
const selectedFungsional = ref<any>(null)
|
||||
const schema = FunctionSoapiSchema
|
||||
const payload = ref({
|
||||
encounter_id: 0,
|
||||
@@ -60,29 +69,55 @@ const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
async function getPatientList() {
|
||||
async function getDiagnoses() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/patient')
|
||||
const resp = await xfetch('/api/v1/diagnose-src')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
diagnoses.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
async function getProcedures() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/procedure-src')
|
||||
if (resp.success) {
|
||||
procedures.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
getProcedures()
|
||||
getDiagnoses()
|
||||
})
|
||||
|
||||
function handleOpen(type: string) {
|
||||
console.log(type)
|
||||
isOpen.value = true
|
||||
function handleClick(type: string) {
|
||||
if (type === 'prosedur') {
|
||||
isOpenProcedure.value = true
|
||||
} else if (type === 'diagnosa') {
|
||||
isOpenDiagnose.value = true
|
||||
} else if (type === 'fungsional') {
|
||||
isOpenDiagnose.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const entryRehabRef = ref()
|
||||
async function actionHandler(type: string) {
|
||||
console.log(type)
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
return
|
||||
}
|
||||
const result = await entryRehabRef.value?.validate()
|
||||
if (result?.valid) {
|
||||
if (
|
||||
selectedProcedure.value?.length > 0 ||
|
||||
selectedDiagnose.value?.length > 0 ||
|
||||
selectedFungsional.value?.length > 0
|
||||
) {
|
||||
result.data.procedure = selectedProcedure.value || []
|
||||
result.data.diagnose = selectedDiagnose.value || []
|
||||
result.data.fungsional = selectedFungsional.value || []
|
||||
}
|
||||
console.log('data', result.data)
|
||||
handleActionSave(
|
||||
{
|
||||
@@ -99,7 +134,23 @@ async function actionHandler(type: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const icdPreview = ref({
|
||||
procedures: [],
|
||||
diagnoses: [],
|
||||
})
|
||||
|
||||
function actionDialogHandler(type: string) {
|
||||
if (type === 'submit') {
|
||||
icdPreview.value.procedures = selectedProcedure.value || []
|
||||
icdPreview.value.diagnoses = selectedDiagnose.value || []
|
||||
icdPreview.value.fungsional = selectedFungsional.value || []
|
||||
}
|
||||
isOpenProcedure.value = false
|
||||
isOpenDiagnose.value = false
|
||||
}
|
||||
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('icdPreview', icdPreview)
|
||||
</script>
|
||||
<template>
|
||||
<Entry
|
||||
@@ -107,17 +158,52 @@ provide('table_data_loader', isLoading)
|
||||
v-model="model"
|
||||
:schema="schema"
|
||||
type="function"
|
||||
@modal="handleOpen"
|
||||
@click="handleClick"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="actionHandler" />
|
||||
</div>
|
||||
<Dialog
|
||||
v-model:open="isOpen"
|
||||
v-model:open="isOpenProcedure"
|
||||
title="Pilih Prosedur"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker :data="data" />
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedProcedure"
|
||||
:data="procedures"
|
||||
/>
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
v-model:open="isOpenDiagnose"
|
||||
title="Pilih Diagnosa"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedDiagnose"
|
||||
:data="diagnoses"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
v-model:open="isOpenFungsional"
|
||||
title="Pilih Fungsional"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedFungsional"
|
||||
:data="diagnoses"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@@ -2,14 +2,20 @@
|
||||
import { z } from 'zod'
|
||||
import Entry from '~/components/app/soapi/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 { EarlyRehabSchema } 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 isOpen = ref(false)
|
||||
const data = ref([])
|
||||
const isOpenProcedure = ref(false)
|
||||
const isOpenDiagnose = ref(false)
|
||||
const procedures = ref([])
|
||||
const diagnoses = ref([])
|
||||
const selectedProcedure = ref<any>(null)
|
||||
const selectedDiagnose = ref<any>(null)
|
||||
const schema = EarlyRehabSchema
|
||||
const payload = ref({
|
||||
encounter_id: 0,
|
||||
@@ -65,29 +71,46 @@ const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
async function getPatientList() {
|
||||
async function getDiagnoses() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/patient')
|
||||
const resp = await xfetch('/api/v1/diagnose-src')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
diagnoses.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
async function getProcedures() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/procedure-src')
|
||||
if (resp.success) {
|
||||
procedures.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
getProcedures()
|
||||
getDiagnoses()
|
||||
})
|
||||
|
||||
function handleOpen(type: string) {
|
||||
console.log(type)
|
||||
isOpen.value = true
|
||||
if (type === 'fungsional') {
|
||||
isOpenDiagnose.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const entryRehabRef = ref()
|
||||
async function actionHandler(type: string) {
|
||||
console.log(type)
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
return
|
||||
}
|
||||
const result = await entryRehabRef.value?.validate()
|
||||
if (result?.valid) {
|
||||
if (selectedDiagnose.value?.length > 0) {
|
||||
result.data.diagnose = selectedDiagnose.value || []
|
||||
}
|
||||
console.log('data', result.data)
|
||||
handleActionSave(
|
||||
{
|
||||
@@ -104,7 +127,22 @@ async function actionHandler(type: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const icdPreview = ref({
|
||||
procedures: [],
|
||||
diagnoses: [],
|
||||
})
|
||||
|
||||
function actionDialogHandler(type: string) {
|
||||
if (type === 'submit') {
|
||||
icdPreview.value.procedures = selectedProcedure.value || []
|
||||
icdPreview.value.diagnoses = selectedDiagnose.value || []
|
||||
}
|
||||
isOpenProcedure.value = false
|
||||
isOpenDiagnose.value = false
|
||||
}
|
||||
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('icdPreview', icdPreview)
|
||||
</script>
|
||||
<template>
|
||||
<Entry
|
||||
@@ -112,17 +150,23 @@ provide('table_data_loader', isLoading)
|
||||
v-model="model"
|
||||
:schema="schema"
|
||||
type="early-rehab"
|
||||
@modal="handleOpen"
|
||||
@click="handleOpen"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="actionHandler" />
|
||||
</div>
|
||||
<Dialog
|
||||
v-model:open="isOpen"
|
||||
title="Pilih Prosedur"
|
||||
v-model:open="isOpenDiagnose"
|
||||
title="Pilih Fungsional"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker :data="data" />
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedDiagnose"
|
||||
:data="diagnoses"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@@ -2,14 +2,20 @@
|
||||
import { z } from 'zod'
|
||||
import Entry from '~/components/app/soapi/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 { 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 route = useRoute()
|
||||
const isOpen = ref(false)
|
||||
const data = ref([])
|
||||
const isOpenProcedure = ref(false)
|
||||
const isOpenDiagnose = ref(false)
|
||||
const procedures = ref([])
|
||||
const diagnoses = ref([])
|
||||
const selectedProcedure = ref<any>(null)
|
||||
const selectedDiagnose = ref<any>(null)
|
||||
const schema = EarlySchema
|
||||
const payload = ref({
|
||||
encounter_id: 0,
|
||||
@@ -38,29 +44,50 @@ const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
async function getPatientList() {
|
||||
async function getDiagnoses() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/patient')
|
||||
const resp = await xfetch('/api/v1/diagnose-src')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
diagnoses.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
async function getProcedures() {
|
||||
isLoading.isTableLoading = true
|
||||
const resp = await xfetch('/api/v1/procedure-src')
|
||||
if (resp.success) {
|
||||
procedures.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
isLoading.isTableLoading = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
getProcedures()
|
||||
getDiagnoses()
|
||||
})
|
||||
|
||||
function handleOpen(type: string) {
|
||||
console.log(type)
|
||||
isOpen.value = true
|
||||
if (type === 'prosedur') {
|
||||
isOpenProcedure.value = true
|
||||
} else if (type === 'diagnosa') {
|
||||
isOpenDiagnose.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const entryRef = ref()
|
||||
async function actionHandler(type: string) {
|
||||
console.log(type)
|
||||
if (type === 'back') {
|
||||
backToList()
|
||||
return
|
||||
}
|
||||
const result = await entryRef.value?.validate()
|
||||
if (result?.valid) {
|
||||
if (selectedProcedure.value?.length > 0 || selectedDiagnose.value?.length > 0) {
|
||||
result.data.procedure = selectedProcedure.value || []
|
||||
result.data.diagnose = selectedDiagnose.value || []
|
||||
}
|
||||
|
||||
console.log('data', result.data)
|
||||
handleActionSave(
|
||||
{
|
||||
@@ -77,7 +104,22 @@ async function actionHandler(type: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const icdPreview = ref({
|
||||
procedures: [],
|
||||
diagnoses: [],
|
||||
})
|
||||
|
||||
function actionDialogHandler(type: string) {
|
||||
if (type === 'submit') {
|
||||
icdPreview.value.procedures = selectedProcedure.value || []
|
||||
icdPreview.value.diagnoses = selectedDiagnose.value || []
|
||||
}
|
||||
isOpenProcedure.value = false
|
||||
isOpenDiagnose.value = false
|
||||
}
|
||||
|
||||
provide('table_data_loader', isLoading)
|
||||
provide('icdPreview', icdPreview)
|
||||
</script>
|
||||
<template>
|
||||
<Entry
|
||||
@@ -91,11 +133,32 @@ provide('table_data_loader', isLoading)
|
||||
<Action @click="actionHandler" />
|
||||
</div>
|
||||
<Dialog
|
||||
v-model:open="isOpen"
|
||||
v-model:open="isOpenProcedure"
|
||||
title="Pilih Prosedur"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker :data="data" />
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedProcedure"
|
||||
:data="procedures"
|
||||
/>
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
v-model:open="isOpenDiagnose"
|
||||
title="Pilih Diagnosa"
|
||||
size="xl"
|
||||
prevent-outside
|
||||
>
|
||||
<AppIcdMultiselectPicker
|
||||
v-model:model-value="selectedDiagnose"
|
||||
:data="diagnoses"
|
||||
/>
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<ActionDialog @click="actionDialogHandler" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@@ -1,16 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import AssesmentFunctionList from '~/components/app/soapi/list.vue'
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
|
||||
import List from '~/components/app/soapi/list.vue'
|
||||
import Header from '~/components/pub/my-ui/nav-header/prep.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
label: string
|
||||
}>()
|
||||
// Helpers
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { toast } from '~/components/pub/ui/toast'
|
||||
|
||||
import { handleActionRemove } from '~/handlers/soapi-early.handler'
|
||||
// Services
|
||||
import { getList, getDetail } from '~/services/soapi-early.service'
|
||||
|
||||
// Models
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
encounter: Encounter
|
||||
label: string
|
||||
}
|
||||
const route = useRoute()
|
||||
const props = defineProps<Props>()
|
||||
const emits = defineEmits(['add', 'edit'])
|
||||
|
||||
const data = ref([])
|
||||
const encounterId = ref<number>(props?.encounter?.id || 0)
|
||||
const title = ref('')
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const isLoading = ref(false)
|
||||
const isReadonly = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
const paginationMeta = ref<PaginationMeta>(null)
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
@@ -24,13 +49,7 @@ const refSearchNav: RefSearchNav = {
|
||||
},
|
||||
}
|
||||
|
||||
// Loading state management
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
const typeCode = ref('')
|
||||
|
||||
const hreaderPrep: HeaderPrep = {
|
||||
title: props.label,
|
||||
@@ -41,15 +60,86 @@ const hreaderPrep: HeaderPrep = {
|
||||
},
|
||||
}
|
||||
|
||||
async function getPatientList() {
|
||||
const resp = await xfetch('/api/v1/patient')
|
||||
const { recordId } = useQueryCRUDRecordId()
|
||||
const { goToEntry, backToList } = useQueryCRUDMode('mode')
|
||||
|
||||
const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
|
||||
|
||||
onMounted(async () => {
|
||||
await getMyList()
|
||||
})
|
||||
|
||||
async function getMyList() {
|
||||
const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
|
||||
const resp = await xfetch(url)
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPatientList()
|
||||
function handlePageChange(page: number) {
|
||||
emits('pageChange', page)
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
recordId.value = ''
|
||||
backToList()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => type.value,
|
||||
(val) => {
|
||||
if (val) {
|
||||
if (val === 'early-medical-assessment') {
|
||||
typeCode.value = 'early-medic'
|
||||
} else if (val === 'rehab-medical-assessment') {
|
||||
typeCode.value = 'early-rehab'
|
||||
} else if (val === 'function-assessment') {
|
||||
typeCode.value = 'function'
|
||||
}
|
||||
getMyList()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch([recId, recAction], () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
emits('edit')
|
||||
isReadonly.value = false
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: {
|
||||
...route.query,
|
||||
mode: 'entry',
|
||||
'record-id': recId.value,
|
||||
},
|
||||
})
|
||||
break
|
||||
|
||||
case ActionEvents.showDetail:
|
||||
emits('edit')
|
||||
isReadonly.value = true
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: {
|
||||
...route.query,
|
||||
mode: 'entry',
|
||||
'record-id': recId.value,
|
||||
},
|
||||
})
|
||||
break
|
||||
|
||||
case ActionEvents.showConfirmDelete:
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
|
||||
case ActionEvents.showAdd:
|
||||
recordId.value = ''
|
||||
goToEntry()
|
||||
emits('add')
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
@@ -59,7 +149,39 @@ provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
|
||||
<Header
|
||||
:prep="{ ...hreaderPrep }"
|
||||
:ref-search-nav="refSearchNav"
|
||||
/>
|
||||
<List :data="data" />
|
||||
|
||||
<AssesmentFunctionList :data="data" />
|
||||
<PaginationView
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -12,14 +12,14 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
function changeTab(value: string) {
|
||||
activeTab.value = value;
|
||||
emit('changeTab', value);
|
||||
activeTab.value = value
|
||||
emit('changeTab', value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Tabs -->
|
||||
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
|
||||
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
||||
<Button
|
||||
v-for="tab in data"
|
||||
:key="tab.value"
|
||||
@@ -34,10 +34,12 @@ function changeTab(value: string) {
|
||||
<!-- Active Tab Content -->
|
||||
<div class="mt-4 rounded-md border p-4">
|
||||
<component
|
||||
v-if="data.find((t) => t.value === activeTab)?.component"
|
||||
:is="data.find((t) => t.value === activeTab)?.component"
|
||||
:label="data.find((t) => t.value === activeTab)?.label"
|
||||
v-bind="data.find((t) => t.value === activeTab)?.props || {}"
|
||||
v-bind="data.find((t) => t.value === activeTab)?.props"
|
||||
/>
|
||||
<!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
|
||||
<!-- :is="data.find((t) => t.value === activeTab)?.component" -->
|
||||
<!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
|
||||
<!-- :label="data.find((t) => t.value === activeTab)?.label" -->
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
|
||||
import Confirmation from './confirmation.vue'
|
||||
|
||||
interface RecordData {
|
||||
id: number | string
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { isRef } from 'vue';
|
||||
import { isRef } from 'vue'
|
||||
import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
|
||||
import type { Config } from './index'
|
||||
import { Info } from 'lucide-vue-next'
|
||||
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
|
||||
// local state utk selection
|
||||
const selected = ref<any[]>([])
|
||||
|
||||
function toggleSelection(row: any) {
|
||||
if (props.selectMode === 'single') {
|
||||
function toggleSelection(row: any, event?: Event) {
|
||||
if (event) event.stopPropagation() // cegah event bubble ke TableRow
|
||||
|
||||
const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
|
||||
|
||||
// gunakan pembanding berdasarkan id atau stringify data
|
||||
const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
|
||||
|
||||
if (!isMultiple) {
|
||||
// mode single
|
||||
selected.value = [row]
|
||||
emit('update:modelValue', row)
|
||||
} else {
|
||||
const idx = selected.value.findIndex((r) => r === row)
|
||||
if (idx >= 0) {
|
||||
selected.value.splice(idx, 1)
|
||||
if (findIndex >= 0) {
|
||||
selected.value.splice(findIndex, 1)
|
||||
} else {
|
||||
selected.value.push(row)
|
||||
}
|
||||
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
|
||||
}
|
||||
|
||||
function deepFetch(data: Record<string, any>, key: string): string {
|
||||
let result = '';
|
||||
let result = ''
|
||||
const keys = key.split('.')
|
||||
let lastVal: any = isRef(data) ? {...(data.value as any)} : data
|
||||
let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let idx = keys[i] || ''
|
||||
if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
|
||||
if (i == keys.length - 1) {
|
||||
return lastVal[idx];
|
||||
return lastVal[idx]
|
||||
} else {
|
||||
lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
|
||||
lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
// Prevent event if clicked directly on the button/dropdown
|
||||
const target = event.target as HTMLElement
|
||||
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
|
||||
<template>
|
||||
<Table>
|
||||
<TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
|
||||
<TableHeader
|
||||
v-if="headers"
|
||||
class="bg-gray-50 dark:bg-gray-800"
|
||||
>
|
||||
<TableRow v-for="(hr, hrIdx) in headers">
|
||||
<TableHead
|
||||
v-for="(th, idx) in headers[hrIdx]"
|
||||
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
|
||||
<TableBody v-if="loader?.isTableLoading">
|
||||
<!-- Loading state with 5 skeleton rows -->
|
||||
<TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
|
||||
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
|
||||
<TableRow
|
||||
v-for="n in getSkeletonSize"
|
||||
:key="`skeleton-${n}`"
|
||||
>
|
||||
<TableCell
|
||||
v-for="(key, cellIndex) in keys"
|
||||
:key="`cell-skel-${n}-${cellIndex}`"
|
||||
class="border"
|
||||
>
|
||||
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableBody v-else-if="rows.length === 0">
|
||||
<TableRow>
|
||||
<TableCell :colspan="keys.length" class="py-8 text-center">
|
||||
<TableCell
|
||||
:colspan="keys.length"
|
||||
class="py-8 text-center"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Info class="size-5 text-muted-foreground" />
|
||||
<span class="ml-2">Tidak ada data tersedia</span>
|
||||
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
v-for="(row, rowIndex) in rows"
|
||||
:key="`row-${rowIndex}`"
|
||||
:class="{
|
||||
'bg-green-50': props.selectMode === 'single' && selected.includes(row),
|
||||
'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
|
||||
'bg-green-50':
|
||||
props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
|
||||
'bg-blue-50':
|
||||
(props.selectMode === 'multi' || props.selectMode === 'multiple') &&
|
||||
selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
|
||||
}"
|
||||
@click="toggleSelection(row)"
|
||||
>
|
||||
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
<input
|
||||
v-if="props.selectMode === 'single'"
|
||||
type="radio"
|
||||
:checked="selected.includes(row)"
|
||||
@change="toggleSelection(row)"
|
||||
:checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
|
||||
@click.stop="toggleSelection(row, $event)"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
type="checkbox"
|
||||
:checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
|
||||
@click.stop="toggleSelection(row, $event)"
|
||||
/>
|
||||
<input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
|
||||
</TableCell>
|
||||
|
||||
<!-- lanjut render cell normal -->
|
||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
|
||||
<TableCell
|
||||
v-for="(key, cellIndex) in keys"
|
||||
:key="`cell-${rowIndex}-${cellIndex}`"
|
||||
class="border"
|
||||
>
|
||||
<!-- existing cell renderer -->
|
||||
<component
|
||||
:is="components?.[key]?.(row, rowIndex).component"
|
||||
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
||||
v-bind="components[key]?.(row, rowIndex).props"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
|
||||
<div
|
||||
v-if="htmls?.[key]"
|
||||
v-html="htmls?.[key]?.(row, rowIndex)"
|
||||
></div>
|
||||
<template v-else>
|
||||
{{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
|
||||
{{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
|
||||
</template>
|
||||
</template>
|
||||
</TableCell>
|
||||
|
||||
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
|
||||
'[&_.label]:md:w-44 [&_.label]:xl:w-52',
|
||||
][getLabelSizeIdx(props.labelSize)]
|
||||
} else {
|
||||
cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
|
||||
cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
|
||||
}
|
||||
cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
|
||||
cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { Dialog } from '~/components/pub/ui/dialog'
|
||||
import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
|
||||
import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
|
||||
|
||||
interface DialogProps {
|
||||
title: string
|
||||
titleIcon?: string
|
||||
titleClass?: string
|
||||
description?: string
|
||||
preventOutside?: boolean
|
||||
open?: boolean
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<DialogProps>(), {
|
||||
@@ -24,8 +28,9 @@ const sizeClass = computed(() => {
|
||||
const sizeMap = {
|
||||
sm: 'sm:max-w-[350px]',
|
||||
md: 'sm:max-w-[425px]',
|
||||
lg: 'sm:max-w-[600px]',
|
||||
xl: 'sm:max-w-[800px]',
|
||||
lg: 'sm:max-w-[720px]',
|
||||
xl: 'sm:max-w-[960px]',
|
||||
'2xl': 'sm:max-w-[1200px]',
|
||||
full: 'sm:max-w-[95vw]',
|
||||
}
|
||||
return sizeMap[props.size]
|
||||
@@ -46,10 +51,19 @@ const isOpen = computed({
|
||||
@pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
|
||||
<DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
|
||||
<div class="me-2 pt-0.5">
|
||||
<Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
|
||||
</div>
|
||||
<div>
|
||||
{{ props.title }}
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<slot />
|
||||
<DialogDescription :class="sizeClass">
|
||||
<slot />
|
||||
</DialogDescription>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'delete' | 'draft' | 'submit'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" />
|
||||
Kembali
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="destructive" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-x" />
|
||||
Hapus
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="secondary" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" />
|
||||
Draft
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-primary" type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" />
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'draft' | 'delete' | 'print'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="destructive" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-trash" class="me-2 align-middle" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-teal-500" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'delete' | 'submit'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" />
|
||||
Kembali
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="destructive" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-trash" />
|
||||
Hapus
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" />
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'draft' | 'submit' | 'print'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
@@ -11,22 +21,30 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Draf
|
||||
</Button>
|
||||
<Button class="bg-primary" type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" class="me-2 align-middle" />
|
||||
Submit
|
||||
</Button>
|
||||
<Button class="bg-primary" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">``
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="secondary" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Draf
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" class="me-2 align-middle" />
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-teal-500" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'draft' | 'submit'
|
||||
const props = defineProps<{
|
||||
enableDraft?: boolean
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const enableDraft = props.enableDraft ?? true
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'draft' | 'submit'
|
||||
|
||||
const props = defineProps({
|
||||
enableDraft: {
|
||||
@@ -19,18 +31,24 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
<Button v-show="enableDraft" class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Draft
|
||||
</Button>
|
||||
<Button class="bg-primary" type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" class="me-2 align-middle" />
|
||||
Submit
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button v-show="enableDraft" variant="secondary" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" />
|
||||
Draft
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" />
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button class="bg-red-500" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-trash" class="me-2 align-middle" />
|
||||
Delete
|
||||
</Button>
|
||||
<Button class="bg-primary" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'draft' | 'delete'
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'draft' | 'delete'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button class="bg-red-500" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-trash" class="me-2 align-middle" />
|
||||
Delete
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-red-500" type="button" @click="onClick('delete')">
|
||||
<Icon name="i-lucide-trash" class="me-2 align-middle" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'draft' | 'print'
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'draft' | 'print'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button class="bg-primary" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button class="bg-gray-400" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
|
||||
<Icon name="i-lucide-file" class="me-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button class="bg-primary" type="button" @click="onClick('print')">
|
||||
<Icon name="i-lucide-printer" class="me-2 align-middle" />
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'edit'
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'edit'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
@@ -11,29 +21,18 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button
|
||||
class="bg-gray-400"
|
||||
type="button"
|
||||
@click="onClick('cancel')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-arrow-left"
|
||||
class="me-2 align-middle"
|
||||
/>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
class="bg-orange-500"
|
||||
variant="outline"
|
||||
type="button"
|
||||
@click="onClick('edit')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-file"
|
||||
class="me-2 align-middle"
|
||||
/>
|
||||
Edit
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('back')">
|
||||
<Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="onClick('edit')">
|
||||
<Icon name="i-lucide-file" class="me-2 align-middle" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
type ClickType = 'cancel' | 'submit'
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'back' | 'submit'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
@@ -11,26 +21,18 @@ function onClick(type: ClickType) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 flex gap-2 px-2">
|
||||
<Button
|
||||
class="bg-gray-400"
|
||||
@click="onClick('cancel')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-arrow-left"
|
||||
class="me-2 align-middle"
|
||||
/>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
class="bg-primary"
|
||||
@click="onClick('submit')"
|
||||
>
|
||||
<Icon
|
||||
name="i-lucide-check"
|
||||
class="me-2 align-middle"
|
||||
/>
|
||||
Submit
|
||||
</Button>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost"@click="onClick('back')" >
|
||||
<Icon name="i-lucide-arrow-left" class="" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="onClick('submit')">
|
||||
<Icon name="i-lucide-check" class="" />
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'cancel' | 'edit' | 'submit'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
type="button"
|
||||
@click="onClick('cancel')"
|
||||
>
|
||||
<Icon name="i-lucide-x" />
|
||||
{{ smallMode ? '' : 'Batal' }}
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
type="button"
|
||||
@click="onClick('edit')"
|
||||
>
|
||||
<Icon name="i-lucide-pencil" />
|
||||
{{ smallMode ? '' : 'Edit' }}
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="button"
|
||||
@click="onClick('submit')"
|
||||
>
|
||||
<Icon name="i-lucide-check" />
|
||||
{{ smallMode ? '' : 'Submit' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'cancel' | 'save'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('cancel')">
|
||||
<Icon name="i-lucide-x" />
|
||||
Batal
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('save')">
|
||||
<Icon name="i-lucide-check" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'close' | 'save'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button variant="ghost" type="button" @click="onClick('close')">
|
||||
<Icon name="i-lucide-x" />
|
||||
Tutup
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="button" @click="onClick('save')">
|
||||
<Icon name="i-lucide-check" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
smallMode?: boolean
|
||||
defaultClass?: string
|
||||
class?: string
|
||||
}>()
|
||||
|
||||
const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
|
||||
const additionalClass = props.class ?? ''
|
||||
const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
|
||||
|
||||
type ClickType = 'ok'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', type: ClickType): void
|
||||
}>()
|
||||
|
||||
function onClick(type: ClickType) {
|
||||
emit('click', type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
|
||||
<div>
|
||||
<Button type="button" @click="onClick('ok')">
|
||||
<Icon name="i-lucide-x" />
|
||||
OK
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
|
||||
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
||||
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
||||
<template>
|
||||
<DialogDescription
|
||||
v-bind="forwardedProps"
|
||||
:class="cn('text-sm text-muted-foreground', props.class)"
|
||||
:class="cn('text-sm', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</DialogDescription>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
export function useQueryParam(key: string = 'mode') {
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const getQueryParam = (key: string) => {
|
||||
return route.query[key]
|
||||
}
|
||||
|
||||
const setQueryParam = (key: string, val: string) => {
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: {
|
||||
...route.query,
|
||||
[key]: val === 'list' ? undefined : val,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const setQueryParams = (keyVal: Record<string, string>) => {
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: {
|
||||
...route.query,
|
||||
...keyVal,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return { getQueryParam, setQueryParam, setQueryParams}
|
||||
}
|
||||
@@ -9,13 +9,12 @@ export function useRBAC() {
|
||||
|
||||
const checkRole = (roleAccess: RoleAccess, _userRoles?: string[]): boolean => {
|
||||
const roles = authStore.userRole
|
||||
return roles.some((role: string) => role in roleAccess)
|
||||
return roles.some((role: string) => (role in roleAccess) || role === 'system') // system by-passes this check
|
||||
}
|
||||
|
||||
const checkPermission = (roleAccess: RoleAccess, permission: Permission, _userRoles?: string[]): boolean => {
|
||||
const roles = authStore.userRole
|
||||
// const roles = ['admisi']
|
||||
return roles.some((role: string) => roleAccess[role]?.includes(permission))
|
||||
return roles.some((role: string) => roleAccess[role]?.includes(permission) || role === 'system') // system by-passes this check
|
||||
}
|
||||
|
||||
const getUserPermissions = (roleAccess: RoleAccess, _userRoles?: string[]): Permission[] => {
|
||||
@@ -23,7 +22,7 @@ export function useRBAC() {
|
||||
// const roles = ['admisi']
|
||||
const permissions = new Set<Permission>()
|
||||
|
||||
roles.forEach((role) => {
|
||||
roles.forEach((role: string) => {
|
||||
if (roleAccess[role]) {
|
||||
roleAccess[role].forEach((permission) => permissions.add(permission))
|
||||
}
|
||||
|
||||
+19
-2
@@ -66,9 +66,26 @@ export const timeUnitCodes: Record<string, string> = {
|
||||
year: 'Tahun',
|
||||
}
|
||||
|
||||
export const bigTimeUnitCodes: Record<string, string> = {
|
||||
day: 'Hari',
|
||||
week: 'Minggu',
|
||||
month: 'Bulan',
|
||||
year: 'Tahun',
|
||||
}
|
||||
|
||||
export const dischargeMethodCodes: Record<string, string> = {
|
||||
home: 'Home',
|
||||
'home-request': 'Home Request',
|
||||
home: "Pulang",
|
||||
"home-request": "Pulang Atas Permintaan Sendiri",
|
||||
"consul-back": "Konsultasi Balik / Lanjutan",
|
||||
"consul-poly": "Konsultasi Poliklinik Lain",
|
||||
"consul-executive": "Konsultasi Antar Dokter Eksekutif",
|
||||
"consul-ch-day": "Konsultasi Hari Lain",
|
||||
emergency: "Rujuk IGD",
|
||||
"emergency-covid": "Rujuk IGD Covid",
|
||||
inpatient: "Rujuk Rawat Inap",
|
||||
external: "Rujuk Faskes Lain",
|
||||
death: "Meninggal",
|
||||
"death-on-arrival": "Meninggal Saat Tiba"
|
||||
}
|
||||
|
||||
export const genderCodes: Record<string, string> = {
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface DeathCause {
|
||||
id: bigint;
|
||||
encounter_id: bigint;
|
||||
value: any; // json mapped to 'any' type
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { DeathCause } from "./death-cause"
|
||||
import { type Doctor, genDoctor } from "./doctor"
|
||||
import { genEmployee, type Employee } from "./employee"
|
||||
import type { InternalReference } from "./internal-reference"
|
||||
import { type Patient, genPatient } from "./patient"
|
||||
import type { Specialist } from "./specialist"
|
||||
import type { Subspecialist } from "./subspecialist"
|
||||
@@ -29,8 +31,11 @@ export interface Encounter {
|
||||
earlyEducation?: string
|
||||
medicalDischargeEducation: string
|
||||
admDischargeEducation?: string
|
||||
dischargeMethod_code?: string
|
||||
discharge_method_code?: string
|
||||
discharge_reason?: string
|
||||
discharge_date?: string
|
||||
internalReferences?: InternalReference[]
|
||||
deathCause?: DeathCause
|
||||
status_code: string
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface InternalReference {
|
||||
id: number;
|
||||
encounter_id: number;
|
||||
unit_id: number; // smallint mapped to number
|
||||
doctor_id: number; // int mapped to number
|
||||
}
|
||||
|
||||
export interface CreateDto {
|
||||
encounter_id: number;
|
||||
unit_id: number; // smallint mapped to number
|
||||
doctor_id: number; // int mapped to number
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'Daftar Kunjungan',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { z } from 'zod'
|
||||
import { InternalReferenceSchema } from './internal-reference.schema'
|
||||
|
||||
// Check In
|
||||
const CheckInSchema = z.object({
|
||||
// registeredAt: z.string({ required_error: 'Tanggal masuk harus diisi' }),
|
||||
responsible_doctor_id: z.number({ required_error: 'Dokter harus diisi' }).gt(0, 'Dokter harus diisi'),
|
||||
adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
|
||||
})
|
||||
type CheckInFormData = z.infer<typeof CheckInSchema>
|
||||
|
||||
// Checkout
|
||||
const CheckOutSchema = z.object({
|
||||
discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
|
||||
discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
|
||||
})
|
||||
type CheckOutFormData = z.infer<typeof CheckOutSchema>
|
||||
|
||||
// CheckoutDeath
|
||||
const CheckOutDeathSchema = z.object({
|
||||
discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
|
||||
discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
|
||||
death_cause: z.array(z.string()).nonempty(),
|
||||
})
|
||||
type CheckOutDeathFormData = z.infer<typeof CheckOutDeathSchema>
|
||||
|
||||
// CheckoutDeath
|
||||
const CheckOutInternalReferenceSchema = z.object({
|
||||
discharge_method_code: z.string({ required_error: 'Metode pulang harus diisi' }),
|
||||
discharge_date: z.string({ required_error: 'Tanggal pulang harus diisi' }),
|
||||
internalReferences: z.array(InternalReferenceSchema).nonempty(),
|
||||
})
|
||||
type CheckOutInternalReferenceFormData = z.infer<typeof CheckOutInternalReferenceSchema>
|
||||
|
||||
|
||||
// Exports
|
||||
export {
|
||||
CheckInSchema,
|
||||
CheckOutSchema,
|
||||
CheckOutDeathSchema,
|
||||
CheckOutInternalReferenceSchema
|
||||
}
|
||||
export type {
|
||||
CheckInFormData,
|
||||
CheckOutFormData,
|
||||
CheckOutDeathFormData,
|
||||
CheckOutInternalReferenceFormData
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { z } from 'zod'
|
||||
import type { InternalReference } from '~/models/internal-reference'
|
||||
|
||||
const InternalReferenceSchema = z.object({
|
||||
'unit_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
|
||||
'doctor_id': z.number({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
|
||||
})
|
||||
|
||||
type InternalReferenceFormData = z.infer<typeof InternalReferenceSchema> & Partial<InternalReference>
|
||||
|
||||
export { InternalReferenceSchema }
|
||||
export type { InternalReferenceFormData }
|
||||
@@ -31,7 +31,7 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
|
||||
const resultData = result.body?.data || []
|
||||
data = resultData.map((item: any) => ({
|
||||
value: item.id ? Number(item.id) : item.code,
|
||||
label: item.name,
|
||||
label: item.person.name,
|
||||
}))
|
||||
}
|
||||
return data
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
// Base
|
||||
import type { CheckInFormData } from '~/schemas/encounter.schema'
|
||||
import * as base from './_crud-base'
|
||||
|
||||
// Constants
|
||||
@@ -46,3 +47,16 @@ export function getValueLabelListConstants() {
|
||||
.filter(([key]) => allowed.includes(key))
|
||||
.map(([key, value]) => ({ value: key, label: value }))
|
||||
}
|
||||
|
||||
export async function checkIn(id: number, data: CheckInFormData) {
|
||||
try {
|
||||
const resp = await xfetch(`${path}/${id}/check-in`, 'PATCH', data)
|
||||
const result: any = {}
|
||||
result.success = resp.success
|
||||
result.body = (resp.body as Record<string, any>) || {}
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error(`Error putting ${name}:`, error)
|
||||
throw new Error(`Failed to put ${name}`)
|
||||
}
|
||||
}
|
||||
+4
-1
@@ -7,7 +7,10 @@ export const useUserStore = defineStore(
|
||||
const isAuthenticated = computed(() => !!user.value)
|
||||
const userRole = computed(() => {
|
||||
const roles = user.value?.roles || []
|
||||
return roles.map((v) => v.split('-')[1])
|
||||
return roles.map((input: string) => {
|
||||
const parts = input.split('-')
|
||||
return parts.length > 1 ? parts[1]: parts[0]
|
||||
})
|
||||
})
|
||||
|
||||
const login = async (userData: any) => {
|
||||
|
||||
Reference in New Issue
Block a user