sql console tweaks

This commit is contained in:
zadam 2019-12-09 21:31:38 +01:00
parent b29155775e
commit 1e123f2390
4 changed files with 23 additions and 14 deletions

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<div id="sql-console-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">SQL console</h5> <h5 class="modal-title">SQL console</h5>
@ -10,7 +10,7 @@
<div class="modal-body"> <div class="modal-body">
<div> <div>
Tables: Tables:
<span id="sql-console-tables"></span> <span id="sql-console-table-schemas"></span>
</div> </div>
<div id="sql-console-query"></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> <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
</div> </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> </div>
</div> </div>