feat(medical-action-src): add type code selection with strict typing
- Add medicalActionTypeCode constants and type definition - Update MedicalActionSrc interface to use strict type for type_code - Implement select dropdown for type code in entry form - Enable type code validation in schema
This commit is contained in:
@@ -5,14 +5,17 @@ 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 Select from '~/components/pub/my-ui/form/select.vue'
|
||||
|
||||
// Types
|
||||
import type { MedicalActionSrcFormData } from '~/schemas/medical-action-src.schema'
|
||||
import { medicalActionTypeCode } from '~/lib/constants'
|
||||
|
||||
// Helpers
|
||||
import type z from 'zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface Props {
|
||||
schema: z.ZodSchema<any>
|
||||
@@ -24,6 +27,8 @@ interface Props {
|
||||
const props = defineProps<Props>()
|
||||
const isLoading = props.isLoading !== undefined ? props.isLoading : false
|
||||
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
|
||||
const medicalActionTypeOptions = mapToComboboxOptList(medicalActionTypeCode)
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: MedicalActionSrcFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
@@ -34,26 +39,31 @@ const { defineField, errors, meta } = useForm({
|
||||
initialValues: {
|
||||
code: '',
|
||||
name: '',
|
||||
type_code: '',
|
||||
} as Partial<MedicalActionSrcFormData>,
|
||||
})
|
||||
|
||||
const [code, codeAttrs] = defineField('code')
|
||||
const [name, nameAttrs] = defineField('name')
|
||||
const [typeCode, typeCodeAttrs] = defineField('type_code')
|
||||
|
||||
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.type_code !== undefined) typeCode.value = props.values.type_code
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
code.value = ''
|
||||
name.value = ''
|
||||
typeCode.value = ''
|
||||
}
|
||||
|
||||
function onSubmitForm() {
|
||||
const formData: MedicalActionSrcFormData = {
|
||||
code: code.value || '',
|
||||
name: name.value || '',
|
||||
type_code: typeCode.value || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
@@ -95,6 +105,21 @@ function onCancelForm() {
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
<Cell>
|
||||
<Label height="compact">Type Kode</Label>
|
||||
<Field :errMessage="errors.name">
|
||||
<Select
|
||||
id="type_code"
|
||||
:is-disabled="isLoading || isReadonly"
|
||||
:items="medicalActionTypeOptions"
|
||||
v-bind="typeCodeAttrs"
|
||||
v-model="typeCode"
|
||||
placeholder="Pilih medical action type"
|
||||
:preserve-order="false"
|
||||
class="text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0"
|
||||
/>
|
||||
</Field>
|
||||
</Cell>
|
||||
</Block>
|
||||
<div class="my-2 flex justify-end gap-2 py-2">
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user