refactoring of sql console into separate widgets

src/public/app/widgets/sql_table_schemas.js

@@ -0,0 +1,83 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+import treeService from "../services/tree.js";
+import linkService from "../services/link.js";
+import hoistedNoteService from "../services/hoisted_note.js";
+import server from "../services/server.js";
+import toastService from "../services/toast.js";
+
+const TPL = `
+<div class="sql-table-schemas-widget">
+    <style>
+    .sql-table-schemas button {
+        padding: 0.25rem 0.4rem;
+        font-size: 0.875rem;
+        line-height: 0.5;
+        border-radius: 0.2rem;
+    }
+    
+    .sql-console-result-container {
+        width: 100%; 
+        font-size: smaller; 
+        margin-top: 10px;
+        flex-grow: 1;
+        overflow: auto;
+        min-height: 0;
+    }
+    
+    .table-schema td {
+        padding: 5px;
+    }
+    </style>
+    
+    Tables:
+    <span class="sql-table-schemas"></span>
+</div>`;
+
+export default class SqlTableSchemasWidget extends TabAwareWidget {
+    isEnabled() {
+        return this.note
+            && this.note.mime === 'text/x-sqlite;schema=trilium'
+            && super.isEnabled();
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$sqlConsoleTableSchemas = this.$widget.find('.sql-table-schemas');
+    }
+
+    async refreshWithNote(note) {
+        if (this.tableSchemasShown) {
+            return;
+        }
+
+        this.tableSchemasShown = true;
+
+        const tableSchema = await server.get('sql/schema');
+
+        for (const table of tableSchema) {
+            const $tableLink = $('<button class="btn">').text(table.name);
+
+            const $table = $('<table class="table-schema">');
+
+            for (const column of table.columns) {
+                $table.append(
+                    $("<tr>")
+                        .append($("<td>").text(column.name))
+                        .append($("<td>").text(column.type))
+                );
+            }
+
+            this.$sqlConsoleTableSchemas.append($tableLink).append(" ");
+
+            $tableLink.tooltip({
+                html: true,
+                placement: 'bottom',
+                boundary: 'window',
+                title: $table[0].outerHTML,
+                sanitize: false
+            });
+        }
+    }
+}