From 52c3d7ebe2ef849d61e25e6447ed1ca758f55bfc Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 1 May 2026 17:13:25 -0500
Subject: [PATCH] Update query_runner.html

---
 resources/views/query_runner.html | 34 ++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/resources/views/query_runner.html b/resources/views/query_runner.html
index 746eb3d..093bf2f 100644
--- a/resources/views/query_runner.html
+++ b/resources/views/query_runner.html
@@ -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 = ''; },