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

feat(react/widgets): port sql_result

Browse Source
This commit is contained in:
Elian Doran
2025-08-29 15:50:44 +03:00
parent 4df94d1f20
commit 735e91e636
7 changed files with 89 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/sql_result.css Normal file
View File

@@ -0,0 +1,7 @@
.sql-result-widget {
padding: 15px;
}
.sql-console-result-container td {
white-space: preserve;
}

88
apps/client/src/widgets/sql_result.ts
View File

@@ -1,88 +0,0 @@
import type { EventData } from "../components/app_context.js";
import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
const TPL = /*html*/`
<div class="sql-result-widget">
<style>
.sql-result-widget {
padding: 15px;
}
.sql-console-result-container td {
white-space: preserve;
}
</style>
<div class="sql-query-no-rows alert alert-info" style="display: none;">
${t("sql_result.no_rows")}
</div>
<div class="sql-console-result-container"></div>
</div>`;
export default class SqlResultWidget extends NoteContextAwareWidget {
private $resultContainer!: JQuery<HTMLElement>;
private $noRowsAlert!: JQuery<HTMLElement>;
isEnabled() {
return this.note && this.note.mime === "text/x-sqlite;schema=trilium" && super.isEnabled();
}
doRender() {
this.$widget = $(TPL);
this.$resultContainer = this.$widget.find(".sql-console-result-container");
this.$noRowsAlert = this.$widget.find(".sql-query-no-rows");
}
async sqlQueryResultsEvent({ ntxId, results }: EventData<"sqlQueryResults">) {
if (!this.isNoteContext(ntxId)) {
return;
}
this.$noRowsAlert.toggle(results.length === 1 && results[0].length === 0);
this.$resultContainer.toggle(results.length > 1 || results[0].length > 0);
this.$resultContainer.empty();
for (const rows of results) {
if (typeof rows === "object" && !Array.isArray(rows)) {
// inserts, updates
this.$resultContainer
.empty()
.show()
.append($("<pre>").text(JSON.stringify(rows, null, "\t")));
continue;
}
if (!rows.length) {
continue;
}
const $table = $('<table class="table table-striped">');
this.$resultContainer.append($table);
const result = rows[0];
const $row = $("<tr>");
for (const key in result) {
$row.append($("<th>").text(key));
}
$table.append($row);
for (const result of rows) {
const $row = $("<tr>");
for (const key in result) {
$row.append($("<td>").text(result[key]));
}
$table.append($row);
}
}
}
}

62
apps/client/src/widgets/sql_result.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { SqlExecuteResults } from "@triliumnext/commons";
import { useNoteContext, useTriliumEvent } from "./react/hooks";
import "./sql_result.css";
import { useState } from "preact/hooks";
import Alert from "./react/Alert";
import { t } from "../services/i18n";
export default function SqlResults() {
const { note, ntxId } = useNoteContext();
const [ results, setResults ] = useState<SqlExecuteResults>();
useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => {
if (eventNtxId !== ntxId) return;
setResults(results);
})
return (
<div className="sql-result-widget">
{note?.mime === "text/x-sqlite;schema=trilium" && (
results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? (
<Alert type="info">
{t("sql_result.no_rows")}
</Alert>
) : (
<div class="sql-console-result-container">
{results?.map(rows => {
// inserts, updates
if (typeof rows === "object" && !Array.isArray(rows)) {
return <pre>{JSON.stringify(rows, null, "\t")}</pre>
}
// selects
return <SqlResultTable rows={rows} />
})}
</div>
)
)}
</div>
)
}
function SqlResultTable({ rows }: { rows: object[] }) {
if (!rows.length) return;
return (
<table className="table table-striped">
<thead>
<tr>
{Object.keys(rows[0]).map(key => <th>{key}</th>)}
</tr>
</thead>
<tbody>
{rows.map(row => (
<tr>
{Object.values(row).map(cell => <td>{cell}</td>)}
</tr>
))}
</tbody>
</table>
)
}