feat: flow editor shows endpoint selector when api_report is chosen
- Pass ENDPOINTS to JS context from company_endpoints table - Add api_report and goodbye options to flow function select - When api_report selected: show endpoint dropdown + date period + filename + caption fields - saveFlow() persists params.endpoint_key, date_mode, caption, filename - flowFuncToggle() shows/hides the endpoint panel on function change Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
6f799c3829
commit
12ec5d28b1
@@ -2294,6 +2294,7 @@ HTML;
|
||||
$msg = $_GET['msg'] ?? '';
|
||||
$toastHtml = $msg === 'saved' ? '<div class="toast toast-success">Configuración guardada exitosamente.</div>' : '';
|
||||
|
||||
$companyEndpoints = [];
|
||||
if ($companyId > 0) {
|
||||
$company = CompanyRepository::findById($companyId);
|
||||
if ($company) {
|
||||
@@ -2302,6 +2303,9 @@ HTML;
|
||||
$parsed = json_decode($cj, true);
|
||||
if (is_array($parsed)) $config = $parsed;
|
||||
}
|
||||
$epStmt = db()->prepare('SELECT endpoint_key, url, method FROM company_endpoints WHERE company_id=? AND is_active=1 ORDER BY endpoint_key');
|
||||
$epStmt->execute([$companyId]);
|
||||
$companyEndpoints = $epStmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3010,7 +3014,8 @@ HTML;
|
||||
echo '</div></div>';
|
||||
|
||||
// ─── Inline JS for interactivity ─────────────────────────────────
|
||||
$configJson = json_encode($config, JSON_UNESCAPED_UNICODE);
|
||||
$configJson = json_encode($config, JSON_UNESCAPED_UNICODE);
|
||||
$endpointsJson = json_encode(array_column($companyEndpoints, null, 'endpoint_key'), JSON_UNESCAPED_UNICODE);
|
||||
echo <<<HTML
|
||||
|
||||
<!-- Modal para editar -->
|
||||
@@ -3021,6 +3026,7 @@ HTML;
|
||||
<script>
|
||||
const CONFIG = {$configJson};
|
||||
const COMPANY_ID = {$companyId};
|
||||
const ENDPOINTS = {$endpointsJson};
|
||||
|
||||
function showModal(html) {
|
||||
document.getElementById('modalContent').innerHTML = html;
|
||||
@@ -3296,6 +3302,11 @@ function editFlow(key) {
|
||||
const flow = CONFIG.flows[key];
|
||||
if (!flow) return;
|
||||
const menuOpts = Object.keys(CONFIG.menus).map(m => '<option value="' + m + '"' + (flow.menu === m ? ' selected' : '') + '>' + m + '</option>').join('');
|
||||
const epOpts = Object.keys(ENDPOINTS).map(k => '<option value="' + k + '"' + (((flow.params||{}).endpoint_key) === k ? ' selected' : '') + '>' + k + ' — ' + (ENDPOINTS[k].url||'').slice(0,50) + '</option>').join('');
|
||||
const isApiReport = flow.function === 'api_report';
|
||||
const dateMode = (flow.params||{}).date_mode || '';
|
||||
const caption = (flow.params||{}).caption || '';
|
||||
const filename = (flow.params||{}).filename || '';
|
||||
showModal(\`
|
||||
<h2>🔀 Editar Flujo: \${key}</h2>
|
||||
<div class="form-group"><label>ID del flujo</label><input type="text" id="editFlowKey" value="\${key}"></div>
|
||||
@@ -3312,12 +3323,39 @@ function editFlow(key) {
|
||||
</div>
|
||||
<div class="form-group" id="flowFuncGroup" style="\${flow.type==='function'?'':'display:none'}">
|
||||
<label>Función</label>
|
||||
<select id="editFlowFunction">
|
||||
<select id="editFlowFunction" onchange="flowFuncToggle()">
|
||||
<option value="forward_to_ai"\${flow.function==='forward_to_ai'?' selected':''}>Escalar a IA</option>
|
||||
<option value="forward_to_agent"\${flow.function==='forward_to_agent'?' selected':''}>Escalar a agente humano</option>
|
||||
<option value="api_report"\${flow.function==='api_report'?' selected':''}>Descargar / enviar informe</option>
|
||||
<option value="goodbye"\${flow.function==='goodbye'?' selected':''}>Salir (goodbye)</option>
|
||||
<option value="webhook"\${flow.function==='webhook'?' selected':''}>Llamar webhook externo</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="flowEpGroup" style="\${isApiReport?'':'display:none'}">
|
||||
<div class="form-group">
|
||||
<label>Endpoint</label>
|
||||
<select id="editFlowEpKey">
|
||||
<option value="">— Selecciona endpoint —</option>\${epOpts}
|
||||
</select>
|
||||
<div style="font-size:11px;color:#7a8291;margin-top:3px">Configura los endpoints en la pestaña "Endpoints API" de la empresa</div>
|
||||
</div>
|
||||
<div class="form-group" style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||||
<div><label>Periodo</label>
|
||||
<select id="editFlowDateMode">
|
||||
<option value="" \${dateMode===''?'selected':''}>Sin fecha</option>
|
||||
<option value="today" \${dateMode==='today'?'selected':''}>Hoy</option>
|
||||
<option value="last_30" \${dateMode==='last_30'?'selected':''}>Últimos 30 días</option>
|
||||
</select>
|
||||
</div>
|
||||
<div><label>Nombre archivo</label>
|
||||
<input type="text" id="editFlowFilename" value="\${filename}" placeholder="reporte.pdf">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Mensaje al enviar</label>
|
||||
<input type="text" id="editFlowCaption" value="\${caption}" placeholder="Aquí tienes el informe solicitado.">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="flowMenuGroup" style="\${flow.type==='menu'?'':'display:none'}">
|
||||
<label>Sub-menú a mostrar</label>
|
||||
<select id="editFlowMenu"><option value="">Selecciona...</option>\${menuOpts}</select>
|
||||
@@ -3334,6 +3372,12 @@ function flowTypeToggle() {
|
||||
document.getElementById('flowTextGroup').style.display = t === 'text' ? '' : 'none';
|
||||
document.getElementById('flowFuncGroup').style.display = t === 'function' ? '' : 'none';
|
||||
document.getElementById('flowMenuGroup').style.display = t === 'menu' ? '' : 'none';
|
||||
if (t !== 'function') document.getElementById('flowEpGroup').style.display = 'none';
|
||||
}
|
||||
|
||||
function flowFuncToggle() {
|
||||
const fn = document.getElementById('editFlowFunction').value;
|
||||
document.getElementById('flowEpGroup').style.display = fn === 'api_report' ? '' : 'none';
|
||||
}
|
||||
|
||||
function saveFlow(oldKey) {
|
||||
@@ -3342,7 +3386,17 @@ function saveFlow(oldKey) {
|
||||
if (!newKey) { alert('El ID del flujo es requerido'); return; }
|
||||
const flow = { type };
|
||||
if (type === 'text') flow.message = document.getElementById('editFlowMessage').value.trim();
|
||||
else if (type === 'function') flow.function = document.getElementById('editFlowFunction').value;
|
||||
else if (type === 'function') {
|
||||
flow.function = document.getElementById('editFlowFunction').value;
|
||||
if (flow.function === 'api_report') {
|
||||
flow.params = {
|
||||
endpoint_key: document.getElementById('editFlowEpKey').value,
|
||||
date_mode: document.getElementById('editFlowDateMode').value,
|
||||
caption: document.getElementById('editFlowCaption').value.trim(),
|
||||
filename: document.getElementById('editFlowFilename').value.trim(),
|
||||
};
|
||||
}
|
||||
}
|
||||
else if (type === 'menu') flow.menu = document.getElementById('editFlowMenu').value;
|
||||
delete CONFIG.flows[oldKey];
|
||||
CONFIG.flows[newKey] = flow;
|
||||
|
||||
Reference in New Issue
Block a user