- Verbeterde versie Selectie Specialist - voor demo (1.2)
This commit is contained in:
@@ -509,7 +509,8 @@ export const ChatApp = {
|
||||
description: fieldDef.description || '',
|
||||
required: fieldDef.required || false,
|
||||
default: fieldDef.default || '',
|
||||
allowedValues: fieldDef.allowed_values || null
|
||||
allowedValues: fieldDef.allowed_values || null,
|
||||
context: fieldDef.context || null
|
||||
}));
|
||||
} else if (Array.isArray(formRequest.fields)) {
|
||||
// Als het al een array is, zorg dat alle velden correct zijn
|
||||
@@ -520,7 +521,8 @@ export const ChatApp = {
|
||||
description: field.description || '',
|
||||
required: field.required || false,
|
||||
default: field.default || field.defaultValue || '',
|
||||
allowedValues: field.allowed_values || field.allowedValues || null
|
||||
allowedValues: field.allowed_values || field.allowedValues || null,
|
||||
context: field.context || null
|
||||
}));
|
||||
} else {
|
||||
// Fallback naar lege array als er geen velden zijn
|
||||
|
||||
@@ -160,6 +160,9 @@ export const DynamicForm = {
|
||||
<template v-if="field.type === 'enum' && (field.allowedValues || field.allowed_values)">
|
||||
{{ localFormValues[field.id || field.name] || field.default || '-' }}
|
||||
</template>
|
||||
<template v-else-if="field.type === 'options' && (field.allowedValues || field.allowed_values)">
|
||||
{{ localFormValues[field.id || field.name] || field.default || '-' }}
|
||||
</template>
|
||||
<template v-else-if="field.type === 'boolean'">
|
||||
{{ localFormValues[field.id || field.name] ? 'Ja' : 'Nee' }}
|
||||
</template>
|
||||
@@ -180,6 +183,9 @@ export const DynamicForm = {
|
||||
<template v-if="field.type === 'enum' && (field.allowedValues || field.allowed_values)">
|
||||
{{ localFormValues[fieldId] || field.default || '-' }}
|
||||
</template>
|
||||
<template v-else-if="field.type === 'options' && (field.allowedValues || field.allowed_values)">
|
||||
{{ localFormValues[fieldId] || field.default || '-' }}
|
||||
</template>
|
||||
<template v-else-if="field.type === 'boolean'">
|
||||
{{ localFormValues[fieldId] ? 'Ja' : 'Nee' }}
|
||||
</template>
|
||||
|
||||
@@ -46,6 +46,7 @@ export const FormField = {
|
||||
'float': 'number',
|
||||
'text': 'textarea',
|
||||
'enum': 'select',
|
||||
'options': 'radio',
|
||||
'boolean': 'checkbox'
|
||||
};
|
||||
return typeMap[this.field.type] || this.field.type;
|
||||
@@ -75,6 +76,10 @@ export const FormField = {
|
||||
|
||||
<!-- Container voor input velden -->
|
||||
<div style="width: 100%;">
|
||||
<!-- Context informatie indien aanwezig -->
|
||||
<div v-if="field.context" class="field-context" style="margin-bottom: 8px; font-size: 0.9em; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #4285f4;">
|
||||
{{ field.context }}
|
||||
</div>
|
||||
<!-- Tekstinvoer (string/str) -->
|
||||
<input
|
||||
v-if="fieldType === 'text'"
|
||||
@@ -135,10 +140,43 @@ export const FormField = {
|
||||
style="color: #d93025; font-size: 0.85em; margin-top: 4px;">
|
||||
Geen opties beschikbaar voor dit veld.
|
||||
</div>
|
||||
|
||||
<!-- Radio buttons (options) -->
|
||||
<div v-if="fieldType === 'radio'" class="radio-options">
|
||||
<div v-for="option in (field.allowedValues || field.allowed_values || [])"
|
||||
:key="option"
|
||||
class="radio-option"
|
||||
style="margin-bottom: 8px;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input
|
||||
type="radio"
|
||||
:id="fieldId + '_' + option"
|
||||
:name="fieldId"
|
||||
:value="option"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
<label :for="fieldId + '_' + option" style="cursor: pointer; margin-bottom: 0;">
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Debug info voor radio options -->
|
||||
<div v-if="!(field.allowedValues || field.allowed_values) || (field.allowedValues || field.allowed_values).length === 0"
|
||||
style="color: #d93025; font-size: 0.85em; margin-top: 4px;">
|
||||
Geen opties beschikbaar voor dit veld.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle switch voor boolean velden, met speciale layout voor deze velden -->
|
||||
<div v-if="fieldType === 'checkbox'" style="grid-column: 1 / span 2; display: flex; align-items: center;">
|
||||
<div v-if="fieldType === 'checkbox'" style="grid-column: 1 / span 2;">
|
||||
<!-- Context informatie indien aanwezig -->
|
||||
<div v-if="field.context" class="field-context" style="margin-bottom: 8px; font-size: 0.9em; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #4285f4;">
|
||||
{{ field.context }}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="toggle-switch" style="position: relative; display: inline-block; width: 50px; height: 24px;">
|
||||
<input
|
||||
:id="fieldId"
|
||||
@@ -168,6 +206,7 @@ export const FormField = {
|
||||
{{ field.description || '' }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
Reference in New Issue
Block a user