Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into fe-sep-38
This commit is contained in:
riefive
No files matched your search
@@ -66,6 +66,16 @@ The basic development workflow follows these steps:
|
|||||||
- Pages load the appropriate content from `components/content/`.
|
- Pages load the appropriate content from `components/content/`.
|
||||||
- They do not contain UI or logic directly, just route level layout or guards.
|
- They do not contain UI or logic directly, just route level layout or guards.
|
||||||
|
|
||||||
|
### Validation
|
||||||
|
|
||||||
|
- UI level validation in `components/app`. help users avoid mistakes before submitting.
|
||||||
|
- Lightweight/instant validation related to UX.
|
||||||
|
- Basic formatting (email regex, numeric-only, password length).
|
||||||
|
- Showing error messages directly under the field.
|
||||||
|
|
||||||
|
- Business level validation in `components/flow`. cannot rely only on the UI, since it often requires server-side checks or rules that may change.
|
||||||
|
- More complex validation rules tied to business logic.
|
||||||
|
|
||||||
## Code Conventions
|
## Code Conventions
|
||||||
|
|
||||||
- Under the script setup block, putting things in group with the following order:
|
- Under the script setup block, putting things in group with the following order:
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
|
||||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
|
||||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
|
||||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{ modelValue: any; errors: any }>()
|
|
||||||
const emit = defineEmits(['update:modelValue', 'event'])
|
|
||||||
|
|
||||||
const data = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => {
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{ value: 'item1', label: 'Item 1' },
|
|
||||||
{ value: 'item2', label: 'Item 2' },
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<form id="entry-form">
|
|
||||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
||||||
<div class="flex flex-col justify-between">
|
|
||||||
<Block>
|
|
||||||
<FieldGroup :column="1">
|
|
||||||
<Label>Kode</Label>
|
|
||||||
<Field>
|
|
||||||
<Input v-model="data.code" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup v-if="!!props.errors.code">
|
|
||||||
<Label></Label>
|
|
||||||
<span class="text-red-400 text-sm">{{ props.errors.code }}</span>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="1">
|
|
||||||
<Label>Nama</Label>
|
|
||||||
<Field>
|
|
||||||
<Input v-model="data.name" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup v-if="!!props.errors.name">
|
|
||||||
<Label></Label>
|
|
||||||
<span class="text-red-400 text-sm">{{ props.errors.name }}</span>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="1">
|
|
||||||
<Label>Item</Label>
|
|
||||||
<Field>
|
|
||||||
<Select v-model="data.type" :items="items" placeholder="Pilih item" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="1">
|
|
||||||
<Label>Satuan</Label>
|
|
||||||
<Field>
|
|
||||||
<Select v-model="data.uom" :items="items" placeholder="Pilih item" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</Block>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
@@ -11,76 +11,34 @@ const data = computed({
|
|||||||
get: () => props.modelValue,
|
get: () => props.modelValue,
|
||||||
set: (val) => emit('update:modelValue', val),
|
set: (val) => emit('update:modelValue', val),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ value: 'doctor', label: 'Dokter' },
|
||||||
|
{ value: 'nurse', label: 'Perawat' },
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form id="entry-form">
|
<form id="entry-form">
|
||||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
<div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
<div class="flex flex-col justify-between">
|
<div class="flex flex-col justify-between">
|
||||||
<Block>
|
<Block>
|
||||||
<FieldGroup :column="1">
|
<FieldGroup :column="2" layout="stacked">
|
||||||
<Label>Nama dan Gelar</Label>
|
<Label stacked>No. IHS</Label>
|
||||||
<Field>
|
<Field>
|
||||||
<Input v-model="data.name" type="text" name="name" default-value="dr." />
|
<Input />
|
||||||
</Field>
|
|
||||||
<Field>
|
|
||||||
<Input type="text" name="name" />
|
|
||||||
</Field>
|
|
||||||
<Field>
|
|
||||||
<Input type="text" name="name" />
|
|
||||||
</Field>
|
</Field>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
</Block>
|
<FieldGroup :column="2" layout="stacked">
|
||||||
<Block>
|
<Label stacked>No. SIP</Label>
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>NIK</Label>
|
|
||||||
<Field>
|
<Field>
|
||||||
<Input type="text" name="identity_number" />
|
<Input />
|
||||||
</Field>
|
</Field>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
<FieldGroup :column="2">
|
<FieldGroup :column="2" layout="stacked">
|
||||||
<Label>NO SIP</Label>
|
<Label stacked>Unit</Label>
|
||||||
<Field name="sip_number">
|
|
||||||
<Input type="text" name="sip_no" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Telepon / HP</Label>
|
|
||||||
<Field name="phone">
|
|
||||||
<Input type="text" name="phone" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Kode BPJS</Label>
|
|
||||||
<Field>
|
<Field>
|
||||||
<Input type="text" name="bpjs_code" />
|
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Fee Rajal</Label>
|
|
||||||
<Field>
|
|
||||||
<Input type="number" name="outPatient_rate" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Fee Ranap</Label>
|
|
||||||
<Field>
|
|
||||||
<Input type="number" name="inPatient_rate" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</Block>
|
|
||||||
<Block>
|
|
||||||
<FieldGroup :column="3">
|
|
||||||
<Label>Status</Label>
|
|
||||||
<Field>
|
|
||||||
<Input type="select" name="status">
|
|
||||||
<option value="active">Aktif</option>
|
|
||||||
<option value="inactive">Tidak Aktif</option>
|
|
||||||
</Input>
|
|
||||||
</Field>
|
</Field>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
</Block>
|
</Block>
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||||
|
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||||
|
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||||
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: any; items: any[] }>()
|
||||||
|
const emit = defineEmits(['update:modelValue', 'event'])
|
||||||
|
|
||||||
|
const data = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form id="entry-form">
|
||||||
|
<div class="mb-5 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<Block>
|
||||||
|
<FieldGroup :column="2" layout="stacked">
|
||||||
|
<Label stacked>Nomor Induk Pegawai</Label>
|
||||||
|
<Field>
|
||||||
|
<Input v-model="data.number" />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
<FieldGroup :column="2" layout="stacked">
|
||||||
|
<Label stacked>Status</Label>
|
||||||
|
<Field>
|
||||||
|
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
<FieldGroup :column="2" layout="stacked">
|
||||||
|
<Label stacked>Position</Label>
|
||||||
|
<Field>
|
||||||
|
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
<FieldGroup :column="2" layout="stacked">
|
||||||
|
<Label stacked>Divisi</Label>
|
||||||
|
<Field>
|
||||||
|
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import type {
|
||||||
|
Col,
|
||||||
|
KeyLabel,
|
||||||
|
RecComponent,
|
||||||
|
RecStrFuncComponent,
|
||||||
|
RecStrFuncUnknown,
|
||||||
|
Th,
|
||||||
|
} from '~/components/pub/custom-ui/data/types'
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
type SmallDetailDto = any
|
||||||
|
|
||||||
|
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||||
|
|
||||||
|
const doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cols: Col[] = [
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 250 },
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 50 },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const header: Th[][] = [
|
||||||
|
[
|
||||||
|
{ label: 'Kode JKN' },
|
||||||
|
{ label: 'Nama' },
|
||||||
|
{ label: 'No KTP' },
|
||||||
|
{ label: 'No SIP' },
|
||||||
|
{ label: 'No IHS' },
|
||||||
|
{ label: 'Telpon' },
|
||||||
|
{ label: 'Fee Ranap' },
|
||||||
|
{ label: 'Fee Rajal' },
|
||||||
|
{ label: 'Status' },
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
export const keys = [
|
||||||
|
'bpjs_code',
|
||||||
|
'name',
|
||||||
|
'identity_number',
|
||||||
|
'sip_no',
|
||||||
|
'ihs_number',
|
||||||
|
'phone',
|
||||||
|
'inPatient_itemPrice',
|
||||||
|
'outPatient_itemPrice',
|
||||||
|
'status',
|
||||||
|
'action',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const delKeyNames: KeyLabel[] = [
|
||||||
|
{ key: 'code', label: 'Kode' },
|
||||||
|
{ key: 'name', label: 'Nama' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const funcParsed: RecStrFuncUnknown = {
|
||||||
|
name: (rec: unknown): unknown => {
|
||||||
|
console.log(rec)
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
inPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
outPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
status: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return doctorStatus[recX.status_code as keyof typeof doctorStatus]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcComponent: RecStrFuncComponent = {
|
||||||
|
action(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: action,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcHtml: RecStrFuncUnknown = {
|
||||||
|
patient_address(_rec) {
|
||||||
|
return '-'
|
||||||
|
},
|
||||||
|
}
|
||||||
+36
-16
@@ -2,23 +2,26 @@
|
|||||||
// types
|
// types
|
||||||
import type z from 'zod'
|
import type z from 'zod'
|
||||||
import type { MaterialFormData } from '~/schemas/material'
|
import type { MaterialFormData } from '~/schemas/material'
|
||||||
|
<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
|
||||||
|
=======
|
||||||
// helpers
|
// helpers
|
||||||
import { toTypedSchema } from '@vee-validate/zod'
|
import { toTypedSchema } from '@vee-validate/zod'
|
||||||
import { useForm } from 'vee-validate'
|
import { useForm } from 'vee-validate'
|
||||||
// components
|
// components
|
||||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isLoading: boolean
|
|
||||||
schema: z.ZodSchema<any>
|
schema: z.ZodSchema<any>
|
||||||
uoms: any[]
|
uoms: any[]
|
||||||
items: any[]
|
items: any[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isLoading = ref(false)
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
back: []
|
submit: [values: MaterialFormData, resetForm: () => void]
|
||||||
submit: [data: any]
|
cancel: [resetForm: () => void]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { handleSubmit, defineField, errors } = useForm({
|
const { handleSubmit, defineField, errors } = useForm({
|
||||||
@@ -38,19 +41,36 @@ const [uom, uomAttrs] = defineField('uom_code')
|
|||||||
const [item, itemAttrs] = defineField('item_id')
|
const [item, itemAttrs] = defineField('item_id')
|
||||||
const [stock, stockAttrs] = defineField('stock')
|
const [stock, stockAttrs] = defineField('stock')
|
||||||
|
|
||||||
const onSubmit = handleSubmit(async (values) => {
|
const resetForm = () => {
|
||||||
try {
|
code.value = ''
|
||||||
emit('submit', values)
|
name.value = ''
|
||||||
} catch (error) {
|
uom.value = ''
|
||||||
console.error('Submission failed:', error)
|
item.value = ''
|
||||||
|
stock.value = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submission handler
|
||||||
|
function onSubmitForm(values: any) {
|
||||||
|
const formData: MaterialFormData = {
|
||||||
|
name: values.name || '',
|
||||||
|
code: values.code || '',
|
||||||
|
uom_code: values.uom_code || '',
|
||||||
|
item_id: values.item_id || '',
|
||||||
|
stock: values.stock || 0,
|
||||||
}
|
}
|
||||||
})
|
emit('submit', formData, resetForm)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form cancel handler
|
||||||
|
function onCancelForm() {
|
||||||
|
emit('cancel', resetForm)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<form class="grid gap-2" @submit="onSubmit">
|
<form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Label for="code">Kode</Label>
|
<label for="code">Kode</label>
|
||||||
<Input
|
<Input
|
||||||
id="code"
|
id="code"
|
||||||
v-model="code"
|
v-model="code"
|
||||||
@@ -63,7 +83,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Label for="name">Nama</Label>
|
<label for="name">Nama</label>
|
||||||
<Input
|
<Input
|
||||||
id="name"
|
id="name"
|
||||||
v-model="name"
|
v-model="name"
|
||||||
@@ -76,7 +96,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Label for="uom">Satuan</Label>
|
<label for="uom">Satuan</label>
|
||||||
<Select
|
<Select
|
||||||
id="uom"
|
id="uom"
|
||||||
v-model="uom"
|
v-model="uom"
|
||||||
@@ -92,7 +112,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Label for="item">Item</Label>
|
<label for="item">Item</label>
|
||||||
<Select
|
<Select
|
||||||
id="item"
|
id="item"
|
||||||
v-model="item"
|
v-model="item"
|
||||||
@@ -108,7 +128,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<Label for="stock">Stok</Label>
|
<label for="stock">Stok</label>
|
||||||
<Input
|
<Input
|
||||||
id="stock"
|
id="stock"
|
||||||
v-model="stock"
|
v-model="stock"
|
||||||
@@ -122,7 +142,7 @@ const onSubmit = handleSubmit(async (values) => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-2 flex justify-end gap-2 py-2">
|
<div class="my-2 flex justify-end gap-2 py-2">
|
||||||
<Button variant="secondary" class="w-[120px]" @click="emit('back')"> Kembali </Button>
|
<Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||||
<Button type="submit" class="w-[120px]">
|
<Button type="submit" class="w-[120px]">
|
||||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||||
Simpan
|
Simpan
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||||
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: any[]
|
||||||
|
paginationMeta?: PaginationMeta
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
pageChange: [page: number]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function handlePageChange(page: number) {
|
||||||
|
emit('pageChange', page)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<PubBaseDataTable
|
||||||
|
:rows="data"
|
||||||
|
:cols="cols"
|
||||||
|
:header="header"
|
||||||
|
:keys="keys"
|
||||||
|
:func-parsed="funcParsed"
|
||||||
|
:func-html="funcHtml"
|
||||||
|
:func-component="funcComponent"
|
||||||
|
/>
|
||||||
|
<template v-if="paginationMeta">
|
||||||
|
<div v-if="paginationMeta.totalPage > 1">
|
||||||
|
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||||
|
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||||
|
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||||
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: any }>()
|
||||||
|
const emit = defineEmits(['update:modelValue', 'event'])
|
||||||
|
|
||||||
|
const data = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form id="entry-form">
|
||||||
|
<div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<Block>
|
||||||
|
<FieldGroup layout="stacked">
|
||||||
|
<Label stacked>No. IHS</Label>
|
||||||
|
<Field>
|
||||||
|
<Input />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import type {
|
||||||
|
Col,
|
||||||
|
KeyLabel,
|
||||||
|
RecComponent,
|
||||||
|
RecStrFuncComponent,
|
||||||
|
RecStrFuncUnknown,
|
||||||
|
Th,
|
||||||
|
} from '~/components/pub/custom-ui/data/types'
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
type SmallDetailDto = any
|
||||||
|
|
||||||
|
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||||
|
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||||
|
|
||||||
|
const _doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cols: Col[] = [
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 250 },
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{ width: 120 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const header: Th[][] = [
|
||||||
|
[
|
||||||
|
{ label: 'Kode JKN' },
|
||||||
|
{ label: 'Nama' },
|
||||||
|
{ label: 'No KTP' },
|
||||||
|
{ label: 'No SIP' },
|
||||||
|
{ label: 'No IHS' },
|
||||||
|
{ label: 'Telpon' },
|
||||||
|
{ label: 'Fee Ranap' },
|
||||||
|
{ label: 'Fee Rajal' },
|
||||||
|
{ label: 'Status' },
|
||||||
|
{ label: '' },
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
export const keys = [
|
||||||
|
'bpjs_code',
|
||||||
|
'name',
|
||||||
|
'identity_number',
|
||||||
|
'sip_no',
|
||||||
|
'ihs_number',
|
||||||
|
'phone',
|
||||||
|
'inPatient_itemPrice',
|
||||||
|
'outPatient_itemPrice',
|
||||||
|
'status',
|
||||||
|
'action',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const delKeyNames: KeyLabel[] = [
|
||||||
|
{ key: 'code', label: 'Kode' },
|
||||||
|
{ key: 'name', label: 'Nama' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const funcParsed: RecStrFuncUnknown = {
|
||||||
|
name: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
inPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
outPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcComponent: RecStrFuncComponent = {
|
||||||
|
action(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: action,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
status(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: statusBadge,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcHtml: RecStrFuncUnknown = {
|
||||||
|
patient_address(_rec) {
|
||||||
|
return '-'
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Badge } from '~/components/pub/ui/badge'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
rec: any
|
||||||
|
idx?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
|
||||||
|
})
|
||||||
|
|
||||||
|
const badgeVariant = computed(() => {
|
||||||
|
return props.rec.status_code === 1 ? 'default' : 'destructive'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Badge :variant="badgeVariant">
|
||||||
|
{{ statusText }}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||||
|
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||||
|
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||||
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: any }>()
|
||||||
|
const emit = defineEmits(['update:modelValue', 'event'])
|
||||||
|
|
||||||
|
const data = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form id="entry-form">
|
||||||
|
<div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<Block>
|
||||||
|
<FieldGroup layout="stacked">
|
||||||
|
<Label stacked>No. IHS</Label>
|
||||||
|
<Field>
|
||||||
|
<Input />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import type {
|
||||||
|
Col,
|
||||||
|
KeyLabel,
|
||||||
|
RecComponent,
|
||||||
|
RecStrFuncComponent,
|
||||||
|
RecStrFuncUnknown,
|
||||||
|
Th,
|
||||||
|
} from '~/components/pub/custom-ui/data/types'
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
type SmallDetailDto = any
|
||||||
|
|
||||||
|
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||||
|
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||||
|
|
||||||
|
const _doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cols: Col[] = [
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 250 },
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{ width: 120 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const header: Th[][] = [
|
||||||
|
[
|
||||||
|
{ label: 'Kode JKN' },
|
||||||
|
{ label: 'Nama' },
|
||||||
|
{ label: 'No KTP' },
|
||||||
|
{ label: 'No SIP' },
|
||||||
|
{ label: 'No IHS' },
|
||||||
|
{ label: 'Telpon' },
|
||||||
|
{ label: 'Fee Ranap' },
|
||||||
|
{ label: 'Fee Rajal' },
|
||||||
|
{ label: 'Status' },
|
||||||
|
{ label: '' },
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
export const keys = [
|
||||||
|
'bpjs_code',
|
||||||
|
'name',
|
||||||
|
'identity_number',
|
||||||
|
'sip_no',
|
||||||
|
'ihs_number',
|
||||||
|
'phone',
|
||||||
|
'inPatient_itemPrice',
|
||||||
|
'outPatient_itemPrice',
|
||||||
|
'status',
|
||||||
|
'action',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const delKeyNames: KeyLabel[] = [
|
||||||
|
{ key: 'code', label: 'Kode' },
|
||||||
|
{ key: 'name', label: 'Nama' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const funcParsed: RecStrFuncUnknown = {
|
||||||
|
name: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
inPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
outPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcComponent: RecStrFuncComponent = {
|
||||||
|
action(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: action,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
status(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: statusBadge,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcHtml: RecStrFuncUnknown = {
|
||||||
|
patient_address(_rec) {
|
||||||
|
return '-'
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
data: any[]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PubBaseDataTable
|
||||||
|
:rows="data"
|
||||||
|
:cols="cols"
|
||||||
|
:header="header"
|
||||||
|
:keys="keys"
|
||||||
|
:func-parsed="funcParsed"
|
||||||
|
:func-html="funcHtml"
|
||||||
|
:func-component="funcComponent"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Badge } from '~/components/pub/ui/badge'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
rec: any
|
||||||
|
idx?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
|
||||||
|
})
|
||||||
|
|
||||||
|
const badgeVariant = computed(() => {
|
||||||
|
return props.rec.status_code === 1 ? 'default' : 'destructive'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Badge :variant="badgeVariant">
|
||||||
|
{{ statusText }}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||||
|
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||||
|
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||||
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: any }>()
|
||||||
|
const emit = defineEmits(['update:modelValue', 'event'])
|
||||||
|
|
||||||
|
const data = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form id="entry-form">
|
||||||
|
<div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<Block>
|
||||||
|
<FieldGroup layout="stacked">
|
||||||
|
<Label stacked>No. IHS</Label>
|
||||||
|
<Field>
|
||||||
|
<Input />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import type {
|
||||||
|
Col,
|
||||||
|
KeyLabel,
|
||||||
|
RecComponent,
|
||||||
|
RecStrFuncComponent,
|
||||||
|
RecStrFuncUnknown,
|
||||||
|
Th,
|
||||||
|
} from '~/components/pub/custom-ui/data/types'
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
type SmallDetailDto = any
|
||||||
|
|
||||||
|
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||||
|
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||||
|
|
||||||
|
const _doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cols: Col[] = [
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 250 },
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{ width: 120 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const header: Th[][] = [
|
||||||
|
[
|
||||||
|
{ label: 'Kode JKN' },
|
||||||
|
{ label: 'Nama' },
|
||||||
|
{ label: 'No KTP' },
|
||||||
|
{ label: 'No SIP' },
|
||||||
|
{ label: 'No IHS' },
|
||||||
|
{ label: 'Telpon' },
|
||||||
|
{ label: 'Fee Ranap' },
|
||||||
|
{ label: 'Fee Rajal' },
|
||||||
|
{ label: 'Status' },
|
||||||
|
{ label: '' },
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
export const keys = [
|
||||||
|
'bpjs_code',
|
||||||
|
'name',
|
||||||
|
'identity_number',
|
||||||
|
'sip_no',
|
||||||
|
'ihs_number',
|
||||||
|
'phone',
|
||||||
|
'inPatient_itemPrice',
|
||||||
|
'outPatient_itemPrice',
|
||||||
|
'status',
|
||||||
|
'action',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const delKeyNames: KeyLabel[] = [
|
||||||
|
{ key: 'code', label: 'Kode' },
|
||||||
|
{ key: 'name', label: 'Nama' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const funcParsed: RecStrFuncUnknown = {
|
||||||
|
name: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
inPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
outPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcComponent: RecStrFuncComponent = {
|
||||||
|
action(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: action,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
status(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: statusBadge,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcHtml: RecStrFuncUnknown = {
|
||||||
|
patient_address(_rec) {
|
||||||
|
return '-'
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
data: any[]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PubBaseDataTable
|
||||||
|
:rows="data"
|
||||||
|
:cols="cols"
|
||||||
|
:header="header"
|
||||||
|
:keys="keys"
|
||||||
|
:func-parsed="funcParsed"
|
||||||
|
:func-html="funcHtml"
|
||||||
|
:func-component="funcComponent"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Badge } from '~/components/pub/ui/badge'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
rec: any
|
||||||
|
idx?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
|
||||||
|
})
|
||||||
|
|
||||||
|
const badgeVariant = computed(() => {
|
||||||
|
return props.rec.status_code === 1 ? 'default' : 'destructive'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Badge :variant="badgeVariant">
|
||||||
|
{{ statusText }}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||||
|
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||||
|
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||||
|
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{ modelValue: any }>()
|
||||||
|
const emit = defineEmits(['update:modelValue', 'event'])
|
||||||
|
|
||||||
|
const data = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (val) => emit('update:modelValue', val),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form id="entry-form">
|
||||||
|
<div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<Block>
|
||||||
|
<FieldGroup :column="2" layout="stacked">
|
||||||
|
<Label stacked>No. IHS</Label>
|
||||||
|
<Field>
|
||||||
|
<Input />
|
||||||
|
</Field>
|
||||||
|
</FieldGroup>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import type {
|
||||||
|
Col,
|
||||||
|
KeyLabel,
|
||||||
|
RecComponent,
|
||||||
|
RecStrFuncComponent,
|
||||||
|
RecStrFuncUnknown,
|
||||||
|
Th,
|
||||||
|
} from '~/components/pub/custom-ui/data/types'
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
type SmallDetailDto = any
|
||||||
|
|
||||||
|
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||||
|
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
|
||||||
|
|
||||||
|
const _doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const cols: Col[] = [
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 250 },
|
||||||
|
{},
|
||||||
|
{ width: 100 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{ width: 120 },
|
||||||
|
{ width: 100 },
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const header: Th[][] = [
|
||||||
|
[
|
||||||
|
{ label: 'Kode JKN' },
|
||||||
|
{ label: 'Nama' },
|
||||||
|
{ label: 'No KTP' },
|
||||||
|
{ label: 'No SIP' },
|
||||||
|
{ label: 'No IHS' },
|
||||||
|
{ label: 'Telpon' },
|
||||||
|
{ label: 'Fee Ranap' },
|
||||||
|
{ label: 'Fee Rajal' },
|
||||||
|
{ label: 'Status' },
|
||||||
|
{ label: '' },
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
export const keys = [
|
||||||
|
'bpjs_code',
|
||||||
|
'name',
|
||||||
|
'identity_number',
|
||||||
|
'sip_no',
|
||||||
|
'ihs_number',
|
||||||
|
'phone',
|
||||||
|
'inPatient_itemPrice',
|
||||||
|
'outPatient_itemPrice',
|
||||||
|
'status',
|
||||||
|
'action',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const delKeyNames: KeyLabel[] = [
|
||||||
|
{ key: 'code', label: 'Kode' },
|
||||||
|
{ key: 'name', label: 'Nama' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const funcParsed: RecStrFuncUnknown = {
|
||||||
|
name: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
|
||||||
|
},
|
||||||
|
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
|
||||||
|
},
|
||||||
|
inPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
outPatient_itemPrice: (rec: unknown): unknown => {
|
||||||
|
const recX = rec as SmallDetailDto
|
||||||
|
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcComponent: RecStrFuncComponent = {
|
||||||
|
action(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: action,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
status(rec, idx) {
|
||||||
|
const res: RecComponent = {
|
||||||
|
idx,
|
||||||
|
rec: rec as object,
|
||||||
|
component: statusBadge,
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const funcHtml: RecStrFuncUnknown = {
|
||||||
|
patient_address(_rec) {
|
||||||
|
return '-'
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
data: any[]
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PubBaseDataTable
|
||||||
|
:rows="data"
|
||||||
|
:cols="cols"
|
||||||
|
:header="header"
|
||||||
|
:keys="keys"
|
||||||
|
:func-parsed="funcParsed"
|
||||||
|
:func-html="funcHtml"
|
||||||
|
:func-component="funcComponent"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Badge } from '~/components/pub/ui/badge'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
rec: any
|
||||||
|
idx?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const doctorStatus = {
|
||||||
|
0: 'Tidak Aktif',
|
||||||
|
1: 'Aktif',
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
|
||||||
|
})
|
||||||
|
|
||||||
|
const badgeVariant = computed(() => {
|
||||||
|
return props.rec.status_code === 1 ? 'default' : 'destructive'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<Badge :variant="badgeVariant">
|
||||||
|
{{ statusText }}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
// helpers
|
||||||
|
import { toTypedSchema } from '@vee-validate/zod'
|
||||||
|
import { useForm } from 'vee-validate'
|
||||||
|
// types
|
||||||
|
import type z from 'zod'
|
||||||
|
import type { DeviceFormData } from '~/schemas/device'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
schema: z.ZodSchema<any>
|
||||||
|
uoms: any[]
|
||||||
|
items: any[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLoading = ref(false)
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
const emit = defineEmits<{
|
||||||
|
submit: [values: DeviceFormData, resetForm: () => void]
|
||||||
|
cancel: [resetForm: () => void]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const { handleSubmit, defineField, errors } = useForm({
|
||||||
|
validationSchema: toTypedSchema(props.schema),
|
||||||
|
initialValues: {
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
uom_code: '',
|
||||||
|
item_id: '',
|
||||||
|
} as Partial<DeviceFormData>,
|
||||||
|
})
|
||||||
|
|
||||||
|
const [code, codeAttrs] = defineField('code')
|
||||||
|
const [name, nameAttrs] = defineField('name')
|
||||||
|
const [uom, uomAttrs] = defineField('uom_code')
|
||||||
|
const [item, itemAttrs] = defineField('item_id')
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
code.value = ''
|
||||||
|
name.value = ''
|
||||||
|
uom.value = ''
|
||||||
|
item.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submission handler
|
||||||
|
function onSubmitForm(values: any) {
|
||||||
|
const formData: DeviceFormData = {
|
||||||
|
name: values.name || '',
|
||||||
|
code: values.code || '',
|
||||||
|
uom_code: values.uom_code || '',
|
||||||
|
item_id: values.item_id || '',
|
||||||
|
}
|
||||||
|
emit('submit', formData, resetForm)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form cancel handler
|
||||||
|
function onCancelForm() {
|
||||||
|
emit('cancel', resetForm)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<label for="code">Kode</label>
|
||||||
|
<Input
|
||||||
|
id="code"
|
||||||
|
v-model="code"
|
||||||
|
v-bind="codeAttrs"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:class="{ 'border-red-500': errors.code }"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.code" class="text-sm text-red-500">
|
||||||
|
{{ errors.code }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<label for="name">Nama</label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
v-model="name"
|
||||||
|
v-bind="nameAttrs"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:class="{ 'border-red-500': errors.name }"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.name" class="text-sm text-red-500">
|
||||||
|
{{ errors.name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<label for="uom">Satuan</label>
|
||||||
|
<Select
|
||||||
|
id="uom"
|
||||||
|
icon-name="i-lucide-chevron-down"
|
||||||
|
placeholder="Pilih satuan"
|
||||||
|
v-model="uom"
|
||||||
|
v-bind="uomAttrs"
|
||||||
|
:items="uoms"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:class="{ 'border-red-500': errors.uom_code }"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.uom_code" class="text-sm text-red-500">
|
||||||
|
{{ errors.uom_code }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<label for="item">Item</label>
|
||||||
|
<Select
|
||||||
|
id="item"
|
||||||
|
icon-name="i-lucide-chevron-down"
|
||||||
|
placeholder="Pilih item"
|
||||||
|
v-model="item"
|
||||||
|
v-bind="itemAttrs"
|
||||||
|
:items="items"
|
||||||
|
:disabled="isLoading"
|
||||||
|
:class="{ 'border-red-500': errors.item_id }"
|
||||||
|
/>
|
||||||
|
<span v-if="errors.item_id" class="text-sm text-red-500">
|
||||||
|
{{ errors.item_id }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="my-2 flex justify-end gap-2 py-2">
|
||||||
|
<Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||||
|
<Button type="submit" class="w-[120px]">
|
||||||
|
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||||
|
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: any[]
|
||||||
|
paginationMeta?: PaginationMeta
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<Props>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
pageChange: [page: number]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function handlePageChange(page: number) {
|
||||||
|
emit('pageChange', page)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PubBaseDataTable
|
||||||
|
:rows="data"
|
||||||
|
:cols="cols"
|
||||||
|
:header="header"
|
||||||
|
:keys="keys"
|
||||||
|
:func-parsed="funcParsed"
|
||||||
|
:func-html="funcHtml"
|
||||||
|
:func-component="funcComponent"
|
||||||
|
/>
|
||||||
|
<template v-if="paginationMeta">
|
||||||
|
<div v-if="paginationMeta.totalPage > 1">
|
||||||
|
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
@@ -11,10 +11,6 @@ const data = computed({
|
|||||||
get: () => props.modelValue,
|
get: () => props.modelValue,
|
||||||
set: (val) => emit('update:modelValue', val),
|
set: (val) => emit('update:modelValue', val),
|
||||||
})
|
})
|
||||||
const items = [
|
|
||||||
{ value: 'doctor', label: 'Dokter' },
|
|
||||||
{ value: 'nurse', label: 'Perawat' },
|
|
||||||
]
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -22,30 +18,18 @@ const items = [
|
|||||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||||
<div class="flex flex-col justify-between">
|
<div class="flex flex-col justify-between">
|
||||||
<Block>
|
<Block>
|
||||||
<FieldGroup :column="2">
|
<FieldGroup :column="2" layout="stacked">
|
||||||
<Label>Username</Label>
|
<Label stacked>Username</Label>
|
||||||
<Field>
|
<Field>
|
||||||
<Input v-model="data.name" />
|
<Input v-model="data.name" />
|
||||||
</Field>
|
</Field>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
<FieldGroup :column="2">
|
<FieldGroup :column="2" layout="stacked">
|
||||||
<Label>Password</Label>
|
<Label stacked>Password</Label>
|
||||||
<Field>
|
<Field>
|
||||||
<Input v-model="data.password" type="password" />
|
<Input v-model="data.password" type="password" />
|
||||||
</Field>
|
</Field>
|
||||||
</FieldGroup>
|
</FieldGroup>
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Status</Label>
|
|
||||||
<Field>
|
|
||||||
<Input v-model="data.status" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
<FieldGroup :column="2">
|
|
||||||
<Label>Tipe</Label>
|
|
||||||
<Field>
|
|
||||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
|
||||||
</Field>
|
|
||||||
</FieldGroup>
|
|
||||||
</Block>
|
</Block>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,211 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
|
||||||
|
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||||
|
import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||||
|
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||||
|
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||||
|
import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
|
||||||
|
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||||
|
|
||||||
|
const isFormEntryDialogOpen = ref(false)
|
||||||
|
const isRecordConfirmationOpen = ref(false)
|
||||||
|
const recId = ref<number>(0)
|
||||||
|
const recAction = ref<string>('')
|
||||||
|
const recItem = ref<any>(null)
|
||||||
|
|
||||||
|
const uoms = [
|
||||||
|
{ value: 'uom-1', label: 'Satuan 1' },
|
||||||
|
{ value: 'uom-2', label: 'Satuan 2' },
|
||||||
|
{ value: 'uom-3', label: 'Satuan 3' },
|
||||||
|
]
|
||||||
|
const items = [
|
||||||
|
{ value: 'item-1', label: 'Item 1' },
|
||||||
|
{ value: 'item-2', label: 'Item 2' },
|
||||||
|
{ value: 'item-3', label: 'Item 3' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// Fungsi untuk fetch data division
|
||||||
|
async function fetchEquipmentData(params: any) {
|
||||||
|
// Prepare query parameters for pagination and search
|
||||||
|
const urlParams = new URLSearchParams({
|
||||||
|
'page-number': params.page.toString(),
|
||||||
|
'page-size': params.pageSize.toString(),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (params.q) {
|
||||||
|
urlParams.append('search', params.q)
|
||||||
|
}
|
||||||
|
|
||||||
|
return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Menggunakan composable untuk pagination
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
paginationMeta,
|
||||||
|
searchInput,
|
||||||
|
handlePageChange,
|
||||||
|
handleSearch,
|
||||||
|
fetchData: getEquipmentList,
|
||||||
|
} = usePaginatedList({
|
||||||
|
fetchFn: fetchEquipmentData,
|
||||||
|
entityName: 'equipment',
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerPrep: HeaderPrep = {
|
||||||
|
title: 'Perlengkapan (BMHP)',
|
||||||
|
icon: 'i-lucide-layout-dashboard',
|
||||||
|
refSearchNav: {
|
||||||
|
placeholder: 'Cari (min. 3 karakter)...',
|
||||||
|
minLength: 3,
|
||||||
|
debounceMs: 500,
|
||||||
|
showValidationFeedback: true,
|
||||||
|
onInput: (_val: string) => {
|
||||||
|
// Handle search input - this will be triggered by the header component
|
||||||
|
},
|
||||||
|
onClick: () => {
|
||||||
|
// Handle search button click if needed
|
||||||
|
},
|
||||||
|
onClear: () => {
|
||||||
|
// Handle search clear
|
||||||
|
},
|
||||||
|
},
|
||||||
|
addNav: {
|
||||||
|
label: 'Tambah Perlengkapan',
|
||||||
|
icon: 'i-lucide-plus',
|
||||||
|
onClick: () => {
|
||||||
|
isFormEntryDialogOpen.value = true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
provide('rec_id', recId)
|
||||||
|
provide('rec_action', recAction)
|
||||||
|
provide('rec_item', recItem)
|
||||||
|
provide('table_data_loader', isLoading)
|
||||||
|
|
||||||
|
// Watch for row actions
|
||||||
|
watch(recId, () => {
|
||||||
|
switch (recAction.value) {
|
||||||
|
case ActionEvents.showEdit:
|
||||||
|
// TODO: Handle edit action
|
||||||
|
// isFormEntryDialogOpen.value = true
|
||||||
|
break
|
||||||
|
case ActionEvents.showConfirmDelete:
|
||||||
|
// Trigger confirmation modal open
|
||||||
|
isRecordConfirmationOpen.value = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleDeleteRow = async (record: any) => {
|
||||||
|
try {
|
||||||
|
// TODO : hit backend request untuk delete
|
||||||
|
console.log('Deleting record:', record)
|
||||||
|
// Simulate API call
|
||||||
|
// const response = await xfetch(`/api/v1/division/${record.id}`, {
|
||||||
|
// method: 'DELETE'
|
||||||
|
// })
|
||||||
|
|
||||||
|
// Refresh data setelah berhasil delete
|
||||||
|
await getEquipmentList()
|
||||||
|
|
||||||
|
// TODO: Show success message
|
||||||
|
console.log('Record deleted successfully')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting record:', error)
|
||||||
|
// TODO: Show error message
|
||||||
|
} finally {
|
||||||
|
// Reset record state
|
||||||
|
recId.value = 0
|
||||||
|
recAction.value = ''
|
||||||
|
recItem.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onCancelForm = (resetForm: () => void) => {
|
||||||
|
isFormEntryDialogOpen.value = false
|
||||||
|
setTimeout(() => {
|
||||||
|
resetForm()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmitForm = async (values: any, resetForm: () => void) => {
|
||||||
|
let isSuccess = false
|
||||||
|
try {
|
||||||
|
// TODO: Implement form submission logic
|
||||||
|
console.log('Form submitted:', values)
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
// const response = await xfetch('/api/v1/division', {
|
||||||
|
// method: 'POST',
|
||||||
|
// body: JSON.stringify(values)
|
||||||
|
// })
|
||||||
|
|
||||||
|
// If successful, mark as success and close dialog
|
||||||
|
isFormEntryDialogOpen.value = false
|
||||||
|
isSuccess = true
|
||||||
|
|
||||||
|
// Refresh data after successful submission
|
||||||
|
await getEquipmentList()
|
||||||
|
|
||||||
|
// TODO: Show success message
|
||||||
|
console.log('Division created successfully')
|
||||||
|
} catch (error: unknown) {
|
||||||
|
console.warn('Error submitting form:', error)
|
||||||
|
isSuccess = false
|
||||||
|
// Don't close dialog or reset form on error
|
||||||
|
// TODO: Show error message to user
|
||||||
|
} finally {
|
||||||
|
if (isSuccess) {
|
||||||
|
setTimeout(() => {
|
||||||
|
resetForm()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle confirmation result
|
||||||
|
const handleConfirmDelete = (record: any, action: string) => {
|
||||||
|
console.log('Confirmed action:', action, 'for record:', record)
|
||||||
|
handleDeleteRow(record)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelConfirmation = () => {
|
||||||
|
// Reset record state when cancelled
|
||||||
|
recId.value = 0
|
||||||
|
recAction.value = ''
|
||||||
|
recItem.value = null
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="rounded-md border p-4">
|
||||||
|
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||||
|
<div class="rounded-md border p-4">
|
||||||
|
<AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
|
||||||
|
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<!-- Record Confirmation Modal -->
|
||||||
|
<RecordConfirmation
|
||||||
|
v-model:open="isRecordConfirmationOpen"
|
||||||
|
action="delete"
|
||||||
|
:record="recItem"
|
||||||
|
@confirm="handleConfirmDelete"
|
||||||
|
@cancel="handleCancelConfirmation"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,211 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { DeviceSchema, type DeviceFormData } from '~/schemas/device'
|
||||||
|
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||||
|
import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||||
|
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||||
|
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||||
|
import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
|
||||||
|
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||||
|
|
||||||
|
const isFormEntryDialogOpen = ref(false)
|
||||||
|
const isRecordConfirmationOpen = ref(false)
|
||||||
|
const recId = ref<number>(0)
|
||||||
|
const recAction = ref<string>('')
|
||||||
|
const recItem = ref<any>(null)
|
||||||
|
|
||||||
|
const uoms = [
|
||||||
|
{ value: 'uom-1', label: 'Satuan 1' },
|
||||||
|
{ value: 'uom-2', label: 'Satuan 2' },
|
||||||
|
{ value: 'uom-3', label: 'Satuan 3' },
|
||||||
|
]
|
||||||
|
const items = [
|
||||||
|
{ value: 'item-1', label: 'Item 1' },
|
||||||
|
{ value: 'item-2', label: 'Item 2' },
|
||||||
|
{ value: 'item-3', label: 'Item 3' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// Fungsi untuk fetch data division
|
||||||
|
async function fetchDeviceData(params: any) {
|
||||||
|
// Prepare query parameters for pagination and search
|
||||||
|
const urlParams = new URLSearchParams({
|
||||||
|
'page-number': params.page.toString(),
|
||||||
|
'page-size': params.pageSize.toString(),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (params.q) {
|
||||||
|
urlParams.append('search', params.q)
|
||||||
|
}
|
||||||
|
|
||||||
|
return await xfetch(`/api/v1/device?${urlParams.toString()}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Menggunakan composable untuk pagination
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
paginationMeta,
|
||||||
|
searchInput,
|
||||||
|
handlePageChange,
|
||||||
|
handleSearch,
|
||||||
|
fetchData: getDeviceList,
|
||||||
|
} = usePaginatedList({
|
||||||
|
fetchFn: fetchDeviceData,
|
||||||
|
entityName: 'device',
|
||||||
|
})
|
||||||
|
|
||||||
|
const headerPrep: HeaderPrep = {
|
||||||
|
title: 'Peralatan',
|
||||||
|
icon: 'i-lucide-layout-dashboard',
|
||||||
|
refSearchNav: {
|
||||||
|
placeholder: 'Cari (min. 3 karakter)...',
|
||||||
|
minLength: 3,
|
||||||
|
debounceMs: 500,
|
||||||
|
showValidationFeedback: true,
|
||||||
|
onInput: (_val: string) => {
|
||||||
|
// Handle search input - this will be triggered by the header component
|
||||||
|
},
|
||||||
|
onClick: () => {
|
||||||
|
// Handle search button click if needed
|
||||||
|
},
|
||||||
|
onClear: () => {
|
||||||
|
// Handle search clear
|
||||||
|
},
|
||||||
|
},
|
||||||
|
addNav: {
|
||||||
|
label: 'Tambah Peralatan',
|
||||||
|
icon: 'i-lucide-plus',
|
||||||
|
onClick: () => {
|
||||||
|
isFormEntryDialogOpen.value = true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
provide('rec_id', recId)
|
||||||
|
provide('rec_action', recAction)
|
||||||
|
provide('rec_item', recItem)
|
||||||
|
provide('table_data_loader', isLoading)
|
||||||
|
|
||||||
|
// Watch for row actions
|
||||||
|
watch(recId, () => {
|
||||||
|
switch (recAction.value) {
|
||||||
|
case ActionEvents.showEdit:
|
||||||
|
// TODO: Handle edit action
|
||||||
|
// isFormEntryDialogOpen.value = true
|
||||||
|
break
|
||||||
|
case ActionEvents.showConfirmDelete:
|
||||||
|
// Trigger confirmation modal open
|
||||||
|
isRecordConfirmationOpen.value = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleDeleteRow = async (record: any) => {
|
||||||
|
try {
|
||||||
|
// TODO : hit backend request untuk delete
|
||||||
|
console.log('Deleting record:', record)
|
||||||
|
// Simulate API call
|
||||||
|
// const response = await xfetch(`/api/v1/device/${record.id}`, {
|
||||||
|
// method: 'DELETE'
|
||||||
|
// })
|
||||||
|
|
||||||
|
// Refresh data setelah berhasil delete
|
||||||
|
await getDeviceList()
|
||||||
|
|
||||||
|
// TODO: Show success message
|
||||||
|
console.log('Record deleted successfully')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting record:', error)
|
||||||
|
// TODO: Show error message
|
||||||
|
} finally {
|
||||||
|
// Reset record state
|
||||||
|
recId.value = 0
|
||||||
|
recAction.value = ''
|
||||||
|
recItem.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onCancelForm = (resetForm: () => void) => {
|
||||||
|
isFormEntryDialogOpen.value = false
|
||||||
|
setTimeout(() => {
|
||||||
|
resetForm()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmitForm = async (values: any, resetForm: () => void) => {
|
||||||
|
let isSuccess = false
|
||||||
|
try {
|
||||||
|
// TODO: Implement form submission logic
|
||||||
|
console.log('Form submitted:', values)
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
// const response = await xfetch('/api/v1/division', {
|
||||||
|
// method: 'POST',
|
||||||
|
// body: JSON.stringify(values)
|
||||||
|
// })
|
||||||
|
|
||||||
|
// If successful, mark as success and close dialog
|
||||||
|
isFormEntryDialogOpen.value = false
|
||||||
|
isSuccess = true
|
||||||
|
|
||||||
|
// Refresh data after successful submission
|
||||||
|
await getDeviceList()
|
||||||
|
|
||||||
|
// TODO: Show success message
|
||||||
|
console.log('Device created successfully')
|
||||||
|
} catch (error: unknown) {
|
||||||
|
console.warn('Error submitting form:', error)
|
||||||
|
isSuccess = false
|
||||||
|
// Don't close dialog or reset form on error
|
||||||
|
// TODO: Show error message to user
|
||||||
|
} finally {
|
||||||
|
if (isSuccess) {
|
||||||
|
setTimeout(() => {
|
||||||
|
resetForm()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle confirmation result
|
||||||
|
const handleConfirmDelete = (record: any, action: string) => {
|
||||||
|
console.log('Confirmed action:', action, 'for record:', record)
|
||||||
|
handleDeleteRow(record)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelConfirmation = () => {
|
||||||
|
// Reset record state when cancelled
|
||||||
|
recId.value = 0
|
||||||
|
recAction.value = ''
|
||||||
|
recItem.value = null
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="rounded-md border p-4">
|
||||||
|
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||||
|
<div class="rounded-md border p-4">
|
||||||
|
<AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
|
||||||
|
<AppToolsEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<!-- Record Confirmation Modal -->
|
||||||
|
<RecordConfirmation
|
||||||
|
v-model:open="isRecordConfirmationOpen"
|
||||||
|
action="delete"
|
||||||
|
:record="recItem"
|
||||||
|
@confirm="handleConfirmDelete"
|
||||||
|
@cancel="handleCancelConfirmation"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -30,7 +30,7 @@ const headerPrep: HeaderPrep = {
|
|||||||
icon: 'i-lucide-users',
|
icon: 'i-lucide-users',
|
||||||
addNav: {
|
addNav: {
|
||||||
label: 'Tambah',
|
label: 'Tambah',
|
||||||
onClick: () => navigateTo('/human-src/user/add'),
|
onClick: () => navigateTo('/human-src/employee/add'),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -56,10 +56,8 @@ provide('table_data_loader', isLoading)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="rounded-md border p-4">
|
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||||
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
||||||
<div class="rounded-md border p-4">
|
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||||
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
name: '',
|
||||||
|
password: '',
|
||||||
|
status: '',
|
||||||
|
type: 'doctor',
|
||||||
|
})
|
||||||
|
|
||||||
|
function onClick(type: string) {
|
||||||
|
if (type === 'cancel') {
|
||||||
|
navigateTo('/human-src/employee')
|
||||||
|
} else if (type === 'draft') {
|
||||||
|
// do something
|
||||||
|
} else if (type === 'submit') {
|
||||||
|
// do something
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ value: 'doctor', label: 'Dokter' },
|
||||||
|
{ value: 'nurse', label: 'Perawat' },
|
||||||
|
{ value: 'nutritionist', label: 'Ahli Gizi' },
|
||||||
|
{ value: 'laborant', label: 'Laboran' },
|
||||||
|
{ value: 'pharmacy', label: 'Farmasi' },
|
||||||
|
{ value: 'payment', label: 'Pembayaran' },
|
||||||
|
{ value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
|
||||||
|
{ value: 'management', label: 'Management' },
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||||
|
<Icon name="i-lucide-user" class="me-2" />
|
||||||
|
<span class="font-semibold">Tambah</span> Karyawan
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AppEmployeeEntryForm v-model="data" :items="items" />
|
||||||
|
|
||||||
|
<AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
|
||||||
|
<AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
|
||||||
|
<AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
|
||||||
|
<AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
|
||||||
|
<AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
|
||||||
|
|
||||||
|
<AppUserEntryForm v-model="data" />
|
||||||
|
<div class="my-2 flex justify-end py-2">
|
||||||
|
<Action @click="onClick" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||||
|
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
||||||
|
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||||
|
|
||||||
|
const data = ref([])
|
||||||
|
|
||||||
|
const refSearchNav: RefSearchNav = {
|
||||||
|
onClick: () => {
|
||||||
|
// open filter modal
|
||||||
|
},
|
||||||
|
onInput: (_val: string) => {
|
||||||
|
// filter patient list
|
||||||
|
},
|
||||||
|
onClear: () => {
|
||||||
|
// clear url param
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLoading = reactive<DataTableLoader>({
|
||||||
|
isTableLoading: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const recId = ref<number>(0)
|
||||||
|
const recAction = ref<string>('')
|
||||||
|
const recItem = ref<any>(null)
|
||||||
|
|
||||||
|
const headerPrep: HeaderPrep = {
|
||||||
|
title: 'User',
|
||||||
|
icon: 'i-lucide-users',
|
||||||
|
addNav: {
|
||||||
|
label: 'Tambah',
|
||||||
|
onClick: () => navigateTo('/human-src/employee/add'),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDoctorList() {
|
||||||
|
isLoading.dataListLoading = true
|
||||||
|
|
||||||
|
const resp = await xfetch('/api/v1/doctor')
|
||||||
|
if (resp.success) {
|
||||||
|
data.value = (resp.body as Record<string, any>).data
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.dataListLoading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDoctorList()
|
||||||
|
})
|
||||||
|
|
||||||
|
provide('rec_id', recId)
|
||||||
|
provide('rec_action', recAction)
|
||||||
|
provide('rec_item', recItem)
|
||||||
|
provide('table_data_loader', isLoading)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||||
|
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
||||||
|
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -31,7 +31,7 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
|||||||
const cell = event.currentTarget as HTMLElement
|
const cell = event.currentTarget as HTMLElement
|
||||||
const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
|
const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
|
||||||
if (triggerButton) {
|
if (triggerButton) {
|
||||||
(triggerButton as HTMLButtonElement).click()
|
;(triggerButton as HTMLButtonElement).click()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -41,9 +41,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
|
|||||||
<TableHeader class="bg-gray-50">
|
<TableHeader class="bg-gray-50">
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead
|
<TableHead
|
||||||
v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
|
v-for="(h, idx) in header[0]"
|
||||||
|
:key="`head-${idx}`"
|
||||||
|
class="border"
|
||||||
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
|
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
|
||||||
>
|
>
|
||||||
{{ h.label }}
|
{{ h.label }}
|
||||||
</TableHead>
|
</TableHead>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
@@ -53,13 +55,13 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
|
|||||||
<!-- Loading state with 5 skeleton rows -->
|
<!-- Loading state with 5 skeleton rows -->
|
||||||
<TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
|
<TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
|
||||||
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
|
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
|
||||||
<Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
|
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableBody v-else-if="rows.length === 0">
|
<TableBody v-else-if="rows.length === 0">
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell :colspan="keys.length" class="text-center py-8">
|
<TableCell :colspan="keys.length" class="py-8 text-center">
|
||||||
<div class="flex items-center justify-center">
|
<div class="flex items-center justify-center">
|
||||||
<Info class="size-5 text-muted-foreground" />
|
<Info class="size-5 text-muted-foreground" />
|
||||||
<span class="ml-2">Tidak ada data tersedia</span>
|
<span class="ml-2">Tidak ada data tersedia</span>
|
||||||
@@ -74,7 +76,11 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
|
|||||||
:key="`cell-${rowIndex}-${cellIndex}`"
|
:key="`cell-${rowIndex}-${cellIndex}`"
|
||||||
class="border"
|
class="border"
|
||||||
:class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
|
:class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
|
||||||
@click="key === 'action' && funcComponent[key] ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`) : null"
|
@click="
|
||||||
|
key === 'action' && funcComponent[key]
|
||||||
|
? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`)
|
||||||
|
: null
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<!-- If funcComponent has a renderer -->
|
<!-- If funcComponent has a renderer -->
|
||||||
<component
|
<component
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ const props = withDefaults(
|
|||||||
density?: 'default' | 'dense'
|
density?: 'default' | 'dense'
|
||||||
side?: 'default' | 'break'
|
side?: 'default' | 'break'
|
||||||
position?: 'default' | 'dynamic'
|
position?: 'default' | 'dynamic'
|
||||||
|
layout?: 'default' | 'stacked'
|
||||||
class?: string
|
class?: string
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
@@ -12,25 +13,25 @@ const props = withDefaults(
|
|||||||
density: 'default',
|
density: 'default',
|
||||||
side: 'default',
|
side: 'default',
|
||||||
position: 'default',
|
position: 'default',
|
||||||
|
layout: 'default',
|
||||||
class: '',
|
class: '',
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
const wrapperClass = computed(() => [
|
const widthClass = computed(() => {
|
||||||
'w-full flex-shrink-0',
|
if (props.column === 1) return 'md:w-full pe-4'
|
||||||
|
if (props.column === 2) return 'md:w-1/2 pe-4'
|
||||||
|
if (props.column === 3) return 'md:w-1/3 pe-4'
|
||||||
|
return 'w-full'
|
||||||
|
})
|
||||||
|
|
||||||
props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
|
const wrapperClass = computed(() => [
|
||||||
props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 my-3' : '',
|
'w-full flex-shrink-0 mb-3',
|
||||||
props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
|
widthClass.value,
|
||||||
props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
|
|
||||||
props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
|
props.layout === 'stacked' ? 'flex flex-col p-2' : 'md:flex',
|
||||||
|
|
||||||
props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
|
props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
|
||||||
|
|
||||||
props.side !== 'break' ? 'md:flex' : '',
|
|
||||||
|
|
||||||
props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
|
|
||||||
|
|
||||||
props.class,
|
props.class,
|
||||||
])
|
])
|
||||||
</script>
|
</script>
|
||||||
@@ -40,5 +41,3 @@ const wrapperClass = computed(() => [
|
|||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -5,11 +5,13 @@ const props = withDefaults(
|
|||||||
size?: 'default' | 'narrow' | 'wide'
|
size?: 'default' | 'narrow' | 'wide'
|
||||||
height?: 'default' | 'compact'
|
height?: 'default' | 'compact'
|
||||||
position?: 'default' | 'dynamic'
|
position?: 'default' | 'dynamic'
|
||||||
|
stacked?: boolean
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
size: 'default',
|
size: 'default',
|
||||||
height: 'default',
|
height: 'default',
|
||||||
position: 'default',
|
position: 'default',
|
||||||
|
stacked: false,
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -36,12 +38,12 @@ const positionChildMap = {
|
|||||||
|
|
||||||
const wrapperClass = computed(() => [
|
const wrapperClass = computed(() => [
|
||||||
'block shrink-0',
|
'block shrink-0',
|
||||||
sizeMap[props.size],
|
props.stacked ? 'w-full mb-1 text-start' : sizeMap[props.size],
|
||||||
heightMap[props.height],
|
props.stacked ? '' : heightMap[props.height],
|
||||||
positionWrapMap[props.position],
|
props.stacked ? '' : positionWrapMap[props.position],
|
||||||
])
|
])
|
||||||
|
|
||||||
const labelClass = computed(() => positionChildMap[props.position])
|
const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medium' : positionChildMap[props.position]])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ export const dischargeMethodCodes: Record<string, string> = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const genderCodes: Record<string, string> = {
|
export const genderCodes: Record<string, string> = {
|
||||||
male: 'Laki - Laki',
|
male: 'Laki',
|
||||||
female: 'Perempuan',
|
female: 'Perempuan',
|
||||||
'not-stated': 'Tidak Disebutkan',
|
'not-stated': 'Tidak Disebutkan',
|
||||||
unknown: 'Tidak Diketahui',
|
unknown: 'Tidak Diketahui',
|
||||||
|
|||||||
@@ -2,6 +2,25 @@ import type { ClassValue } from 'clsx'
|
|||||||
import { clsx } from 'clsx'
|
import { clsx } from 'clsx'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
export interface SelectOptionType<T> {
|
||||||
|
label: string
|
||||||
|
value: T
|
||||||
|
}
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs))
|
return twMerge(clsx(inputs))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function mapToFlowbiteOptList(items: Record<string, string>): SelectOptionType<string>[] {
|
||||||
|
if (!items) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const result: SelectOptionType<string>[] = []
|
||||||
|
Object.keys(items).forEach((item) => {
|
||||||
|
result.push({
|
||||||
|
label: items[item] as string,
|
||||||
|
value: item,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
export interface Doctor {
|
||||||
|
id: number
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
name: string
|
||||||
|
frontTitle?: string
|
||||||
|
endTitle?: string
|
||||||
|
specialist_code?: string
|
||||||
|
sip_no: string
|
||||||
|
ihs_number: string
|
||||||
|
identity_number: string
|
||||||
|
phone?: string
|
||||||
|
bpjs_code?: string
|
||||||
|
status_code?: number
|
||||||
|
}
|
||||||
|
// use one dto for both create and update
|
||||||
|
export interface CreateDto {
|
||||||
|
name?: string
|
||||||
|
frontTitle?: string
|
||||||
|
endTitle?: string
|
||||||
|
identity_number?: string
|
||||||
|
sip_no?: string
|
||||||
|
ihs_number?: string
|
||||||
|
phone?: string
|
||||||
|
email?: string
|
||||||
|
bpjs_code?: string
|
||||||
|
status_code?: number
|
||||||
|
outPatient_rate?: number
|
||||||
|
inPatient_rate?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GetListDto {
|
||||||
|
name?: string
|
||||||
|
identity_number?: string
|
||||||
|
sip_no?: string
|
||||||
|
ihs_number?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GetDetailDto {
|
||||||
|
id?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateDto extends CreateDto {
|
||||||
|
id?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeleteDto {
|
||||||
|
id?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function genDoctor(): Doctor {
|
||||||
|
return {
|
||||||
|
id: 0,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: '',
|
||||||
|
name: '',
|
||||||
|
ihs_number: '',
|
||||||
|
identity_number: '',
|
||||||
|
sip_no: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
export interface Employee {
|
||||||
|
name: string
|
||||||
|
number: string
|
||||||
|
status_code: string
|
||||||
|
user_id: number
|
||||||
|
person_id: number
|
||||||
|
position_code: string
|
||||||
|
division_code: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateDto extends Employee {}
|
||||||
|
|
||||||
|
export interface UpdateDto extends Employee {
|
||||||
|
id: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeleteDto {
|
||||||
|
id: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GetListDto extends Employee {
|
||||||
|
id: number
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function genEmployee(): Employee {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
number: '',
|
||||||
|
status_code: '',
|
||||||
|
user_id: 0,
|
||||||
|
person_id: 0,
|
||||||
|
position_code: '',
|
||||||
|
division_code: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
export interface User {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
password: string
|
||||||
|
status_code: string
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function genUser(): User {
|
||||||
|
return {
|
||||||
|
id: 0,
|
||||||
|
name: '',
|
||||||
|
password: '',
|
||||||
|
status_code: '',
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
roles: ['sys', 'doc'],
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>detail pasien</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
roles: ['sys', 'doc'],
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>edit detail pasien</div>
|
|
||||||
</template>
|
|
||||||
@@ -27,13 +27,17 @@ if (!hasAccess) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Define permission-based computed properties
|
// Define permission-based computed properties
|
||||||
const canRead = hasReadAccess(roleAccess)
|
const canRead = true // hasReadAccess(roleAccess)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="canRead">
|
<div v-if="canRead">
|
||||||
|
<<<<<<< HEAD
|
||||||
|
<ContentEquipmentList />
|
||||||
|
=======
|
||||||
<ContentMaterialList />
|
<ContentMaterialList />
|
||||||
|
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2
|
||||||
</div>
|
</div>
|
||||||
<Error v-else :status-code="403" />
|
<Error v-else :status-code="403" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+5
-1
@@ -27,13 +27,17 @@ if (!hasAccess) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Define permission-based computed properties
|
// Define permission-based computed properties
|
||||||
const canRead = hasReadAccess(roleAccess)
|
const canRead = true // hasReadAccess(roleAccess)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="canRead">
|
<div v-if="canRead">
|
||||||
|
<<<<<<< HEAD:app/pages/(features)/tools-equipment-src/tools/index.vue
|
||||||
|
<ContentToolsList />
|
||||||
|
=======
|
||||||
<ContentDeviceList />
|
<ContentDeviceList />
|
||||||
|
>>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/pages/(features)/tools-equipment-src/device/index.vue
|
||||||
</div>
|
</div>
|
||||||
<Error v-else :status-code="403" />
|
<Error v-else :status-code="403" />
|
||||||
</div>
|
</div>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
|
||||||
|
name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
|
||||||
|
uom_code: z.string({ required_error: 'Kode unit harus diisi' }).min(1, 'Kode unit harus diisi'),
|
||||||
|
item_id: z.string({ required_error: 'Tipe harus diisi' }).min(1, 'Tipe harus diisi'),
|
||||||
|
})
|
||||||
|
|
||||||
|
type formData = z.infer<typeof schema>
|
||||||
|
|
||||||
|
export { schema as DeviceSchema }
|
||||||
|
export type { formData as DeviceFormData }
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "IGD",
|
"title": "IGD",
|
||||||
"icon": "i-lucide-stethoscope",
|
"icon": "i-lucide-zap",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "Triase",
|
"title": "Triase",
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Rehabilitasi Medik",
|
"title": "Rehabilitasi Medik",
|
||||||
"icon": "i-lucide-heart",
|
"icon": "i-lucide-bike",
|
||||||
"link": "/rehabilitasi",
|
"link": "/rehabilitasi",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
@@ -103,34 +103,44 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Farmasi",
|
"title": "Obat - Order",
|
||||||
"icon": "i-lucide-users",
|
"icon": "i-lucide-briefcase-medical",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "Permintaan",
|
"title": "Permintaan",
|
||||||
"icon": "i-lucide-user",
|
"icon": "i-lucide-user",
|
||||||
"link": "/pharmacy/request"
|
"link": "/medication/order"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Standing Order",
|
"title": "Standing Order",
|
||||||
"icon": "i-lucide-user",
|
"icon": "i-lucide-user",
|
||||||
"link": "/pharmacy/standing-order"
|
"link": "/medication/standing-order"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Lab",
|
"title": "Lab - Order",
|
||||||
"icon": "i-lucide-briefcase",
|
"icon": "i-lucide-microscope",
|
||||||
"link": "/lab-order"
|
"link": "/lab-order"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Radiologi",
|
"title": "Lab Mikro - Order",
|
||||||
|
"icon": "i-lucide-microscope",
|
||||||
|
"link": "/micro-lab-order"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Lab PA - Order",
|
||||||
|
"icon": "i-lucide-microscope",
|
||||||
|
"link": "/pa-lab-order"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Radiologi - Order",
|
||||||
"icon": "i-lucide-radio",
|
"icon": "i-lucide-radio",
|
||||||
"link": "/radiology-order"
|
"link": "/radiology-order"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Gizi",
|
"title": "Gizi",
|
||||||
"icon": "i-lucide-briefcase",
|
"icon": "i-lucide-egg-fried",
|
||||||
"link": "/nutrition-order"
|
"link": "/nutrition-order"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -160,7 +170,7 @@
|
|||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"title": "BPJS",
|
"title": "BPJS",
|
||||||
"icon": "i-lucide-refresh-cw",
|
"icon": "i-lucide-circuit-board",
|
||||||
"link": "/integration/bpjs",
|
"link": "/integration/bpjs",
|
||||||
"badge": "Live"
|
"badge": "Live"
|
||||||
},
|
},
|
||||||
@@ -177,7 +187,7 @@
|
|||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"title": "Peralatan dan Perlengkapan",
|
"title": "Peralatan dan Perlengkapan",
|
||||||
"icon": "i-lucide-radius",
|
"icon": "i-lucide-layout-dashboard",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "Obat",
|
"title": "Obat",
|
||||||
@@ -187,12 +197,12 @@
|
|||||||
{
|
{
|
||||||
"title": "Peralatan",
|
"title": "Peralatan",
|
||||||
"icon": "i-lucide-tools",
|
"icon": "i-lucide-tools",
|
||||||
"link": "/tools-equipment-src/device"
|
"link": "/tools-equipment-src/tools"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Perlengkapan (BMHP)",
|
"title": "Perlengkapan (BMHP)",
|
||||||
"icon": "i-lucide-stethoscope",
|
"icon": "i-lucide-stethoscope",
|
||||||
"link": "/tools-equipment-src/material"
|
"link": "/tools-equipment-src/equipment"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Metode Obat",
|
"title": "Metode Obat",
|
||||||
@@ -209,36 +219,88 @@
|
|||||||
{
|
{
|
||||||
"title": "Pengguna",
|
"title": "Pengguna",
|
||||||
"icon": "i-lucide-user",
|
"icon": "i-lucide-user",
|
||||||
"link": "/human-src/employee"
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Pegawai",
|
||||||
|
"icon": "i-lucide-stethoscope",
|
||||||
|
"link": "/human-src/employee"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "PPDS",
|
||||||
|
"icon": "i-lucide-user",
|
||||||
|
"link": "/human-src/specialist-intern"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Layanan",
|
"title": "Layanan",
|
||||||
"icon": "i-lucide-card-sim",
|
"icon": "i-lucide-layout-list",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"title": "Counter",
|
"title": "Counter",
|
||||||
"icon": "i-lucide-stethoscope",
|
"icon": "i-lucide-stethoscope",
|
||||||
"link": "/tools-equipment-src/medicine"
|
"link": "/service-src/counter"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Bed",
|
"title": "Public Screen (Big Screen)",
|
||||||
"icon": "i-lucide-tools",
|
"icon": "i-lucide-tools",
|
||||||
"link": "/tools-equipment-src/device"
|
"link": "/service-src/public-screen"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Kasur",
|
||||||
|
"icon": "i-lucide-tools",
|
||||||
|
"link": "/service-src/bed"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Kamar",
|
"title": "Kamar",
|
||||||
"icon": "i-lucide-stethoscope",
|
"icon": "i-lucide-stethoscope",
|
||||||
"link": "/tools-equipment-src/medical-device"
|
"link": "/service-src/chamber"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Lantai",
|
"title": "Lantai",
|
||||||
"icon": "i-lucide-user",
|
"icon": "i-lucide-user",
|
||||||
"link": "/tools-equipment-src/medicine-method"
|
"link": "/service-src/floor"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Gedung",
|
"title": "Gedung",
|
||||||
"icon": "i-lucide-user",
|
"icon": "i-lucide-user",
|
||||||
"link": "/tools-equipment-src/medicine-type"
|
"link": "/service-src/building"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Item & Item Price",
|
||||||
|
"icon": "i-lucide-shopping-basket",
|
||||||
|
"link": "/item-src/item"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Organisasi",
|
||||||
|
"icon": "i-lucide-network",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"title": "Divisi",
|
||||||
|
"icon": "i-lucide-stethoscope",
|
||||||
|
"link": "/org-src/division"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Instalasi",
|
||||||
|
"icon": "i-lucide-tools",
|
||||||
|
"link": "/org-src/installation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Unit",
|
||||||
|
"icon": "i-lucide-tools",
|
||||||
|
"link": "/org-src/unit"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Specialist",
|
||||||
|
"icon": "i-lucide-stethoscope",
|
||||||
|
"link": "/org-src/specialist"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Sub Specialist",
|
||||||
|
"icon": "i-lucide-user",
|
||||||
|
"link": "/org-src/subspecialist"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user