Feat/encounter status 107 (#129)
* dev: hotfix, moved combobox and datepicker * dev: hotfix, moved combobox and datepicker * dev: hotfix, text-size standardization * dev: hotfix, text-size standardization * feat/encounter-status-107: wip * feat/encounter: wip * feat/encounter: done --------- Co-authored-by: Munawwirul Jamal <[email protected]>
This commit is contained in:
Andsky
No files matched your search
@@ -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>
|
||||
Reference in New Issue
Block a user