Khafid Prayoga
97d2b76ee3
- Change value format in radio-parents-input from '1'/'0' to 'yes'/'no' - Remove default labels from select-education and select-job components - Update schema to make fields optional and add new fields - Modify family-parents-form to use new schema and improve UI - Update patient form and models to align with schema changes
88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import Select from '~/components/pub/my-ui/form/select.vue'
|
|
import { educationCodes } from '~/lib/constants'
|
|
import { cn, mapToComboboxOptList } from '~/lib/utils'
|
|
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
|
|
const props = defineProps<{
|
|
fieldName?: string
|
|
label?: string
|
|
placeholder?: string
|
|
errors?: FormErrors
|
|
class?: string
|
|
selectClass?: string
|
|
fieldGroupClass?: string
|
|
labelClass?: string
|
|
isRequired?: boolean
|
|
isDisabled?: boolean
|
|
}>()
|
|
|
|
const {
|
|
fieldName = 'education',
|
|
placeholder = 'Pilih pendidikan terakhir',
|
|
errors,
|
|
class: containerClass,
|
|
selectClass,
|
|
fieldGroupClass,
|
|
labelClass,
|
|
} = props
|
|
|
|
const extendOptions = [
|
|
{ label: 'Tidak diketahui', value: 'unknown', priority: 1 },
|
|
{ label: 'Lainnya', value: 'other', priority: -1 },
|
|
]
|
|
|
|
const educationOptions = [
|
|
...mapToComboboxOptList(educationCodes).map(({ label, value }) => ({
|
|
label,
|
|
value,
|
|
})),
|
|
...extendOptions,
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
|
<DE.Label
|
|
v-if="label"
|
|
:label-for="fieldName"
|
|
:class="cn('select-field-label', labelClass)"
|
|
:is-required="isRequired && !isDisabled"
|
|
>
|
|
{{ label }}
|
|
</DE.Label>
|
|
<DE.Field
|
|
:id="fieldName"
|
|
:errors="errors"
|
|
:class="cn('select-field-wrapper')"
|
|
>
|
|
<FormField
|
|
v-slot="{ componentField }"
|
|
:name="fieldName"
|
|
>
|
|
<FormItem>
|
|
<FormControl>
|
|
<Select
|
|
:id="fieldName"
|
|
v-bind="componentField"
|
|
:is-disabled="isDisabled"
|
|
:items="educationOptions"
|
|
:placeholder="placeholder"
|
|
:preserve-order="true"
|
|
:class="
|
|
cn(
|
|
'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
|
|
selectClass,
|
|
)
|
|
"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</DE.Field>
|
|
</DE.Cell>
|
|
</template>
|