- Specialist Editor Change (all components in same overview), modal editors to allow for more complex configuration of Agents, Tasks and Tools

- Strengthening dynamic forms

eveai_app/templates/eveai_list_view.html

@@ -16,7 +16,7 @@
         <div class="{% if right_actions %}col{% else %}col-12{% endif %}">
             {% for action in actions if action.position != 'right' %}
                 <button type="button" 
-                        onclick="handleListViewAction('{{ action.value }}', {{ action.requiresSelection|tojson }})"
+                        onclick="handleListViewAction('{{ action.value }}', {{ action.requiresSelection|tojson }}, event)"
                         class="btn {{ action.class|default('btn-primary') }} me-2 {% if action.requiresSelection %}requires-selection{% endif %}"
                         {% if action.requiresSelection %}disabled{% endif %}>
                     {{ action.text }}
@@ -27,7 +27,7 @@
         <div class="col-auto text-end">
             {% for action in actions if action.position == 'right' %}
                 <button type="button" 
-                        onclick="handleListViewAction('{{ action.value }}', {{ action.requiresSelection|tojson }})"
+                        onclick="handleListViewAction('{{ action.value }}', {{ action.requiresSelection|tojson }}, event)"
                         class="btn {{ action.class|default('btn-primary') }} ms-2 {% if action.requiresSelection %}requires-selection{% endif %}"
                         {% if action.requiresSelection %}disabled{% endif %}>
                     {{ action.text }}
