- Adapting TRAICIE_SELECTION_SPECIALIST to retrieve prefered contact times using a form iso free text
- Improvement of DynamicForm en FormField to handle boolean values.
This commit is contained in:
Josako
407
test_boolean_field_fix.html
Normal file
407
test_boolean_field_fix.html
Normal file
@@ -0,0 +1,407 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user