tussentijdse status voor significante wijzigingen. Bezig aan creatie Dynamic Form in de chat client.
This commit is contained in:
Josako
@@ -5,22 +5,53 @@ export const FormField = {
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (field) => {
|
||||
return field.name && field.type && field.label;
|
||||
return field.name && field.type;
|
||||
}
|
||||
},
|
||||
fieldId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
default: ''
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
// Gebruik default waarde als modelValue undefined is
|
||||
if (this.modelValue === undefined || this.modelValue === null) {
|
||||
if (this.field.type === 'boolean') {
|
||||
return this.field.default === true;
|
||||
}
|
||||
return this.field.default !== undefined ? this.field.default : '';
|
||||
}
|
||||
return this.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:modelValue', value);
|
||||
}
|
||||
},
|
||||
fieldType() {
|
||||
// Map Python types naar HTML input types
|
||||
const typeMap = {
|
||||
'str': 'text',
|
||||
'string': 'text',
|
||||
'int': 'number',
|
||||
'integer': 'number',
|
||||
'float': 'number',
|
||||
'text': 'textarea',
|
||||
'enum': 'select',
|
||||
'boolean': 'checkbox'
|
||||
};
|
||||
return typeMap[this.field.type] || this.field.type;
|
||||
},
|
||||
stepValue() {
|
||||
return this.field.type === 'float' ? 'any' : 1;
|
||||
},
|
||||
description() {
|
||||
return this.field.description || '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -33,147 +64,83 @@ export const FormField = {
|
||||
},
|
||||
template: `
|
||||
<div class="form-field">
|
||||
<label>
|
||||
{{ field.label }}
|
||||
<label :for="fieldId">
|
||||
{{ field.name }}
|
||||
<span v-if="field.required" class="required">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Text/Email/Tel inputs -->
|
||||
|
||||
<!-- Tekstinvoer (string/str) -->
|
||||
<input
|
||||
v-if="['text', 'email', 'tel', 'url', 'password'].includes(field.type)"
|
||||
:type="field.type"
|
||||
v-if="fieldType === 'text'"
|
||||
:id="fieldId"
|
||||
type="text"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:maxlength="field.maxLength"
|
||||
:minlength="field.minLength"
|
||||
:title="description"
|
||||
>
|
||||
|
||||
<!-- Number input -->
|
||||
|
||||
<!-- Numerieke invoer (int/float) -->
|
||||
<input
|
||||
v-if="field.type === 'number'"
|
||||
v-if="fieldType === 'number'"
|
||||
:id="fieldId"
|
||||
type="number"
|
||||
v-model.number="value"
|
||||
:required="field.required"
|
||||
:min="field.min"
|
||||
:max="field.max"
|
||||
:step="field.step || 1"
|
||||
:step="stepValue"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:title="description"
|
||||
>
|
||||
|
||||
<!-- Date input -->
|
||||
<input
|
||||
v-if="field.type === 'date'"
|
||||
type="date"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:min="field.min"
|
||||
:max="field.max"
|
||||
>
|
||||
|
||||
<!-- Time input -->
|
||||
<input
|
||||
v-if="field.type === 'time'"
|
||||
type="time"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
>
|
||||
|
||||
<!-- File input -->
|
||||
<input
|
||||
v-if="field.type === 'file'"
|
||||
type="file"
|
||||
@change="handleFileUpload"
|
||||
:required="field.required"
|
||||
:accept="field.accept"
|
||||
:multiple="field.multiple"
|
||||
>
|
||||
|
||||
<!-- Select dropdown -->
|
||||
<select
|
||||
v-if="field.type === 'select'"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
>
|
||||
<option value="">{{ field.placeholder || 'Kies een optie' }}</option>
|
||||
<option
|
||||
v-for="option in field.options"
|
||||
:key="option.value || option"
|
||||
:value="option.value || option"
|
||||
>
|
||||
{{ option.label || option }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- Radio buttons -->
|
||||
<div v-if="field.type === 'radio'" class="radio-group">
|
||||
<label
|
||||
v-for="option in field.options"
|
||||
:key="option.value || option"
|
||||
class="radio-label"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:value="option.value || option"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
>
|
||||
<span>{{ option.label || option }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Checkboxes -->
|
||||
<div v-if="field.type === 'checkbox'" class="checkbox-group">
|
||||
<label
|
||||
v-for="option in field.options"
|
||||
:key="option.value || option"
|
||||
class="checkbox-label"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="option.value || option"
|
||||
v-model="value"
|
||||
>
|
||||
<span>{{ option.label || option }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Single checkbox -->
|
||||
<label v-if="field.type === 'single-checkbox'" class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
>
|
||||
<span>{{ field.checkboxText || field.label }}</span>
|
||||
</label>
|
||||
|
||||
<!-- Textarea -->
|
||||
|
||||
<!-- Tekstvlak (text) -->
|
||||
<textarea
|
||||
v-if="field.type === 'textarea'"
|
||||
v-if="fieldType === 'textarea'"
|
||||
:id="fieldId"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:rows="field.rows || 3"
|
||||
:placeholder="field.placeholder || ''"
|
||||
:maxlength="field.maxLength"
|
||||
:title="description"
|
||||
></textarea>
|
||||
|
||||
<!-- Range slider -->
|
||||
<div v-if="field.type === 'range'" class="range-field">
|
||||
<input
|
||||
type="range"
|
||||
v-model.number="value"
|
||||
:min="field.min || 0"
|
||||
:max="field.max || 100"
|
||||
:step="field.step || 1"
|
||||
|
||||
<!-- Dropdown (enum) -->
|
||||
<select
|
||||
v-if="fieldType === 'select'"
|
||||
:id="fieldId"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:title="description"
|
||||
>
|
||||
<option v-if="!field.required" value="">Selecteer een optie</option>
|
||||
<option
|
||||
v-for="option in (field.allowedValues || field.allowed_values || [])"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
<span class="range-value">{{ value }}</span>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
<!-- Debug info voor select field -->
|
||||
<div v-if="fieldType === 'select' && (!(field.allowedValues || field.allowed_values) || (field.allowedValues || field.allowed_values).length === 0)" class="field-error">
|
||||
Geen opties beschikbaar voor dit veld.
|
||||
<pre style="font-size: 10px; color: #999;">{{ JSON.stringify(field, null, 2) }}</pre>
|
||||
</div>
|
||||
|
||||
<!-- Help text -->
|
||||
<small v-if="field.helpText" class="help-text">
|
||||
{{ field.helpText }}
|
||||
</small>
|
||||
|
||||
<!-- Checkbox (boolean) -->
|
||||
<div v-if="fieldType === 'checkbox'" class="checkbox-container">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
:id="fieldId"
|
||||
type="checkbox"
|
||||
v-model="value"
|
||||
:required="field.required"
|
||||
:title="description"
|
||||
>
|
||||
<span class="checkbox-text">{{ field.description || 'Ja' }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Geen beschrijving meer tonen, alleen als tooltip die al gedefinieerd is in de inputs -->
|
||||
</div>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user