@@ -59,7 +59,7 @@ document.addEventListener('DOMContentLoaded', function() {
             button.disabled = true;
             button.classList.add('disabled');
         }
-    });
+    })
 
     // Voeg de benodigde functies toe als ze nog niet bestaan
     if (!window.EveAI.ListView.initialize) {
@@ -96,6 +96,21 @@ document.addEventListener('DOMContentLoaded', function() {
                 return null;
             }
 
+            // Register embedded handlers registry and custom formatters if not present
+            window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
+            window.EveAI.ListView.formatters = window.EveAI.ListView.formatters || {};
+            // Custom formatter: typeBadge (agent/task/tool)
+            window.EveAI.ListView.formatters.typeBadge = function(cell, formatterParams, onRendered) {
+                const val = (cell.getValue() || '').toString();
+                const map = {
+                    'agent': { cls: 'badge bg-purple', label: 'Agent' },
+                    'task':  { cls: 'badge bg-orange', label: 'Task' },
+                    'tool':  { cls: 'badge bg-teal', label: 'Tool' },
+                };
+                const conf = map[val] || { cls: 'badge bg-secondary', label: val };
+                return `<span class="${conf.cls}">${conf.label}</span>`;
+            };
+
             try {
                 // Create Tabulator table
                 const tableContainer = document.createElement('div');
@@ -296,11 +311,13 @@ document.addEventListener('DOMContentLoaded', function() {
 
                 // Voeg formattering toe volgens de juiste manier per versie
                 if (col.formatter) {
-                    if (isTabulator6Plus) {
-                        column.formatterParams = { formatter: col.formatter };
-                    } else {
-                        column.formatter = col.formatter;
+                    // Resolve custom formatter name from registry when provided as string
+                    let fmt = col.formatter;
+                    if (typeof fmt === 'string' && window.EveAI && window.EveAI.ListView && window.EveAI.ListView.formatters && window.EveAI.ListView.formatters[fmt]) {
+                        fmt = window.EveAI.ListView.formatters[fmt];
                     }
+                    // Apply formatter for both Tabulator 5 and 6
+                    column.formatter = fmt;
                 }
 
                 // Voeg filtering toe volgens de juiste manier per versie
@@ -423,67 +440,62 @@ document.addEventListener('DOMContentLoaded', function() {
     // Definieer de handleListViewAction functie als deze nog niet bestaat
     if (typeof window.handleListViewAction !== 'function') {
         window.handleListViewAction = function(action, requiresSelection, e) {
-            // Gebruik explicit de event parameter om de browser event warning te vermijden
+            // Prefer embedded handler when available (embedded mode)
             const evt = e || window.event;
             const target = evt?.target || evt?.srcElement;
 
-            // Voorkom acties vanuit gedisabled buttons
-            if (target && (target.disabled || target.classList.contains('disabled'))) {
-                console.log('Button actie geblokkeerd: button is disabled');
-                return false;
+            // Determine tableId scoped to the closest container of this partial
+            let tableId = null;
+            if (target) {
+                const containerEl = target.closest('.container');
+                const scopedTable = containerEl ? containerEl.querySelector('.tabulator-list-view') : null;
+                tableId = scopedTable ? scopedTable.id : null;
             }
 
-            // Vind het tableId op basis van het formulier waarin we zitten
-            const form = target ? target.closest('form') : null;
-            const tableId = form ? form.id.replace('-form', '') : document.querySelector('.tabulator-list-view')?.id;
+            if (!tableId) {
+                // fallback to previous behavior
+                const form = target ? target.closest('form') : null;
+                tableId = form ? form.id.replace('-form', '') : document.querySelector('.tabulator-list-view')?.id;
+            }
 
             if (!tableId) {
                 console.error('Kan tableId niet bepalen voor action:', action);
                 return false;
             }
 
-            // Controleer direct of de button disabled zou moeten zijn
+            // Enforce selection when required
             if (requiresSelection === true) {
                 const instance = window.EveAI.ListView.instances[tableId];
                 if (!instance || !instance.selectedRow) {
-                    console.log('Button actie geblokkeerd: geen rij geselecteerd');
-                    return false;
-                }
-            }
-
-            // Als EveAI.ListView beschikbaar is, gebruik dan de handleAction functie
-            if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.handleAction === 'function') {
-                return window.EveAI.ListView.handleAction(action, requiresSelection, tableId);
-            }
-
-            // Fallback naar de originele implementatie
-            const actionInput = document.getElementById(`${tableId}-action`);
-            if (actionInput) {
-                actionInput.value = action;
-            }
-
-            // Controleer of er een rij geselecteerd is indien nodig
-            if (requiresSelection) {
-                const selectedRowInput = document.getElementById(`${tableId}-selected-row`);
-                if (!selectedRowInput || !selectedRowInput.value) {
                     alert('Selecteer eerst een item uit de lijst.');
                     return false;
                 }
             }
 
-            // Verstuur het formulier met behoud van de originele form action
-            if (form) {
-                // Controleer of de form action correct is ingesteld
-                if (!form.action || form.action === '' || form.action === window.location.href || form.action === window.location.pathname) {
-                    console.warn('Form action is mogelijk niet correct ingesteld:', form.action);
-                    // Als er geen action is ingesteld, gebruik dan de huidige URL
-                    form.action = window.location.href;
+            // Embedded handler first
+            const embedded = window.EveAI.ListView.embeddedHandlers && window.EveAI.ListView.embeddedHandlers[tableId];
+            if (typeof embedded === 'function') {
+                const instance = window.EveAI.ListView.instances[tableId];
+                try {
+                    embedded(action, instance ? instance.selectedRow : null, tableId);
+                    return true;
+                } catch (err) {
+                    console.error('Embedded handler error:', err);
+                    return false;
                 }
-                console.log(`Form action is: ${form.action}`);
-                form.submit();
-                return true;
             }
 
+            // Fallback to global handler (legacy behavior)
+            if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.handleAction === 'function') {
+                return window.EveAI.ListView.handleAction(action, requiresSelection, tableId);
+            }
+
+            // Final fallback to form submit (legacy)
+            const actionInput = document.getElementById(`${tableId}-action`);
+            if (actionInput) actionInput.value = action;
+
+            const form = document.getElementById(`${tableId}-form`);
+            if (form) { form.submit(); return true; }
             return false;
         };
     }