- {isEnabled && (
- <>
- {t("sql_table_schemas.tables")}{": "}
-
-
- {schemas.map(({ name, columns }) => (
- <>
-
-
- {columns.map(column => (
-
- | {column.name} |
- {column.type} |
-
- ))}
-
-
- {" "}
- >
- ))}
-
- >
- )}
-
- )
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.css b/apps/client/src/widgets/type_widgets/SqlConsole.css
index 24406999b..2aec59070 100644
--- a/apps/client/src/widgets/type_widgets/SqlConsole.css
+++ b/apps/client/src/widgets/type_widgets/SqlConsole.css
@@ -32,5 +32,46 @@
}
}
}
+
+ .sql-table-schemas-widget {
+ padding: 12px;
+ padding-inline-end: 10%;
+ contain: none !important;
+
+ .sql-table-schemas {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25em;
+ }
+
+ > .dropdown {
+ display: inline-block !important;
+ }
+
+ button.btn {
+ padding: 0.25rem 0.4rem;
+ font-size: 0.875rem;
+ line-height: 0.5;
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ background: var(--button-background-color);
+ color: var(--button-text-color);
+ cursor: pointer;
+ }
+
+ .table-schema td {
+ padding: 5px;
+ }
+
+ .dropdown .table-schema {
+ font-family: var(--monospace-font-family);
+ font-size: .85em;
+ }
+
+ /* Data type */
+ .dropdown .table-schema td:nth-child(2) {
+ color: var(--muted-text-color);
+ }
+ }
}
diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.tsx b/apps/client/src/widgets/type_widgets/SqlConsole.tsx
index e68f1fb08..4c5491d8d 100644
--- a/apps/client/src/widgets/type_widgets/SqlConsole.tsx
+++ b/apps/client/src/widgets/type_widgets/SqlConsole.tsx
@@ -1,26 +1,31 @@
import "./SqlConsole.css";
-import { SqlExecuteResults } from "@triliumnext/commons";
-import { useState } from "preact/hooks";
+import { SchemaResponse, SqlExecuteResults } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
import { ClipboardModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, KeybindingsModule, ResizeColumnsModule, SelectRangeModule, SelectRowModule, SortModule } from "tabulator-tables";
import { t } from "../../services/i18n";
+import server from "../../services/server";
import Tabulator from "../collections/table/tabulator";
import Alert from "../react/Alert";
+import Dropdown from "../react/Dropdown";
import { useTriliumEvent } from "../react/hooks";
import SplitEditor from "./helpers/SplitEditor";
import { TypeWidgetProps } from "./type_widget";
export default function SqlConsole(props: TypeWidgetProps) {
return (
-