gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat(react/widgets): port api_log

Browse Source
This commit is contained in:
Elian Doran 2025-08-30 11:31:49 +03:00
parent 4213c377f8
commit 3229b7d106
No known key found for this signature in database
4 changed files with 69 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/layouts/desktop_layout.tsx
View File

@ -13,7 +13,6 @@ import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status
import SpacerWidget from "../widgets/spacer.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import SplitNoteContainer from "../widgets/containers/split_note_container.js";
import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js";
import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
import RightPaneContainer from "../widgets/containers/right_pane_container.js";
@ -24,7 +23,6 @@ import TocWidget from "../widgets/toc.js";
import HighlightsListWidget from "../widgets/highlights_list.js";
import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
import LauncherContainer from "../widgets/containers/launcher_container.js";
import ApiLogWidget from "../widgets/api_log.js";
import MovePaneButton from "../widgets/buttons/move_pane_button.js";
import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
import ScrollPadding from "../widgets/scroll_padding.js";
@ -43,6 +41,7 @@ import SqlResults from "../widgets/sql_result.js";
import SqlTableSchemas from "../widgets/sql_table_schemas.js";
import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
import ApiLog from "../widgets/api_log.jsx";
export default class DesktopLayout {
@ -144,7 +143,7 @@ export default class DesktopLayout {
.child(<SqlResults />)
.child(<ScrollPadding />)
)
.child(new ApiLogWidget())
.child(<ApiLog />)
.child(new FindWidget())
.child(
...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC

26
apps/client/src/widgets/api_log.css Normal file
View File

@ -0,0 +1,26 @@
.api-log-widget {
padding: 15px;
flex-grow: 1;
max-height: 40%;
position: relative;
}
.api-log-container {
overflow: auto;
height: 100%;
font-family: var(--monospace-font-family);
font-size: 0.8em;
white-space: pre;
}
.close-api-log-button {
padding: 5px;
border: 1px solid var(--button-border-color);
background-color: var(--button-background-color);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
position: absolute;
top: 10px;
right: 40px;
cursor: pointer;
}

80
apps/client/src/widgets/api_log.ts
View File

@ -1,80 +0,0 @@
import type { EventData } from "../components/app_context.js";
import type FNote from "../entities/fnote.js";
import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js";
const TPL = /*html*/`
<div class="api-log-widget">
<style>
.api-log-widget {
padding: 15px;
flex-grow: 1;
max-height: 40%;
position: relative;
}
.hidden-api-log {
display: none;
}
.api-log-container {
overflow: auto;
height: 100%;
}
.close-api-log-button {
padding: 5px;
border: 1px solid var(--button-border-color);
background-color: var(--button-background-color);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
position: absolute;
top: 10px;
right: 40px;
cursor: pointer;
}
</style>
<div class="bx bx-x close-api-log-button" title="${t("api_log.close")}"></div>
<div class="api-log-container"></div>
</div>`;
export default class ApiLogWidget extends NoteContextAwareWidget {
private $logContainer!: JQuery<HTMLElement>;
private $closeButton!: JQuery<HTMLElement>;
isEnabled() {
return !!this.note && this.note.mime.startsWith("application/javascript;env=") && super.isEnabled();
}
doRender() {
this.$widget = $(TPL);
this.toggle(false);
this.$logContainer = this.$widget.find(".api-log-container");
this.$closeButton = this.$widget.find(".close-api-log-button");
this.$closeButton.on("click", () => this.toggle(false));
}
async refreshWithNote(note: FNote) {
this.$logContainer.empty();
}
apiLogMessagesEvent({ messages, noteId }: EventData<"apiLogMessages">) {
if (!this.isNote(noteId)) {
return;
}
this.toggle(true);
for (const message of messages) {
this.$logContainer.append(message).append($("<br>"));
}
}
toggle(show: boolean) {
this.$widget.toggleClass("hidden-api-log", !show);
}
}

41
apps/client/src/widgets/api_log.tsx Normal file
View File

@ -0,0 +1,41 @@
import { useEffect, useState } from "preact/hooks";
import "./api_log.css";
import { useNoteContext, useTriliumEvent } from "./react/hooks";
import ActionButton from "./react/ActionButton";
import { t } from "../services/i18n";
/**
* Displays the messages that are logged by the current note via `api.log`, for frontend and backend scripts.
*/
export default function ApiLog() {
const { note, noteId } = useNoteContext();
const [ messages, setMessages ] = useState<string[]>();
useTriliumEvent("apiLogMessages", ({ messages, noteId: eventNoteId }) => {
if (eventNoteId !== noteId) return;
setMessages(messages);
});
// Clear when navigating away.
useEffect(() => setMessages(undefined), [ note ]);
const isEnabled = note?.mime.startsWith("application/javascript;env=") && messages?.length;
return (
<div className={`api-log-widget ${!isEnabled ? "hidden-ext" : ""}`}>
{isEnabled && (
<>
<ActionButton
icon="bx bx-x"
className="close-api-log-button"
text={t("api_log.close")}
onClick={() => setMessages(undefined)}
/>
<div className="api-log-container">
{messages.join("\n")}
</div>
</>
)}
</div>
)
}