tussentijdse status voor significante wijzigingen. Bezig aan creatie Dynamic Form in de chat client.

eveai_chat_client/static/js/components/ChatInput.js

@@ -2,6 +2,9 @@
 
 export const ChatInput = {
     name: 'ChatInput',
+    components: {
+        'dynamic-form': window.__vueApp ? DynamicForm : null
+    },
     props: {
         currentMessage: {
             type: String,
@@ -19,11 +22,38 @@ export const ChatInput = {
             type: Number,
             default: 2000
         },
+        formData: {
+            type: Object,
+            default: null
+        },
+    },
+    emits: ['send-message', 'update-message', 'submit-form'],
+    watch: {
+        formData: {
+            handler(newFormData) {
+                console.log('ChatInput received formData:', newFormData);
+                if (newFormData) {
+                    this.formValues = {}; // Reset formulierwaarden
+                    this.showForm = true;
+                } else {
+                    this.showForm = false;
+                }
+            },
+            immediate: true
+        },
+        currentMessage(newVal) {
+            this.localMessage = newVal;
+        },
+        localMessage(newVal) {
+            this.$emit('update-message', newVal);
+            this.autoResize();
+        }
     },
-    emits: ['send-message', 'update-message'],
     data() {
         return {
             localMessage: this.currentMessage,
+            formValues: {},
+            showForm: false
         };
     },
     computed: {
@@ -35,19 +65,21 @@ export const ChatInput = {
             return this.characterCount > this.maxLength;
         },
 
-        canSend() {
-            return this.localMessage.trim() &&
-                   !this.isLoading &&
-                   !this.isOverLimit;
-        }
-    },
-    watch: {
-        currentMessage(newVal) {
-            this.localMessage = newVal;
+        hasFormData() {
+            return this.formData && this.formData.fields && 
+                  ((Array.isArray(this.formData.fields) && this.formData.fields.length > 0) ||
+                   (typeof this.formData.fields === 'object' && Object.keys(this.formData.fields).length > 0));
         },
-        localMessage(newVal) {
-            this.$emit('update-message', newVal);
-            this.autoResize();
+
+        canSend() {
+            const hasValidForm = this.showForm && this.formData && this.validateForm();
+            const hasValidMessage = this.localMessage.trim() && !this.isOverLimit;
+
+            return (!this.isLoading) && (hasValidForm || hasValidMessage);
+        },
+
+        sendButtonText() {
+            return this.showForm ? 'Verstuur formulier' : 'Verstuur bericht';
         }
     },
     mounted() {
@@ -64,11 +96,51 @@ export const ChatInput = {
         },
 
         sendMessage() {
-            if (this.canSend) {
+            if (!this.canSend) return;
+
+            if (this.showForm && this.formData) {
+                // Valideer het formulier
+                if (this.validateForm()) {
+                    // Verstuur het formulier
+                    this.$emit('submit-form', this.formValues);
+                    this.formValues = {};
+                    // Reset het formulier na verzenden
+                    this.showForm = false;
+                }
+            } else if (this.localMessage.trim()) {
+                // Verstuur normaal bericht
                 this.$emit('send-message');
             }
         },
 
+        validateForm() {
+            if (!this.formData || !this.formData.fields) return false;
+
+            // Controleer of alle verplichte velden zijn ingevuld
+            let missingFields = [];
+
+            if (Array.isArray(this.formData.fields)) {
+                missingFields = this.formData.fields.filter(field => {
+                    if (!field.required) return false;
+                    const fieldId = field.id || field.name;
+                    const value = this.formValues[fieldId];
+                    return value === undefined || value === null || (typeof value === 'string' && !value.trim());
+                });
+            } else {
+                // Voor object-gebaseerde velden
+                Object.entries(this.formData.fields).forEach(([fieldId, field]) => {
+                    if (field.required) {
+                        const value = this.formValues[fieldId];
+                        if (value === undefined || value === null || (typeof value === 'string' && !value.trim())) {
+                            missingFields.push(field);
+                        }
+                    }
+                });
+            }
+
+            return missingFields.length === 0;
+        },
+
         autoResize() {
             this.$nextTick(() => {
                 const textarea = this.$refs.messageInput;
@@ -86,10 +158,44 @@ export const ChatInput = {
         clearInput() {
             this.localMessage = '';
             this.focusInput();
+        },
+
+        toggleForm() {
+            this.showForm = !this.showForm;
+            if (!this.showForm) {
+                this.focusInput();
+            }
+        },
+
+        submitForm() {
+            if (this.canSubmitForm) {
+                this.$emit('submit-form', { ...this.formValues });
+                this.showForm = false;
+                this.focusInput();
+            }
+        },
+
+        cancelForm() {
+            this.showForm = false;
+            this.focusInput();
+        },
+
+        updateFormValues(newValues) {
+            this.formValues = { ...newValues };
         }
     },
     template: `
         <div class="chat-input-container">
+            <div v-if="formData && showForm" class="dynamic-form-container">
+                <dynamic-form
+                    :form-data="formData"
+                    :form-values="formValues"
+                    :is-submitting="isLoading"
+                    :hide-actions="true"
+                    @update:form-values="updateFormValues"
+                ></dynamic-form>
+            </div>
+
             <div class="chat-input">
                 <!-- Main input area -->
                 <div class="input-main">
@@ -104,21 +210,34 @@ export const ChatInput = {
                         class="message-input"
                         :class="{ 'over-limit': isOverLimit }"
                     ></textarea>
-                    
+
                     <!-- Character counter -->
                     <div v-if="maxLength" class="character-counter" :class="{ 'over-limit': isOverLimit }">
                         {{ characterCount }}/{{ maxLength }}
                     </div>
                 </div>
-                
+
                 <!-- Input actions -->
                 <div class="input-actions">
+                    <!-- Formulier toggle knop -->
+                    <button 
+                        v-if="hasFormData"
+                        @click="toggleForm"
+                        class="form-toggle-btn"
+                        :disabled="isLoading"
+                        :class="{ 'active': showForm }"
+                        :title="showForm ? 'Verberg formulier' : 'Toon formulier'"
+                    >
+                        <i class="material-icons">description</i>
+                    </button>
+
                     <!-- Send button -->
                     <button 
                         @click="sendMessage"
                         class="send-btn"
+                        :class="{ 'form-mode': showForm && formData }"
                         :disabled="!canSend"
-                        :title="isOverLimit ? 'Bericht te lang' : 'Bericht verzenden'"
+                        :title="showForm ? 'Verstuur formulier' : 'Verstuur bericht'"
                     >
                         <span v-if="isLoading" class="loading-spinner">⏳</span>
                         <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="currentColor">