- Specialist Editor Change (all components in same overview), modal editors to allow for more complex configuration of Agents, Tasks and Tools
- Strengthening dynamic forms
This commit is contained in:
Josako
@@ -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;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -4,25 +4,51 @@
|
||||
{% block content_description %}{{ description }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% set disabled_fields = [] %}
|
||||
{% set exclude_fields = [] %}
|
||||
{% for field in form.get_static_fields() %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
{% if form.get_dynamic_fields is defined %}
|
||||
{% for collection_name, fields in form.get_dynamic_fields().items() %}
|
||||
{% if fields|length > 0 %}
|
||||
<h4 class="mt-4">{{ collection_name }}</h4>
|
||||
{% endif %}
|
||||
{% for field in fields %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
<form id="componentEditForm" method="post">
|
||||
{{ form.hidden_tag() }}
|
||||
{% set disabled_fields = [] %}
|
||||
{% set exclude_fields = [] %}
|
||||
{% for field in form.get_static_fields() %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
{% if form.get_dynamic_fields is defined %}
|
||||
{% for collection_name, fields in form.get_dynamic_fields().items() %}
|
||||
{% if fields|length > 0 %}
|
||||
<h4 class="mt-4">{{ collection_name }}</h4>
|
||||
{% endif %}
|
||||
{% for field in fields %}
|
||||
{{ render_field(field, disabled_fields, exclude_fields) }}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="btn-group mt-3">
|
||||
{% if enable_reset_defaults %}
|
||||
<button type="button" class="btn btn-outline-secondary" id="resetDefaults"
|
||||
data-model-default="{{ model_default | default('') }}"
|
||||
data-temperature-default="{{ temperature_default | default('') }}">Reset to defaults</button>
|
||||
{% endif %}
|
||||
<button type="submit" class="btn btn-primary ms-2">{{ submit_text }}</button>
|
||||
<button type="button" class="btn btn-secondary ms-2" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
{% if enable_reset_defaults %}
|
||||
<script>
|
||||
(function(){
|
||||
const btn = document.getElementById('resetDefaults');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', function(){
|
||||
const modelDef = btn.getAttribute('data-model-default');
|
||||
const tempDef = btn.getAttribute('data-temperature-default');
|
||||
const modelEl = document.querySelector('#componentEditForm select[name="llm_model"]');
|
||||
const tempEl = document.querySelector('#componentEditForm input[name="temperature"]');
|
||||
if (modelEl && modelDef) { modelEl.value = modelDef; }
|
||||
if (tempEl && tempDef) {
|
||||
tempEl.value = tempDef;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
<div class="btn-group mt-3">
|
||||
<button type="submit" class="btn btn-primary component-submit">{{ submit_text }}</button>
|
||||
<button type="button" class="btn btn-secondary ms-2" id="cancelEdit">Cancel</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content_footer %}
|
||||
|
||||
@@ -32,23 +32,8 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#agents-tab" role="tab">
|
||||
Agents
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tasks-tab" role="tab">
|
||||
Tasks
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#tools-tab" role="tab">
|
||||
Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 d-none" id="editor-tab-link" data-bs-toggle="tab" href="#editor-tab" role="tab">
|
||||
Editor
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#components-tab" role="tab">
|
||||
Components
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -63,17 +48,17 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- Overview Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="specialist-overview" id="specialist-svg">
|
||||
<img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="row mb-4">#}
|
||||
{# <div class="col-12">#}
|
||||
{# <div class="card">#}
|
||||
{# <div class="card-body">#}
|
||||
{# <div class="specialist-overview" id="specialist-svg">#}
|
||||
{# <img src="{{ svg_path }}" alt="Specialist Overview" class="w-100">#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
</div>
|
||||
|
||||
<!-- Configuration Tab -->
|
||||
@@ -88,79 +73,28 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Agents Tab -->
|
||||
<div class="tab-pane fade" id="agents-tab" role="tabpanel">
|
||||
<!-- Components Tab (Unified list view) -->
|
||||
<div class="tab-pane fade" id="components-tab" role="tabpanel">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{{ render_selectable_table(
|
||||
headers=["Agent ID", "Name", "Type", "Type Version"],
|
||||
rows=agent_rows if agent_rows else [],
|
||||
selectable=True,
|
||||
id="agentsTable",
|
||||
is_component_selector=True
|
||||
) }}
|
||||
<div class="form-group mt-3">
|
||||
<button type="button" class="btn btn-primary edit-component"
|
||||
data-component-type="agent"
|
||||
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}">Edit Agent
|
||||
</button>
|
||||
<div class="container">
|
||||
<input type="hidden" id="{{ components_table_id }}-selected-row" name="selected_row" value="">
|
||||
<input type="hidden" id="{{ components_table_id }}-action" name="action" value="">
|
||||
<div id="{{ components_table_id }}" class="tabulator-list-view"></div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<button type="button"
|
||||
data-table-id="{{ components_table_id }}"
|
||||
onclick="handleListViewAction('edit_component', true, event)"
|
||||
class="btn btn-primary requires-selection" disabled>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks Tab -->
|
||||
<div class="tab-pane fade" id="tasks-tab" role="tabpanel">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{{ render_selectable_table(
|
||||
headers=["Task ID", "Name", "Type", "Type Version"],
|
||||
rows=task_rows if task_rows else [],
|
||||
selectable=True,
|
||||
id="tasksTable",
|
||||
is_component_selector=True
|
||||
) }}
|
||||
<div class="form-group mt-3">
|
||||
<button type="button" class="btn btn-primary edit-component"
|
||||
data-component-type="task"
|
||||
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}">Edit Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools Tab -->
|
||||
<div class="tab-pane fade" id="tools-tab" role="tabpanel">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{{ render_selectable_table(
|
||||
headers=["Tool ID", "Name", "Type", "Type Version"],
|
||||
rows=tool_rows if tool_rows else [],
|
||||
selectable=True,
|
||||
id="toolsTable",
|
||||
is_component_selector=True
|
||||
) }}
|
||||
<div class="form-group mt-3">
|
||||
<button type="button" class="btn btn-primary edit-component"
|
||||
data-component-type="tool"
|
||||
data-edit-url="{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}">Edit Tool
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor Tab -->
|
||||
<div class="tab-pane fade" id="editor-tab" role="tabpanel">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0" id="editorTitle"></h5>
|
||||
</div>
|
||||
<div class="card-body" id="editorContent">
|
||||
<!-- Component editor will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,245 +104,219 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Component Editor Modal (intentionally placed outside the main form to avoid nested forms) -->
|
||||
<div class="modal fade" id="componentModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="componentModalLabel">Edit Component</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="componentModalBody">
|
||||
<!-- Partial form will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="{{ url_for('static', filename='assets/js/eveai-list-view.js') }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const editorTab = document.getElementById('editor-tab');
|
||||
const editorTabLink = document.getElementById('editor-tab-link');
|
||||
const editorTitle = document.getElementById('editorTitle');
|
||||
const editorContent = document.getElementById('editorContent');
|
||||
let previousTab = null;
|
||||
const componentModalEl = document.getElementById('componentModal');
|
||||
const componentModalBody = document.getElementById('componentModalBody');
|
||||
const componentModalLabel = document.getElementById('componentModalLabel');
|
||||
let componentModal;
|
||||
|
||||
// Add color classes to the tabs
|
||||
const agentsTabLink = document.querySelector('[href="#agents-tab"]');
|
||||
const tasksTabLink = document.querySelector('[href="#tasks-tab"]');
|
||||
const toolsTabLink = document.querySelector('[href="#tools-tab"]');
|
||||
// Initialize the combined components list using EveAI.ListView
|
||||
function initComponentsList() {
|
||||
function tryInit() {
|
||||
if (window.EveAI && window.EveAI.ListView && typeof window.EveAI.ListView.initialize === 'function') {
|
||||
const cfg = {
|
||||
data: {{ components_data | tojson }},
|
||||
columns: {{ components_columns | tojson }},
|
||||
initialSort: {{ components_initial_sort | tojson }},
|
||||
index: {{ components_index | tojson }},
|
||||
actions: {{ components_actions | tojson }},
|
||||
tableHeight: {{ components_table_height|default(600) }},
|
||||
selectable: true
|
||||
};
|
||||
// Resolve string formatters (e.g., 'typeBadge') to functions before initializing Tabulator
|
||||
if (window.EveAI && window.EveAI.ListView && window.EveAI.ListView.formatters && Array.isArray(cfg.columns)) {
|
||||
cfg.columns = cfg.columns.map(col => {
|
||||
if (typeof col.formatter === 'string' && window.EveAI.ListView.formatters[col.formatter]) {
|
||||
return { ...col, formatter: window.EveAI.ListView.formatters[col.formatter] };
|
||||
}
|
||||
return col;
|
||||
});
|
||||
}
|
||||
const table = window.EveAI.ListView.initialize('{{ components_table_id }}', cfg);
|
||||
// Expose for quick debugging
|
||||
window.__componentsTable = table;
|
||||
|
||||
agentsTabLink.classList.add('component-agent');
|
||||
tasksTabLink.classList.add('component-task');
|
||||
toolsTabLink.classList.add('component-tool');
|
||||
// Fallback: ensure instance registry is populated even if the module didn't store it yet
|
||||
window.EveAI.ListView.instances = window.EveAI.ListView.instances || {};
|
||||
if (!window.EveAI.ListView.instances['{{ components_table_id }}'] && table) {
|
||||
window.EveAI.ListView.instances['{{ components_table_id }}'] = {
|
||||
table: table,
|
||||
config: cfg,
|
||||
selectedRow: null
|
||||
};
|
||||
}
|
||||
// Ensure single-click selects exactly one row (defensive)
|
||||
if (table && typeof table.on === 'function') {
|
||||
try {
|
||||
table.on('rowClick', function(e, row){ row.getTable().deselectRow(); row.select(); });
|
||||
table.on('cellClick', function(e, cell){ const r = cell.getRow(); r.getTable().deselectRow(); r.select(); });
|
||||
table.on('rowSelectionChanged', function(data, rows){
|
||||
const inst = window.EveAI.ListView.instances['{{ components_table_id }}'];
|
||||
if (inst) { inst.selectedRow = rows.length ? rows[0].getData() : null; }
|
||||
if (typeof window.EveAI.ListView.updateActionButtons === 'function') {
|
||||
window.EveAI.ListView.updateActionButtons('{{ components_table_id }}');
|
||||
}
|
||||
});
|
||||
} catch (err) { console.warn('Could not attach selection handlers:', err); }
|
||||
}
|
||||
|
||||
// Add background colors to the tab panes
|
||||
const agentsTab = document.getElementById('agents-tab');
|
||||
const tasksTab = document.getElementById('tasks-tab');
|
||||
const toolsTab = document.getElementById('tools-tab');
|
||||
// Register embedded action handler for this table
|
||||
window.EveAI.ListView.embeddedHandlers = window.EveAI.ListView.embeddedHandlers || {};
|
||||
window.EveAI.ListView.embeddedHandlers['{{ components_table_id }}'] = function(action, row, tableId){
|
||||
if (action !== 'edit_component' || !row) return;
|
||||
const id = row.id;
|
||||
const type = row.type_name; // 'agent' | 'task' | 'tool'
|
||||
|
||||
agentsTab.classList.add('component-agent-bg');
|
||||
tasksTab.classList.add('component-task-bg');
|
||||
toolsTab.classList.add('component-tool-bg');
|
||||
// Build edit URL from server-side templates with placeholder 0
|
||||
const editUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.edit_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.edit_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.edit_tool', tool_id=0) }}",
|
||||
};
|
||||
const url = (editUrls[type] || '').replace('/0', `/${id}`);
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
|
||||
.then(resp => { if (!resp.ok) throw new Error(`HTTP ${resp.status}`); return resp.text(); })
|
||||
.then(html => {
|
||||
componentModalBody.innerHTML = html;
|
||||
componentModalLabel.textContent = `Edit ${type.charAt(0).toUpperCase()+type.slice(1)}`;
|
||||
componentModalEl.dataset.componentType = type;
|
||||
componentModalEl.dataset.componentId = id;
|
||||
|
||||
// Ensure component selectors don't interfere with form submission
|
||||
const form = document.getElementById('specialistForm');
|
||||
// Helper to open modal once Bootstrap is available
|
||||
function openModal() {
|
||||
try {
|
||||
if (!componentModal) componentModal = new bootstrap.Modal(componentModalEl);
|
||||
componentModal.show();
|
||||
} catch (e) {
|
||||
console.error('Failed to open Bootstrap modal:', e);
|
||||
alert('Kan de editor niet openen (Bootstrap modal ontbreekt).');
|
||||
}
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
// Remove component selectors from form validation
|
||||
const componentSelectors = form.querySelectorAll('input[data-component-selector]');
|
||||
componentSelectors.forEach(selector => {
|
||||
selector.removeAttribute('required');
|
||||
});
|
||||
});
|
||||
|
||||
// Get all tab links except the editor tab
|
||||
const tabLinks = Array.from(document.querySelectorAll('.nav-link')).filter(link => link.id !== 'editor-tab-link');
|
||||
|
||||
// Function to toggle other tabs' disabled state
|
||||
function toggleOtherTabs(disable) {
|
||||
tabLinks.forEach(link => {
|
||||
if (disable) {
|
||||
link.classList.add('disabled');
|
||||
if (window.bootstrap && typeof bootstrap.Modal === 'function') {
|
||||
openModal();
|
||||
} else {
|
||||
// Fallback: laad Bootstrap bundle dynamisch en open daarna
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
|
||||
script.onload = () => openModal();
|
||||
script.onerror = () => {
|
||||
console.error('Kon Bootstrap bundle niet laden');
|
||||
alert('Kan de editor niet openen omdat Bootstrap JS ontbreekt.');
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error loading editor:', err);
|
||||
alert('Error loading editor. Please try again.');
|
||||
});
|
||||
};
|
||||
} else {
|
||||
link.classList.remove('disabled');
|
||||
setTimeout(tryInit, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to toggle main form elements
|
||||
const mainSubmitButton = document.querySelector('#specialistForm > .btn-primary');
|
||||
|
||||
function toggleMainFormElements(disable) {
|
||||
// Toggle tabs
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
if (link.id !== 'editor-tab-link') {
|
||||
if (disable) {
|
||||
link.classList.add('disabled');
|
||||
} else {
|
||||
link.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle main submit button
|
||||
if (mainSubmitButton) {
|
||||
mainSubmitButton.disabled = disable;
|
||||
}
|
||||
tryInit();
|
||||
}
|
||||
|
||||
// Handle edit buttons
|
||||
document.querySelectorAll('.edit-component').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const componentType = this.dataset.componentType;
|
||||
const form = this.closest('form');
|
||||
const selectedRow = form.querySelector('input[type="radio"]:checked');
|
||||
initComponentsList();
|
||||
|
||||
console.log("I'm in the custom click event listener!")
|
||||
// Note: we removed the modal footer submit button. The partial provides its own buttons.
|
||||
// Submissions are intercepted via the submit listener on componentModalBody below.
|
||||
|
||||
if (!selectedRow) {
|
||||
alert('Please select a component to edit');
|
||||
// Refresh the components list data after a successful save
|
||||
function refreshComponentsData() {
|
||||
const url = "{{ prefixed_url_for('interaction_bp.specialist_components_data', specialist_id=specialist_id) }}";
|
||||
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
|
||||
.then(resp => resp.json())
|
||||
.then(payload => {
|
||||
const instance = window.EveAI.ListView.instances['{{ components_table_id }}'];
|
||||
if (instance && instance.table && Array.isArray(payload.data)) {
|
||||
instance.table.setData(payload.data);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to refresh components data', err));
|
||||
}
|
||||
|
||||
// Intercept native form submit events within the modal (handles Enter key too)
|
||||
componentModalBody.addEventListener('submit', function(e) {
|
||||
const formEl = e.target.closest('#componentEditForm');
|
||||
if (!formEl) return; // Not our form
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(formEl);
|
||||
|
||||
const componentType = componentModalEl.dataset.componentType;
|
||||
const componentId = componentModalEl.dataset.componentId;
|
||||
|
||||
// Build robust, prefix-aware absolute save URL from server-side templates
|
||||
const saveUrls = {
|
||||
agent: "{{ prefixed_url_for('interaction_bp.save_agent', agent_id=0) }}",
|
||||
task: "{{ prefixed_url_for('interaction_bp.save_task', task_id=0) }}",
|
||||
tool: "{{ prefixed_url_for('interaction_bp.save_tool', tool_id=0) }}",
|
||||
};
|
||||
const urlTemplate = saveUrls[componentType];
|
||||
const saveUrl = urlTemplate.replace('/0', `/${componentId}`);
|
||||
|
||||
fetch(saveUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||||
})
|
||||
.then(async resp => {
|
||||
const ct = resp.headers.get('Content-Type') || '';
|
||||
if (resp.ok) {
|
||||
// Expect JSON success
|
||||
let data = null;
|
||||
try { data = await resp.json(); } catch (_) {}
|
||||
if (data && data.success) {
|
||||
componentModal.hide();
|
||||
refreshComponentsData();
|
||||
return;
|
||||
}
|
||||
throw new Error(data && data.message ? data.message : 'Save failed');
|
||||
}
|
||||
// For validation errors (400), server returns HTML partial -> replace modal body
|
||||
if (resp.status === 400 && ct.includes('text/html')) {
|
||||
const html = await resp.text();
|
||||
componentModalBody.innerHTML = html;
|
||||
return;
|
||||
}
|
||||
|
||||
const valueMatch = selectedRow.value.match(/'value':\s*(\d+)/);
|
||||
const selectedId = valueMatch ? valueMatch[1] : null;
|
||||
|
||||
if (!selectedId) {
|
||||
console.error('Could not extract ID from value:', selectedRow.value);
|
||||
alert('Error: Could not determine component ID');
|
||||
return;
|
||||
// Other errors
|
||||
let message = 'Save failed';
|
||||
if (ct.includes('application/json')) {
|
||||
try {
|
||||
const data = await resp.json();
|
||||
if (data && data.message) message = data.message;
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// Make AJAX call to get component editor
|
||||
const urlTemplate = this.dataset.editUrl.replace('/0', `/${selectedId}`);
|
||||
fetch(urlTemplate, {
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
// Store the current active tab
|
||||
previousTab = document.querySelector('.nav-link.active');
|
||||
|
||||
// Update editor content
|
||||
editorTitle.textContent = `Edit ${componentType.charAt(0).toUpperCase() + componentType.slice(1)}`;
|
||||
editorContent.innerHTML = html;
|
||||
|
||||
// Apply the appropriate color class to the editor tab
|
||||
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
||||
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
||||
|
||||
editorTabLink.classList.add(`component-${componentType}`);
|
||||
editorTab.classList.add(`component-${componentType}-bg`);
|
||||
|
||||
// Disable other tabs & main form elements
|
||||
toggleOtherTabs(true);
|
||||
toggleMainFormElements(true)
|
||||
|
||||
// Show editor tab and switch to it
|
||||
editorTabLink.classList.remove('d-none');
|
||||
editorTabLink.click();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching editor:', error);
|
||||
alert('Error loading editor. Please try again.');
|
||||
});
|
||||
throw new Error(message + ` (HTTP ${resp.status})`);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error saving component:', err);
|
||||
alert(err.message || 'Error saving component');
|
||||
});
|
||||
|
||||
// Clean up color classes when returning from editor
|
||||
editorTabLink.addEventListener('hide.bs.tab', function() {
|
||||
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
||||
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
||||
});
|
||||
});
|
||||
|
||||
// Handle component editor form submissions
|
||||
editorContent.addEventListener('click', function(e) {
|
||||
if (e.target && e.target.classList.contains('component-submit')) {
|
||||
e.preventDefault();
|
||||
console.log('Submit button clicked');
|
||||
|
||||
// Get all form fields from the editor content
|
||||
const formData = new FormData();
|
||||
editorContent.querySelectorAll('input, textarea, select').forEach(field => {
|
||||
if (field.type === 'checkbox') {
|
||||
formData.append(field.name, field.checked ? 'y' : 'n');
|
||||
} else {
|
||||
formData.append(field.name, field.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Add CSRF token
|
||||
const csrfToken = document.querySelector('input[name="csrf_token"]').value;
|
||||
formData.append('csrf_token', csrfToken);
|
||||
|
||||
// Get the component ID from the current state
|
||||
const selectedRow = document.querySelector('input[name="selected_row"]:checked');
|
||||
const componentData = JSON.parse(selectedRow.value.replace(/'/g, '"'));
|
||||
const componentId = componentData.value;
|
||||
|
||||
// Determine the component type (agent, task, or tool)
|
||||
const componentType = editorTabLink.classList.contains('component-agent') ? 'agent' :
|
||||
editorTabLink.classList.contains('component-task') ? 'task' : 'tool';
|
||||
|
||||
// Submit the data
|
||||
fetch(`interaction/${componentType}/${componentId}/save`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Handle success - reload the page
|
||||
location.reload();
|
||||
} else {
|
||||
// Handle error
|
||||
alert(data.message || 'Error saving component');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Error saving component');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle case when editor tab is hidden
|
||||
editorTabLink.addEventListener('hide.bs.tab', function() {
|
||||
// Re-enable all tabs & main form elements
|
||||
toggleOtherTabs(false);
|
||||
toggleMainFormElements(false)
|
||||
|
||||
// Remove color classes
|
||||
editorTabLink.classList.remove('component-agent', 'component-task', 'component-tool');
|
||||
editorTab.classList.remove('component-agent-bg', 'component-task-bg', 'component-tool-bg');
|
||||
});
|
||||
|
||||
// Function to handle canceling edit
|
||||
function cancelEdit() {
|
||||
// Re-enable all tabs & main form elements
|
||||
toggleOtherTabs(false);
|
||||
toggleMainFormElements()
|
||||
|
||||
// Return to previous tab
|
||||
if (previousTab) {
|
||||
previousTab.click();
|
||||
}
|
||||
|
||||
// Hide the editor tab
|
||||
editorTabLink.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Handle cancel button in editor
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target && e.target.id === 'cancelEdit') {
|
||||
// Get the previously active tab (stored before switching to editor)
|
||||
const previousTab = document.querySelector('[href="#configuration-tab"]'); // default to configuration tab
|
||||
|
||||
cancelEdit()
|
||||
|
||||
// Hide the editor tab
|
||||
document.getElementById('editor-tab-link').classList.add('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -122,21 +122,41 @@ function validateTableSelection(formId) {
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Maak tabelrijen klikbaar (voor tabellen met radio-buttons)
|
||||
$(document).on('click', 'table tbody tr', function(e) {
|
||||
// Voorkom dat dit gedrag optreedt als er direct op de radio-button of een link wordt geklikt
|
||||
if (!$(e.target).is('input[type="radio"], a')) {
|
||||
// Vind de radio-button in deze rij
|
||||
const radio = $(this).find('input[type="radio"]');
|
||||
// Selecteer de radio-button
|
||||
radio.prop('checked', true);
|
||||
// Voeg visuele feedback toe voor de gebruiker
|
||||
$('table tbody tr').removeClass('table-active');
|
||||
$(this).addClass('table-active');
|
||||
}
|
||||
});
|
||||
});
|
||||
(function(){
|
||||
function initClickableRowsWithjQuery(){
|
||||
// Maak tabelrijen klikbaar (voor tabellen met radio-buttons)
|
||||
$(document).on('click', 'table tbody tr', function(e) {
|
||||
// Voorkom dat dit gedrag optreedt als er direct op de radio-button of een link wordt geklikt
|
||||
if (!$(e.target).is('input[type="radio"], a')) {
|
||||
// Vind de radio-button in deze rij
|
||||
const radio = $(this).find('input[type="radio"]');
|
||||
// Selecteer de radio-button
|
||||
radio.prop('checked', true);
|
||||
// Voeg visuele feedback toe voor de gebruiker
|
||||
$('table tbody tr').removeClass('table-active');
|
||||
$(this).addClass('table-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (window.$) {
|
||||
$(document).ready(initClickableRowsWithjQuery);
|
||||
} else {
|
||||
// Fallback zonder jQuery: beperkte ondersteuning
|
||||
document.addEventListener('click', function(e){
|
||||
const row = e.target.closest('table tbody tr');
|
||||
if (!row) return;
|
||||
// klik op radio/link niet overrulen
|
||||
if (e.target.closest('input[type="radio"], a')) return;
|
||||
const radio = row.querySelector('input[type="radio"]');
|
||||
if (radio) {
|
||||
radio.checked = true;
|
||||
// visuele feedback
|
||||
row.closest('tbody')?.querySelectorAll('tr').forEach(tr => tr.classList.remove('table-active'));
|
||||
row.classList.add('table-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user