407 lines
16 KiB
HTML
407 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Boolean Field Fix</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.test-result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.form-values {
|
|
background-color: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-top: 10px;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>Test Boolean Field Fix</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 1: Basic Boolean Field</h2>
|
|
<p>Test dat een niet-aangevinkte checkbox false retourneert in plaats van een lege string.</p>
|
|
|
|
<dynamic-form
|
|
:form-data="testForm1"
|
|
:form-values="formValues1"
|
|
@update:form-values="formValues1 = $event"
|
|
@submit="handleSubmit1"
|
|
@cancel="handleCancel"
|
|
/>
|
|
|
|
<div class="form-values">
|
|
<strong>Huidige waarden:</strong><br>
|
|
{{ JSON.stringify(formValues1, null, 2) }}
|
|
</div>
|
|
|
|
<div v-if="submitResult1" class="test-result" :class="submitResult1.success ? 'success' : 'error'">
|
|
{{ submitResult1.message }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 2: Required Boolean Field</h2>
|
|
<p>Test dat required boolean velden correct valideren (false is een geldige waarde).</p>
|
|
|
|
<dynamic-form
|
|
:form-data="testForm2"
|
|
:form-values="formValues2"
|
|
@update:form-values="formValues2 = $event"
|
|
@submit="handleSubmit2"
|
|
@cancel="handleCancel"
|
|
/>
|
|
|
|
<div class="form-values">
|
|
<strong>Huidige waarden:</strong><br>
|
|
{{ JSON.stringify(formValues2, null, 2) }}
|
|
</div>
|
|
|
|
<div v-if="submitResult2" class="test-result" :class="submitResult2.success ? 'success' : 'error'">
|
|
{{ submitResult2.message }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 3: Mixed Form with Boolean and Other Fields</h2>
|
|
<p>Test een formulier met zowel boolean als andere veldtypen.</p>
|
|
|
|
<dynamic-form
|
|
:form-data="testForm3"
|
|
:form-values="formValues3"
|
|
@update:form-values="formValues3 = $event"
|
|
@submit="handleSubmit3"
|
|
@cancel="handleCancel"
|
|
/>
|
|
|
|
<div class="form-values">
|
|
<strong>Huidige waarden:</strong><br>
|
|
{{ JSON.stringify(formValues3, null, 2) }}
|
|
</div>
|
|
|
|
<div v-if="submitResult3" class="test-result" :class="submitResult3.success ? 'success' : 'error'">
|
|
{{ submitResult3.message }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import components (in real scenario these would be imported from actual files)
|
|
// For this test, we'll create mock components that simulate the behavior
|
|
|
|
const FormField = {
|
|
name: 'FormField',
|
|
props: {
|
|
field: { type: Object, required: true },
|
|
fieldId: { type: String, required: true },
|
|
modelValue: { default: null }
|
|
},
|
|
emits: ['update:modelValue'],
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
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) {
|
|
// Type conversie voor boolean velden
|
|
let processedValue = value;
|
|
if (this.field.type === 'boolean') {
|
|
processedValue = Boolean(value);
|
|
}
|
|
|
|
if (JSON.stringify(processedValue) !== JSON.stringify(this.modelValue)) {
|
|
this.$emit('update:modelValue', processedValue);
|
|
}
|
|
}
|
|
},
|
|
fieldType() {
|
|
const typeMap = {
|
|
'boolean': 'checkbox',
|
|
'string': 'text',
|
|
'str': 'text'
|
|
};
|
|
return typeMap[this.field.type] || this.field.type;
|
|
}
|
|
},
|
|
template: `
|
|
<div class="form-field" style="margin-bottom: 15px;">
|
|
<label v-if="fieldType !== 'checkbox'" :for="fieldId">
|
|
{{ field.name }}
|
|
<span v-if="field.required" style="color: red;">*</span>
|
|
</label>
|
|
|
|
<input v-if="fieldType === 'text'"
|
|
:id="fieldId"
|
|
type="text"
|
|
v-model="value"
|
|
:required="field.required"
|
|
style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
|
|
|
<div v-if="fieldType === 'checkbox'" style="display: flex; align-items: center;">
|
|
<label style="display: flex; align-items: center; cursor: pointer;">
|
|
<input type="checkbox"
|
|
:id="fieldId"
|
|
v-model="value"
|
|
:required="field.required"
|
|
style="margin-right: 8px;">
|
|
<span>{{ field.name }}</span>
|
|
<span v-if="field.required" style="color: red; margin-left: 2px;">*</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
const DynamicForm = {
|
|
name: 'DynamicForm',
|
|
components: { 'form-field': FormField },
|
|
props: {
|
|
formData: { type: Object, required: true },
|
|
formValues: { type: Object, default: () => ({}) }
|
|
},
|
|
emits: ['submit', 'cancel', 'update:formValues'],
|
|
data() {
|
|
return {
|
|
localFormValues: { ...this.formValues }
|
|
};
|
|
},
|
|
computed: {
|
|
isFormValid() {
|
|
const missingFields = [];
|
|
|
|
this.formData.fields.forEach(field => {
|
|
const fieldId = field.id || field.name;
|
|
if (field.required) {
|
|
const value = this.localFormValues[fieldId];
|
|
if (field.type === 'boolean') {
|
|
if (typeof value !== 'boolean') {
|
|
missingFields.push(field.name);
|
|
}
|
|
} else {
|
|
if (value === undefined || value === null ||
|
|
(typeof value === 'string' && !value.trim())) {
|
|
missingFields.push(field.name);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
return missingFields.length === 0;
|
|
}
|
|
},
|
|
watch: {
|
|
formValues: {
|
|
handler(newValues) {
|
|
if (JSON.stringify(newValues) !== JSON.stringify(this.localFormValues)) {
|
|
this.localFormValues = JSON.parse(JSON.stringify(newValues));
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
localFormValues: {
|
|
handler(newValues) {
|
|
if (JSON.stringify(newValues) !== JSON.stringify(this.formValues)) {
|
|
this.$emit('update:formValues', JSON.parse(JSON.stringify(newValues)));
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
updateFieldValue(fieldId, value) {
|
|
const field = this.formData.fields.find(f => (f.id || f.name) === fieldId);
|
|
|
|
let processedValue = value;
|
|
if (field && field.type === 'boolean') {
|
|
processedValue = Boolean(value);
|
|
}
|
|
|
|
this.localFormValues = {
|
|
...this.localFormValues,
|
|
[fieldId]: processedValue
|
|
};
|
|
},
|
|
handleSubmit() {
|
|
this.$emit('submit', this.localFormValues);
|
|
},
|
|
handleCancel() {
|
|
this.$emit('cancel');
|
|
}
|
|
},
|
|
template: `
|
|
<div style="padding: 15px; border: 1px solid #ddd; border-radius: 8px;">
|
|
<h3>{{ formData.title }}</h3>
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<form-field
|
|
v-for="field in formData.fields"
|
|
:key="field.id || field.name"
|
|
:field="field"
|
|
:field-id="field.id || field.name"
|
|
:model-value="localFormValues[field.id || field.name]"
|
|
@update:model-value="updateFieldValue(field.id || field.name, $event)"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="button" @click="handleCancel" style="margin-right: 10px; padding: 8px 16px;">
|
|
Annuleren
|
|
</button>
|
|
<button type="button" @click="handleSubmit" :disabled="!isFormValid"
|
|
style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px;"
|
|
:style="{ opacity: isFormValid ? 1 : 0.5 }">
|
|
Versturen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
components: {
|
|
'dynamic-form': DynamicForm
|
|
},
|
|
data() {
|
|
return {
|
|
// Test 1: Basic boolean field
|
|
testForm1: {
|
|
title: 'Basic Boolean Test',
|
|
fields: [
|
|
{
|
|
name: 'Akkoord',
|
|
type: 'boolean',
|
|
required: false
|
|
}
|
|
]
|
|
},
|
|
formValues1: {},
|
|
submitResult1: null,
|
|
|
|
// Test 2: Required boolean field
|
|
testForm2: {
|
|
title: 'Required Boolean Test',
|
|
fields: [
|
|
{
|
|
name: 'Verplichte Checkbox',
|
|
type: 'boolean',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
formValues2: {},
|
|
submitResult2: null,
|
|
|
|
// Test 3: Mixed form
|
|
testForm3: {
|
|
title: 'Mixed Form Test',
|
|
fields: [
|
|
{
|
|
name: 'Naam',
|
|
type: 'string',
|
|
required: true
|
|
},
|
|
{
|
|
name: 'Nieuwsbrief',
|
|
type: 'boolean',
|
|
required: false
|
|
},
|
|
{
|
|
name: 'Voorwaarden',
|
|
type: 'boolean',
|
|
required: true
|
|
}
|
|
]
|
|
},
|
|
formValues3: {},
|
|
submitResult3: null
|
|
};
|
|
},
|
|
methods: {
|
|
handleSubmit1(values) {
|
|
const akkoordValue = values['Akkoord'];
|
|
const isBoolean = typeof akkoordValue === 'boolean';
|
|
const isCorrectValue = akkoordValue === false || akkoordValue === true;
|
|
|
|
this.submitResult1 = {
|
|
success: isBoolean && isCorrectValue,
|
|
message: isBoolean && isCorrectValue
|
|
? `✅ SUCCESS: Boolean field retourneert correct ${akkoordValue} (type: ${typeof akkoordValue})`
|
|
: `❌ FAILED: Boolean field retourneert ${akkoordValue} (type: ${typeof akkoordValue})`
|
|
};
|
|
},
|
|
|
|
handleSubmit2(values) {
|
|
const checkboxValue = values['Verplichte Checkbox'];
|
|
const isBoolean = typeof checkboxValue === 'boolean';
|
|
|
|
this.submitResult2 = {
|
|
success: isBoolean,
|
|
message: isBoolean
|
|
? `✅ SUCCESS: Required boolean field retourneert correct ${checkboxValue} (type: ${typeof checkboxValue})`
|
|
: `❌ FAILED: Required boolean field retourneert ${checkboxValue} (type: ${typeof checkboxValue})`
|
|
};
|
|
},
|
|
|
|
handleSubmit3(values) {
|
|
const naam = values['Naam'];
|
|
const nieuwsbrief = values['Nieuwsbrief'];
|
|
const voorwaarden = values['Voorwaarden'];
|
|
|
|
const naamOk = typeof naam === 'string' && naam.length > 0;
|
|
const nieuwsbriefOk = typeof nieuwsbrief === 'boolean';
|
|
const voorwaardenOk = typeof voorwaarden === 'boolean';
|
|
|
|
const allOk = naamOk && nieuwsbriefOk && voorwaardenOk;
|
|
|
|
this.submitResult3 = {
|
|
success: allOk,
|
|
message: allOk
|
|
? `✅ SUCCESS: Alle velden correct - Naam: "${naam}", Nieuwsbrief: ${nieuwsbrief}, Voorwaarden: ${voorwaarden}`
|
|
: `❌ FAILED: Problemen met velden - Naam: ${naam} (${typeof naam}), Nieuwsbrief: ${nieuwsbrief} (${typeof nieuwsbrief}), Voorwaarden: ${voorwaarden} (${typeof voorwaarden})`
|
|
};
|
|
},
|
|
|
|
handleCancel() {
|
|
console.log('Form cancelled');
|
|
}
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |