- Introduction of eveai-listview (to select objects) that is sortable, filterable, ...

- npm build does now also include building css files.
- Source javascript and css are now defined in the source directories (eveai_app or eveai_chat_client), and automatically built for use with nginx
- eveai.css is now split into several more manageable files (per control type)

eveai_app/templates/interaction/specialists.html

@@ -1,27 +1,77 @@
 {% extends 'base.html' %}
-{%  from 'macros.html' import render_selectable_table, render_pagination %}
 
 {% block title %}Specialists{% endblock %}
-
 {% block content_title %}Specialists{% endblock %}
 {% block content_description %}View Specialists for Tenant{% endblock %}
-{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}
 
 {% block content %}
 <div class="container">
-    <form method="POST" action="{{ url_for('interaction_bp.handle_specialist_selection') }}" id="specialistsForm">
-        {{ render_selectable_table(headers=["Specialist ID", "Name", "Type", "Type Version", "Active"], rows=rows, selectable=True, id="specialistsTable") }}
-        <div class="form-group mt-3 d-flex justify-content-between">
-            <div>
-                <button type="submit" name="action" value="edit_specialist" class="btn btn-primary" onclick="return validateTableSelection('specialistsForm')">Edit Specialist</button>
-                <button type="submit" name="action" value="execute_specialist" class="btn btn-primary" onclick="return validateTableSelection('specialistsForm')">Execute Specialist</button>
-            </div>
-            <button type="submit" name="action" value="create_specialist" class="btn btn-success">Register Specialist</button>
-        </div>
+    <form method="POST" action="{{ url_for('interaction_bp.handle_specialist_selection') }}" id="specialistsForm" onsubmit="return validateSpecialistSelection()">
+        <div id="specialists-list-view" class="tabulator-list-view"></div>
     </form>
 </div>
-{% endblock %}
 
-{% block content_footer %}
-    {{ render_pagination(pagination, 'interaction_bp.specialists') }}
-{% endblock %}
+<!-- Include the list view component -->
+{% include 'eveai_list_view.html' %}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Laad data met een kleine vertraging om de pagina eerst te laten renderen
+    setTimeout(() => {
+        // Initialize the list view met gepagineerde data en optimalisaties
+        const tabulatorTable = EveAI.ListView.initialize('specialists-list-view', {
+            data: {{ specialists_data | tojson }},
+            columns: {{ columns | tojson }},
+            initialSort: {{ initial_sort | tojson }},
+            actions: {{ actions | tojson }},
+            selectable: true,
+            usePagination: true, // Gebruik paginatie in plaats van progressieve lading
+            tableHeight: 800 // Hogere tabel voor specialists view
+        });
+
+        // Extra debug event listeners
+        if (tabulatorTable) {
+            console.log('Tabulator tabel succesvol geïnitialiseerd');
+
+            // Voeg een klik-event toe aan de hele tabel container voor een betere gebruikerservaring
+            document.querySelector('.tabulator-container').addEventListener('click', function(e) {
+                console.log('Tabulator container click event');
+                // De specifieke row click events worden afgehandeld door Tabulator zelf
+            });
+        } else {
+            console.error('Tabulator tabel kon niet worden geïnitialiseerd');
+        }
+    }, 50);
+});
+
+// Validation function for form submission
+function validateSpecialistSelection() {
+    const selectedRow = document.getElementById('specialists-list-view-selected-row');
+    const actionButton = document.activeElement;
+
+    // Als de actie geen selectie vereist, ga dan altijd door
+    if (actionButton && actionButton.classList.contains('btn-success')) {
+        return true;
+    }
+
+    if (!selectedRow || !selectedRow.value) {
+        alert('Selecteer a.u.b. eerst een specialist.');
+        return false;
+    }
+
+    try {
+        const selection = JSON.parse(selectedRow.value);
+        // Controleer of er een specialist is geselecteerd
+        if (!selection.value) {
+            alert('Selecteer a.u.b. eerst een specialist.');
+            return false;
+        }
+    } catch (e) {
+        alert('Er is een fout opgetreden bij het verwerken van de selectie.');
+        return false;
+    }
+
+    return true;
+}
+</script>
+{% endblock %}