Khafid Prayoga
d78ad28607
feat(patient): add disability field and centralize disability codes Move disability options to constants file and implement in both select component and patient preview feat(patient-preview): add document section with skeleton loading Add a new "Dokumen" section to the patient preview component that displays skeleton placeholders for KTP and KK documents. This improves the UI by showing loading states for document previews.
78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import Select from '~/components/pub/my-ui/form/select.vue'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
|
|
import { disabilityCodes } from '~/lib/constants'
|
|
import { mapToComboboxOptList } from '~/lib/utils'
|
|
|
|
const props = defineProps<{
|
|
fieldName?: string
|
|
label?: string
|
|
isDisabled?: boolean
|
|
isRequired?: boolean
|
|
placeholder?: string
|
|
errors?: FormErrors
|
|
class?: string
|
|
selectClass?: string
|
|
fieldGroupClass?: string
|
|
}>()
|
|
|
|
const {
|
|
fieldName = 'disabilityType',
|
|
placeholder = 'Pilih jenis disabilitas',
|
|
errors,
|
|
class: containerClass,
|
|
selectClass,
|
|
fieldGroupClass,
|
|
} = props
|
|
|
|
const disabilityOptions = mapToComboboxOptList(disabilityCodes).map(({ label, value }) => ({
|
|
label,
|
|
value,
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
|
|
<DE.Label
|
|
label-for="fieldName"
|
|
:is-required="isRequired"
|
|
>
|
|
{{ 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"
|
|
:is-disabled="isDisabled"
|
|
v-bind="componentField"
|
|
:items="disabilityOptions"
|
|
:placeholder="placeholder"
|
|
:preserve-order="false"
|
|
: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>
|