sql console tweaks

src/public/javascripts/dialogs/sql_console.js

@@ -6,7 +6,7 @@ import utils from "../services/utils.js";
 const $dialog = $("#sql-console-dialog");
 const $query = $('#sql-console-query');
 const $executeButton = $('#sql-console-execute');
-const $tables = $("#sql-console-tables");
+const $tableSchemas = $("#sql-console-table-schemas");
 const $resultContainer = $("#result-container");
 
 let codeEditor;
@@ -18,7 +18,7 @@ export async function showDialog() {
 
     glob.activeDialog = $dialog;
 
-    await showTables();
+    await showTableSchemas();
 
     $dialog.modal();
 }
@@ -106,28 +106,33 @@ async function execute() {
     }
 }
 
-async function showTables() {
+async function showTableSchemas() {
     const tables = await server.get('sql/schema');
 
-    $tables.empty();
+    $tableSchemas.empty();
 
     for (const table of tables) {
         const $tableLink = $('<button class="btn">').text(table.name);
 
-        const $columns = $("<table>");
+        const $columns = $("<ul>");
 
         for (const column of table.columns) {
             $columns.append(
-                $("<tr>")
-                    .append($("<td>").text(column.name))
-                    .append($("<td>").text(column.type))
+                $("<li>")
+                    .append($("<span>").text(column.name))
+                    .append($("<span>").text(column.type))
             );
         }
 
-        $tables.append($tableLink).append(" ");
+        $tableSchemas.append($tableLink).append(" ");
 
         $tableLink
-            .tooltip({html: true, title: $columns.html()})
+            .tooltip({
+                html: true,
+                placement: 'bottom',
+                boundary: 'window',
+                title: $columns[0].outerHTML
+            })
             .on('click', () => codeEditor.setValue("SELECT * FROM " + table.name + " LIMIT 100"));
     }
 }

src/public/stylesheets/style.css

@@ -794,7 +794,7 @@ div[data-notify="container"] {
     padding: 2px;
 }
 
-#sql-console-tables button {
+#sql-console-table-schemas button {
     padding: 0.25rem 0.4rem;
     font-size: 0.875rem;
     line-height: 0.5;

src/routes/api/sql.js

@@ -23,6 +23,10 @@ async function execute(req) {
         const results = [];
 
         for (const query of queries) {
+            if (!query.trim()) {
+                continue;
+            }
+
             results.push(await sql.getRows(query));
         }
 

src/views/dialogs/sql_console.ejs

@@ -1,5 +1,5 @@
 <div id="sql-console-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" style="max-width: 1000px;" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">SQL console</h5>
@@ -10,7 +10,7 @@
             <div class="modal-body">
                 <div>
                     Tables:
-                    <span id="sql-console-tables"></span>
+                    <span id="sql-console-table-schemas"></span>
                 </div>
 
                 <div id="sql-console-query"></div>
@@ -19,7 +19,7 @@
                     <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
                 </div>
 
-                <div id="result-container" style="width: 100%; overflow: auto;"> <!-- This is necessary for the table to be scrollable -->
+                <div id="result-container" style="width: 100%; font-size: smaller; margin-top: 10px;">
                 </div>
             </div>
         </div>