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

eveai_chat_client/static/js/components/FormMessage.js

@@ -0,0 +1,59 @@
+// static/js/components/FormMessage.js
+
+export const FormMessage = {
+    name: 'FormMessage',
+    props: {
+        formData: {
+            type: Object,
+            required: true
+        },
+        formValues: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        hasFormData() {
+            return this.formData && this.formData.fields && Object.keys(this.formData.fields).length > 0;
+        },
+        formattedFields() {
+            if (!this.hasFormData) return [];
+
+            return Object.entries(this.formData.fields).map(([fieldId, field]) => {
+                let displayValue = this.formValues[fieldId] || '';
+
+                // Format different field types
+                if (field.type === 'boolean') {
+                    displayValue = displayValue ? 'Ja' : 'Nee';
+                } else if (field.type === 'enum' && !displayValue && field.default) {
+                    displayValue = field.default;
+                } else if (field.type === 'text') {
+                    // Voor tekstgebieden, behoud witruimte
+                    // De CSS zal dit tonen met white-space: pre-wrap
+                }
+
+                return {
+                    id: fieldId,
+                    name: field.name,
+                    value: displayValue || '-',
+                    type: field.type
+                };
+            });
+        }
+    },
+    template: `
+        <div v-if="hasFormData" class="form-message">
+            <div v-if="formData.name" class="form-message-header">
+                <i v-if="formData.icon" class="material-icons form-message-icon">{{ formData.icon }}</i>
+                <span class="form-message-title">{{ formData.name }}</span>
+            </div>
+
+            <div class="form-message-fields">
+                <div v-for="field in formattedFields" :key="field.id" class="form-message-field">
+                    <div class="field-message-label">{{ field.name }}:</div>
+                    <div class="field-message-value" :class="{'text-value': field.type === 'text'}">{{ field.value }}</div>
+                </div>
+            </div>
+        </div>
+    `
+};