feat(react/widgets): port sql_result

apps/client/src/widgets/sql_result.tsx

@@ -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>
+    )
+}