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/bulk_actions): port add relation

Browse Source
This commit is contained in:
Elian Doran 2025-08-09 19:41:49 +03:00
parent 60c5dc525b
commit 5be9bb47a7
No known key found for this signature in database
3 changed files with 57 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
apps/client/src/widgets/bulk_actions/relation/add_relation.ts
View File

@ -1,70 +0,0 @@
import SpacedUpdate from "../../../services/spaced_update.js";
import AbstractBulkAction from "../abstract_bulk_action.js";
import noteAutocompleteService from "../../../services/note_autocomplete.js";
import { t } from "../../../services/i18n.js";
const TPL = /*html*/`
<tr>
<td colspan="2">
<div style="display: flex; align-items: center">
<div style="margin-right: 10px;" class="text-nowrap">${t("add_relation.add_relation")}</div>
<input type="text"
class="form-control relation-name"
placeholder="${t("add_relation.relation_name")}"
pattern="[\\p{L}\\p{N}_:]+"
style="flex-shrink: 3"
title="${t("add_relation.allowed_characters")}"/>
<div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("add_relation.to")}</div>
<div class="input-group" style="flex-shrink: 2">
<input type="text" class="form-control target-note" placeholder="${t("add_relation.target_note")}"/>
</div>
</div>
</td>
<td class="button-column">
<div class="dropdown help-dropdown">
<span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu dropdown-menu-right p-4">
${t("add_relation.create_relation_on_all_matched_notes")}
</div>
</div>
<span class="bx bx-x icon-action action-conf-del"></span>
</td>
</tr>`;
export default class AddRelationBulkAction extends AbstractBulkAction {
static get actionName() {
return "addRelation";
}
static get actionTitle() {
return t("add_relation.add_relation");
}
doRender() {
const $action = $(TPL);
const $relationName = $action.find(".relation-name");
$relationName.val(this.actionDef.relationName || "");
const $targetNote = $action.find(".target-note");
noteAutocompleteService.initNoteAutocomplete($targetNote);
$targetNote.setNote(this.actionDef.targetNoteId);
$targetNote.on("autocomplete:closed", () => spacedUpdate.scheduleUpdate());
const spacedUpdate = new SpacedUpdate(async () => {
await this.saveAction({
relationName: $relationName.val(),
targetNoteId: $targetNote.getSelectedNoteId()
});
}, 1000);
$relationName.on("input", () => spacedUpdate.scheduleUpdate());
$targetNote.on("input", () => spacedUpdate.scheduleUpdate());
return $action;
}
}

52
apps/client/src/widgets/bulk_actions/relation/add_relation.tsx Normal file
View File

@ -0,0 +1,52 @@
import SpacedUpdate from "../../../services/spaced_update.js";
import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
import noteAutocompleteService from "../../../services/note_autocomplete.js";
import { t } from "../../../services/i18n.js";
import BulkAction, { BulkActionText } from "../BulkAction.jsx";
import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
import FormTextBox from "../../react/FormTextBox.jsx";
import { useEffect, useState } from "preact/hooks";
import { useSpacedUpdate } from "../../react/hooks.jsx";
function AddRelationBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
const [ relationName, setRelationName ] = useState<string>(actionDef.relationName);
const [ targetNoteId, setTargetNoteId ] = useState<string>(actionDef.targetNoteId);
const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ relationName, targetNoteId }));
useEffect(() => spacedUpdate.scheduleUpdate(), [ relationName, targetNoteId ]);
return (
<BulkAction
bulkAction={bulkAction}
label={t("add_relation.add_relation")}
helpText={t("add_relation.create_relation_on_all_matched_notes")}
>
<FormTextBox
placeholder={t("add_relation.relation_name")}
pattern="[\\p{L}\\p{N}_:]+"
style={{ flexShrink: 3 }}
title={t("add_relation.allowed_characters")}
currentValue={relationName} onChange={setRelationName}
/>
<BulkActionText text={t("add_relation.to")} />
<NoteAutocomplete
placeholder={t("add_relation.target_note")}
/>
</BulkAction>
)
}
export default class AddRelationBulkAction extends AbstractBulkAction {
static get actionName() {
return "addRelation";
}
static get actionTitle() {
return t("add_relation.add_relation");
}
doRender() {
return <AddRelationBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
}
}

8
apps/client/src/widgets/react/FormTextBox.tsx
View File

@ -1,13 +1,13 @@
import { InputHTMLAttributes, RefObject } from "preact/compat";
interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title"> {
interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title" | "style"> {
id?: string;
currentValue?: string;
onChange?(newValue: string): void;
inputRef?: RefObject<HTMLInputElement>;
}
export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern }: FormTextBoxProps) {
export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern, style }: FormTextBoxProps) {
return (
<input
ref={inputRef}
@ -20,6 +20,8 @@ export default function FormTextBox({ id, type, name, className, currentValue, o
placeholder={placeholder}
title={title}
pattern={pattern}
onInput={e => onChange?.(e.currentTarget.value)} />
onInput={e => onChange?.(e.currentTarget.value)}
style={style}
/>
);
}