404 lines
19 KiB
HTML
404 lines
19 KiB
HTML
{% extends 'base.html' %}
|
|
{% from "macros.html" import render_field, render_selectable_table %}
|
|
|
|
{% block title %}Edit Specialist{% endblock %}
|
|
|
|
{% block content_title %}Edit Specialist{% endblock %}
|
|
{% block content_description %}Edit a Specialist and its components{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-0">
|
|
<div class="row">
|
|
<!-- Main Specialist Editor -->
|
|
<div class="col-12" id="mainEditorSection">
|
|
<form method="post" id="specialistForm">
|
|
{{ form.hidden_tag() }}
|
|
{% set disabled_fields = ['type', 'type_version'] %}
|
|
{% set exclude_fields = [] %}
|
|
|
|
<!-- Nav Tabs -->
|
|
<div class="row mt-5">
|
|
<div class="col-lg-12">
|
|
<div class="nav-wrapper position-relative end-0">
|
|
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#general-tab" role="tab">
|
|
General
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#configuration-tab" role="tab">
|
|
Configuration
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#components-tab" role="tab">
|
|
Components
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content tab-space">
|
|
<!-- General Tab -->
|
|
<div class="tab-pane fade" id="general-tab" role="tabpanel">
|
|
<!-- Render Static Fields -->
|
|
{% for field in form.get_static_fields() %}
|
|
{{ render_field(field, disabled_fields, exclude_fields) }}
|
|
{% 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>
|
|
|
|
<!-- Configuration Tab -->
|
|
<div class="tab-pane fade show active" id="configuration-tab" role="tabpanel">
|
|
{% 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 %}
|
|
</div>
|
|
|
|
<!-- Components Tab (Unified list view) -->
|
|
<div class="tab-pane fade" id="components-tab" role="tabpanel">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mt-4">Save Specialist</button>
|
|
</form>
|
|
</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 componentModalEl = document.getElementById('componentModal');
|
|
const componentModalBody = document.getElementById('componentModalBody');
|
|
const componentModalLabel = document.getElementById('componentModalLabel');
|
|
let componentModal;
|
|
|
|
// 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;
|
|
|
|
// 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); }
|
|
}
|
|
|
|
// 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'
|
|
|
|
// 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;
|
|
|
|
// 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).');
|
|
}
|
|
}
|
|
|
|
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 {
|
|
setTimeout(tryInit, 100);
|
|
}
|
|
}
|
|
tryInit();
|
|
}
|
|
|
|
initComponentsList();
|
|
|
|
// Note: we removed the modal footer submit button. The partial provides its own buttons.
|
|
// Submissions are intercepted via the submit listener on componentModalBody below.
|
|
|
|
// 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;
|
|
}
|
|
// 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 (_) {}
|
|
}
|
|
throw new Error(message + ` (HTTP ${resp.status})`);
|
|
})
|
|
.catch(err => {
|
|
console.error('Error saving component:', err);
|
|
alert(err.message || 'Error saving component');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.tab-pane .card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.nav-link.component-agent,
|
|
.nav-link.component-task,
|
|
.nav-link.component-tool {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Add new CSS for normal tabs */
|
|
.nav-link {
|
|
color: #344767 !important; /* Default dark color */
|
|
}
|
|
|
|
/* Style for active tabs */
|
|
.nav-link.active {
|
|
background-color: #5e72e4 !important; /* Primary blue color */
|
|
color: white !important;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Style for disabled tabs */
|
|
.nav-link.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.component-agent {
|
|
background-color: #9c27b0 !important; /* Purple */
|
|
color: white !important;
|
|
}
|
|
|
|
.component-task {
|
|
background-color: #ff9800 !important; /* Orange */
|
|
color: white !important;
|
|
}
|
|
|
|
.component-tool {
|
|
background-color: #009688 !important; /* Teal */
|
|
color: white !important;
|
|
}
|
|
|
|
/* Lighter background versions for the tab content */
|
|
.tab-pane.component-agent-bg {
|
|
background-color: rgba(156, 39, 176, 0.2); /* Light purple */
|
|
}
|
|
|
|
.tab-pane.component-task-bg {
|
|
background-color: rgba(255, 152, 0, 0.2); /* Light orange */
|
|
}
|
|
|
|
.tab-pane.component-tool-bg {
|
|
background-color: rgba(0, 150, 136, 0.2); /* Light teal */
|
|
}
|
|
|
|
/* Add some padding to the tab content */
|
|
.tab-pane {
|
|
padding: 15px;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.specialist-overview {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.specialist-overview svg {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 400px; /* Adjust as needed */
|
|
}
|
|
</style>
|
|
{% endblock %}
|