Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-16 02:05:53 +01:00
Code Issues Packages Projects Releases Activity

feat(react/widgets): sql table schemas

Browse Source
This commit is contained in:
Elian Doran
2025-08-29 17:14:27 +03:00
parent f2ce8b9f3c
commit 753f1dc7b6
7 changed files with 99 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/client/src/widgets/sql_table_schemas.css Normal file
View File

@@ -0,0 +1,43 @@
.sql-table-schemas-widget {
padding: 12px;
padding-right: 10%;
contain: none !important;
}
.sql-table-schemas > .dropdown {
display: inline-block !important;
}
.sql-table-schemas 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;
}
.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;
}
.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);
}

94
apps/client/src/widgets/sql_table_schemas.ts
View File

@@ -1,94 +0,0 @@
import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import server from "../services/server.js";
import type FNote from "../entities/fnote.js";
const TPL = /*html*/`
<div class="sql-table-schemas-widget">
<style>
.sql-table-schemas-widget {
padding: 12px;
padding-right: 10%;
}
.sql-table-schemas button {
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);
}
.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>
${t("sql_table_schemas.tables")}:
<span class="sql-table-schemas"></span>
</div>`;
interface SchemaResponse {
name: string;
columns: {
name: string;
type: string;
}[];
}
export default class SqlTableSchemasWidget extends NoteContextAwareWidget {
private tableSchemasShown?: boolean;
private $sqlConsoleTableSchemas!: JQuery<HTMLElement>;
isEnabled() {
return this.note && this.note.mime === "text/x-sqlite;schema=trilium" && super.isEnabled();
}
doRender() {
this.$widget = $(TPL);
this.contentSized();
this.$sqlConsoleTableSchemas = this.$widget.find(".sql-table-schemas");
}
async refreshWithNote(note: FNote) {
if (this.tableSchemasShown) {
return;
}
this.tableSchemasShown = true;
const tableSchema = await server.get<SchemaResponse[]>("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",
title: $table[0].outerHTML,
sanitize: false
});
}
}
}

45
apps/client/src/widgets/sql_table_schemas.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { useEffect, useState } from "preact/hooks";
import { t } from "../services/i18n";
import { useNoteContext } from "./react/hooks";
import "./sql_table_schemas.css";
import { SchemaResponse } from "@triliumnext/commons";
import server from "../services/server";
import Dropdown from "./react/Dropdown";
export default function SqlTableSchemas() {
const { note } = useNoteContext();
const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
useEffect(() => {
server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
}, []);
return (
<div className="sql-table-schemas-widget">
{note?.mime === "text/x-sqlite;schema=trilium" && schemas && (
<>
{t("sql_table_schemas.tables")}{": "}
<span class="sql-table-schemas">
{schemas.map(({ name, columns }) => (
<>
<Dropdown text={name} noSelectButtonStyle hideToggleArrow
>
<table className="table-schema">
{columns.map(column => (
<tr>
<td>{column.name}</td>
<td>{column.type}</td>
</tr>
))}
</table>
</Dropdown>
{" "}
</>
))}
</span>
</>
)}
</div>
)
}