usite-sas-bic/rips_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hola

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-06-18 12:25:44 -05:00
parent 65ff7995e8
commit 408ea50d21
12 changed files with 1042 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/queries.html
+434 -403
View File
@@ -1,403 +1,434 @@
{% extends "base.html" %}
{% block title %}Consultas SQL{% endblock %}
{% block header %}Consultas SQL{% endblock %}
{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div class="lg:col-span-3">
<div class="flex space-x-1 border-b border-gray-200 mb-4">
<button onclick="cambiarTab('probador')" class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-blue-600 text-blue-600" id="tab-probador"><i class="fas fa-play mr-1"></i> Probador</button>
<button onclick="cambiarTab('constructor')" class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-constructor"><i class="fas fa-wrench mr-1"></i> Constructor</button>
<button onclick="cambiarTab('editor')" class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-editor"><i class="fas fa-code mr-1"></i> Editor</button>
</div>
<div id="panel-probador">
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="p-4 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-terminal mr-2 text-green-500"></i>Escribí tu SQL y ejecutalo</h3>
<div class="flex space-x-2">
<button onclick="ejecutarProbador()" class="px-4 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-play mr-1"></i> Ejecutar</button>
<button onclick="limpiarProbador()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-eraser mr-1"></i> Limpiar</button>
</div>
</div>
<div>
<textarea id="probador-sql" rows="6" class="w-full px-4 py-3 text-sm font-mono border-0 focus:ring-0" placeholder="SELECT * FROM ..."></textarea>
</div>
<div id="probador-resultados" class="border-t border-gray-200 overflow-x-auto max-h-96 overflow-y-auto"></div>
<div id="probador-info" class="px-4 py-2 text-xs text-gray-500 border-t border-gray-200"></div>
</div>
</div>
<div id="panel-constructor" class="hidden">
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual</h3>
<button onclick="cargarEsquema()" class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-sync mr-1"></i> Cargar esquema</button>
</div>
<div class="p-4">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div>
<h4 class="text-xs font-semibold text-gray-700 mb-2">Tablas</h4>
<div id="builder-tablas" class="space-y-1 max-h-64 overflow-y-auto border rounded p-2 bg-gray-50 text-xs">
<p class="text-gray-400 italic">Presiona "Cargar esquema"</p>
</div>
</div>
<div>
<h4 class="text-xs font-semibold text-gray-700 mb-2">Columnas</h4>
<div id="builder-columnas" class="border rounded p-2 bg-gray-50 min-h-[100px] text-xs">
<p class="text-gray-400 italic">Seleccioná una tabla</p>
</div>
<h4 class="text-xs font-semibold text-gray-700 mt-3 mb-2">Filtros</h4>
<div id="builder-where" class="space-y-1 text-xs"></div>
<button onclick="agregarFiltro()" class="mt-1 text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>
</div>
<div>
<h4 class="text-xs font-semibold text-gray-700 mb-2">SQL</h4>
<textarea id="builder-sql" rows="4" readonly class="w-full px-2 py-1 border rounded text-xs font-mono bg-gray-100"></textarea>
<p id="builder-params" class="text-xs text-blue-600 mt-1"></p>
<button onclick="ejecutarBuilder()" class="mt-2 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-play mr-1"></i> Ejecutar</button>
<button onclick="usarSqlEditor()" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg ml-1"><i class="fas fa-arrow-right mr-1"></i> Enviar al Editor</button>
</div>
</div>
<div id="builder-resultados" class="mt-3 border-t border-gray-200 pt-3 overflow-x-auto max-h-60 overflow-y-auto"></div>
</div>
</div>
</div>
<div id="panel-editor" class="hidden">
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="px-4 py-3 border-b border-gray-200">
<h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-save mr-2 text-blue-500"></i>Guardar consulta</h3>
</div>
<div class="p-4">
<form method="POST" action="/queries/create" class="space-y-3">
<input type="hidden" name="query_id" id="query_id" value="">
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Nombre</label>
<input type="text" name="name" id="q_name" required class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm" placeholder="Nombre">
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Tipo</label>
<select name="query_type" id="q_type" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
<option value="terceros">Terceros</option>
<option value="transaccion">Transacción</option>
</select>
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">SQL</label>
<textarea name="query_text" id="q_text" rows="8" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono" placeholder="PEGA ACA LA SQL YA PROBADA"></textarea>
</div>
<div>
<label class="block text-xs font-medium text-gray-700 mb-1">Descripción</label>
<input type="text" name="description" id="q_desc" class="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm" placeholder="Descripción">
</div>
<div class="flex space-x-2">
<button type="submit" class="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm"><i class="fas fa-save mr-1"></i> Guardar</button>
<button type="button" onclick="cancelEdit()" class="px-4 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
<h3 class="text-sm font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Consultas</h3>
</div>
<div class="p-3 space-y-2 max-h-[calc(100vh-200px)] overflow-y-auto">
{% for q in queries %}
<div class="p-2 rounded-lg border border-gray-200 text-xs">
<div onclick="cargarConsulta({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`)" class="cursor-pointer">
<div class="flex items-center justify-between">
<span class="font-medium text-gray-800 truncate">{{ q.name }}</span>
<span class="px-1.5 py-0.5 rounded text-xs {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type[:4] }}</span>
</div>
<p class="text-gray-500 mt-0.5 truncate">{{ q.description or 'Sin descripción' }}</p>
</div>
<div class="flex space-x-2 mt-1">
<button onclick="event.stopPropagation();ejecutarConsultaId({{ q.id }})" class="text-green-600 hover:text-green-800"><i class="fas fa-play"></i></button>
<button onclick="event.stopPropagation();cargarConsulta({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`)" class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button>
<form method="POST" action="/queries/delete/{{ q.id }}" class="inline" onsubmit="return confirm('Eliminar?')">
<button type="submit" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
</form>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
let sqlEditor = null;
let esquema = [];
let tablasSeleccionadas = {};
let filtros = [];
let aliasCounter = 0;
function cambiarTab(tab) {
['probador','constructor','editor'].forEach(t => {
document.getElementById('panel-'+t).classList.toggle('hidden', t !== tab);
const btn = document.getElementById('tab-'+t);
if (t === tab) {
btn.className = 'tab-btn px-4 py-2 text-sm font-medium border-b-2 border-blue-600 text-blue-600';
} else {
btn.className = 'tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent';
}
});
if (tab === 'constructor' && !esquema.length) cargarEsquema();
}
// ───── PROBADOR ─────
function ejecutarProbador() {
const sql = document.getElementById('probador-sql').value.trim();
if (!sql) { showToast('Escribí una consulta SQL', 'warning'); return; }
ejecutarSql(sql, 'probador-resultados', 'probador-info');
}
function limpiarProbador() {
document.getElementById('probador-sql').value = '';
document.getElementById('probador-resultados').innerHTML = '';
document.getElementById('probador-info').innerHTML = '';
}
async function ejecutarSql(sql, outputId, infoId) {
const outputDiv = document.getElementById(outputId);
const infoDiv = document.getElementById(infoId);
outputDiv.innerHTML = '<div class="p-4 text-center"><i class="fas fa-spinner fa-spin mr-2"></i>Ejecutando...</div>';
if (infoDiv) infoDiv.innerHTML = '';
try {
const form = new FormData();
form.append('sql', sql);
const resp = await fetch('/queries/run-sql', { method: 'POST', body: form });
const data = await resp.json();
if (data.error) {
outputDiv.innerHTML = `<div class="p-4 text-red-600 text-sm"><i class="fas fa-exclamation-circle mr-1"></i> ${data.error}</div>`;
return;
}
let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';
data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold whitespace-nowrap">' + c + '</th>'; });
html += '</tr></thead><tbody>';
data.rows.slice(0, 200).forEach(r => {
html += '<tr class="hover:bg-gray-50">';
data.columns.forEach(c => { html += '<td class="p-2 border whitespace-nowrap">' + (r[c] ?? '') + '</td>'; });
html += '</tr>';
});
html += '</tbody></table>';
outputDiv.innerHTML = html;
if (infoDiv) infoDiv.innerHTML = `${data.total} registros (mostrando ${Math.min(data.total, 200)})`;
if (data.total > 200) infoDiv.innerHTML += ' <span class="text-yellow-600">- Resultado truncado a 200 filas</span>';
} catch(e) {
outputDiv.innerHTML = `<div class="p-4 text-red-600 text-sm">Error: ${e.message}</div>`;
}
}
// ───── CONSTRUCTOR ─────
async function cargarEsquema() {
const btn = document.querySelector('#panel-constructor .bg-green-600');
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';
try {
const resp = await fetch('/queries/esquema', { method: 'POST' });
const data = await resp.json();
if (data.error) { showToast(data.error, 'error'); return; }
esquema = data.tablas;
renderizarTablas();
} catch(e) { showToast('Error: ' + e.message, 'error'); }
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-sync mr-1"></i> Cargar esquema'; }
}
function renderizarTablas() {
const div = document.getElementById('builder-tablas');
div.innerHTML = '';
esquema.forEach(t => {
const id = 'tab-' + t.tabla.replace(/[^a-zA-Z0-9]/g, '_');
const checked = tablasSeleccionadas[t.tabla] ? 'checked' : '';
const card = document.createElement('div');
card.className = 'border rounded p-1.5 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');
card.innerHTML = `
<label class="flex items-center space-x-1 cursor-pointer">
<input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">
<span class="font-medium text-xs">${t.tabla}</span>
<span class="text-gray-400 text-xs">(${t.columnas.length})</span>
</label>
<div id="${id}" class="ml-4 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;
div.appendChild(card);
});
actualizarBuilder();
}
function renderizarColumnas(tabla, columnas) {
let html = '';
columnas.forEach(c => {
const sel = tablasSeleccionadas[tabla]?.columnas?.[c.nombre] ? 'checked' : '';
html += `<label class="flex items-center space-x-1 py-0.5 cursor-pointer hover:bg-blue-100 px-1 rounded text-xs">
<input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">
<span>${c.nombre} <span class="text-gray-400">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span></span>
</label>`;
});
return html;
}
function toggleTabla(tabla, checked) {
if (checked) tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };
else delete tablasSeleccionadas[tabla];
renderizarTablas(); actualizarBuilder();
}
function toggleColumna(tabla, columna, checked) {
if (!tablasSeleccionadas[tabla]) return;
if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;
else delete tablasSeleccionadas[tabla].columnas[columna];
renderizarTablas(); actualizarBuilder();
}
function agregarFiltro() {
filtros.push({ campo: '', operador: '=', parametro: '', condicion: 'AND' });
renderizarFiltros(); actualizarBuilder();
}
function renderizarFiltros() {
const div = document.getElementById('builder-where');
div.innerHTML = '';
if (!filtros.length) { div.innerHTML = '<p class="text-gray-400 italic">Sin filtros</p>'; return; }
filtros.forEach((f, i) => {
const opts = [];
Object.entries(tablasSeleccionadas).forEach(([t, info]) => {
const tInfo = esquema.find(e => e.tabla === t);
if (tInfo) tInfo.columnas.forEach(c => {
opts.push({ value: `${t}.${c.nombre}`, label: `${info.alias}.${c.nombre}` });
});
});
const row = document.createElement('div');
row.className = 'flex items-center space-x-1 text-xs';
row.innerHTML = `
<select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-1 py-0.5 text-xs max-w-[100px]">
<option value="">--campo--</option>
${opts.map(o => `<option value="${o.value}" ${f.campo===o.value?'selected':''}>${o.label}</option>`).join('')}
</select>
<select onchange="actualizarFiltro(${i},'operador',this.value)" class="border rounded px-1 py-0.5 text-xs w-14">
${['=','>','<','>=','<=','<>','LIKE','BETWEEN'].map(o => `<option ${f.operador===o?'selected':''}>${o}</option>`).join('')}
</select>
<input type="text" value="${f.parametro}" onchange="actualizarFiltro(${i},'parametro',this.value)" placeholder=":param" class="border rounded px-1 py-0.5 text-xs font-mono w-20">
<button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarBuilder();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>`;
div.appendChild(row);
if (i < filtros.length - 1) {
const sep = document.createElement('div');
sep.className = 'ml-1';
sep.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-1 py-0.5 text-xs w-14">
<option value="AND" ${filtros[i+1]?.condicion==='AND'?'selected':''}>AND</option>
<option value="OR" ${filtros[i+1]?.condicion==='OR'?'selected':''}>OR</option>
</select>`;
div.appendChild(sep);
}
});
}
function actualizarFiltro(i, prop, val) {
if (!filtros[i]) filtros[i] = { campo: '', operador: '=', parametro: '', condicion: 'AND' };
filtros[i][prop] = val;
actualizarBuilder();
}
function generarSql() {
const tabs = Object.entries(tablasSeleccionadas);
if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };
const selects = [], froms = [], allParams = new Set();
tabs.forEach(([tabla, info]) => {
froms.push({ tabla, alias: info.alias });
Object.keys(info.columnas).forEach(c => selects.push(`${info.alias}.${c}`));
});
if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };
let sql = 'SELECT\n ' + selects.join(',\n ') + '\nFROM ';
sql += froms.map((f, i) => i === 0 ? `${f.tabla} ${f.alias}` : `JOIN ${f.tabla} ${f.alias} ON 1=1`).join('\n');
const wheres = [];
filtros.forEach(f => {
if (f.campo && f.parametro) {
const [t, c] = f.campo.split('.');
const info = tablasSeleccionadas[t];
if (info) { wheres.push(`${info.alias}.${c} ${f.operador} ${f.parametro}`); if (f.parametro.startsWith(':')) allParams.add(f.parametro); }
}
});
if (wheres.length) sql += '\nWHERE ' + wheres.join(' ');
sql += '\nROWS 200';
return { sql, params: Array.from(allParams) };
}
function actualizarBuilder() {
const { sql, params } = generarSql();
document.getElementById('builder-sql').value = sql;
document.getElementById('builder-params').textContent = params.length ? 'Params: ' + params.join(', ') : '';
const tabs = Object.entries(tablasSeleccionadas);
const div = document.getElementById('builder-columnas');
if (!tabs.length) { div.innerHTML = '<p class="text-gray-400 italic">Seleccioná una tabla</p>'; return; }
let html = '';
tabs.forEach(([tabla, info]) => {
const cols = Object.keys(info.columnas);
if (cols.length) html += `<div class="mb-0.5 text-xs"><span class="font-medium">${info.alias}.</span> ${cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ')}</div>`;
});
div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';
}
function ejecutarBuilder() {
const sql = document.getElementById('builder-sql').value;
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
ejecutarSql(sql, 'builder-resultados', null);
}
function usarSqlEditor() {
const sql = document.getElementById('builder-sql').value;
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
document.getElementById('q_text').value = sql;
document.getElementById('probador-sql').value = sql;
cambiarTab('probador');
showToast('SQL enviado al Probador');
}
// ───── CONSULTAS GUARDADAS ─────
function cargarConsulta(id, name, type, text) {
document.getElementById('query_id').value = id;
document.getElementById('q_name').value = name;
document.getElementById('q_type').value = type;
document.getElementById('q_text').value = text;
document.getElementById('q_desc').value = '';
document.getElementById('probador-sql').value = text;
document.getElementById('btn-cancel').classList.remove('hidden');
document.querySelector('#panel-editor form').action = '/queries/update/' + id;
cambiarTab('probador');
}
function cancelEdit() {
document.getElementById('query_id').value = '';
document.getElementById('q_name').value = '';
document.getElementById('q_text').value = '';
document.getElementById('q_desc').value = '';
document.getElementById('btn-cancel').classList.add('hidden');
document.querySelector('#panel-editor form').action = '/queries/create';
}
async function ejecutarConsultaId(id) {
const form = new FormData(); form.append('sql', '');
const resp = await fetch('/queries/test', { method: 'POST', body: (()=>{const f=new FormData();f.append('query_id',id);return f;})() });
const data = await resp.json();
if (data.error) { showToast(data.error, 'error'); return; }
let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';
data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold">' + c + '</th>'; });
html += '</tr></thead><tbody>';
data.rows.slice(0,200).forEach(r => {
html += '<tr class="hover:bg-gray-50">';
data.columns.forEach(c => { html += '<td class="p-2 border whitespace-nowrap">' + (r[c] ?? '') + '</td>'; });
html += '</tr>';
});
html += '</tbody></table>';
const modal = document.createElement('div');
modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';
modal.innerHTML = '<div class="bg-white rounded-xl shadow-xl max-w-5xl w-full mx-4 max-h-[80vh] overflow-auto p-4"><div class="flex justify-between items-center mb-3"><h3 class="font-semibold text-sm">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-lg"></i></button></div>' + html + '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + Math.min(data.total, 200) + ')</p></div>';
document.body.appendChild(modal);
}
</script>
{% endblock %}
{% extends "base.html" %}
{% block title %}SQL Workbench{% endblock %}
{% block header %}SQL Workbench{% endblock %}
{% block content %}
<style>
.CodeMirror { height: 180px; font-size: 13px; }
.cm-s-default .cm-keyword { color: #0000ff; font-weight: bold; }
.schema-col:hover { background: #eff6ff; }
.schema-table-row:hover { background: #f3f4f6; }
#result-table table { border-collapse: collapse; width: 100%; }
#result-table th { position: sticky; top: 0; background: #f9fafb; z-index: 1; }
#result-table td, #result-table th { padding: 4px 10px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; font-size: 12px; text-align: left; }
#result-table tr:hover td { background: #eff6ff; }
#result-table tr:nth-child(even) td { background: #fafafa; }
#result-table tr:nth-child(even):hover td { background: #eff6ff; }
</style>
<div class="flex gap-3" style="height: calc(100vh - 148px);">
<!-- ── LEFT PANEL ─────────────────────────────────────────────── -->
<div class="flex flex-col gap-3" style="width: 240px; flex-shrink: 0;">
<!-- Schema Browser -->
<div class="bg-white rounded-xl border border-gray-200 flex flex-col" style="flex: 1; min-height: 0;">
<div class="px-3 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
<span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Esquema</span>
<button id="btn-conectar" onclick="cargarEsquema()"
class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
<i class="fas fa-plug"></i> Conectar
</button>
</div>
<div id="schema-search-wrap" class="hidden px-2 pt-2 flex-shrink-0">
<input id="schema-search" type="text" placeholder="Buscar tabla..."
oninput="filtrarTablas(this.value)"
class="w-full text-xs border border-gray-200 rounded px-2 py-1 focus:outline-none focus:border-blue-400">
</div>
<div id="schema-tree" class="flex-1 overflow-y-auto p-2 text-xs">
<p class="text-gray-400 italic text-center mt-4">Presioná Conectar para<br>cargar el esquema Firebird</p>
</div>
</div>
<!-- Saved Queries -->
<div class="bg-white rounded-xl border border-gray-200 flex flex-col" style="max-height: 38%; min-height: 120px;">
<div class="px-3 py-2 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
<span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Consultas</span>
<button onclick="abrirModalNueva()"
class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>
</div>
<div class="overflow-y-auto flex-1">
{% for q in queries %}
<div class="group flex items-center px-3 py-1.5 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-0"
onclick="cargarConsulta({{ q.query_text | tojson }}, {{ q.name | tojson }}, {{ q.query_type | tojson }})">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-1.5">
<span class="text-xs px-1 rounded {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-600{% else %}bg-purple-100 text-purple-600{% endif %}">
{{ q.query_type[:4] }}
</span>
<span class="text-xs text-gray-800 truncate">{{ q.name }}</span>
</div>
</div>
<div class="hidden group-hover:flex items-center gap-1 ml-1 flex-shrink-0">
<button onclick="event.stopPropagation();editarConsulta({{ q.id }}, {{ q.name | tojson }}, {{ q.query_type | tojson }}, {{ q.query_text | tojson }}, {{ (q.description or '') | tojson }})"
class="text-blue-400 hover:text-blue-600 p-0.5"><i class="fas fa-edit text-xs"></i></button>
<form method="POST" action="/queries/delete/{{ q.id }}" onsubmit="return confirm('¿Eliminar consulta?')" class="inline">
<button type="submit" class="text-red-400 hover:text-red-600 p-0.5"><i class="fas fa-trash text-xs"></i></button>
</form>
</div>
</div>
{% else %}
<p class="text-xs text-gray-400 italic p-3 text-center">Sin consultas guardadas</p>
{% endfor %}
</div>
</div>
</div>
<!-- ── RIGHT PANEL ────────────────────────────────────────────── -->
<div class="flex-1 flex flex-col gap-3 min-w-0">
<!-- Toolbar -->
<div class="bg-white rounded-xl border border-gray-200 px-4 py-2.5 flex items-center gap-2 flex-shrink-0">
<button onclick="ejecutar()" id="btn-run"
class="flex items-center gap-2 px-4 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg font-medium">
<i class="fas fa-play text-xs"></i> Ejecutar
</button>
<span class="text-gray-200 select-none">|</span>
<input type="text" id="q-name" placeholder="Nombre de la consulta"
class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 w-44 focus:outline-none focus:border-blue-400">
<select id="q-type" class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:border-blue-400">
<option value="terceros">Terceros</option>
<option value="transaccion">Transacción</option>
</select>
<button onclick="guardar()"
class="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg">
<i class="fas fa-save text-xs"></i> Guardar
</button>
<button id="btn-cancel" onclick="cancelarEdicion()"
class="hidden items-center gap-1 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-lg">
<i class="fas fa-times text-xs"></i> Cancelar
</button>
<span class="text-xs text-gray-400 ml-1 hidden" id="editing-label"></span>
<div class="ml-auto text-xs" id="status-bar"></div>
</div>
<!-- Editor -->
<div class="bg-white rounded-xl border border-gray-200 flex-shrink-0">
<div class="flex items-center justify-between px-3 py-1.5 border-b border-gray-100">
<span class="text-xs text-gray-500 font-mono" id="editor-label">SQL</span>
<div class="flex items-center gap-2">
<span class="text-xs text-gray-400">Ctrl+Enter para ejecutar · Ctrl+Space autocomplete</span>
<button onclick="limpiar()" class="text-xs text-gray-400 hover:text-gray-600"><i class="fas fa-eraser"></i></button>
</div>
</div>
<textarea id="sql-editor" class="hidden"></textarea>
</div>
<!-- Results -->
<div class="bg-white rounded-xl border border-gray-200 flex-1 flex flex-col min-h-0">
<div class="px-4 py-2 border-b border-gray-100 flex items-center justify-between flex-shrink-0">
<span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Resultados</span>
<span id="result-info" class="text-xs text-gray-400"></span>
</div>
<div id="result-table" class="flex-1 overflow-auto">
<div class="flex flex-col items-center justify-center h-full text-gray-300 select-none">
<i class="fas fa-table text-4xl mb-3"></i>
<p class="text-sm">Ejecutá una consulta para ver resultados</p>
</div>
</div>
</div>
</div>
</div>
<!-- ── MODAL GUARDAR ──────────────────────────────────────────────── -->
<div id="modal-save" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
<div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6">
<h3 class="font-semibold text-gray-800 mb-4 text-base" id="modal-title">Guardar consulta</h3>
<form id="form-save" method="POST" action="/queries/create" class="space-y-3">
<input type="text" name="name" id="form-name" required placeholder="Nombre *"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
<div class="grid grid-cols-2 gap-3">
<select name="query_type" id="form-type"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
<option value="terceros">Terceros</option>
<option value="transaccion">Transacción</option>
</select>
<input type="text" name="description" id="form-desc" placeholder="Descripción"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-400">
</div>
<textarea name="query_text" id="form-sql" rows="5"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:outline-none focus:border-blue-400"></textarea>
<div class="flex justify-end gap-2 pt-1">
<button type="button" onclick="cerrarModal()"
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Cancelar</button>
<button type="submit"
class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Guardar</button>
</div>
</form>
</div>
</div>
<script>
let editor, esquema = [], editandoId = null;
// ── INIT CODEMIRROR ──────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
editor = CodeMirror.fromTextArea(document.getElementById('sql-editor'), {
mode: 'text/x-sql',
lineNumbers: true,
autofocus: true,
tabSize: 4,
indentWithTabs: false,
lineWrapping: true,
extraKeys: {
'Ctrl-Space': 'autocomplete',
'Cmd-Space': 'autocomplete',
},
hintOptions: { tables: {} }
});
editor.setSize(null, 180);
editor.on('keydown', (cm, e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
ejecutar();
}
});
});
// ── SCHEMA BROWSER ───────────────────────────────────────────────────
async function cargarEsquema() {
const btn = document.getElementById('btn-conectar');
const tree = document.getElementById('schema-tree');
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
btn.disabled = true;
tree.innerHTML = '<p class="text-gray-400 italic text-center mt-4">Conectando...</p>';
try {
const resp = await fetch('/queries/esquema', { method: 'POST' });
const data = await resp.json();
if (data.error) {
tree.innerHTML = `<div class="p-2 text-red-500 text-xs">${data.error}</div>`;
showToast(data.error, 'error');
return;
}
esquema = data.tablas;
// feed schema into CodeMirror autocomplete
const tablesHint = {};
esquema.forEach(t => { tablesHint[t.tabla] = t.columnas.map(c => c.nombre); });
editor.setOption('hintOptions', { tables: tablesHint });
document.getElementById('schema-search-wrap').classList.remove('hidden');
renderSchemaTree(esquema);
btn.innerHTML = '<i class="fas fa-sync mr-1"></i>Refrescar';
showToast(`${esquema.length} tablas cargadas`);
} catch(e) {
tree.innerHTML = `<div class="p-2 text-red-500 text-xs">Error: ${e.message}</div>`;
showToast('Error: ' + e.message, 'error');
} finally {
btn.disabled = false;
}
}
function filtrarTablas(q) {
const filtradas = q.trim()
? esquema.filter(t => t.tabla.toLowerCase().includes(q.toLowerCase()))
: esquema;
renderSchemaTree(filtradas);
}
function renderSchemaTree(tablas) {
const tree = document.getElementById('schema-tree');
if (!tablas.length) {
tree.innerHTML = '<p class="text-gray-400 italic text-center mt-4 text-xs">Sin resultados</p>';
return;
}
tree.innerHTML = '';
tablas.forEach(t => {
const key = t.tabla.replace(/\W/g, '_');
const wrap = document.createElement('div');
wrap.className = 'mb-0.5';
wrap.innerHTML = `
<div class="schema-table-row flex items-center gap-1 px-2 py-1 rounded cursor-pointer group select-none"
onclick="toggleCols('${key}')">
<i id="chev-${key}" class="fas fa-chevron-right text-gray-300 text-xs transition-transform duration-150" style="width:10px"></i>
<i class="fas fa-table text-blue-400 text-xs"></i>
<span class="font-semibold text-gray-700 flex-1 text-xs">${t.tabla}</span>
<span class="text-gray-300 text-xs">${t.columnas.length}</span>
<button onclick="event.stopPropagation();selectAll('${t.tabla}',${JSON.stringify(t.columnas.map(c=>c.nombre))})"
title="SELECT *" class="hidden group-hover:inline text-blue-400 hover:text-blue-600 text-xs ml-0.5">
<i class="fas fa-code"></i>
</button>
</div>
<div id="cols-${key}" class="hidden ml-4 border-l border-gray-200 pl-2">
${t.columnas.map(c => `
<div class="schema-col flex items-center gap-1 px-1 py-0.5 rounded cursor-pointer text-xs"
onclick="insertarTexto('${c.nombre}')" title="Insertar ${c.nombre}">
<i class="fas fa-columns text-gray-300" style="font-size:9px;width:10px"></i>
<span class="text-gray-700 flex-1">${c.nombre}</span>
<span class="text-gray-400" style="font-size:10px">${c.tipo}</span>
</div>`).join('')}
</div>`;
tree.appendChild(wrap);
});
}
function toggleCols(key) {
const div = document.getElementById('cols-' + key);
const chev = document.getElementById('chev-' + key);
const open = !div.classList.contains('hidden');
div.classList.toggle('hidden', open);
chev.style.transform = open ? '' : 'rotate(90deg)';
}
function insertarTexto(texto) {
if (!editor) return;
editor.replaceSelection(texto);
editor.focus();
}
function selectAll(tabla, columnas) {
const cols = columnas.map(c => ` ${c}`).join(',\n');
const sql = `SELECT\n${cols}\nFROM ${tabla}\nROWS 50`;
editor.setValue(sql);
editor.focus();
}
// ── EJECUTAR ─────────────────────────────────────────────────────────
async function ejecutar() {
const sql = editor.getValue().trim();
if (!sql) { showToast('Escribí una consulta SQL', 'warning'); return; }
const resultDiv = document.getElementById('result-table');
const infoDiv = document.getElementById('result-info');
const statusBar = document.getElementById('status-bar');
const btnRun = document.getElementById('btn-run');
btnRun.disabled = true;
btnRun.innerHTML = '<i class="fas fa-spinner fa-spin text-xs mr-2"></i>Ejecutando...';
resultDiv.innerHTML = '<div class="flex items-center justify-center h-full text-gray-400 text-sm gap-2"><i class="fas fa-spinner fa-spin"></i> Ejecutando...</div>';
infoDiv.textContent = '';
statusBar.innerHTML = '';
const t0 = performance.now();
try {
const form = new FormData();
form.append('sql', sql);
const resp = await fetch('/queries/run-sql', { method: 'POST', body: form });
const data = await resp.json();
const ms = performance.now() - t0;
const elapsed = ms < 1000 ? `${Math.round(ms)}ms` : `${(ms/1000).toFixed(2)}s`;
if (data.error) {
resultDiv.innerHTML = `<div class="p-4 text-red-600 text-sm flex items-start gap-2"><i class="fas fa-exclamation-circle mt-0.5"></i><pre class="whitespace-pre-wrap font-mono text-xs">${escHtml(data.error)}</pre></div>`;
statusBar.innerHTML = `<span class="text-red-500"><i class="fas fa-times-circle mr-1"></i>Error · ${elapsed}</span>`;
return;
}
if (!data.rows || !data.rows.length) {
resultDiv.innerHTML = '<div class="flex items-center justify-center h-full text-gray-400 text-sm">Sin resultados</div>';
infoDiv.textContent = '0 filas';
statusBar.innerHTML = `<span class="text-gray-500">0 filas · ${elapsed}</span>`;
return;
}
let html = '<table><thead><tr>';
data.columns.forEach(c => {
html += `<th class="text-gray-700 font-semibold">${escHtml(c)}</th>`;
});
html += '</tr></thead><tbody>';
data.rows.forEach(r => {
html += '<tr>';
data.columns.forEach(c => {
const v = r[c] ?? '';
const vs = String(v);
html += `<td title="${escAttr(vs)}">${escHtml(vs)}</td>`;
});
html += '</tr>';
});
html += '</tbody></table>';
resultDiv.innerHTML = html;
const shown = Math.min(data.total, 200);
const trunc = data.total > 200 ? ` <span class="text-yellow-600 font-medium">(truncado a 200)</span>` : '';
infoDiv.innerHTML = `${data.total} fila${data.total !== 1 ? 's' : ''}${trunc}`;
statusBar.innerHTML = `<span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i>${shown} fila${shown !== 1 ? 's' : ''} · ${elapsed}</span>`;
} catch(e) {
resultDiv.innerHTML = `<div class="p-4 text-red-600 text-sm">Error de red: ${escHtml(e.message)}</div>`;
} finally {
btnRun.disabled = false;
btnRun.innerHTML = '<i class="fas fa-play text-xs"></i> Ejecutar';
}
}
function limpiar() {
if (editor) editor.setValue('');
document.getElementById('result-table').innerHTML = '<div class="flex flex-col items-center justify-center h-full text-gray-300 select-none"><i class="fas fa-table text-4xl mb-3"></i><p class="text-sm">Ejecutá una consulta para ver resultados</p></div>';
document.getElementById('result-info').textContent = '';
document.getElementById('status-bar').innerHTML = '';
}
// ── GUARDAR / EDITAR ──────────────────────────────────────────────────
function abrirModalNueva() {
editandoId = null;
document.getElementById('form-save').action = '/queries/create';
document.getElementById('modal-title').textContent = 'Nueva consulta';
document.getElementById('form-name').value = document.getElementById('q-name').value;
document.getElementById('form-type').value = document.getElementById('q-type').value;
document.getElementById('form-sql').value = editor ? editor.getValue() : '';
document.getElementById('form-desc').value = '';
document.getElementById('modal-save').classList.remove('hidden');
setTimeout(() => document.getElementById('form-name').focus(), 50);
}
function guardar() {
const sql = editor ? editor.getValue().trim() : '';
if (!sql) { showToast('No hay SQL para guardar', 'warning'); return; }
document.getElementById('form-sql').value = sql;
document.getElementById('form-name').value = document.getElementById('q-name').value;
document.getElementById('form-type').value = document.getElementById('q-type').value;
if (editandoId) {
document.getElementById('form-save').action = '/queries/update/' + editandoId;
document.getElementById('modal-title').textContent = 'Actualizar consulta';
} else {
document.getElementById('form-save').action = '/queries/create';
document.getElementById('modal-title').textContent = 'Guardar consulta';
}
document.getElementById('modal-save').classList.remove('hidden');
setTimeout(() => document.getElementById('form-name').focus(), 50);
}
function cerrarModal() {
document.getElementById('modal-save').classList.add('hidden');
}
function cargarConsulta(sql, name, type) {
if (editor) editor.setValue(sql);
document.getElementById('q-name').value = name;
document.getElementById('q-type').value = type;
editor && editor.focus();
}
function editarConsulta(id, name, type, sql, desc) {
editandoId = id;
cargarConsulta(sql, name, type);
document.getElementById('form-desc').value = desc;
document.getElementById('btn-cancel').classList.replace('hidden', 'flex');
document.getElementById('editing-label').textContent = `Editando: ${name}`;
document.getElementById('editing-label').classList.remove('hidden');
}
function cancelarEdicion() {
editandoId = null;
limpiar();
document.getElementById('q-name').value = '';
document.getElementById('btn-cancel').classList.replace('flex', 'hidden');
document.getElementById('editing-label').classList.add('hidden');
}
// ── UTILS ─────────────────────────────────────────────────────────────
function escHtml(s) {
return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
function escAttr(s) {
return String(s).replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}
// close modal on backdrop click
document.getElementById('modal-save').addEventListener('click', e => {
if (e.target === e.currentTarget) cerrarModal();
});
</script>
{% endblock %}