feat: registration form field display_width and option descriptions
Add configurable column widths (full/half) and optional descriptions for radio/select/checkbox options on registration form fields. - Migration adds display_width column to both tables - FieldDisplayWidth enum with smart defaults per field type - normalized_options accessor for backwards-compatible option format - Portal form renderer uses display_width for VRow/VCol grid layout - Radio/select/checkbox options render with descriptions - Admin field editor supports display_width toggle and description input - System templates updated with appropriate widths and descriptions Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -8,7 +8,7 @@ import {
|
||||
} from '@/composables/api/useRegistrationFieldTemplates'
|
||||
import { usePersonTagCategories } from '@/composables/api/usePersonTags'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import type { RegistrationFieldTemplate, RegistrationFieldTemplateCreateDTO, RegistrationFieldType } from '@/types/registration-field-template'
|
||||
import type { RegistrationFieldTemplate, RegistrationFieldTemplateCreateDTO, RegistrationFieldType, FieldDisplayWidth } from '@/types/registration-field-template'
|
||||
import { FIELD_TYPE_LABELS, FIELD_TYPES_WITH_OPTIONS } from '@/types/registration-field-template'
|
||||
import type { AxiosError } from 'axios'
|
||||
import type { ApiErrorResponse } from '@/types/auth'
|
||||
@@ -46,10 +46,15 @@ const refVForm = ref<VForm>()
|
||||
const showSuccess = ref(false)
|
||||
const successMessage = ref('')
|
||||
|
||||
interface OptionEntry {
|
||||
label: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const defaultForm = () => ({
|
||||
label: '',
|
||||
field_type: 'text' as string,
|
||||
options: [] as string[],
|
||||
options: [] as OptionEntry[],
|
||||
tag_category: null as string | null,
|
||||
is_required: false,
|
||||
is_filterable: false,
|
||||
@@ -58,6 +63,7 @@ const defaultForm = () => ({
|
||||
section: '',
|
||||
help_text: '',
|
||||
sort_order: 0,
|
||||
display_width: 'full' as FieldDisplayWidth,
|
||||
})
|
||||
|
||||
const form = ref(defaultForm())
|
||||
@@ -90,7 +96,9 @@ function openEditDialog(template: RegistrationFieldTemplate) {
|
||||
form.value = {
|
||||
label: template.label,
|
||||
field_type: template.field_type,
|
||||
options: template.options ? [...template.options] : [],
|
||||
options: template.normalized_options
|
||||
? template.normalized_options.map(o => ({ label: o.label, description: o.description ?? '' }))
|
||||
: [],
|
||||
tag_category: template.tag_category,
|
||||
is_required: template.is_required,
|
||||
is_filterable: template.is_filterable,
|
||||
@@ -99,13 +107,14 @@ function openEditDialog(template: RegistrationFieldTemplate) {
|
||||
section: template.section ?? '',
|
||||
help_text: template.help_text ?? '',
|
||||
sort_order: template.sort_order,
|
||||
display_width: template.display_width ?? 'full',
|
||||
}
|
||||
errors.value = {}
|
||||
isDialogOpen.value = true
|
||||
}
|
||||
|
||||
function addOption() {
|
||||
form.value.options.push('')
|
||||
form.value.options.push({ label: '', description: '' })
|
||||
}
|
||||
|
||||
function removeOption(index: number) {
|
||||
@@ -126,6 +135,7 @@ function onSubmit() {
|
||||
section: form.value.section || null,
|
||||
help_text: form.value.help_text || null,
|
||||
sort_order: form.value.sort_order,
|
||||
display_width: form.value.display_width,
|
||||
}
|
||||
|
||||
if (!editingTemplate.value) {
|
||||
@@ -133,7 +143,12 @@ function onSubmit() {
|
||||
}
|
||||
|
||||
if (showOptions.value) {
|
||||
payload.options = form.value.options.filter(o => o.trim() !== '')
|
||||
payload.options = form.value.options
|
||||
.filter(o => o.label.trim() !== '')
|
||||
.map(o => o.description.trim()
|
||||
? { label: o.label, description: o.description }
|
||||
: { label: o.label },
|
||||
)
|
||||
}
|
||||
else {
|
||||
payload.options = null
|
||||
@@ -414,23 +429,45 @@ function activate(template: RegistrationFieldTemplate) {
|
||||
>
|
||||
<label class="text-body-2 mb-2 d-block">Opties</label>
|
||||
<div
|
||||
v-for="(_, index) in form.options"
|
||||
v-for="(option, index) in form.options"
|
||||
:key="index"
|
||||
class="d-flex align-center gap-x-2 mb-2"
|
||||
class="mb-3"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="form.options[index]"
|
||||
:placeholder="`Optie ${index + 1}`"
|
||||
density="compact"
|
||||
hide-details
|
||||
/>
|
||||
<VBtn
|
||||
icon="tabler-x"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="error"
|
||||
@click="removeOption(index)"
|
||||
/>
|
||||
<VCard
|
||||
variant="outlined"
|
||||
class="pa-3 position-relative"
|
||||
>
|
||||
<VRow dense>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="option.label"
|
||||
:placeholder="`Optie ${index + 1}`"
|
||||
density="compact"
|
||||
hide-details
|
||||
/>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="option.description"
|
||||
label="Beschrijving (optioneel)"
|
||||
density="compact"
|
||||
placeholder="Korte toelichting die onder de optie verschijnt"
|
||||
hint="Max 200 tekens"
|
||||
counter="200"
|
||||
maxlength="200"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
<VBtn
|
||||
icon="tabler-x"
|
||||
variant="text"
|
||||
color="error"
|
||||
size="small"
|
||||
class="position-absolute"
|
||||
style="inset-block-start: 4px; inset-inline-end: 4px"
|
||||
@click="removeOption(index)"
|
||||
/>
|
||||
</VCard>
|
||||
</div>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
@@ -485,6 +522,42 @@ function activate(template: RegistrationFieldTemplate) {
|
||||
:error-messages="errors.sort_order"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<label class="text-body-2 text-medium-emphasis d-block mb-1">
|
||||
Veldbreedte
|
||||
</label>
|
||||
<VBtnToggle
|
||||
v-model="form.display_width"
|
||||
mandatory
|
||||
density="compact"
|
||||
>
|
||||
<VBtn
|
||||
value="full"
|
||||
size="small"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-layout-distribute-horizontal"
|
||||
size="16"
|
||||
class="me-1"
|
||||
/>
|
||||
Volledig
|
||||
</VBtn>
|
||||
<VBtn
|
||||
value="half"
|
||||
size="small"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-layout-columns"
|
||||
size="16"
|
||||
class="me-1"
|
||||
/>
|
||||
Half
|
||||
</VBtn>
|
||||
</VBtnToggle>
|
||||
</VCol>
|
||||
<VCol cols="12">
|
||||
<AppTextarea
|
||||
v-model="form.help_text"
|
||||
|
||||
Reference in New Issue
Block a user