pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eerste goed werkende versie van een formulier in de chat input.

Browse Source
This commit is contained in:
Josako
2025-06-13 17:27:49 +02:00
parent f1c60f9574
commit 2835486599
9 changed files with 547 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
eveai_chat_client/static/js/components/DynamicForm.js
View File

@@ -1,12 +1,42 @@
export const DynamicForm = {
name: 'DynamicForm',
created() {
// Zorg ervoor dat het icoon geladen wordt als iconManager beschikbaar is
if (window.iconManager && this.formData && this.formData.icon) {
window.iconManager.loadIcon(this.formData.icon);
}
},
props: {
formData: {
type: Object,
required: true,
validator: (formData) => {
return formData && formData.title && formData.fields &&
(Array.isArray(formData.fields) || typeof formData.fields === 'object');
// Controleer eerst of formData een geldig object is
if (!formData || typeof formData !== 'object') {
console.error('FormData is niet een geldig object');
return false;
}
// Controleer of er een titel of naam is
if (!formData.title && !formData.name) {
console.error('FormData heeft geen title of name');
return false;
}
// Controleer of er velden zijn
if (!formData.fields) {
console.error('FormData heeft geen fields eigenschap');
return false;
}
// Controleer of velden een array of object zijn
if (!Array.isArray(formData.fields) && typeof formData.fields !== 'object') {
console.error('FormData.fields is geen array of object');
return false;
}
console.log('FormData is geldig:', formData);
return true;
}
},
formValues: {
@@ -44,6 +74,14 @@ export const DynamicForm = {
this.$emit('update:formValues', newValues);
},
deep: true
},
'formData.icon': {
handler(newIcon) {
if (newIcon && window.iconManager) {
window.iconManager.loadIcon(newIcon);
}
},
immediate: true
}
},
methods: {
@@ -97,11 +135,14 @@ export const DynamicForm = {
},
template: `
<div class="dynamic-form" :class="{ 'read-only': readOnly }">
<div class="form-header" v-if="formData.title || formData.icon">
<div class="form-icon" v-if="formData.icon">
<i class="material-icons">{{ formData.icon }}</i>
<div class="form-header" v-if="formData.title || formData.name || formData.icon" style="margin-bottom: 20px; display: flex; align-items: center;">
<div class="form-icon" v-if="formData.icon" style="margin-right: 10px; display: flex; align-items: center;">
<span class="material-symbols-outlined" style="font-size: 24px; color: #4285f4;">{{ formData.icon }}</span>
</div>
<div>
<div class="form-title" style="font-weight: bold; font-size: 1.2em; color: #333;">{{ formData.title || formData.name }}</div>
<div v-if="formData.description" class="form-description" style="margin-top: 5px; color: #666; font-size: 0.9em;">{{ formData.description }}</div>
</div>
<div class="form-title">{{ formData.title }}</div>
</div>
<div v-if="readOnly" class="form-readonly">
@@ -148,7 +189,7 @@ export const DynamicForm = {
</div>
<form v-else @submit.prevent="handleSubmit" novalidate>
<div class="form-fields">
<div class="form-fields" style="margin-top: 10px;">
<template v-if="Array.isArray(formData.fields)">
<form-field
v-for="field in formData.fields"