feat/page-cleaning: finished
This commit is contained in:
Andrian Roshandy
@@ -9,38 +9,38 @@ const props = defineProps<{
|
||||
const recId = inject<Ref<number>>('rec_id')!
|
||||
const recAction = inject<Ref<string>>('rec_action')!
|
||||
const recItem = inject<Ref<any>>('rec_item')!
|
||||
const activeServicePosition = inject<Ref<string>>('activeServicePosition')! // previously: activePosition
|
||||
|
||||
const activeKey = ref<string | null>(null)
|
||||
const activePosition = inject<Ref<string>>('position')!
|
||||
const linkItemsFiltered = ref<LinkItem[]>([])
|
||||
const linkItemsBase: LinkItem[] = [
|
||||
{
|
||||
label: 'Nothing',
|
||||
value: 'nothing',
|
||||
icon: 'i-lucide-file',
|
||||
},
|
||||
]
|
||||
const linkItems: LinkItem[] = [
|
||||
const baseLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Detail',
|
||||
value: 'detail',
|
||||
onClick: () => {
|
||||
detail()
|
||||
proceedItem(ActionEvents.showDetail)
|
||||
},
|
||||
icon: 'i-lucide-eye',
|
||||
},
|
||||
]
|
||||
|
||||
const medicalLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Process',
|
||||
value: 'edit',
|
||||
value: 'process',
|
||||
onClick: () => {
|
||||
edit()
|
||||
proceedItem(ActionEvents.showProcess)
|
||||
},
|
||||
icon: 'i-lucide-pencil',
|
||||
icon: 'i-lucide-shuffle',
|
||||
},
|
||||
]
|
||||
|
||||
const regLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Print',
|
||||
value: 'print',
|
||||
onClick: () => {
|
||||
print()
|
||||
proceedItem(ActionEvents.showPrint)
|
||||
},
|
||||
icon: 'i-lucide-printer',
|
||||
},
|
||||
@@ -48,7 +48,7 @@ const linkItems: LinkItem[] = [
|
||||
label: 'Batalkan',
|
||||
value: 'cancel',
|
||||
onClick: () => {
|
||||
cancel()
|
||||
proceedItem(ActionEvents.showCancel)
|
||||
},
|
||||
icon: 'i-lucide-circle-x',
|
||||
},
|
||||
@@ -56,65 +56,49 @@ const linkItems: LinkItem[] = [
|
||||
label: 'Hapus',
|
||||
value: 'remove',
|
||||
onClick: () => {
|
||||
remove()
|
||||
proceedItem(ActionEvents.showConfirmDelete)
|
||||
},
|
||||
icon: 'i-lucide-trash',
|
||||
},
|
||||
]
|
||||
|
||||
function detail() {
|
||||
const voidLinkItems: LinkItem[] = [
|
||||
{
|
||||
label: 'Nothing',
|
||||
value: 'nothing',
|
||||
icon: 'i-lucide-file',
|
||||
},
|
||||
]
|
||||
|
||||
linkItemsFiltered.value = [...baseLinkItems]
|
||||
|
||||
getLinks()
|
||||
|
||||
watch(activeServicePosition, () => {
|
||||
getLinks()
|
||||
})
|
||||
|
||||
function proceedItem(action: string) {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showDetail
|
||||
recItem.value = props.rec
|
||||
recAction.value = action
|
||||
}
|
||||
|
||||
function edit() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showEdit
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function print() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showPrint
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showCancel
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
function remove() {
|
||||
recId.value = props.rec.id || 0
|
||||
recAction.value = ActionEvents.showConfirmDelete
|
||||
recItem.value = props.rec
|
||||
}
|
||||
|
||||
linkItemsFiltered.value = [...linkItemsBase]
|
||||
|
||||
function getLinks(position: string) {
|
||||
switch (position) {
|
||||
function getLinks() {
|
||||
switch (activeServicePosition.value) {
|
||||
case 'medical':
|
||||
linkItemsFiltered.value = [...linkItems]
|
||||
linkItemsFiltered.value = [...baseLinkItems, ...medicalLinkItems]
|
||||
break
|
||||
case 'verificator':
|
||||
linkItemsFiltered.value = [
|
||||
...linkItems.filter((item) => ['detail', 'print'].includes(item.value || '')),
|
||||
]
|
||||
case 'registration':
|
||||
linkItemsFiltered.value = [...baseLinkItems, ...regLinkItems]
|
||||
case 'unit|resp':
|
||||
linkItemsFiltered.value = [...baseLinkItems]
|
||||
break
|
||||
default:
|
||||
linkItemsFiltered.value = [...linkItemsBase]
|
||||
linkItemsFiltered.value = voidLinkItems
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
getLinks(activePosition.value)
|
||||
|
||||
watch(activePosition, () => {
|
||||
getLinks(activePosition.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Select from '~/components/pub/my-ui/form/select.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
|
||||
interface InstallationFormData {
|
||||
name: string
|
||||
code: string
|
||||
encounterClassCode: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
installation: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
schema: any
|
||||
initialValues?: Partial<InstallationFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: InstallationFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: InstallationFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
encounterClassCode: values.encounterClassCode || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm({ resetForm }: { resetForm: () => void }) {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
|
||||
const items = ref([
|
||||
{ label: 'Rujukan Internal', value: 'ri' },
|
||||
{ label: 'SEP Rujukan', value: 'sr' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<FieldGroup>
|
||||
<Label label-for="parentId">Cara Bayar</Label>
|
||||
<Field id="encounterClassCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="encounterClassCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select v-bind="componentField" :items="items" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup>
|
||||
<Label label-for="parentId">Poliklinik</Label>
|
||||
<Field id="encounterClassCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="encounterClassCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select v-bind="componentField" :items="items" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup>
|
||||
<Label label-for="parentId">Kunjungan</Label>
|
||||
<Field id="encounterClassCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="encounterClassCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select v-bind="componentField" :items="items" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
|
||||
import { ref } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import type { DateRange } from 'radix-vue'
|
||||
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
||||
import { cn } from '~/lib/utils'
|
||||
import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
|
||||
|
||||
const props = defineProps<{
|
||||
refSearchNav?: RefSearchNav
|
||||
enableExport?: boolean
|
||||
refExportNav?: RefExportNav
|
||||
onFilterClick?: () => void
|
||||
onExportPdf?: () => void
|
||||
onExportExcel?: () => void
|
||||
onExportCsv?: () => void
|
||||
}>()
|
||||
|
||||
// function emitSearchNavClick() {
|
||||
// props.refSearchNav?.onClick()
|
||||
// }
|
||||
//
|
||||
// function onInput(event: Event) {
|
||||
// props.refSearchNav?.onInput((event.target as HTMLInputElement).value)
|
||||
// }
|
||||
//
|
||||
// function btnClick() {
|
||||
// props.prep?.addNav?.onClick?.()
|
||||
// }
|
||||
|
||||
const searchQuery = ref('')
|
||||
const dateRange = ref<{ from: Date | null; to: Date | null }>({
|
||||
from: new Date(),
|
||||
to: new Date(),
|
||||
})
|
||||
|
||||
const df = new DateFormatter('en-US', {
|
||||
dateStyle: 'medium',
|
||||
})
|
||||
|
||||
// Get current date
|
||||
const today = new Date()
|
||||
const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
|
||||
|
||||
// Get date 1 month ago
|
||||
const oneMonthAgo = new Date(today)
|
||||
oneMonthAgo.setMonth(today.getMonth() - 1)
|
||||
const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
|
||||
|
||||
const value = ref({
|
||||
start: oneMonthAgoCalendar,
|
||||
end: todayCalendar,
|
||||
}) as Ref<DateRange>
|
||||
|
||||
// function onFilterClick() {
|
||||
// console.log('Search:', searchQuery.value)
|
||||
// console.log('Date Range:', dateRange.value)
|
||||
// props.refSearchNav?.onClick()
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-64">
|
||||
<Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
|
||||
<Input v-model="searchQuery" type="text" placeholder="Cari Nama /No.RM" class="pl-9" />
|
||||
</div>
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
:class="cn('w-[200px] justify-start text-left font-normal', !value && 'text-muted-foreground')"
|
||||
>
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
<template v-if="value.start">
|
||||
<template v-if="value.end">
|
||||
{{ df.format(value.start.toDate(getLocalTimeZone())) }} -
|
||||
{{ df.format(value.end.toDate(getLocalTimeZone())) }}
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
{{ df.format(value.start.toDate(getLocalTimeZone())) }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else> Pick a date </template>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<RangeCalendar
|
||||
v-model="value"
|
||||
initial-focus
|
||||
:number-of-months="2"
|
||||
@update:start-value="(startDate) => (value.start = startDate)"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Button variant="outline" class="border-orange-500 text-orange-600 hover:bg-orange-50" @click="onFilterClick">
|
||||
<FilterIcon class="mr-2 size-4" />
|
||||
Filter
|
||||
</Button>
|
||||
|
||||
<DropdownMenu v-show="props.enableExport">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline" class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50">
|
||||
<Icon name="i-lucide-download" class="h-4 w-4" />
|
||||
Ekspor
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="onExportPdf">
|
||||
Ekspor PDF
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportCsv">
|
||||
Ekspor CSV
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="onExportExcel">
|
||||
Ekspor Excel
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
|
||||
import { config } from './list.cfg'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -7,7 +8,7 @@ const props = defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubMyUiDataTable
|
||||
<DataTable
|
||||
v-bind="config"
|
||||
:rows="props.data"
|
||||
/>
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import * as DE from '~/components/pub/my-ui/doc-entry'
|
||||
import { genderCodes } from '~/const/key-val/person';
|
||||
import type { Encounter } from '~/models/encounter'
|
||||
|
||||
const props = defineProps<{
|
||||
data: Encounter
|
||||
}>()
|
||||
|
||||
let address = ''
|
||||
let address = ref('')
|
||||
if (props.data.patient.person.addresses) {
|
||||
address = props.data.patient.person.addresses.map((a) => a.address).join(', ')
|
||||
address.value = props.data.patient.person.addresses.map((a) => a.address).join(', ')
|
||||
}
|
||||
|
||||
let dpjp = ''
|
||||
let dpjp = ref('')
|
||||
if (props.data.responsible_doctor) {
|
||||
const dp = props.data.responsible_doctor.employee.person
|
||||
dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
|
||||
dpjp.value = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
|
||||
} else if (props.data.appointment_doctor) {
|
||||
dpjp = props.data.appointment_doctor.employee.person.name
|
||||
dpjp.value = props.data.appointment_doctor.employee.person.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
||||
<div class="w-full">
|
||||
<!-- Data Pasien -->
|
||||
<h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
|
||||
{{ data.patient.person.name }} - {{ data.patient.number }}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-3">
|
||||
<div>
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Block mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">No. RM</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ data.patient.person.birthDate?.substring(0, 10) }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
|
||||
<DE.Label class="font-semibold">Jns. Kelamin</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ data.patient.person.gender_code }}
|
||||
{{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Alamat</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
<div v-html="address"></div>
|
||||
</DE.Field>
|
||||
@@ -54,35 +54,39 @@ if (props.data.responsible_doctor) {
|
||||
</DE.Block>
|
||||
</div>
|
||||
<div>
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Block mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
|
||||
<DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ data.visitDate.substring(0, 10) }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">Klinik</DE.Label>
|
||||
<DE.Label position="dynamic" class="font-semibold">Poliklinik</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ data.unit?.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label class="font-semibold">DPJP</DE.Label>
|
||||
<DE.Label position="dynamic" class="font-semibold">Klinik</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ dpjp }}
|
||||
{{ data.unit?.name }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
</DE.Block>
|
||||
</div>
|
||||
<div>
|
||||
<DE.Block
|
||||
mode="preview"
|
||||
labelSize="large"
|
||||
>
|
||||
<DE.Block mode="preview">
|
||||
<DE.Cell>
|
||||
<DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
|
||||
<DE.Colon />
|
||||
<DE.Field>
|
||||
{{ dpjp }}
|
||||
</DE.Field>
|
||||
</DE.Cell>
|
||||
<DE.Cell>
|
||||
<DE.Label
|
||||
position="dynamic"
|
||||
@@ -90,6 +94,7 @@ if (props.data.responsible_doctor) {
|
||||
>
|
||||
Billing
|
||||
</DE.Label>
|
||||
<DE.Colon class="pt-1" />
|
||||
<DE.Field class="text-base 2xl:text-lg">
|
||||
Rp. 000.000
|
||||
<!-- {{ data }} -->
|
||||
|
||||
Reference in New Issue
Block a user