Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

chore(client/ts): port options

Browse Source
This commit is contained in:
Elian Doran
2025-01-11 11:40:22 +02:00
parent 7e61af1cc3
commit 05529b84ab
9 changed files with 150 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/services/dialog.ts
View File

@@ -20,7 +20,7 @@ async function confirmDeleteNoteBoxWithNote(title: string) {
}
async function prompt(props: PromptDialogOptions) {
return new Promise((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
return new Promise<string | null>((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
}
export default {

8
src/public/app/widgets/dialogs/prompt.ts
View File

@@ -31,15 +31,15 @@ export interface PromptDialogOptions {
title?: string;
message?: string;
defaultValue?: string;
shown: PromptShownDialogCallback;
callback: (value: unknown) => void;
shown?: PromptShownDialogCallback;
callback?: (value: string | null) => void;
}
export type PromptShownDialogCallback = ((callback: ShownCallbackData) => void) | null;
export default class PromptDialog extends BasicWidget {
private resolve: ((val: string | null) => void) | null;
private shownCb: PromptShownDialogCallback;
private resolve?: ((value: string | null) => void) | undefined | null;
private shownCb?: PromptShownDialogCallback | null;
private modal!: bootstrap.Modal;
private $dialogBody!: JQuery<HTMLElement>;

37
src/public/app/widgets/type_widgets/options/backup.js → src/public/app/widgets/type_widgets/options/backup.ts
View File

@@ -3,13 +3,14 @@ import { t } from "../../../services/i18n.js";
import OptionsWidget from "./options_widget.js";
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
import type { OptionMap } from "../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
<h4>${t("backup.automatic_backup")}</h4>
<p>${t("backup.automatic_backup_description")}</p>
<ul style="list-style: none">
<li>
<label>
@@ -17,7 +18,7 @@ const TPL = `
${t("backup.enable_daily_backup")}
</label>
</li>
<li>
<li>
<label>
<input type="checkbox" class="weekly-backup-enabled form-check-input">
${t("backup.enable_weekly_backup")}
@@ -30,19 +31,19 @@ const TPL = `
</label>
</li>
</ul>
<p>${t("backup.backup_recommendation")}</p>
</div>
<div class="options-section">
<h4>${t("backup.backup_now")}</h4>
<button class="backup-database-button btn">${t("backup.backup_database_now")}</button>
</div>
<div class="options-section">
<h4>${t("backup.existing_backups")}</h4>
<table class="table table-stripped">
<colgroup>
<col width="33%" />
@@ -61,14 +62,32 @@ const TPL = `
</div>
`;
// TODO: Deduplicate.
interface PostDatabaseResponse {
backupFile: string;
}
// TODO: Deduplicate
interface Backup {
filePath: string;
mtime: number;
}
export default class BackupOptions extends OptionsWidget {
private $backupDatabaseButton!: JQuery<HTMLElement>;
private $dailyBackupEnabled!: JQuery<HTMLElement>;
private $weeklyBackupEnabled!: JQuery<HTMLElement>;
private $monthlyBackupEnabled!: JQuery<HTMLElement>;
private $existingBackupList!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$backupDatabaseButton = this.$widget.find(".backup-database-button");
this.$backupDatabaseButton.on("click", async () => {
const { backupFile } = await server.post("database/backup-database");
const { backupFile } = await server.post<PostDatabaseResponse>("database/backup-database");
toastService.showMessage(t("backup.database_backed_up_to", { backupFilePath: backupFile }), 10000);
@@ -88,12 +107,12 @@ export default class BackupOptions extends OptionsWidget {
this.$existingBackupList = this.$widget.find(".existing-backup-list-items");
}
optionsLoaded(options) {
optionsLoaded(options: OptionMap) {
this.setCheckboxState(this.$dailyBackupEnabled, options.dailyBackupEnabled);
this.setCheckboxState(this.$weeklyBackupEnabled, options.weeklyBackupEnabled);
this.setCheckboxState(this.$monthlyBackupEnabled, options.monthlyBackupEnabled);
server.get("database/backups").then((backupFiles) => {
server.get<Backup[]>("database/backups").then((backupFiles) => {
this.$existingBackupList.empty();
if (!backupFiles.length) {

33
src/public/app/widgets/type_widgets/options/etapi.js → src/public/app/widgets/type_widgets/options/etapi.ts
View File

@@ -8,18 +8,18 @@ import toastService from "../../../services/toast.js";
const TPL = `
<div class="options-section">
<h4>${t("etapi.title")}</h4>
<p>${t("etapi.description")} <br/>
${t("etapi.see_more")} <a href="https://triliumnext.github.io/Docs/Wiki/etapi.html">${t("etapi.wiki")}</a> ${t("etapi.and")} <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">${t("etapi.openapi_spec")}</a>.</p>
<button type="button" class="create-etapi-token btn btn-sm">${t("etapi.create_token")}</button>
<hr />
<h5>${t("etapi.existing_tokens")}</h5>
<div class="no-tokens-yet">${t("etapi.no_tokens_yet")}</div>
<div style="overflow: auto; height: 500px;">
<table class="tokens-table table table-stripped">
<thead>
@@ -44,13 +44,26 @@ const TPL = `
border: 1px solid transparent;
border-radius: var(--button-border-radius);
}
.token-table-button:hover {
border: 1px solid var(--button-border-color);
}
</style>`;
// TODO: Deduplicate
interface PostTokensResponse {
authToken: string;
}
// TODO: Deduplicate
interface Token {
name: string;
utcDateCreated: number;
etapiTokenId: string;
}
export default class EtapiOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
@@ -61,12 +74,12 @@ export default class EtapiOptions extends OptionsWidget {
defaultValue: t("etapi.default_token_name")
});
if (!tokenName.trim()) {
if (!tokenName?.trim()) {
toastService.showError(t("etapi.error_empty_name"));
return;
}
const { authToken } = await server.post("etapi-tokens", { tokenName });
const { authToken } = await server.post<PostTokensResponse>("etapi-tokens", { tokenName });
await dialogService.prompt({
title: t("etapi.token_created_title"),
@@ -84,7 +97,7 @@ export default class EtapiOptions extends OptionsWidget {
const $noTokensYet = this.$widget.find(".no-tokens-yet");
const $tokensTable = this.$widget.find(".tokens-table");
const tokens = await server.get("etapi-tokens");
const tokens = await server.get<Token[]>("etapi-tokens");
$noTokensYet.toggle(tokens.length === 0);
$tokensTable.toggle(tokens.length > 0);
@@ -107,7 +120,7 @@ export default class EtapiOptions extends OptionsWidget {
}
}
async renameToken(etapiTokenId, oldName) {
async renameToken(etapiTokenId: string, oldName: string) {
const tokenName = await dialogService.prompt({
title: t("etapi.rename_token_title"),
message: t("etapi.rename_token_message"),
@@ -123,7 +136,7 @@ export default class EtapiOptions extends OptionsWidget {
this.refreshTokens();
}
async deleteToken(etapiTokenId, name) {
async deleteToken(etapiTokenId: string, name: string) {
if (!(await dialogService.confirm(t("etapi.delete_token_confirmation", { name })))) {
return;
}

35
src/public/app/widgets/type_widgets/options/password.js → src/public/app/widgets/type_widgets/options/password.ts
View File

@@ -3,31 +3,32 @@ import server from "../../../services/server.js";
import protectedSessionHolder from "../../../services/protected_session_holder.js";
import toastService from "../../../services/toast.js";
import OptionsWidget from "./options_widget.js";
import type { OptionMap } from "../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
<h4 class="password-heading">${t("password.heading")}</h4>
<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
${t("password.alert_message")} <a class="reset-password-button" href="javascript:">${t("password.reset_link")}</a>
</div>
<form class="change-password-form">
<div class="old-password-form-group form-group">
<label for="old-password">${t("password.old_password")}</label>
<input id="old-password" class="old-password form-control" type="password">
</div>
<div class="form-group">
<label for="new-password1">${t("password.new_password")}</label>
<input id="new-password1" class="new-password1 form-control" type="password">
</div>
<div class="form-group">
<label for="new-password2">${t("password.new_password_confirmation")}</label>
<input id="new-password2" class="new-password2 form-control" type="password">
</div>
<button class="save-password-button btn btn-primary">${t("password.change_password")}</button>
</form>
</div>
@@ -43,7 +44,23 @@ const TPL = `
</div>
</div>`;
// TODO: Deduplicate
interface ChangePasswordResponse {
success: boolean;
message?: string;
}
export default class PasswordOptions extends OptionsWidget {
private $passwordHeading!: JQuery<HTMLElement>;
private $changePasswordForm!: JQuery<HTMLElement>;
private $oldPassword!: JQuery<HTMLElement>;
private $newPassword1!: JQuery<HTMLElement>;
private $newPassword2!: JQuery<HTMLElement>;
private $savePasswordButton!: JQuery<HTMLElement>;
private $resetPasswordButton!: JQuery<HTMLElement>;
private $protectedSessionTimeout!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
@@ -59,7 +76,7 @@ export default class PasswordOptions extends OptionsWidget {
if (confirm(t("password.reset_confirmation"))) {
await server.post("password/reset?really=yesIReallyWantToResetPasswordAndLoseAccessToMyProtectedNotes");
const options = await server.get("options");
const options = await server.get<OptionMap>("options");
this.optionsLoaded(options);
toastService.showError(t("password.reset_success_message"));
@@ -72,7 +89,7 @@ export default class PasswordOptions extends OptionsWidget {
this.$protectedSessionTimeout.on("change", () => this.updateOption("protectedSessionTimeout", this.$protectedSessionTimeout.val()));
}
optionsLoaded(options) {
optionsLoaded(options: OptionMap) {
const isPasswordSet = options.isPasswordSet === "true";
this.$widget.find(".old-password-form-group").toggle(isPasswordSet);
@@ -96,7 +113,7 @@ export default class PasswordOptions extends OptionsWidget {
}
server
.post("password/change", {
.post<ChangePasswordResponse>("password/change", {
current_password: oldPassword,
new_password: newPassword1
})
@@ -106,7 +123,7 @@ export default class PasswordOptions extends OptionsWidget {
// password changed so current protected session is invalid and needs to be cleared
protectedSessionHolder.resetProtectedSession();
} else {
} else if (result.message) {
toastService.showError(result.message);
}
});

59
src/public/app/widgets/type_widgets/options/shortcuts.js → src/public/app/widgets/type_widgets/options/shortcuts.ts
View File

@@ -3,40 +3,42 @@ import utils from "../../../services/utils.js";
import dialogService from "../../../services/dialog.js";
import OptionsWidget from "./options_widget.js";
import { t } from "../../../services/i18n.js";
import type { KeyboardShortcut } from "../../../../../services/keyboard_actions_interface.js";
import type { OptionNames } from "../../../../../services/options_interface.js";
const TPL = `
<div class="options-section shortcuts-options-section">
<style>
.shortcuts-options-section {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
height: 100%;
}
.shortcuts-table-container {
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
}
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
}
.shortcuts-options-buttons {
display: flex;
display: flex;
justify-content: space-between;
margin: 15px 15px 0 15px;
}
</style>
<h4>${t("shortcuts.keyboard_shortcuts")}</h4>
<p>
${t("shortcuts.multiple_shortcuts")}
${t("shortcuts.electron_documentation")}
</p>
<div class="form-group">
<input type="text" class="keyboard-shortcut-filter form-control" placeholder="${t("shortcuts.type_text_to_filter")}">
</div>
<div class="shortcuts-table-container">
<table class="keyboard-shortcut-table" cellpadding="10">
<thead>
@@ -50,15 +52,15 @@ const TPL = `
<tbody></tbody>
</table>
</div>
<div class="shortcuts-options-buttons">
<button class="options-keyboard-shortcuts-reload-app btn btn-primary">${t("shortcuts.reload_app")}</button>
<button class="options-keyboard-shortcuts-set-all-to-default btn">${t("shortcuts.set_all_to_default")}</button>
</div>
</div>`;
let globActions;
let globActions: KeyboardShortcut[];
export default class KeyboardShortcutsOptions extends OptionsWidget {
doRender() {
@@ -68,7 +70,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
const $table = this.$widget.find(".keyboard-shortcut-table tbody");
server.get("keyboard-actions").then((actions) => {
server.get<KeyboardShortcut[]>("keyboard-actions").then((actions) => {
globActions = actions;
for (const action of actions) {
@@ -76,18 +78,18 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
if (action.separator) {
$tr.append($('<td colspan="4">').attr("style", "background-color: var(--accented-background-color); font-weight: bold;").text(action.separator));
} else if (action.defaultShortcuts) {
} else if (action.defaultShortcuts && action.actionName) {
$tr.append($("<td>").text(action.actionName))
.append(
$("<td>").append(
$(`<input type="text" class="form-control">`)
.val(action.effectiveShortcuts.join(", "))
.val((action.effectiveShortcuts ?? []).join(", "))
.attr("data-keyboard-action-name", action.actionName)
.attr("data-default-keyboard-shortcuts", action.defaultShortcuts.join(", "))
)
)
.append($("<td>").text(action.defaultShortcuts.join(", ")))
.append($("<td>").text(action.description));
.append($("<td>").text(action.description ?? ""));
}
$table.append($tr);
@@ -97,8 +99,11 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
$table.on("change", "input.form-control", (e) => {
const $input = this.$widget.find(e.target);
const actionName = $input.attr("data-keyboard-action-name");
const shortcuts = $input
.val()
if (!actionName) {
return;
}
const shortcuts = ($input.val() as String)
.replace("+,", "+Comma")
.split(",")
.map((shortcut) => shortcut.replace("+Comma", "+,"))
@@ -106,7 +111,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
const optionName = `keyboardShortcuts${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}`;
this.updateOption(optionName, JSON.stringify(shortcuts));
this.updateOption(optionName as OptionNames, JSON.stringify(shortcuts));
});
this.$widget.find(".options-keyboard-shortcuts-set-all-to-default").on("click", async () => {
@@ -117,7 +122,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
$table.find("input.form-control").each((_index, el) => {
const defaultShortcuts = this.$widget.find(el).attr("data-default-keyboard-shortcuts");
if (this.$widget.find(el).val() !== defaultShortcuts) {
if (defaultShortcuts && this.$widget.find(el).val() !== defaultShortcuts) {
this.$widget.find(el).val(defaultShortcuts).trigger("change");
}
});
@@ -126,7 +131,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
const $filter = this.$widget.find(".keyboard-shortcut-filter");
$filter.on("keyup", () => {
const filter = $filter.val().trim().toLowerCase();
const filter = String($filter.val()).trim().toLowerCase();
$table.find("tr").each((i, el) => {
if (!filter) {
@@ -143,7 +148,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
const action = globActions.find((act) => act.actionName === actionName);
if (!action) {
if (!action || !action.actionName) {
this.$widget.find(el).hide();
return;
}
@@ -153,8 +158,8 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
.toggle(
!!(
action.actionName.toLowerCase().includes(filter) ||
action.defaultShortcuts.some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
action.effectiveShortcuts.some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
(action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
(action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
(action.description && action.description.toLowerCase().includes(filter))
)
);

10
src/public/app/widgets/type_widgets/options/spellcheck.js → src/public/app/widgets/type_widgets/options/spellcheck.ts
View File

@@ -1,6 +1,7 @@
import utils from "../../../services/utils.js";
import OptionsWidget from "./options_widget.js";
import { t } from "../../../services/i18n.js";
import type { OptionMap } from "../../../../../services/options_interface.js";
const TPL_WEB = `
<div class="options-section">
@@ -29,11 +30,16 @@ const TPL_ELECTRON = `
</div>
<p>${t("spellcheck.multiple_languages_info")}</p>
<p><strong>${t("spellcheck.available_language_codes_label")} </strong> <span class="available-language-codes"></span></p>
</div>`;
export default class SpellcheckOptions extends OptionsWidget {
private $spellCheckEnabled!: JQuery<HTMLElement>;
private $spellCheckLanguageCode!: JQuery<HTMLElement>;
private $availableLanguageCodes!: JQuery<HTMLElement>;
doRender() {
const template = utils.isElectron() ? TPL_ELECTRON : TPL_WEB;
this.$widget = $(template);
@@ -54,7 +60,7 @@ export default class SpellcheckOptions extends OptionsWidget {
}
}
optionsLoaded(options) {
optionsLoaded(options: OptionMap) {
this.setCheckboxState(this.$spellCheckEnabled, options.spellCheckEnabled);
this.$spellCheckLanguageCode.val(options.spellCheckLanguageCode);
}

40
src/public/app/widgets/type_widgets/options/sync.js → src/public/app/widgets/type_widgets/options/sync.ts
View File

@@ -2,33 +2,34 @@ import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
import OptionsWidget from "./options_widget.js";
import { t } from "../../../services/i18n.js";
import type { OptionMap } from "../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
<h4 style="margin-top: 0px;">${t("sync_2.config_title")}</h4>
<form class="sync-setup-form">
<div class="form-group">
<label for="sync-server-host" >${t("sync_2.server_address")}</label>
<input id="sync-server-host" class="sync-server-host form-control" placeholder="https://<host>:<port>">
</div>
<div class="form-group">
<label for="sync-server-timeout" >${t("sync_2.timeout")}</label>
<input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
</div>
<div class="form-group">
<label for="sync-proxy form-control" >${t("sync_2.proxy_label")}</label>
<input id="sync-proxy form-control" class="sync-proxy form-control" placeholder="https://<host>:<port>">
<p><strong>${t("sync_2.note")}:</strong> ${t("sync_2.note_description")}</p>
<p>${t("sync_2.special_value_description")}</p>
</div>
<div style="display: flex; justify-content: space-between;">
<button class="btn btn-primary">${t("sync_2.save")}</button>
<button class="btn" type="button" data-help-page="synchronization.html">${t("sync_2.help")}</button>
</div>
</form>
@@ -36,13 +37,26 @@ const TPL = `
<div class="options-section">
<h4>${t("sync_2.test_title")}</h4>
<p>${t("sync_2.test_description")}</p>
<button class="test-sync-button btn">${t("sync_2.test_button")}</button>
</div>`;
// TODO: Deduplicate
interface TestResponse {
success: boolean;
message: string;
}
export default class SyncOptions extends OptionsWidget {
private $form!: JQuery<HTMLElement>;
private $syncServerHost!: JQuery<HTMLElement>;
private $syncServerTimeout!: JQuery<HTMLElement>;
private $syncProxy!: JQuery<HTMLElement>;
private $testSyncButton!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
@@ -55,7 +69,7 @@ export default class SyncOptions extends OptionsWidget {
this.$form.on("submit", () => this.save());
this.$testSyncButton.on("click", async () => {
const result = await server.post("sync/test");
const result = await server.post<TestResponse>("sync/test");
if (result.success) {
toastService.showMessage(result.message);
@@ -65,7 +79,7 @@ export default class SyncOptions extends OptionsWidget {
});
}
optionsLoaded(options) {
optionsLoaded(options: OptionMap) {
this.$syncServerHost.val(options.syncServerHost);
this.$syncServerTimeout.val(options.syncServerTimeout);
this.$syncProxy.val(options.syncProxy);
@@ -73,9 +87,9 @@ export default class SyncOptions extends OptionsWidget {
save() {
this.updateMultipleOptions({
syncServerHost: this.$syncServerHost.val(),
syncServerTimeout: this.$syncServerTimeout.val(),
syncProxy: this.$syncProxy.val()
syncServerHost: String(this.$syncServerHost.val()),
syncServerTimeout: String(this.$syncServerTimeout.val()),
syncProxy: String(this.$syncProxy.val())
});
return false;

1
src/services/options_interface.ts
View File

@@ -69,6 +69,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
firstDayOfWeek: number;
initialized: boolean;
isPasswordSet: boolean;
overrideThemeFonts: boolean;
spellCheckEnabled: boolean;
autoFixConsistencyIssues: boolean;