- Eerste stap in het opnieuw laten werken van de chat client...

eveai_chat_client/static/assets/js/iconManager.js

@@ -88,48 +88,43 @@ window.iconManager = {
     }
 };
 
-// Functie om iconManager toe te voegen aan het DynamicForm component
-function initDynamicFormWithIcons() {
-    if (window.DynamicForm) {
-        const originalCreated = window.DynamicForm.created || function() {};
+// Export de iconManager functie om te gebruiken in Vue componenten
+// Dit vervangt de complexe injectie in het DynamicForm component
+export { iconManager as default };
 
-        window.DynamicForm.created = function() {
-            // Roep de oorspronkelijke created methode aan als die bestond
-            originalCreated.call(this);
+// We exporteren iconManager als default, maar houden ook de window.iconManager beschikbaar
+// voor backwards compatibility met bestaande code
 
-            // Laad het icoon als het beschikbaar is
-            if (this.formData && this.formData.icon) {
-                window.iconManager.loadIcon(this.formData.icon);
-            }
-        };
-
-        // Voeg watcher toe voor formData.icon
-        if (!window.DynamicForm.watch) {
-            window.DynamicForm.watch = {};
+// Maak een Vue mixin die iconManager toevoegt aan elk component dat het nodig heeft
+export const IconManagerMixin = {
+    created() {
+        // Check of er een formData.icon property is
+        if (this.formData && this.formData.icon) {
+            window.iconManager.loadIcon(this.formData.icon);
         }
+    },
 
-        window.DynamicForm.watch['formData.icon'] = {
-            handler: function(newIcon) {
-                if (newIcon) {
-                    window.iconManager.loadIcon(newIcon);
-                }
-            },
-            immediate: true
-        };
+    // Watch voor formData.icon veranderingen
+    watch: {
+        'formData.icon': function(newIcon) {
+            if (newIcon) {
+                window.iconManager.loadIcon(newIcon);
+            }
+        }
+    },
 
-        console.log('DynamicForm is uitgebreid met iconManager functionaliteit');
-    } else {
-        console.warn('DynamicForm component is niet beschikbaar. iconManager kan niet worden toegevoegd.');
+    // Methode om toe te voegen aan componenten
+    methods: {
+        loadIcon(iconName, options) {
+            window.iconManager.loadIcon(iconName, options);
+        },
+
+        loadIcons(iconNames, options) {
+            window.iconManager.loadIcons(iconNames, options);
+        }
     }
-}
+};
 
-// Probeer het DynamicForm component te initialiseren zodra het document geladen is
-document.addEventListener('DOMContentLoaded', function() {
-    // Wacht een korte tijd om er zeker van te zijn dat DynamicForm is geladen
-    setTimeout(initDynamicFormWithIcons, 100);
-});
-
-// Als DynamicForm al beschikbaar is, initialiseer direct
-if (window.DynamicForm) {
-    initDynamicFormWithIcons();
-}
+// We hoeven niet langer DynamicForm te manipuleren
+// omdat Vue componenten nu de IconManagerMixin kunnen gebruiken
+console.log('IconManager en IconManagerMixin zijn beschikbaar voor componenten');