lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update query_runner.html

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-05-01 17:13:25 -05:00
parent 121eac6abc
commit 52c3d7ebe2
1 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/query_runner.html
+27 -7
View File
@@ -44,9 +44,9 @@
</select>
</div>
<!-- Árbol de tablas -->
<!-- Árbol de tablas / colecciones -->
<div class="flex-1 overflow-y-auto p-2" x-show="tables.length > 0">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide px-1 mb-1">Tablas</p>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide px-1 mb-1" x-text="isMongo ? 'Colecciones' : 'Tablas'"></p>
<template x-for="t in tables" :key="t">
<button @click="insertTable(t)"
class="w-full text-left text-xs px-2 py-1 rounded hover:bg-[#e9f0cf] text-gray-700 truncate flex items-center gap-1">
@@ -111,21 +111,27 @@
</button>
</div>
<!-- Editor SQL -->
<!-- Editor SQL / MongoDB -->
<div class="px-4 pt-3 pb-0">
<div class="border rounded-lg overflow-hidden bg-gray-900">
<div class="flex items-center gap-2 px-3 py-1.5 bg-gray-800 border-b border-gray-700">
<span class="text-xs text-gray-400">SQL Editor</span>
<span class="text-xs text-gray-400" x-text="isMongo ? 'MongoDB Shell' : 'SQL Editor'"></span>
<div class="flex-1"></div>
<span x-show="selectedDb" class="text-xs text-[#4ade80] font-mono" x-text="selectedDb"></span>
</div>
<textarea id="sql-editor" x-model="sqlText"
@keydown.ctrl.enter.prevent="runQuery()"
@keydown.meta.enter.prevent="runQuery()"
placeholder="-- Escribe tu consulta SQL aquí&#10;-- Ctrl+Enter para ejecutar&#10;SELECT * FROM tabla LIMIT 100;"
:placeholder="isMongo ? 'db.coleccion.find({})\n// Ctrl+Enter para ejecutar\n// db.coleccion.insertOne({campo: \'valor\'})' : '-- Escribe tu consulta SQL aquí\n-- Ctrl+Enter para ejecutar\nSELECT * FROM tabla LIMIT 100;'"
class="w-full bg-gray-900 text-gray-100 font-mono text-sm p-4 resize-none outline-none leading-relaxed"
style="height:180px; tab-size:2;"></textarea>
</div>
<!-- Ayuda rápida MongoDB -->
<div x-show="isMongo" class="mt-1.5 flex flex-wrap gap-1">
<template x-for="ex in mongoExamples" :key="ex.label">
<button @click="sqlText = ex.cmd" class="text-[10px] px-2 py-0.5 rounded bg-gray-100 hover:bg-gray-200 text-gray-600 font-mono transition" x-text="ex.label"></button>
</template>
</div>
</div>
<!-- Panel de resultados / historial -->
@@ -226,6 +232,16 @@ document.addEventListener('alpine:init', () => {
testMsg: '',
testOk: true,
toast: { show: false, msg: '', type: 'ok' },
isMongo: false,
mongoExamples: [
{ label: 'find()', cmd: 'db.coleccion.find({})' },
{ label: 'findOne()', cmd: 'db.coleccion.findOne({})' },
{ label: 'count()', cmd: 'db.coleccion.countDocuments({})' },
{ label: 'insertOne()', cmd: 'db.coleccion.insertOne({"campo": "valor"})' },
{ label: 'updateOne()', cmd: 'db.coleccion.updateOne({"_id": ""}, {"$set": {"campo": "valor"}})' },
{ label: 'deleteOne()', cmd: 'db.coleccion.deleteOne({"_id": ""})' },
{ label: 'aggregate()', cmd: 'db.coleccion.aggregate([{"$group": {"_id": "$campo", "total": {"$sum": 1}}}])' },
],
async init() {
// Pre-cargar ID desde URL si viene de conx_db
@@ -249,7 +265,10 @@ document.addEventListener('alpine:init', () => {
this.columns = [];
this.statusMsg = '';
this.history = [];
this.isMongo = false;
if (!this.selectedConxId) return;
const conx = this.conexiones.find(c => c.ID == this.selectedConxId);
this.isMongo = conx?.tipo_db?.nombre?.toLowerCase().includes('mongo') ?? false;
try {
const res = await axios.get('/app/query-runner/databases?conx_db_id=' + this.selectedConxId);
this.databases = res.data.data || [];
@@ -359,9 +378,10 @@ document.addEventListener('alpine:init', () => {
},
insertTable(name) {
const sel = `SELECT * FROM ${name} LIMIT 100;`;
this.sqlText = this.sqlText ? this.sqlText + '\n' + sel : sel;
const sel = this.isMongo ? `db.${name}.find({})` : `SELECT * FROM ${name} LIMIT 100;`;
this.sqlText = sel;
document.getElementById('sql-editor')?.focus();
this.runQuery();
},
clearEditor() { this.sqlText = ''; this.results = []; this.columns = []; this.statusMsg = ''; },