diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 652ad0725..4633b1a47 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -1815,7 +1815,9 @@ "configure_launchbar": "Configure Launchbar" }, "sql_result": { - "no_rows": "No rows have been returned for this query" + "not_executed": "The query has not been executed yet.", + "no_rows": "No rows have been returned for this query", + "execute_now": "Execute now" }, "sql_table_schemas": { "tables": "Tables" diff --git a/apps/client/src/widgets/react/NoItems.css b/apps/client/src/widgets/react/NoItems.css new file mode 100644 index 000000000..f9876db6c --- /dev/null +++ b/apps/client/src/widgets/react/NoItems.css @@ -0,0 +1,18 @@ +.no-items { + display: flex; + align-items: center; + justify-content: center; + flex-grow: 1; + flex-direction: column; + padding: 0.75em; + color: var(--muted-text-color); + height: 100%; + + .tn-icon { + font-size: 3em; + } + + button { + margin-top: 1em; + } +} diff --git a/apps/client/src/widgets/react/NoItems.tsx b/apps/client/src/widgets/react/NoItems.tsx new file mode 100644 index 000000000..d7a5a6270 --- /dev/null +++ b/apps/client/src/widgets/react/NoItems.tsx @@ -0,0 +1,21 @@ +import "./NoItems.css"; + +import { ComponentChildren } from "preact"; + +import Icon from "./Icon"; + +interface NoItemsProps { + icon: string; + text: string; + children?: ComponentChildren; +} + +export default function NoItems({ icon, text, children }: NoItemsProps) { + return ( +
+ + {text} + {children} +
+ ); +} diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.css b/apps/client/src/widgets/sidebar/RightPanelContainer.css index 4c097c386..2000a20d7 100644 --- a/apps/client/src/widgets/sidebar/RightPanelContainer.css +++ b/apps/client/src/widgets/sidebar/RightPanelContainer.css @@ -40,22 +40,4 @@ body.experimental-feature-new-layout #right-pane { .gutter-vertical + .card .card-header { padding-top: 0; } - - .no-items { - display: flex; - align-items: center; - justify-content: center; - flex-grow: 1; - flex-direction: column; - padding: 0.75em; - color: var(--muted-text-color); - - .tn-icon { - font-size: 3em; - } - - button { - margin-top: 1em; - } - } } diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx index d28887b9f..f6f1784a5 100644 --- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx +++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx @@ -3,7 +3,7 @@ import "./RightPanelContainer.css"; import Split from "@triliumnext/split.js"; import { VNode } from "preact"; -import { useState, useEffect, useRef, useCallback } from "preact/hooks"; +import { useCallback,useEffect, useRef, useState } from "preact/hooks"; import appContext from "../../components/app_context"; import { WidgetsByParent } from "../../services/bundle"; @@ -13,6 +13,7 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer"; import Button from "../react/Button"; import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, useTriliumOptionJson } from "../react/hooks"; import Icon from "../react/Icon"; +import NoItems from "../react/NoItems"; import LegacyRightPanelWidget from "../right_panel_widget"; import HighlightsList from "./HighlightsList"; import PdfAttachments from "./pdf/PdfAttachments"; @@ -47,14 +48,15 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare items.length > 0 ? ( items ) : ( -
- - {t("right_pane.empty_message")} +
+ ) )} diff --git a/apps/client/src/widgets/type_widgets/SqlConsole.tsx b/apps/client/src/widgets/type_widgets/SqlConsole.tsx index 0c2741714..ad03f38a7 100644 --- a/apps/client/src/widgets/type_widgets/SqlConsole.tsx +++ b/apps/client/src/widgets/type_widgets/SqlConsole.tsx @@ -9,8 +9,10 @@ import { t } from "../../services/i18n"; import server from "../../services/server"; import Tabulator from "../collections/table/tabulator"; import Alert from "../react/Alert"; +import Button from "../react/Button"; import Dropdown from "../react/Dropdown"; import { useTriliumEvent } from "../react/hooks"; +import NoItems from "../react/NoItems"; import SplitEditor from "./helpers/SplitEditor"; import { TypeWidgetProps } from "./type_widget"; @@ -30,7 +32,7 @@ export default function SqlConsole(props: TypeWidgetProps) { ); } -function SqlResults({ note, ntxId }: TypeWidgetProps) { +function SqlResults({ ntxId }: TypeWidgetProps) { const [ results, setResults ] = useState(); useTriliumEvent("sqlQueryResults", ({ ntxId: eventNtxId, results }) => { @@ -38,27 +40,38 @@ function SqlResults({ note, ntxId }: TypeWidgetProps) { setResults(results); }); - const isEnabled = note?.mime === "text/x-sqlite;schema=trilium"; - return ( -
- {isEnabled && ( - results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? ( - - {t("sql_result.no_rows")} - - ) : ( -
- {results?.map((rows, index) => { - // inserts, updates - if (typeof rows === "object" && !Array.isArray(rows)) { - return 
{JSON.stringify(rows, null, "\t")}
; - } + if (results === undefined) { + return ( + +
- ) + return ( +
+ {results?.length === 1 && Array.isArray(results[0]) && results[0].length === 0 ? ( + + {t("sql_result.no_rows")} + + ) : ( +
+ {results?.map((rows, index) => { + // inserts, updates + if (typeof rows === "object" && !Array.isArray(rows)) { + return 
{JSON.stringify(rows, null, "\t")}
; + } + + // selects + return ; + })} +
)}
);