Add CodeMirror SQL editor with autocomplete for tables and columns
This commit is contained in:
Lizandro Guarnizo
+136
-127
@@ -1,127 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" class="h-full bg-gray-50">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RIPS Manager - {% block title %}Dashboard{% endblock %}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {'50': '#eff6ff','100': '#dbeafe','200': '#bfdbfe','300': '#93c5fd','400': '#60a5fa','500': '#3b82f6','600': '#2563eb','700': '#1d4ed8','800': '#1e40af','900': '#1e3a8a'}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<div class="min-h-full">
|
||||
{% if user %}
|
||||
<!-- Sidebar -->
|
||||
<div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white z-30">
|
||||
<div class="flex items-center h-16 px-6 border-b border-gray-700">
|
||||
<i class="fas fa-file-medical text-blue-400 text-xl mr-3"></i>
|
||||
<span class="font-bold text-lg">RIPS Manager</span>
|
||||
</div>
|
||||
<nav class="mt-4 px-3 space-y-1">
|
||||
<a href="/dashboard" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/dashboard' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-chart-pie w-5 mr-2"></i> Dashboard
|
||||
</a>
|
||||
<a href="/config" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/config' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-cog w-5 mr-2"></i> Configuración
|
||||
</a>
|
||||
<a href="/queries" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/queries' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-database w-5 mr-2"></i> Consultas SQL
|
||||
</a>
|
||||
<hr class="my-3 border-gray-700">
|
||||
<p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Envíos</p>
|
||||
<a href="/terceros" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/terceros' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-user w-5 mr-2"></i> Terceros
|
||||
</a>
|
||||
<a href="/transaccion" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/transaccion' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-exchange-alt w-5 mr-2"></i> Transacción RIPS
|
||||
</a>
|
||||
<a href="/automation" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/automation' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-robot w-5 mr-2"></i> Automatización
|
||||
</a>
|
||||
<hr class="my-3 border-gray-700">
|
||||
<a href="/logs" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/logs' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
|
||||
<i class="fas fa-history w-5 mr-2"></i> Historial
|
||||
</a>
|
||||
<a href="/auth/logout" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:bg-gray-700">
|
||||
<i class="fas fa-sign-out-alt w-5 mr-2"></i> Salir
|
||||
</a>
|
||||
</nav>
|
||||
<div class="absolute bottom-0 left-0 right-0 px-4 py-3 border-t border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{{ user.username[0]|upper }}
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-white">{{ user.username }}</p>
|
||||
<p class="text-xs text-gray-400">Sesión activa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="pl-64">
|
||||
<header class="bg-white shadow-sm border-b border-gray-200">
|
||||
<div class="flex items-center justify-between h-16 px-8">
|
||||
<h1 class="text-xl font-semibold text-gray-800">{% block header %}Dashboard{% endblock %}</h1>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="text-sm text-gray-500">
|
||||
<i class="far fa-calendar-alt mr-1"></i>
|
||||
<script>document.write(new Date().toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}))</script>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="p-8">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
{% else %}
|
||||
<main>
|
||||
{% block auth_content %}{% endblock %}
|
||||
</main>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
console.log('%c RIPS Manager v1.0 ', 'background:#1e3a8a;color:white;font-size:18px;font-weight:bold;padding:8px 12px;border-radius:4px;');
|
||||
console.log('%c Desarrollado por U-SITE SAS BIC', 'font-size:14px;');
|
||||
console.log('%c https://u-site.app/', 'color:#2563eb;font-size:12px;');
|
||||
console.log('%c Sistema de generacion y envio de RIPS (Res. 2275/2023)', 'font-style:italic;font-size:12px;');
|
||||
|
||||
async function fetchJSON(url, options = {}) {
|
||||
const resp = await fetch(url, options);
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
const colors = {success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500'};
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-500`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 4000);
|
||||
}
|
||||
|
||||
function showLoading(btn) {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';
|
||||
}
|
||||
|
||||
function hideLoading(btn, text) {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = text;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>␍
|
||||
<html lang="es" class="h-full bg-gray-50">␍
|
||||
<head>␍
|
||||
<meta charset="UTF-8">␍
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">␍
|
||||
<title>RIPS Manager - {% block title %}Dashboard{% endblock %}</title>␍
|
||||
<script src="https://cdn.tailwindcss.com"></script>␍
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">␍
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>␍
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/sql/sql.min.js"></script>␍
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/show-hint.min.js"></script>␍
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/sql-hint.min.js"></script>␍
|
||||
<style>␍
|
||||
.CodeMirror { border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 13px; height: auto; min-height: 200px; }␍
|
||||
.CodeMirror-hints { font-size: 12px; }␍
|
||||
</style>␍
|
||||
<script>␍
|
||||
tailwind.config = {␍
|
||||
theme: {␍
|
||||
extend: {␍
|
||||
colors: {␍
|
||||
primary: {'50': '#eff6ff','100': '#dbeafe','200': '#bfdbfe','300': '#93c5fd','400': '#60a5fa','500': '#3b82f6','600': '#2563eb','700': '#1d4ed8','800': '#1e40af','900': '#1e3a8a'}␍
|
||||
}␍
|
||||
}␍
|
||||
}␍
|
||||
}␍
|
||||
</script>␍
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">␍
|
||||
</head>␍
|
||||
<body class="h-full">␍
|
||||
<div class="min-h-full">␍
|
||||
{% if user %}␍
|
||||
<!-- Sidebar -->␍
|
||||
<div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white z-30">␍
|
||||
<div class="flex items-center h-16 px-6 border-b border-gray-700">␍
|
||||
<i class="fas fa-file-medical text-blue-400 text-xl mr-3"></i>␍
|
||||
<span class="font-bold text-lg">RIPS Manager</span>␍
|
||||
</div>␍
|
||||
<nav class="mt-4 px-3 space-y-1">␍
|
||||
<a href="/dashboard" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/dashboard' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-chart-pie w-5 mr-2"></i> Dashboard␍
|
||||
</a>␍
|
||||
<a href="/config" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/config' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-cog w-5 mr-2"></i> Configuración␍
|
||||
</a>␍
|
||||
<a href="/queries" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/queries' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-database w-5 mr-2"></i> Consultas SQL␍
|
||||
</a>␍
|
||||
<hr class="my-3 border-gray-700">␍
|
||||
<p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Envíos</p>␍
|
||||
<a href="/terceros" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/terceros' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-user w-5 mr-2"></i> Terceros␍
|
||||
</a>␍
|
||||
<a href="/transaccion" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/transaccion' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-exchange-alt w-5 mr-2"></i> Transacción RIPS␍
|
||||
</a>␍
|
||||
<a href="/automation" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/automation' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-robot w-5 mr-2"></i> Automatización␍
|
||||
</a>␍
|
||||
<hr class="my-3 border-gray-700">␍
|
||||
<a href="/logs" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/logs' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">␍
|
||||
<i class="fas fa-history w-5 mr-2"></i> Historial␍
|
||||
</a>␍
|
||||
<a href="/auth/logout" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:bg-gray-700">␍
|
||||
<i class="fas fa-sign-out-alt w-5 mr-2"></i> Salir␍
|
||||
</a>␍
|
||||
</nav>␍
|
||||
<div class="absolute bottom-0 left-0 right-0 px-4 py-3 border-t border-gray-700">␍
|
||||
<div class="flex items-center">␍
|
||||
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-sm font-bold">␍
|
||||
{{ user.username[0]|upper }}␍
|
||||
</div>␍
|
||||
<div class="ml-3">␍
|
||||
<p class="text-sm font-medium text-white">{{ user.username }}</p>␍
|
||||
<p class="text-xs text-gray-400">Sesión activa</p>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
␍
|
||||
<!-- Main content -->␍
|
||||
<div class="pl-64">␍
|
||||
<header class="bg-white shadow-sm border-b border-gray-200">␍
|
||||
<div class="flex items-center justify-between h-16 px-8">␍
|
||||
<h1 class="text-xl font-semibold text-gray-800">{% block header %}Dashboard{% endblock %}</h1>␍
|
||||
<div class="flex items-center space-x-4">␍
|
||||
<span class="text-sm text-gray-500">␍
|
||||
<i class="far fa-calendar-alt mr-1"></i>␍
|
||||
<script>document.write(new Date().toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}))</script>␍
|
||||
</span>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</header>␍
|
||||
<main class="p-8">␍
|
||||
{% block content %}{% endblock %}␍
|
||||
</main>␍
|
||||
</div>␍
|
||||
{% else %}␍
|
||||
<main>␍
|
||||
{% block auth_content %}{% endblock %}␍
|
||||
</main>␍
|
||||
{% endif %}␍
|
||||
</div>␍
|
||||
␍
|
||||
<script>␍
|
||||
console.log('%c RIPS Manager v1.0 ', 'background:#1e3a8a;color:white;font-size:18px;font-weight:bold;padding:8px 12px;border-radius:4px;');␍
|
||||
console.log('%c Desarrollado por U-SITE SAS BIC', 'font-size:14px;');␍
|
||||
console.log('%c https://u-site.app/', 'color:#2563eb;font-size:12px;');␍
|
||||
console.log('%c Sistema de generacion y envio de RIPS (Res. 2275/2023)', 'font-style:italic;font-size:12px;');␍
|
||||
␍
|
||||
async function fetchJSON(url, options = {}) {␍
|
||||
const resp = await fetch(url, options);␍
|
||||
return await resp.json();␍
|
||||
}␍
|
||||
␍
|
||||
function showToast(message, type = 'success') {␍
|
||||
const colors = {success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500'};␍
|
||||
const toast = document.createElement('div');␍
|
||||
toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-500`;␍
|
||||
toast.textContent = message;␍
|
||||
document.body.appendChild(toast);␍
|
||||
setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 4000);␍
|
||||
}␍
|
||||
␍
|
||||
function showLoading(btn) {␍
|
||||
btn.disabled = true;␍
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';␍
|
||||
}␍
|
||||
␍
|
||||
function hideLoading(btn, text) {␍
|
||||
btn.disabled = false;␍
|
||||
btn.innerHTML = text;␍
|
||||
}␍
|
||||
</script>␍
|
||||
</body>␍
|
||||
</html>␍
|
||||
|
||||
+450
-402
@@ -1,402 +1,450 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Consultas SQL{% endblock %}
|
||||
{% block header %}Consultas SQL{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="flex space-x-2 mb-4">
|
||||
<button onclick="mostrarEditor()" class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white" id="btn-editor"><i class="fas fa-code mr-1"></i> Editor SQL</button>
|
||||
<button onclick="mostrarBuilder()" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300" id="btn-builder"><i class="fas fa-wrench mr-1"></i> Constructor Visual</button>
|
||||
</div>
|
||||
|
||||
<div id="panel-editor">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Mis Consultas</h3>
|
||||
<button onclick="document.getElementById('modal-new-query').classList.remove('hidden')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
<div class="p-4 space-y-2">
|
||||
{% for q in queries %}
|
||||
<div class="p-3 rounded-lg border border-gray-200 hover:border-blue-300">
|
||||
<div onclick="editQuery({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`, `{{ q.description|e }}`)" class="cursor-pointer">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-sm text-gray-800">{{ q.name }}</span>
|
||||
<span class="px-2 py-0.5 rounded text-xs font-medium {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1 truncate">{{ q.description or 'Sin descripción' }}</p>
|
||||
</div>
|
||||
<button onclick="ejecutarTest(this, {{ q.id }})" class="mt-2 text-xs text-green-600 hover:text-green-800"><i class="fas fa-play mr-1"></i> Probar</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-code mr-2 text-blue-500"></i>Editor SQL</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<form method="POST" action="/queries/create" class="space-y-4">
|
||||
<input type="hidden" name="query_id" id="query_id" value="">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
|
||||
<input type="text" name="name" id="q_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Nombre descriptivo">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
|
||||
<select name="query_type" id="q_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
||||
<option value="terceros">Terceros (datos paciente)</option>
|
||||
<option value="transaccion">Transacción (procedimientos)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Consulta SQL</label>
|
||||
<textarea name="query_text" id="q_text" rows="10" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50" placeholder="SELECT ... FROM ... WHERE ..."></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
|
||||
<input type="text" name="description" id="q_desc" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="¿Qué hace esta consulta?">
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"><i class="fas fa-save mr-1"></i> Guardar</button>
|
||||
<button type="button" onclick="cancelEdit()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 bg-blue-50 rounded-xl border border-blue-200 p-4">
|
||||
<h4 class="text-sm font-medium text-blue-800"><i class="fas fa-info-circle mr-1"></i> Parámetros disponibles</h4>
|
||||
<p class="text-xs text-blue-600 mt-1">
|
||||
Usa <code class="bg-blue-100 px-1 rounded">:doc_num</code> para filtro por documento,
|
||||
<code class="bg-blue-100 px-1 rounded">:factura</code> para filtro por factura,
|
||||
<code class="bg-blue-100 px-1 rounded">:fecha_ini</code> y <code class="bg-blue-100 px-1 rounded">:fecha_fin</code> para rango de fechas.
|
||||
</p>
|
||||
<button onclick="listarTablas(this)" class="mt-3 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-table mr-1"></i> Ver tablas disponibles</button>
|
||||
<div id="tablas-list" class="mt-2 hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panel-builder" class="hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual de Consultas</h3>
|
||||
<button onclick="cargarEsquema()" class="px-3 py-1.5 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-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-1">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2"><i class="fas fa-table mr-1"></i> Tablas</h4>
|
||||
<div id="builder-tablas" class="space-y-1 max-h-96 overflow-y-auto border rounded-lg p-2 bg-gray-50 text-xs">
|
||||
<p class="text-gray-400 italic">Presiona "Cargar esquema"</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-2">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">Columnas seleccionadas</h4>
|
||||
<div id="builder-columnas" class="border rounded-lg p-3 bg-gray-50 min-h-[80px] text-xs mb-4">
|
||||
<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>
|
||||
</div>
|
||||
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">Filtros (WHERE)</h4>
|
||||
<div id="builder-where" class="space-y-2 mb-4"></div>
|
||||
<button onclick="agregarFiltro()" class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>
|
||||
|
||||
<div class="mt-4">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">SQL Generado</h4>
|
||||
<textarea id="builder-sql" rows="6" readonly class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs font-mono bg-gray-100"></textarea>
|
||||
<p id="builder-params" class="text-xs text-blue-600 mt-1"></p>
|
||||
<div class="flex space-x-2 mt-2">
|
||||
<button onclick="usarSql()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg"><i class="fas fa-arrow-right mr-1"></i> Usar en editor</button>
|
||||
<button onclick="copiarSql()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-copy mr-1"></i> Copiar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let esquema = [];
|
||||
let tablasSeleccionadas = {};
|
||||
let filtros = [];
|
||||
let aliasCounter = 0;
|
||||
|
||||
function mostrarEditor() {
|
||||
document.getElementById('panel-editor').classList.remove('hidden');
|
||||
document.getElementById('panel-builder').classList.add('hidden');
|
||||
document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';
|
||||
document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';
|
||||
}
|
||||
function mostrarBuilder() {
|
||||
document.getElementById('panel-editor').classList.add('hidden');
|
||||
document.getElementById('panel-builder').classList.remove('hidden');
|
||||
document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';
|
||||
document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';
|
||||
if (!esquema.length) cargarEsquema();
|
||||
}
|
||||
|
||||
async function cargarEsquema() {
|
||||
const btn = document.querySelector('#panel-builder .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-2 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');
|
||||
card.innerHTML = `
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">
|
||||
<span class="font-medium text-sm">${t.tabla}</span>
|
||||
<span class="text-gray-400">(${t.columnas.length} cols)</span>
|
||||
</label>
|
||||
<div id="${id}" class="ml-5 mt-1 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;
|
||||
div.appendChild(card);
|
||||
});
|
||||
actualizarVista();
|
||||
}
|
||||
|
||||
function renderizarColumnas(tabla, columnas) {
|
||||
let html = '';
|
||||
columnas.forEach(c => {
|
||||
const key = tabla + '.' + c.nombre;
|
||||
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">
|
||||
<input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">
|
||||
<span>${c.nombre}</span>
|
||||
<span class="text-gray-400 ml-1">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span>
|
||||
</label>`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
function toggleTabla(tabla, checked) {
|
||||
if (checked) {
|
||||
tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };
|
||||
} else {
|
||||
delete tablasSeleccionadas[tabla];
|
||||
}
|
||||
renderizarTablas();
|
||||
actualizarVista();
|
||||
}
|
||||
|
||||
function toggleColumna(tabla, columna, checked) {
|
||||
if (!tablasSeleccionadas[tabla]) return;
|
||||
if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;
|
||||
else delete tablasSeleccionadas[tabla].columnas[columna];
|
||||
renderizarTablas();
|
||||
actualizarVista();
|
||||
}
|
||||
|
||||
function agregarFiltro() {
|
||||
filtros.push({ tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' });
|
||||
renderizarFiltros();
|
||||
actualizarVista();
|
||||
}
|
||||
|
||||
function renderizarFiltros() {
|
||||
const div = document.getElementById('builder-where');
|
||||
div.innerHTML = '';
|
||||
if (!filtros.length) {
|
||||
div.innerHTML = '<p class="text-xs text-gray-400 italic">Sin filtros (seleccionar todos los registros)</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-2 text-xs';
|
||||
row.innerHTML = `
|
||||
<select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-2 py-1 text-xs">
|
||||
<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-2 py-1 text-xs w-20">
|
||||
${['=','>','<','>=','<=','<>','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-2 py-1 text-xs font-mono w-28">
|
||||
<button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarVista();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>
|
||||
`;
|
||||
if (i < filtros.length - 1) {
|
||||
const op = document.createElement('div');
|
||||
op.className = 'flex items-center space-x-2 mt-1';
|
||||
op.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-2 py-1 text-xs w-20">
|
||||
<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(row);
|
||||
div.appendChild(op);
|
||||
} else {
|
||||
div.appendChild(row);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function actualizarFiltro(i, prop, val) {
|
||||
if (!filtros[i]) filtros[i] = { tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' };
|
||||
filtros[i][prop] = val;
|
||||
actualizarVista();
|
||||
}
|
||||
|
||||
function generarSql() {
|
||||
const tabs = Object.entries(tablasSeleccionadas);
|
||||
if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };
|
||||
|
||||
const selects = [];
|
||||
const froms = [];
|
||||
const allParams = new Set();
|
||||
|
||||
tabs.forEach(([tabla, info]) => {
|
||||
froms.push({ tabla, alias: info.alias });
|
||||
const cols = Object.keys(info.columnas);
|
||||
if (cols.length) {
|
||||
cols.forEach(c => selects.push(`${info.alias}.${c}`));
|
||||
}
|
||||
});
|
||||
|
||||
if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };
|
||||
if (!froms.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };
|
||||
|
||||
let sql = 'SELECT\n ' + selects.join(',\n ');
|
||||
sql += '\nFROM ' + froms.map((f, i) => {
|
||||
if (i === 0) return `${f.tabla} ${f.alias}`;
|
||||
return `JOIN ${f.tabla} ${f.alias} ON 1=1`; // basic join, user refines in editor
|
||||
}).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(' ');
|
||||
|
||||
return { sql, params: Array.from(allParams) };
|
||||
}
|
||||
|
||||
function actualizarVista() {
|
||||
const { sql, params } = generarSql();
|
||||
document.getElementById('builder-sql').value = sql;
|
||||
document.getElementById('builder-params').textContent = params.length ? 'Parámetros: ' + params.join(', ') : 'Sin parámetros';
|
||||
|
||||
// Actualizar vista de columnas seleccionadas
|
||||
const div = document.getElementById('builder-columnas');
|
||||
const tabs = Object.entries(tablasSeleccionadas);
|
||||
if (!tabs.length) {
|
||||
div.innerHTML = '<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>';
|
||||
return;
|
||||
}
|
||||
let html = '';
|
||||
tabs.forEach(([tabla, info]) => {
|
||||
const cols = Object.keys(info.columnas);
|
||||
if (cols.length) {
|
||||
html += `<div class="mb-1"><span class="font-medium">${info.alias}.${tabla}</span>: `;
|
||||
html += cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ');
|
||||
html += '</div>';
|
||||
}
|
||||
});
|
||||
div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';
|
||||
}
|
||||
|
||||
function usarSql() {
|
||||
const sql = document.getElementById('builder-sql').value;
|
||||
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
|
||||
document.getElementById('q_text').value = sql;
|
||||
mostrarEditor();
|
||||
showToast('SQL copiado al editor');
|
||||
}
|
||||
|
||||
function copiarSql() {
|
||||
const sql = document.getElementById('builder-sql').value;
|
||||
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }
|
||||
navigator.clipboard.writeText(sql).then(() => showToast('SQL copiado al portapapeles'));
|
||||
}
|
||||
|
||||
// Existing functions below
|
||||
function editQuery(id, name, type, text, desc) {
|
||||
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 = desc;
|
||||
document.getElementById('btn-cancel').classList.remove('hidden');
|
||||
document.querySelector('form').action = '/queries/update/' + id;
|
||||
}
|
||||
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('form').action = '/queries/create';
|
||||
}
|
||||
async function listarTablas(btn) {
|
||||
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';
|
||||
try {
|
||||
const resp = await fetch('/queries/tablas', { method: 'POST' });
|
||||
const data = await resp.json();
|
||||
if (data.error) { showToast(data.error, 'error'); return; }
|
||||
const div = document.getElementById('tablas-list');
|
||||
div.innerHTML = '<div class="max-h-40 overflow-y-auto mt-2"><div class="grid grid-cols-3 gap-1">' +
|
||||
data.tablas.map(t => '<code class="bg-white px-2 py-1 rounded border text-xs">' + t + '</code>').join('') +
|
||||
'</div></div>';
|
||||
div.classList.remove('hidden');
|
||||
} catch(e) { showToast('Error: ' + e.message, 'error'); }
|
||||
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-table mr-1"></i> Ver tablas disponibles'; }
|
||||
}
|
||||
async function ejecutarTest(btn, queryId) {
|
||||
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Probando...';
|
||||
try {
|
||||
const form = new FormData(); form.append('query_id', queryId);
|
||||
const resp = await fetch('/queries/test', { method: 'POST', body: form });
|
||||
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.forEach(r => {
|
||||
html += '<tr class="hover:bg-gray-50">';
|
||||
data.columns.forEach(c => { html += '<td class="p-2 border">' + (r[c] ?? '') + '</td>'; });
|
||||
html += '</tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
html += '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + data.rows.length + ')</p>';
|
||||
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-4xl w-full mx-4 max-h-[80vh] overflow-auto p-6"><div class="flex justify-between items-center mb-4"><h3 class="font-semibold text-lg">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div>' + html + '</div>';
|
||||
document.body.appendChild(modal);
|
||||
} catch(e) { showToast('Error: ' + e.message, 'error'); }
|
||||
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-play mr-1"></i> Probar'; }
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% extends "base.html" %}␍
|
||||
{% block title %}Consultas SQL{% endblock %}␍
|
||||
{% block header %}Consultas SQL{% endblock %}␍
|
||||
{% block content %}␍
|
||||
␍
|
||||
<div class="flex space-x-2 mb-4">␍
|
||||
<button onclick="mostrarEditor()" class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white" id="btn-editor"><i class="fas fa-code mr-1"></i> Editor SQL</button>␍
|
||||
<button onclick="mostrarBuilder()" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300" id="btn-builder"><i class="fas fa-wrench mr-1"></i> Constructor Visual</button>␍
|
||||
</div>␍
|
||||
␍
|
||||
<div id="panel-editor">␍
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">␍
|
||||
<div class="lg:col-span-1">␍
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">␍
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">␍
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Mis Consultas</h3>␍
|
||||
<button onclick="document.getElementById('modal-new-query').classList.remove('hidden')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>␍
|
||||
</div>␍
|
||||
<div class="p-4 space-y-2">␍
|
||||
{% for q in queries %}␍
|
||||
<div class="p-3 rounded-lg border border-gray-200 hover:border-blue-300">␍
|
||||
<div onclick="editQuery({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`, `{{ q.description|e }}`)" class="cursor-pointer">␍
|
||||
<div class="flex items-center justify-between">␍
|
||||
<span class="font-medium text-sm text-gray-800">{{ q.name }}</span>␍
|
||||
<span class="px-2 py-0.5 rounded text-xs font-medium {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type }}</span>␍
|
||||
</div>␍
|
||||
<p class="text-xs text-gray-500 mt-1 truncate">{{ q.description or 'Sin descripción' }}</p>␍
|
||||
</div>␍
|
||||
<button onclick="ejecutarTest(this, {{ q.id }})" class="mt-2 text-xs text-green-600 hover:text-green-800"><i class="fas fa-play mr-1"></i> Probar</button>␍
|
||||
</div>␍
|
||||
{% endfor %}␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
␍
|
||||
<div class="lg:col-span-2">␍
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">␍
|
||||
<div class="px-6 py-4 border-b border-gray-200">␍
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-code mr-2 text-blue-500"></i>Editor SQL</h3>␍
|
||||
</div>␍
|
||||
<div class="p-6">␍
|
||||
<form method="POST" action="/queries/create" class="space-y-4">␍
|
||||
<input type="hidden" name="query_id" id="query_id" value="">␍
|
||||
<div class="grid grid-cols-2 gap-4">␍
|
||||
<div>␍
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>␍
|
||||
<input type="text" name="name" id="q_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Nombre descriptivo">␍
|
||||
</div>␍
|
||||
<div>␍
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>␍
|
||||
<select name="query_type" id="q_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">␍
|
||||
<option value="terceros">Terceros (datos paciente)</option>␍
|
||||
<option value="transaccion">Transacción (procedimientos)</option>␍
|
||||
</select>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
<div>␍
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Consulta SQL</label>␍
|
||||
<textarea name="query_text" id="q_text" rows="10" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50" placeholder="SELECT ... FROM ... WHERE ..." style="display:none"></textarea>␍
|
||||
<div id="sql-editor-wrapper"></div>␍
|
||||
</div>␍
|
||||
<div>␍
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>␍
|
||||
<input type="text" name="description" id="q_desc" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="¿Qué hace esta consulta?">␍
|
||||
</div>␍
|
||||
<div class="flex space-x-3">␍
|
||||
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"><i class="fas fa-save mr-1"></i> Guardar</button>␍
|
||||
<button type="button" onclick="cancelEdit()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>␍
|
||||
</div>␍
|
||||
</form>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
␍
|
||||
<div class="mt-4 bg-blue-50 rounded-xl border border-blue-200 p-4">␍
|
||||
<h4 class="text-sm font-medium text-blue-800"><i class="fas fa-info-circle mr-1"></i> Parámetros disponibles</h4>␍
|
||||
<p class="text-xs text-blue-600 mt-1">␍
|
||||
Usa <code class="bg-blue-100 px-1 rounded">:doc_num</code> para filtro por documento,␍
|
||||
<code class="bg-blue-100 px-1 rounded">:factura</code> para filtro por factura,␍
|
||||
<code class="bg-blue-100 px-1 rounded">:fecha_ini</code> y <code class="bg-blue-100 px-1 rounded">:fecha_fin</code> para rango de fechas.␍
|
||||
</p>␍
|
||||
<button onclick="listarTablas(this)" class="mt-3 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-table mr-1"></i> Ver tablas disponibles</button>␍
|
||||
<div id="tablas-list" class="mt-2 hidden"></div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
␍
|
||||
<div id="panel-builder" class="hidden">␍
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">␍
|
||||
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">␍
|
||||
<h3 class="font-semibold text-gray-800"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual de Consultas</h3>␍
|
||||
<button onclick="cargarEsquema()" class="px-3 py-1.5 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-6">␍
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">␍
|
||||
<div class="lg:col-span-1">␍
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2"><i class="fas fa-table mr-1"></i> Tablas</h4>␍
|
||||
<div id="builder-tablas" class="space-y-1 max-h-96 overflow-y-auto border rounded-lg p-2 bg-gray-50 text-xs">␍
|
||||
<p class="text-gray-400 italic">Presiona "Cargar esquema"</p>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
<div class="lg:col-span-2">␍
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">Columnas seleccionadas</h4>␍
|
||||
<div id="builder-columnas" class="border rounded-lg p-3 bg-gray-50 min-h-[80px] text-xs mb-4">␍
|
||||
<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>␍
|
||||
</div>␍
|
||||
␍
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">Filtros (WHERE)</h4>␍
|
||||
<div id="builder-where" class="space-y-2 mb-4"></div>␍
|
||||
<button onclick="agregarFiltro()" class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>␍
|
||||
␍
|
||||
<div class="mt-4">␍
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-2">SQL Generado</h4>␍
|
||||
<textarea id="builder-sql" rows="6" readonly class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs font-mono bg-gray-100"></textarea>␍
|
||||
<p id="builder-params" class="text-xs text-blue-600 mt-1"></p>␍
|
||||
<div class="flex space-x-2 mt-2">␍
|
||||
<button onclick="usarSql()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg"><i class="fas fa-arrow-right mr-1"></i> Usar en editor</button>␍
|
||||
<button onclick="copiarSql()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-copy mr-1"></i> Copiar</button>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
</div>␍
|
||||
␍
|
||||
<script>␍
|
||||
let esquema = [];␍
|
||||
let tablasSeleccionadas = {};␍
|
||||
let filtros = [];␍
|
||||
let aliasCounter = 0;␍
|
||||
␍
|
||||
function mostrarEditor() {␍
|
||||
document.getElementById('panel-editor').classList.remove('hidden');␍
|
||||
document.getElementById('panel-builder').classList.add('hidden');␍
|
||||
document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';␍
|
||||
document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';␍
|
||||
}␍
|
||||
function mostrarBuilder() {␍
|
||||
document.getElementById('panel-editor').classList.add('hidden');␍
|
||||
document.getElementById('panel-builder').classList.remove('hidden');␍
|
||||
document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';␍
|
||||
document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';␍
|
||||
if (!esquema.length) cargarEsquema();␍
|
||||
}␍
|
||||
␍
|
||||
async function cargarEsquema() {␍
|
||||
const btn = document.querySelector('#panel-builder .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-2 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');␍
|
||||
card.innerHTML = `␍
|
||||
<label class="flex items-center space-x-2 cursor-pointer">␍
|
||||
<input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">␍
|
||||
<span class="font-medium text-sm">${t.tabla}</span>␍
|
||||
<span class="text-gray-400">(${t.columnas.length} cols)</span>␍
|
||||
</label>␍
|
||||
<div id="${id}" class="ml-5 mt-1 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;␍
|
||||
div.appendChild(card);␍
|
||||
});␍
|
||||
actualizarVista();␍
|
||||
}␍
|
||||
␍
|
||||
function renderizarColumnas(tabla, columnas) {␍
|
||||
let html = '';␍
|
||||
columnas.forEach(c => {␍
|
||||
const key = tabla + '.' + c.nombre;␍
|
||||
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">␍
|
||||
<input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">␍
|
||||
<span>${c.nombre}</span>␍
|
||||
<span class="text-gray-400 ml-1">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span>␍
|
||||
</label>`;␍
|
||||
});␍
|
||||
return html;␍
|
||||
}␍
|
||||
␍
|
||||
function toggleTabla(tabla, checked) {␍
|
||||
if (checked) {␍
|
||||
tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };␍
|
||||
} else {␍
|
||||
delete tablasSeleccionadas[tabla];␍
|
||||
}␍
|
||||
renderizarTablas();␍
|
||||
actualizarVista();␍
|
||||
}␍
|
||||
␍
|
||||
function toggleColumna(tabla, columna, checked) {␍
|
||||
if (!tablasSeleccionadas[tabla]) return;␍
|
||||
if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;␍
|
||||
else delete tablasSeleccionadas[tabla].columnas[columna];␍
|
||||
renderizarTablas();␍
|
||||
actualizarVista();␍
|
||||
}␍
|
||||
␍
|
||||
function agregarFiltro() {␍
|
||||
filtros.push({ tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' });␍
|
||||
renderizarFiltros();␍
|
||||
actualizarVista();␍
|
||||
}␍
|
||||
␍
|
||||
function renderizarFiltros() {␍
|
||||
const div = document.getElementById('builder-where');␍
|
||||
div.innerHTML = '';␍
|
||||
if (!filtros.length) {␍
|
||||
div.innerHTML = '<p class="text-xs text-gray-400 italic">Sin filtros (seleccionar todos los registros)</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-2 text-xs';␍
|
||||
row.innerHTML = `␍
|
||||
<select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-2 py-1 text-xs">␍
|
||||
<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-2 py-1 text-xs w-20">␍
|
||||
${['=','>','<','>=','<=','<>','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-2 py-1 text-xs font-mono w-28">␍
|
||||
<button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarVista();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>␍
|
||||
`;␍
|
||||
if (i < filtros.length - 1) {␍
|
||||
const op = document.createElement('div');␍
|
||||
op.className = 'flex items-center space-x-2 mt-1';␍
|
||||
op.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-2 py-1 text-xs w-20">␍
|
||||
<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(row);␍
|
||||
div.appendChild(op);␍
|
||||
} else {␍
|
||||
div.appendChild(row);␍
|
||||
}␍
|
||||
});␍
|
||||
}␍
|
||||
␍
|
||||
function actualizarFiltro(i, prop, val) {␍
|
||||
if (!filtros[i]) filtros[i] = { tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' };␍
|
||||
filtros[i][prop] = val;␍
|
||||
actualizarVista();␍
|
||||
}␍
|
||||
␍
|
||||
function generarSql() {␍
|
||||
const tabs = Object.entries(tablasSeleccionadas);␍
|
||||
if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };␍
|
||||
␍
|
||||
const selects = [];␍
|
||||
const froms = [];␍
|
||||
const allParams = new Set();␍
|
||||
␍
|
||||
tabs.forEach(([tabla, info]) => {␍
|
||||
froms.push({ tabla, alias: info.alias });␍
|
||||
const cols = Object.keys(info.columnas);␍
|
||||
if (cols.length) {␍
|
||||
cols.forEach(c => selects.push(`${info.alias}.${c}`));␍
|
||||
}␍
|
||||
});␍
|
||||
␍
|
||||
if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };␍
|
||||
if (!froms.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };␍
|
||||
␍
|
||||
let sql = 'SELECT\n ' + selects.join(',\n ');␍
|
||||
sql += '\nFROM ' + froms.map((f, i) => {␍
|
||||
if (i === 0) return `${f.tabla} ${f.alias}`;␍
|
||||
return `JOIN ${f.tabla} ${f.alias} ON 1=1`; // basic join, user refines in editor␍
|
||||
}).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(' ');␍
|
||||
␍
|
||||
return { sql, params: Array.from(allParams) };␍
|
||||
}␍
|
||||
␍
|
||||
function actualizarVista() {␍
|
||||
const { sql, params } = generarSql();␍
|
||||
document.getElementById('builder-sql').value = sql;␍
|
||||
document.getElementById('builder-params').textContent = params.length ? 'Parámetros: ' + params.join(', ') : 'Sin parámetros';␍
|
||||
␍
|
||||
// Actualizar vista de columnas seleccionadas␍
|
||||
const div = document.getElementById('builder-columnas');␍
|
||||
const tabs = Object.entries(tablasSeleccionadas);␍
|
||||
if (!tabs.length) {␍
|
||||
div.innerHTML = '<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>';␍
|
||||
return;␍
|
||||
}␍
|
||||
let html = '';␍
|
||||
tabs.forEach(([tabla, info]) => {␍
|
||||
const cols = Object.keys(info.columnas);␍
|
||||
if (cols.length) {␍
|
||||
html += `<div class="mb-1"><span class="font-medium">${info.alias}.${tabla}</span>: `;␍
|
||||
html += cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ');␍
|
||||
html += '</div>';␍
|
||||
}␍
|
||||
});␍
|
||||
div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';␍
|
||||
}␍
|
||||
␍
|
||||
function usarSql() {␍
|
||||
const sql = document.getElementById('builder-sql').value;␍
|
||||
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }␍
|
||||
document.getElementById('q_text').value = sql;␍
|
||||
if (sqlEditor) sqlEditor.setValue(sql);␍
|
||||
mostrarEditor();␍
|
||||
showToast('SQL copiado al editor');␍
|
||||
}␍
|
||||
␍
|
||||
function copiarSql() {␍
|
||||
const sql = document.getElementById('builder-sql').value;␍
|
||||
if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }␍
|
||||
navigator.clipboard.writeText(sql).then(() => showToast('SQL copiado al portapapeles'));␍
|
||||
}␍
|
||||
␍
|
||||
// Existing functions below␍
|
||||
function editQuery(id, name, type, text, desc) {␍
|
||||
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 = desc;␍
|
||||
document.getElementById('btn-cancel').classList.remove('hidden');␍
|
||||
document.querySelector('form').action = '/queries/update/' + id;␍
|
||||
if (sqlEditor) sqlEditor.setValue(text);␍
|
||||
}␍
|
||||
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('form').action = '/queries/create';␍
|
||||
if (sqlEditor) sqlEditor.setValue('');␍
|
||||
}␍
|
||||
async function listarTablas(btn) {␍
|
||||
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';␍
|
||||
try {␍
|
||||
const resp = await fetch('/queries/tablas', { method: 'POST' });␍
|
||||
const data = await resp.json();␍
|
||||
if (data.error) { showToast(data.error, 'error'); return; }␍
|
||||
const div = document.getElementById('tablas-list');␍
|
||||
div.innerHTML = '<div class="max-h-40 overflow-y-auto mt-2"><div class="grid grid-cols-3 gap-1">' +␍
|
||||
data.tablas.map(t => '<code class="bg-white px-2 py-1 rounded border text-xs">' + t + '</code>').join('') +␍
|
||||
'</div></div>';␍
|
||||
div.classList.remove('hidden');␍
|
||||
} catch(e) { showToast('Error: ' + e.message, 'error'); }␍
|
||||
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-table mr-1"></i> Ver tablas disponibles'; }␍
|
||||
}␍
|
||||
let sqlEditor = null;␍
|
||||
␍
|
||||
async function initSqlEditor() {␍
|
||||
sqlEditor = CodeMirror(document.getElementById('sql-editor-wrapper'), {␍
|
||||
value: document.getElementById('q_text').value,␍
|
||||
mode: 'text/x-sql',␍
|
||||
lineNumbers: true,␍
|
||||
indentWithTabs: true,␍
|
||||
smartIndent: true,␍
|
||||
lineWrapping: true,␍
|
||||
extraKeys: {␍
|
||||
'Ctrl-Space': 'autocomplete'␍
|
||||
},␍
|
||||
hintOptions: {␍
|
||||
tables: {},␍
|
||||
words: ['SELECT','FROM','WHERE','AND','OR','JOIN','LEFT','RIGHT','INNER','OUTER','ON','AS','IN','NOT','NULL','IS','LIKE','BETWEEN','INTO','VALUES','SET','UPDATE','DELETE','INSERT','CREATE','ALTER','DROP','TABLE','INDEX','VIEW','ORDER','BY','GROUP','HAVING','DISTINCT','COUNT','SUM','AVG','MIN','MAX','BETWEEN','EXISTS','UNION','ALL','ANY','CASE','WHEN','THEN','ELSE','END','CAST','COALESCE','NULLIF','DESC','ASC']␍
|
||||
}␍
|
||||
});␍
|
||||
␍
|
||||
sqlEditor.on('change', function() {␍
|
||||
document.getElementById('q_text').value = sqlEditor.getValue();␍
|
||||
});␍
|
||||
␍
|
||||
// Cargar esquema para autocomplete␍
|
||||
try {␍
|
||||
const resp = await fetch('/queries/esquema', { method: 'POST' });␍
|
||||
const data = await resp.json();␍
|
||||
if (!data.error && data.tablas) {␍
|
||||
const tables = {};␍
|
||||
data.tablas.forEach(t => {␍
|
||||
tables[t.tabla] = t.columnas.map(c => c.nombre);␍
|
||||
});␍
|
||||
sqlEditor.setOption('hintOptions', { tables });␍
|
||||
}␍
|
||||
} catch(e) {}␍
|
||||
}␍
|
||||
␍
|
||||
document.addEventListener('DOMContentLoaded', function() {␍
|
||||
document.querySelector('form').addEventListener('submit', function() {␍
|
||||
document.getElementById('q_text').value = sqlEditor ? sqlEditor.getValue() : document.getElementById('q_text').value;␍
|
||||
});␍
|
||||
initSqlEditor();␍
|
||||
});␍
|
||||
␍
|
||||
async function ejecutarTest(btn, queryId) {␍
|
||||
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Probando...';␍
|
||||
try {␍
|
||||
const form = new FormData(); form.append('query_id', queryId);␍
|
||||
const resp = await fetch('/queries/test', { method: 'POST', body: form });␍
|
||||
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.forEach(r => {␍
|
||||
html += '<tr class="hover:bg-gray-50">';␍
|
||||
data.columns.forEach(c => { html += '<td class="p-2 border">' + (r[c] ?? '') + '</td>'; });␍
|
||||
html += '</tr>';␍
|
||||
});␍
|
||||
html += '</tbody></table>';␍
|
||||
html += '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + data.rows.length + ')</p>';␍
|
||||
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-4xl w-full mx-4 max-h-[80vh] overflow-auto p-6"><div class="flex justify-between items-center mb-4"><h3 class="font-semibold text-lg">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div>' + html + '</div>';␍
|
||||
document.body.appendChild(modal);␍
|
||||
} catch(e) { showToast('Error: ' + e.message, 'error'); }␍
|
||||
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-play mr-1"></i> Probar'; }␍
|
||||
}␍
|
||||
</script>␍
|
||||
{% endblock %}␍
|
||||
|
||||
Reference in New Issue
Block a user