234 lines
10 KiB
JavaScript
234 lines
10 KiB
JavaScript
export const FormField = {
|
|
name: 'FormField',
|
|
// Static method for direct rendering
|
|
renderComponent(container, props, app) {
|
|
console.log('🔍 [DEBUG] FormField.renderComponent() aangeroepen');
|
|
|
|
if (!container) {
|
|
console.error('Container element niet gevonden voor FormField');
|
|
return null;
|
|
}
|
|
|
|
console.log('🔍 [DEBUG] FormField container gevonden, Vue app aanmaken');
|
|
|
|
try {
|
|
// Maak een nieuwe Vue app instantie met dit component
|
|
const instance = app.mount(container);
|
|
console.log('🔍 [DEBUG] FormField component succesvol gemount');
|
|
return instance;
|
|
} catch (error) {
|
|
console.error('🚨 [ERROR] Fout bij mounten FormField component:', error);
|
|
return null;
|
|
}
|
|
},
|
|
props: {
|
|
field: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (field) => {
|
|
return field.name && field.type;
|
|
}
|
|
},
|
|
fieldId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
modelValue: {
|
|
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) {
|
|
// Voorkom emit als de waarde niet is veranderd
|
|
if (JSON.stringify(value) !== JSON.stringify(this.modelValue)) {
|
|
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',
|
|
'options': 'radio',
|
|
'boolean': 'checkbox'
|
|
};
|
|
return typeMap[this.field.type] || this.field.type;
|
|
},
|
|
stepValue() {
|
|
return this.field.type === 'float' ? 'any' : 1;
|
|
},
|
|
description() {
|
|
return this.field.description || '';
|
|
}
|
|
},
|
|
methods: {
|
|
handleFileUpload(event) {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
this.value = file;
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<div class="form-field" style="margin-bottom: 15px; display: grid; grid-template-columns: 35% 65%; align-items: center;">
|
|
<!-- Label voor alle velden behalve boolean/checkbox die een speciale behandeling krijgen -->
|
|
<label v-if="fieldType !== 'checkbox'" :for="fieldId" style="margin-right: 10px; font-weight: 500;">
|
|
{{ field.name }}
|
|
<span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
|
|
</label>
|
|
|
|
<!-- 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'"
|
|
:id="fieldId"
|
|
type="text"
|
|
v-model="value"
|
|
:required="field.required"
|
|
:placeholder="field.placeholder || ''"
|
|
:title="description"
|
|
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
|
|
>
|
|
|
|
<!-- Numerieke invoer (int/float) -->
|
|
<input
|
|
v-if="fieldType === 'number'"
|
|
:id="fieldId"
|
|
type="number"
|
|
v-model.number="value"
|
|
:required="field.required"
|
|
:step="stepValue"
|
|
:placeholder="field.placeholder || ''"
|
|
:title="description"
|
|
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
|
|
>
|
|
|
|
<!-- Tekstvlak (text) -->
|
|
<textarea
|
|
v-if="fieldType === 'textarea'"
|
|
:id="fieldId"
|
|
v-model="value"
|
|
:required="field.required"
|
|
:rows="field.rows || 3"
|
|
:placeholder="field.placeholder || ''"
|
|
:title="description"
|
|
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; resize: vertical; box-sizing: border-box;"
|
|
></textarea>
|
|
|
|
<!-- Dropdown (enum) -->
|
|
<select
|
|
v-if="fieldType === 'select'"
|
|
:id="fieldId"
|
|
v-model="value"
|
|
:required="field.required"
|
|
:title="description"
|
|
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; background-color: white; box-sizing: border-box;"
|
|
>
|
|
<option v-if="!field.required" value="">Selecteer een optie</option>
|
|
<option
|
|
v-for="option in (field.allowedValues || field.allowed_values || [])"
|
|
:key="option"
|
|
:value="option"
|
|
>
|
|
{{ 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)"
|
|
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;">
|
|
<!-- 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"
|
|
type="checkbox"
|
|
v-model="value"
|
|
:required="field.required"
|
|
:title="description"
|
|
style="opacity: 0; width: 0; height: 0;"
|
|
>
|
|
<span
|
|
class="toggle-slider"
|
|
style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px;"
|
|
:style="{ backgroundColor: value ? '#4CAF50' : '#ccc' }"
|
|
@click="value = !value"
|
|
>
|
|
<span
|
|
class="toggle-knob"
|
|
style="position: absolute; content: ''; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%;"
|
|
:style="{ transform: value ? 'translateX(26px)' : 'translateX(0)' }"
|
|
></span>
|
|
</span>
|
|
</div>
|
|
<label :for="fieldId" class="checkbox-label" style="margin-left: 10px; cursor: pointer;">
|
|
{{ field.name }}
|
|
<span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
|
|
<span class="checkbox-description" style="display: block; font-size: 0.85em; color: #666;">
|
|
{{ field.description || '' }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}; |