Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/patient-63
This commit is contained in:
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from '~/lib/constants'
|
||||
|
||||
// Types
|
||||
import type { InfraFormData } from '~/schemas/infra.schema'
|
||||
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
parents: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
infraGroup_code: 'counter',
|
||||
infraGroup_code: infraGroupCodesKeys.bed,
|
||||
parent_id: null,
|
||||
} as Partial<InfraFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
|
||||
const [infraGroup_code] = defineField('infraGroup_code')
|
||||
const [parent_id, parentIdAttrs] = defineField('parent_id')
|
||||
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
|
||||
if (props.values.parent_id !== undefined)
|
||||
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
infraGroup_code.value = 'counter'
|
||||
infraGroup_code.value = infraGroupCodesKeys.bed
|
||||
parent_id.value = null
|
||||
}
|
||||
|
||||
@@ -62,8 +68,8 @@ function onSubmitForm() {
|
||||
const formData: InfraFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
infraGroup_code: infraGroup_code.value || 'counter',
|
||||
parent_id: parent_id.value || null,
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.bed,
|
||||
parent_id: parent_id.value ? Number(parent_id.value) : null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
@@ -74,23 +80,62 @@ function onCancelForm() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-counter" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<form
|
||||
id="form-floor"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Kamar</Label>
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<Combobox
|
||||
id="parent"
|
||||
v-model="parent_id"
|
||||
v-bind="parentIdAttrs"
|
||||
:items="parents"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Kamar"
|
||||
search-placeholder="Cari Kamar"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
|
||||
@@ -12,9 +12,9 @@ type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
|
||||
export const cols: Col[] = [{}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Kamar' }, { label: '' }]]
|
||||
|
||||
export const keys = ['code', 'name', 'parent', 'action']
|
||||
|
||||
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
<PubMyUiDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
@@ -33,4 +38,4 @@ function handlePageChange(page: number) {
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from '~/lib/constants'
|
||||
|
||||
// Types
|
||||
import type { InfraFormData } from '~/schemas/infra.schema'
|
||||
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
parents: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
infraGroup_code: 'counter',
|
||||
infraGroup_code: infraGroupCodesKeys.chamber,
|
||||
parent_id: null,
|
||||
} as Partial<InfraFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
|
||||
const [infraGroup_code] = defineField('infraGroup_code')
|
||||
const [parent_id, parentIdAttrs] = defineField('parent_id')
|
||||
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
|
||||
if (props.values.parent_id !== undefined)
|
||||
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
infraGroup_code.value = 'counter'
|
||||
infraGroup_code.value = infraGroupCodesKeys.chamber
|
||||
parent_id.value = null
|
||||
}
|
||||
|
||||
@@ -62,8 +68,8 @@ function onSubmitForm() {
|
||||
const formData: InfraFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
infraGroup_code: infraGroup_code.value || 'counter',
|
||||
parent_id: parent_id.value || null,
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.chamber,
|
||||
parent_id: parent_id.value ? Number(parent_id.value) : null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
@@ -74,23 +80,62 @@ function onCancelForm() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-counter" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<form
|
||||
id="form-floor"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Lantai</Label>
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<Combobox
|
||||
id="parent"
|
||||
v-model="parent_id"
|
||||
v-bind="parentIdAttrs"
|
||||
:items="parents"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Lantai"
|
||||
search-placeholder="Cari Lantai"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
|
||||
@@ -12,9 +12,9 @@ type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
|
||||
export const cols: Col[] = [{}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
|
||||
|
||||
export const keys = ['code', 'name', 'parent', 'action']
|
||||
|
||||
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
<PubMyUiDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
|
||||
@@ -37,7 +37,7 @@ const { defineField, errors, meta } = useForm({
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
infraGroup_code: infraGroupCodesKeys.building,
|
||||
infraGroup_code: infraGroupCodesKeys.counter,
|
||||
parent_id: null,
|
||||
} as Partial<InfraFormData>,
|
||||
})
|
||||
@@ -57,7 +57,7 @@ if (props.values) {
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
infraGroup_code.value = infraGroupCodesKeys.building
|
||||
infraGroup_code.value = infraGroupCodesKeys.counter
|
||||
parent_id.value = null
|
||||
}
|
||||
|
||||
@@ -65,7 +65,7 @@ function onSubmitForm() {
|
||||
const formData: InfraFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.counter,
|
||||
parent_id: parent_id.value || null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { genBase } from '~/models/_base'
|
||||
import { genDivisionPosition } from '~/models/division-position'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
divisions: any[]
|
||||
employees: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionPositionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [division, divisionAttrs] = defineField('division_id')
|
||||
const [employee, employeeAttrs] = defineField('employee_id')
|
||||
const [headStatus, headStatusAttrs] = defineField('headStatus')
|
||||
|
||||
// RadioGroup uses string values; expose a string computed that maps to the boolean field
|
||||
const headStatusStr = computed<string>({
|
||||
get() {
|
||||
if (headStatus.value === true) return 'true'
|
||||
if (headStatus.value === false) return 'false'
|
||||
return ''
|
||||
},
|
||||
set(v: string) {
|
||||
if (v === 'true') headStatus.value = true
|
||||
else if (v === 'false') headStatus.value = false
|
||||
else headStatus.value = undefined
|
||||
},
|
||||
})
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.division_id !== undefined)
|
||||
division.value = props.values.division_id ? Number(props.values.division_id) : null
|
||||
if (props.values.employee_id !== undefined)
|
||||
employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
|
||||
if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
division.value = null
|
||||
employee.value = null
|
||||
headStatus.value = false
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm() {
|
||||
const formData: DivisionPositionFormData = {
|
||||
...genBase(),
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
division_id: division.value || null,
|
||||
employee_id: employee.value || null,
|
||||
headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
id="form-division-position"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Posisi Divisi</Label>
|
||||
<Field :errMessage="errors.division_id">
|
||||
<Combobox
|
||||
id="division"
|
||||
v-model="division"
|
||||
v-bind="divisionAttrs"
|
||||
:items="divisions"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Divisi"
|
||||
search-placeholder="Cari Divisi"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Karyawan</Label>
|
||||
<Field :errMessage="errors.employee_id">
|
||||
<Combobox
|
||||
id="employee"
|
||||
v-model="employee"
|
||||
v-bind="employeeAttrs"
|
||||
:items="employees"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Karyawan"
|
||||
search-placeholder="Cari Karyawan"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Status Kepala</Label>
|
||||
<Field :errMessage="errors.headStatus">
|
||||
<RadioGroup
|
||||
v-model="headStatusStr"
|
||||
v-bind="headStatusAttrs"
|
||||
class="flex gap-4"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-yes"
|
||||
value="true"
|
||||
/>
|
||||
<Label for="head-yes">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="head-no"
|
||||
value="false"
|
||||
/>
|
||||
<Label for="head-no">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
import type {
|
||||
Col,
|
||||
KeyLabel,
|
||||
RecComponent,
|
||||
RecStrFuncComponent,
|
||||
RecStrFuncUnknown,
|
||||
Th,
|
||||
} from '~/components/pub/my-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Divisi Induk' },
|
||||
{ label: 'Karyawan' },
|
||||
{ label: 'Status Kepala' },
|
||||
{ label: '' },
|
||||
],
|
||||
]
|
||||
|
||||
export const keys = ['code', 'name', 'division', 'employee', 'head', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
]
|
||||
|
||||
export const funcParsed: RecStrFuncUnknown = {
|
||||
division: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.division?.name || '-'
|
||||
},
|
||||
employee: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.employee?.name || '-'
|
||||
},
|
||||
head: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.headStatus ? 'Ya' : 'Tidak'
|
||||
},
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: RecStrFuncUnknown = {}
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
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">
|
||||
<PubMyUiDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
:keys="keys"
|
||||
:func-parsed="funcParsed"
|
||||
:func-html="funcHtml"
|
||||
:func-component="funcComponent"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -37,28 +37,24 @@ const { defineField, errors, meta } = useForm({
|
||||
code: '',
|
||||
name: '',
|
||||
parent_id: null,
|
||||
division_id: null,
|
||||
} as Partial<DivisionFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [parent, parentAttrs] = defineField('parent_id')
|
||||
const [division] = defineField('division_id')
|
||||
|
||||
// Fill fields from props.values if provided
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
|
||||
if (props.values.division_id !== undefined) division.value = String(props.values.division_id)
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
parent.value = null
|
||||
division.value = null
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
@@ -68,7 +64,6 @@ function onSubmitForm() {
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
parent_id: parent.value || null,
|
||||
division_id: division.value || null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
@@ -113,9 +108,9 @@ function onCancelForm() {
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Divisi Induk</Label>
|
||||
<Field :errMessage="errors.division">
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<TreeSelect
|
||||
id="division"
|
||||
id="parent"
|
||||
v-model="parent"
|
||||
v-bind="parentAttrs"
|
||||
:data="divisions"
|
||||
|
||||
@@ -5,9 +5,9 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
@@ -7,7 +7,7 @@ defineProps<{
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full rounded-md border bg-white p-4 shadow-sm">
|
||||
<div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
|
||||
<!-- Data Pasien -->
|
||||
<h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
|
||||
|
||||
|
||||
@@ -5,10 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from "~/lib/constants"
|
||||
import { infraGroupCodesKeys } from '~/lib/constants'
|
||||
|
||||
// Types
|
||||
import type { InfraFormData } from '~/schemas/infra.schema'
|
||||
@@ -53,7 +53,8 @@ if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.parent_id !== undefined) parent_id.value = String(props.values.parent_id)
|
||||
if (props.values.parent_id !== undefined)
|
||||
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -79,18 +80,35 @@ function onCancelForm() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-floor" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<form
|
||||
id="form-floor"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
@@ -101,7 +119,7 @@ function onCancelForm() {
|
||||
v-model="parent_id"
|
||||
v-bind="parentIdAttrs"
|
||||
:items="parents"
|
||||
:disabled="isLoading || isReadonly"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Gedung"
|
||||
search-placeholder="Cari Gedung"
|
||||
empty-message="Item tidak ditemukan"
|
||||
@@ -110,7 +128,14 @@ function onCancelForm() {
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
|
||||
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { InstallationFormData } from '~/schemas/installation.schema'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { FormErrors } from '~/types/error'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/my-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from "~/lib/constants"
|
||||
|
||||
// Types
|
||||
import type { InfraFormData } from '~/schemas/infra.schema'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const emit = defineEmits<{
|
||||
submit: [values: InfraFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const { defineField, errors, meta } = useForm({
|
||||
validationSchema: toTypedSchema(props.schema),
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
infraGroup_code: infraGroupCodesKeys['public-screen'],
|
||||
parent_id: null,
|
||||
} as Partial<InfraFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [infraGroup_code] = defineField('infraGroup_code')
|
||||
const [parent_id] = defineField('parent_id')
|
||||
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
infraGroup_code.value = infraGroupCodesKeys['public-screen']
|
||||
parent_id.value = null
|
||||
}
|
||||
|
||||
function onSubmitForm() {
|
||||
const formData: InfraFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys['public-screen'],
|
||||
parent_id: parent_id.value || null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
function onCancelForm() {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-building" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
class="w-[120px]"
|
||||
:disabled="isLoading || !meta.valid"
|
||||
@click="onSubmitForm"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
import type {
|
||||
Col,
|
||||
KeyLabel,
|
||||
RecComponent,
|
||||
RecStrFuncComponent,
|
||||
RecStrFuncUnknown,
|
||||
Th,
|
||||
} from '~/components/pub/my-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [{}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
|
||||
|
||||
export const keys = ['code', 'name', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
]
|
||||
|
||||
export const funcParsed: RecStrFuncUnknown = {}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: RecStrFuncUnknown = {}
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
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">
|
||||
<PubMyUiDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
:keys="keys"
|
||||
:func-parsed="funcParsed"
|
||||
:func-html="funcHtml"
|
||||
:func-component="funcComponent"
|
||||
:skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from '~/lib/constants'
|
||||
@@ -65,12 +65,12 @@ if (props.values) {
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.specialist_id !== undefined)
|
||||
specialist_id.value = props.values.specialist_id ? String(props.values.specialist_id) : null
|
||||
specialist_id.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
|
||||
if (props.values.subspecialist_id !== undefined)
|
||||
subspecialist_id.value = props.values.subspecialist_id ? String(props.values.subspecialist_id) : null
|
||||
if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? String(props.values.unit_id) : null
|
||||
subspecialist_id.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
|
||||
if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? Number(props.values.unit_id) : null
|
||||
if (props.values.parent_id !== undefined)
|
||||
parent_id.value = props.values.parent_id ? String(props.values.parent_id) : null
|
||||
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -102,18 +102,50 @@ function onCancelForm() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-building" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<form
|
||||
id="form-building"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Lantai</Label>
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<Combobox
|
||||
id="parent"
|
||||
v-model="parent_id"
|
||||
v-bind="parentAttrs"
|
||||
:items="parents"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Lantai"
|
||||
search-placeholder="Cari Lantai"
|
||||
empty-message="Lantai tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
@@ -124,7 +156,7 @@ function onCancelForm() {
|
||||
v-model="unit_id"
|
||||
v-bind="unitAttrs"
|
||||
:items="units"
|
||||
:disabled="isLoading || isReadonly"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Unit"
|
||||
search-placeholder="Cari Unit"
|
||||
empty-message="Unit tidak ditemukan"
|
||||
@@ -140,7 +172,7 @@ function onCancelForm() {
|
||||
v-model="specialist_id"
|
||||
v-bind="specialistAttrs"
|
||||
:items="specialists"
|
||||
:disabled="isLoading || isReadonly"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Spesialis"
|
||||
search-placeholder="Cari spesialis"
|
||||
empty-message="Spesialis tidak ditemukan"
|
||||
@@ -156,31 +188,23 @@ function onCancelForm() {
|
||||
v-model="subspecialist_id"
|
||||
v-bind="subspecialistAttrs"
|
||||
:items="subspecialists"
|
||||
:disabled="isLoading || isReadonly"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Sub Spesialis"
|
||||
search-placeholder="Cari sub spesialis"
|
||||
empty-message="Sub Spesialis tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Lantai</Label>
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<Combobox
|
||||
id="parent"
|
||||
v-model="parent_id"
|
||||
v-bind="parentAttrs"
|
||||
:items="parents"
|
||||
:disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Lantai"
|
||||
search-placeholder="Cari Lantai"
|
||||
empty-message="Lantai tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
|
||||
@@ -14,18 +14,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
|
||||
|
||||
export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[
|
||||
{ label: 'Kode' },
|
||||
{ label: 'Nama' },
|
||||
{ label: 'Spesialis' },
|
||||
{ label: 'Sub Spesialis' },
|
||||
{ label: 'Unit' },
|
||||
{ label: '' },
|
||||
],
|
||||
]
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
|
||||
|
||||
export const keys = ['code', 'name', 'specialist', 'subspecialist', 'unit', 'action']
|
||||
export const keys = ['code', 'name', 'parent', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
@@ -45,6 +36,10 @@ export const funcParsed: RecStrFuncUnknown = {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.unit?.name || '-'
|
||||
},
|
||||
parent: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.parent?.name || '-'
|
||||
},
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
|
||||
@@ -10,7 +10,7 @@ import { Label } from '~/components/pub/ui/label'
|
||||
import Select from '~/components/pub/ui/select/Select.vue'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { Textarea } from '~/components/pub/ui/textarea'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'event', value: any): void
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/my-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import { Form } from '~/components/pub/ui/form'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
|
||||
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
|
||||
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
@@ -9,6 +8,8 @@ const props = defineProps<{
|
||||
excludeFields?: string[]
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
|
||||
const subject = ref({
|
||||
'prim-compl': '',
|
||||
'sec-compl': '',
|
||||
@@ -25,77 +26,329 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Keluhan Utama -->
|
||||
<Cell v-if="!isExcluded('prim-compl')">
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan anamnesa pasien" v-model="subject['prim-compl']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<form id="entry-form">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div>
|
||||
<h1 class="font-semibold">Pemeriksaan Fisiatrik</h1>
|
||||
<span class="text-sm font-semibold">Anamnesa</span>
|
||||
</div>
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<!-- Keluhan Tambahan -->
|
||||
<Cell v-if="!isExcluded('sec-compl')">
|
||||
<Label dynamic>Keluhan Tambahan</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan keluhan tambahan" v-model="subject['sec-compl']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Diagnosa Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Riwayat Penyakit Sekarang -->
|
||||
<Cell v-if="!isExcluded('cur-disea-hist')">
|
||||
<Label dynamic>Riwayat Penyakit Sekarang</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan riwayat penyakit sekarang" v-model="subject['cur-disea-hist']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Rencana Awal Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Riwayat Penyakit Dahulu -->
|
||||
<Cell v-if="!isExcluded('pas-disea-hist')">
|
||||
<Label dynamic>Riwayat Penyakit Dahulu</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan riwayat penyakit dahulu" v-model="subject['pas-disea-hist']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Terapi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<!-- Riwayat Penyakit Keluarga -->
|
||||
<Cell v-if="!isExcluded('fam-disea-hist')">
|
||||
<Label dynamic>Riwayat Penyakit Keluarga</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan riwayat penyakit keluarga" v-model="subject['fam-disea-hist']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Pemeriksaan Fisik</h1>
|
||||
<span class="text-sm font-semibold">Status Generalis</span>
|
||||
</div>
|
||||
|
||||
<!-- Riwayat Alergi -->
|
||||
<Cell v-if="!isExcluded('alg-hist')">
|
||||
<Label dynamic>Riwayat Alergi</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan riwayat alergi" v-model="subject['alg-hist']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah</Label>
|
||||
<Field>
|
||||
<Input placeholder="Sistolik" />
|
||||
<Input placeholder="Diastolik" />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Reaksi Alergi -->
|
||||
<Cell v-if="!isExcluded('alg-react')">
|
||||
<Label dynamic>Reaksi Alergi</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan reaksi alergi" v-model="subject['alg-react']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Pengobatan yang Sedang Dijalani -->
|
||||
<Cell v-if="!isExcluded('med-hist')">
|
||||
<Label dynamic>Riwayat Pengobatan</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan pengobatan yang sedang dijalani" v-model="subject['med-hist']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>GCS</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>RR</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<!-- Golongan Darah -->
|
||||
<Cell v-if="!isExcluded('blood-type')">
|
||||
<Label dynamic>Golongan Darah</Label>
|
||||
<Field>
|
||||
<Input type="text" placeholder="Masukkan golongan darah" v-model="subject['blood-type']" />
|
||||
</Field>
|
||||
</Cell>
|
||||
</div>
|
||||
<Cell>
|
||||
<Label dynamic>Ambulasi</Label>
|
||||
<Field>
|
||||
<RadioGroup class="flex gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="vaksin-yes"
|
||||
value="yes"
|
||||
/>
|
||||
<Label for="vaksin-yes">Dependent</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
id="vaksin-no"
|
||||
value="no"
|
||||
/>
|
||||
<Label for="vaksin-no">Independen</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Gait</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<span class="text-sm font-semibold">Status Neurologis</span>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>N. Cranialis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Sensoris</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Reflek Fisilogis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Reflek Patologis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Saraf Otonom</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Batang Tubuh</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>AGA</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>AGB</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Batang Tubuh</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>AGA</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>AGB</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<span class="text-sm font-semibold">Statu Lokalis</span>
|
||||
</div>
|
||||
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Deskripsi Temuan Fisik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Pemeriksaan Penunjang</h1>
|
||||
</div>
|
||||
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Catatan Pemeriksaan Penunjang</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Daftar Masalah</h1>
|
||||
</div>
|
||||
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Masalah Medik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Masalah Rehabilitasi Medik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<AppIcdPreview />
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Program Rehabilitasi</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Modalitas Fisik</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Latihan</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Ortesa Protesa</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Edukasi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -1,172 +1,486 @@
|
||||
<script setup lang="ts">
|
||||
import Block from '~/components/pub/my-ui/form/block.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
excludeFields?: string[]
|
||||
}>()
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
|
||||
const subject = ref({
|
||||
'prim-compl': '',
|
||||
'sec-compl': '',
|
||||
'cur-disea-hist': '',
|
||||
'pas-disea-hist': '',
|
||||
'fam-disea-hist': '',
|
||||
'alg-hist': '',
|
||||
'alg-react': '',
|
||||
'med-hist': '',
|
||||
'blood-type': '',
|
||||
})
|
||||
|
||||
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
||||
const disorders = ref<string[]>([])
|
||||
const therapies = ref<string[]>([])
|
||||
const summary = ref('')
|
||||
|
||||
const disorderOptions = [
|
||||
'Fungsi Otot',
|
||||
'Fungsi Sendi',
|
||||
'Fungsi Jalan',
|
||||
'Fungsi Syaraf',
|
||||
'Fungsi Koordinasi',
|
||||
'Jantung',
|
||||
'Fungsi Respirasi',
|
||||
'Fungsi Menelan',
|
||||
'Fungsi Bladder',
|
||||
'Fungsi Bowel',
|
||||
'Fungsi Luhur',
|
||||
'Fungsi Kontrol Postur',
|
||||
'Fungsi Eksekusi',
|
||||
'Fungsi Ortosa/Protesa',
|
||||
'Gangguan Aktivitas Sehari-hari',
|
||||
'Lainnya',
|
||||
]
|
||||
|
||||
const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="entry-form">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Block>
|
||||
<FieldGroup>
|
||||
<Label dynamic>Sudah Vaksin</Label>
|
||||
<Field>
|
||||
<Select
|
||||
:options="[
|
||||
{ label: 'Sudah', value: 'yes' },
|
||||
{ label: 'Belum', value: 'no' },
|
||||
]"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label dynamic>Kasus</Label>
|
||||
<Field>
|
||||
<Select
|
||||
:options="[
|
||||
{ label: 'Baru', value: 'baru' },
|
||||
{ label: 'Lama', value: 'lama' },
|
||||
]"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label dynamic>Kunjungan</Label>
|
||||
<Field>
|
||||
<Select
|
||||
:options="[
|
||||
{ label: 'Baru', value: 'baru' },
|
||||
{ label: 'Lama', value: 'lama' },
|
||||
]"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Riwayat Penyakit -->
|
||||
<FieldGroup :column="2">
|
||||
<Cell>
|
||||
<Label dynamic>Keluhan Utama</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan anamnesa pasien" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Riwayat Penyakit</Label>
|
||||
<Field>
|
||||
<Textarea
|
||||
placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
|
||||
/>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>SpO₂</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="%" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Tekanan Darah Sistol</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="mmHg" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Tekanan Darah Diastol</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="mmHg" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Respirasi</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="kali/menit" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="kali/menit" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Temperatur</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="℃" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Berat Badan</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="Kg" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Tinggi Badan</Label>
|
||||
<Field>
|
||||
<Input type="number" placeholder="Cm" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Golongan Darah</Label>
|
||||
<Field>
|
||||
<Select :options="bloodGroups" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
|
||||
<Field>
|
||||
<Textarea placeholder="Masukkan pemeriksaan fisik" />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Prosedur -->
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Diagnosa (ICD-X)</Label>
|
||||
<Field>
|
||||
<button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<!-- Diagnosa -->
|
||||
<FieldGroup :column="2">
|
||||
<Label dynamic>Diagnosa (ICD-X)</Label>
|
||||
<Field>
|
||||
<button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label dynamic>Diagnosa Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label dynamic>Rencana Awal Medis</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup :column="3">
|
||||
<Label dynamic>Terapi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Riwayat Penyakit Dahulu</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Riwayat Penyakit Sekarang</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Pemeriksaan Fisik</h1>
|
||||
</div>
|
||||
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Umum</Label>
|
||||
<Field>
|
||||
<Input placeholder="Sistolik" />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Tanda Vital</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Kesadaran (GCS)</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Pernapasan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
|
||||
<Cell>
|
||||
<Label dynamic>Jenis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Nadi</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Jenis</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Lengan Kanan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Tekanan Darah Lengan Kiri</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Suhu Aksila</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Suhu Rektal</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Pemeriksaan Badan</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Kulit</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Kepala</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Telinga</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Hidung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Rongga Mulut/Tenggorokan</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Mata</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Leher</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kelenjar Tiroid</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Thorax</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Jantung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Paru-Paru</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Abdomen</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Hati</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Lien</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block>
|
||||
<Cell>
|
||||
<Label dynamic>Lain-Lain</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<div class="my-2 rounded-md border border-slate-300 p-4">
|
||||
<Block :colCount="3">
|
||||
<Cell>
|
||||
<Label dynamic>Punggung</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Ekstremitas</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kelamin</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Rectum</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>System Syaraf</Label>
|
||||
<Field>
|
||||
<Input />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Neuromoskuloskeletal</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Kardiorespirasi</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<Separator class="mt-8" />
|
||||
|
||||
<div class="my-2">
|
||||
<h1 class="font-semibold">Pemeriksaan Penunjang</h1>
|
||||
</div>
|
||||
|
||||
<Block :colCount="2">
|
||||
<Cell>
|
||||
<Label dynamic>Pencitraan</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label dynamic>Laboratorium</Label>
|
||||
<Field>
|
||||
<Textarea />
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
|
||||
<div class="mb-8 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Medis (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Medis (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-md">Diagnosa Medis (ICD-X)</span>
|
||||
<Button
|
||||
class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
|
||||
type="button"
|
||||
@click="emits('click', 'prosedur')"
|
||||
>
|
||||
+ Pilih Prosedur
|
||||
</Button>
|
||||
<AppIcdPreview />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div
|
||||
v-for="opt in disorderOptions"
|
||||
:key="opt"
|
||||
class="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
:id="opt"
|
||||
:value="opt"
|
||||
v-model="disorders"
|
||||
/>
|
||||
<Label
|
||||
:for="opt"
|
||||
class="text-sm"
|
||||
>
|
||||
{{ opt }}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<Label
|
||||
for="summary"
|
||||
class="font-medium"
|
||||
>
|
||||
Kesimpulan Didapatkan Gangguan Fungsi
|
||||
<span class="text-red-500">*</span>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="summary"
|
||||
v-model="summary"
|
||||
placeholder="Masukkan kesimpulan gangguan fungsi"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- REKOMENDASI TERAPI -->
|
||||
<div>
|
||||
<h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div
|
||||
v-for="opt in therapyOptions"
|
||||
:key="opt"
|
||||
class="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
:id="opt"
|
||||
:value="opt"
|
||||
v-model="therapies"
|
||||
/>
|
||||
<Label
|
||||
:for="opt"
|
||||
class="text-sm"
|
||||
>
|
||||
{{ opt }}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/my-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/my-ui/form/field.vue'
|
||||
import Label from '~/components/pub/my-ui/form/label.vue'
|
||||
|
||||
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { SpecialistFormData } from '~/schemas/specialist.schema'
|
||||
|
||||
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { SubspecialistFormData } from '~/schemas/subspecialist.schema'
|
||||
|
||||
@@ -4,7 +4,7 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
||||
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Combobox from '~/components/pub/my-ui/form/combobox.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Types
|
||||
import type { UnitFormData } from '~/schemas/unit.schema'
|
||||
@@ -48,7 +48,7 @@ if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.installation_id !== undefined)
|
||||
installation.value = props.values.installation_id ? String(props.values.installation_id) : null
|
||||
installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -58,7 +58,7 @@ const resetForm = () => {
|
||||
}
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any) {
|
||||
function onSubmitForm() {
|
||||
const formData: UnitFormData = {
|
||||
name: name.value || '',
|
||||
code: code.value || '',
|
||||
|
||||
@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
||||
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
||||
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
||||
import Button from '~/components/pub/ui/button/Button.vue'
|
||||
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
|
||||
|
||||
// Constants
|
||||
import { infraGroupCodesKeys } from '~/lib/constants'
|
||||
|
||||
// Types
|
||||
import type { InfraFormData } from '~/schemas/infra.schema'
|
||||
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
parents: any[]
|
||||
values: any
|
||||
isLoading?: boolean
|
||||
isReadonly?: boolean
|
||||
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
infraGroup_code: 'counter',
|
||||
infraGroup_code: infraGroupCodesKeys.warehouse,
|
||||
parent_id: null,
|
||||
} as Partial<InfraFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
|
||||
const [infraGroup_code] = defineField('infraGroup_code')
|
||||
const [parent_id, parentIdAttrs] = defineField('parent_id')
|
||||
|
||||
if (props.values) {
|
||||
if (props.values.code !== undefined) code.value = props.values.code
|
||||
if (props.values.name !== undefined) name.value = props.values.name
|
||||
if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
|
||||
if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
|
||||
if (props.values.parent_id !== undefined)
|
||||
parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
infraGroup_code.value = 'counter'
|
||||
infraGroup_code.value = infraGroupCodesKeys.warehouse
|
||||
parent_id.value = null
|
||||
}
|
||||
|
||||
@@ -62,8 +68,8 @@ function onSubmitForm() {
|
||||
const formData: InfraFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
infraGroup_code: infraGroup_code.value || 'counter',
|
||||
parent_id: parent_id.value || null,
|
||||
infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.warehouse,
|
||||
parent_id: parent_id.value ? Number(parent_id.value) : null,
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
@@ -74,23 +80,62 @@ function onCancelForm() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form id="form-counter" @submit.prevent>
|
||||
<Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
|
||||
<form
|
||||
id="form-floor"
|
||||
@submit.prevent
|
||||
>
|
||||
<Block
|
||||
labelSize="thin"
|
||||
class="!mb-2.5 !pt-0 xl:!mb-3"
|
||||
:colCount="1"
|
||||
>
|
||||
<Cell>
|
||||
<Label height="compact">Kode</Label>
|
||||
<Field :errMessage="errors.code">
|
||||
<Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="code"
|
||||
v-model="code"
|
||||
v-bind="codeAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Nama</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
|
||||
<Input
|
||||
id="name"
|
||||
v-model="name"
|
||||
v-bind="nameAttrs"
|
||||
:disabled="isLoading || isReadonly"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Lantai</Label>
|
||||
<Field :errMessage="errors.parent_id">
|
||||
<Combobox
|
||||
id="parent"
|
||||
v-model="parent_id"
|
||||
v-bind="parentIdAttrs"
|
||||
:items="parents"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
placeholder="Pilih Lantai"
|
||||
search-placeholder="Cari Lantai"
|
||||
empty-message="Item tidak ditemukan"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
class="w-[120px]"
|
||||
@click="onCancelForm"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!isReadonly"
|
||||
type="button"
|
||||
|
||||
@@ -12,9 +12,9 @@ type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
|
||||
export const cols: Col[] = [{}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
|
||||
export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
|
||||
|
||||
export const keys = ['code', 'name', 'parent', 'action']
|
||||
|
||||
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
// Components
|
||||
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
|
||||
|
||||
// Types
|
||||
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
||||
|
||||
// Configs
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
<PubMyUiDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
|
||||
Reference in New Issue
Block a user