Merge remote-tracking branch 'origin/dev' into fe-refactor-division-40
This commit is contained in:
Khafid Prayoga
@@ -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,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
})
|
||||
|
||||
const items = [
|
||||
{ value: 'doctor', label: 'Dokter' },
|
||||
{ value: 'nurse', label: 'Perawat' },
|
||||
]
|
||||
</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="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<FieldGroup :column="1">
|
||||
<Label>Nama dan Gelar</Label>
|
||||
<Field>
|
||||
<Input v-model="data.name" type="text" name="name" default-value="dr." />
|
||||
</Field>
|
||||
<Field>
|
||||
<Input type="text" name="name" />
|
||||
</Field>
|
||||
<Field>
|
||||
<Input type="text" name="name" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
<Block>
|
||||
<FieldGroup :column="2">
|
||||
<Label>NIK</Label>
|
||||
<Label>No. IHS</Label>
|
||||
<Field>
|
||||
<Input type="text" name="identity_number" />
|
||||
<Input />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>NO SIP</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" />
|
||||
<Label>No. SIP</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>Kode BPJS</Label>
|
||||
<Label>Unit</Label>
|
||||
<Field>
|
||||
<Input type="text" name="bpjs_code" />
|
||||
</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>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</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">
|
||||
<Label>Nomor Induk Pegawai</Label>
|
||||
<Field>
|
||||
<Input v-model="data.number" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>Status</Label>
|
||||
<Field>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>Position</Label>
|
||||
<Field>
|
||||
<Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label>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 '-'
|
||||
},
|
||||
}
|
||||
+33
-17
@@ -6,19 +6,18 @@ import type { MaterialFormData } from '~/schemas/material'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
// components
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
|
||||
interface Props {
|
||||
isLoading: boolean
|
||||
schema: z.ZodSchema<any>
|
||||
uoms: any[]
|
||||
items: any[]
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
submit: [data: any]
|
||||
submit: [values: MaterialFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { handleSubmit, defineField, errors } = useForm({
|
||||
@@ -38,19 +37,36 @@ const [uom, uomAttrs] = defineField('uom_code')
|
||||
const [item, itemAttrs] = defineField('item_id')
|
||||
const [stock, stockAttrs] = defineField('stock')
|
||||
|
||||
const onSubmit = handleSubmit(async (values) => {
|
||||
try {
|
||||
emit('submit', values)
|
||||
} catch (error) {
|
||||
console.error('Submission failed:', error)
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
uom.value = ''
|
||||
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>
|
||||
|
||||
<template>
|
||||
<form class="grid gap-2" @submit="onSubmit">
|
||||
<form class="grid gap-2" @submit="handleSubmit(onSubmitForm)">
|
||||
<div class="grid gap-2">
|
||||
<Label for="code">Kode</Label>
|
||||
<label for="code">Kode</label>
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
@@ -63,7 +79,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="name">Nama</Label>
|
||||
<label for="name">Nama</label>
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
@@ -76,7 +92,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="uom">Satuan</Label>
|
||||
<label for="uom">Satuan</label>
|
||||
<Select
|
||||
id="uom"
|
||||
v-model="uom"
|
||||
@@ -92,7 +108,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="item">Item</Label>
|
||||
<label for="item">Item</label>
|
||||
<Select
|
||||
id="item"
|
||||
v-model="item"
|
||||
@@ -108,7 +124,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="stock">Stok</Label>
|
||||
<label for="stock">Stok</label>
|
||||
<Input
|
||||
id="stock"
|
||||
v-model="stock"
|
||||
@@ -122,7 +138,7 @@ const onSubmit = handleSubmit(async (values) => {
|
||||
</span>
|
||||
</div>
|
||||
<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]">
|
||||
<Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
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>
|
||||
<Label>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>
|
||||
<Label>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>
|
||||
<Label>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,170 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.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'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</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">
|
||||
<Block>
|
||||
<!-- LocationType -->
|
||||
<FieldGroup>
|
||||
<Label label-for="locationType">Jenis Alamat</Label>
|
||||
<Field id="locationType" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="locationType">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="locationType" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="address">Alamat</Label>
|
||||
<Field id="address" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="address">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="address"
|
||||
type="text"
|
||||
placeholder="Masukkan alamat lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Rt -->
|
||||
<FieldGroup>
|
||||
<Label label-for="rt">RT</Label>
|
||||
<Field id="rt" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rt">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="rt"
|
||||
type="text"
|
||||
maxlength="2"
|
||||
placeholder="01"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Rw -->
|
||||
<FieldGroup>
|
||||
<Label label-for="rw">RW</Label>
|
||||
<Field id="rw" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="rw">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="rw"
|
||||
type="text"
|
||||
maxlength="2"
|
||||
placeholder="01"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Village_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="villageCode">Desa/Kelurahan</Label>
|
||||
<Field id="villageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="villageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="villageCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.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'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</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">
|
||||
<Block>
|
||||
<!-- LocationType -->
|
||||
<FieldGroup>
|
||||
<Label label-for="type">Tipe</Label>
|
||||
<Field id="type" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="type">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="type" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="value">Value</Label>
|
||||
<Field id="value" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="value">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="value"
|
||||
type="text"
|
||||
placeholder="Masukkan alamat lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,234 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.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'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const relationshipOpts = mapToComboboxOptList(relationshipCodes)
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</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">
|
||||
<Block>
|
||||
<!-- Relationship_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relationshipCode">Hubungan</Label>
|
||||
<Field id="relationshipCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relationshipCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relationshipCode" v-bind="componentField" :items="relationshipOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Name -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeName">Nama</Label>
|
||||
<Field id="relativeName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeName"
|
||||
type="text"
|
||||
placeholder="Masukkan nama kerabat"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Address -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeAddress">Alamat</Label>
|
||||
<Field id="relativeAddress" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeAddress">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeAddress"
|
||||
type="text"
|
||||
placeholder="Alamat kerabat"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Village_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeVillageCode">Desa/Kelurahan</Label>
|
||||
<Field id="relativeVillageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeVillageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="relativeVillageCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Gender_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeGender">Jenis Kelamin</Label>
|
||||
<Field id="relativeGender" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeGender">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeGender" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- PhoneNumber -->
|
||||
<FieldGroup>
|
||||
<Label label-for="phoneNumber">Nomor Telepon</Label>
|
||||
<Field id="phoneNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="phoneNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="phoneNumber"
|
||||
type="text"
|
||||
placeholder="0812xxxxxx"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Education_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeEducation">Pendidikan</Label>
|
||||
<Field id="relativeEducation" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeEducation">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeEducation" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeOccupationCode">Pekerjaan</Label>
|
||||
<Field id="relativeOccupationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeOccupationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Select id="relativeOccupationCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Name -->
|
||||
<FieldGroup>
|
||||
<Label label-for="relativeOccupationName">Nama Pekerjaan</Label>
|
||||
<Field id="relativeOccupationName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="relativeOccupationName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="relativeOccupationName"
|
||||
type="text"
|
||||
placeholder="Contoh: Guru, Dokter, Petani"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,340 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.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'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const religionOpts = mapToComboboxOptList(religionCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</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">
|
||||
<Block>
|
||||
<FieldGroup>
|
||||
<Label label-for="residentIdentityNumber">KTP</Label>
|
||||
<Field id="residentIdentityNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="residentIdentityNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="residentIdentityNumber"
|
||||
type="text"
|
||||
maxlength="16"
|
||||
placeholder="Nomor KTP"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- FrontTitle -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="frontTitle">Gelar Depan</Label>
|
||||
<Field id="frontTitle" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="frontTitle">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="frontTitle"
|
||||
type="text"
|
||||
placeholder="Dr., Ir., dll"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="name" position="dynamic">Nama</Label>
|
||||
<Field id="name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Nama lengkap"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- EndTitle -->
|
||||
<FieldGroup :column="3">
|
||||
<Label label-for="endTitle" position="dynamic">Gelar Belakang</Label>
|
||||
<Field id="endTitle" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="endTitle">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="endTitle"
|
||||
type="text"
|
||||
placeholder="S.Kom, M.Kes, dll"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- BirthDate -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="birthDate">Tanggal Lahir</Label>
|
||||
<Field id="birthDate" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="birthDate">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input id="birthDate" type="date" v-bind="componentField" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- BirthRegency_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="birthRegencyCode">Tempat Lahir</Label>
|
||||
<Field id="birthRegencyCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="birthRegencyCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Gender_Code -->
|
||||
<FieldGroup>
|
||||
<Label label-for="genderCode">Jenis Kelamin</Label>
|
||||
<Field id="genderCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="genderCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="genderCode" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- PassportNumber -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="passportNumber">Paspor</Label>
|
||||
<Field id="passportNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="passportNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="passportNumber"
|
||||
type="text"
|
||||
placeholder="Nomor Paspor"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- DrivingLicenseNumber -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="drivingLicenseNumber">SIM</Label>
|
||||
<Field id="drivingLicenseNumber" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="drivingLicenseNumber">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="drivingLicenseNumber"
|
||||
type="text"
|
||||
placeholder="Nomor SIM"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Religion_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="religionCode">Agama</Label>
|
||||
<Field id="religionCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="religionCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="religionCode" v-bind="componentField" :items="religionOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="ethnicCode">Suku</Label>
|
||||
<Field id="ethnicCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="ethnicCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="ethnicCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Language_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="languageCode">Bahasa</Label>
|
||||
<Field id="languageCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="languageCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="parentId" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Education_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="educationCode">Pendidikan</Label>
|
||||
<Field id="educationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="educationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="educationCode" v-bind="componentField" :items="educationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Code -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="occupationCode">Pekerjaan</Label>
|
||||
<Field id="occupationCode" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="occupationCode">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="occupationCode" v-bind="componentField" :items="occupationOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Occupation_Name -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="occupationName">Detail Pekerjaan</Label>
|
||||
<Field id="occupationName" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="occupationName">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="occupationName"
|
||||
type="text"
|
||||
placeholder="Contoh: Guru SMP, Petani"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</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">
|
||||
<Label>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,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
})
|
||||
const items = [
|
||||
{ value: 'doctor', label: 'Dokter' },
|
||||
{ value: 'nurse', label: 'Perawat' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -34,18 +30,6 @@ const items = [
|
||||
<Input v-model="data.password" type="password" />
|
||||
</Field>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user