107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
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/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 { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
|
import { mapToComboboxOptList } from '~/lib/utils'
|
|
import { Form } from '~/components/pub/ui/form'
|
|
|
|
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>
|
|
<!-- Specialist -->
|
|
<FieldGroup :column="2">
|
|
<Label label-for="specialist_id">Specialist</Label>
|
|
<Field id="specialist_id" :errors="errors">
|
|
<FormField v-slot="{ componentField }" name="specialist_id">
|
|
<FormItem>
|
|
<FormControl>
|
|
<Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
|
|
<!-- Subpecialist -->
|
|
<FieldGroup :column="2">
|
|
<Label label-for="subspecialist_id">Subspecialist</Label>
|
|
<Field id="subspecialist_id" :errors="errors">
|
|
<FormField v-slot="{ componentField }" name="subspecialist_id">
|
|
<FormItem>
|
|
<FormControl>
|
|
<Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</Field>
|
|
</FieldGroup>
|
|
</Block>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</template>
|