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

feat(react/bulk_actions): port delete/rename label

Browse Source
This commit is contained in:
Elian Doran
2025-08-09 10:04:58 +03:00
parent 12b8a70e5c
commit 54f9ce87f9
4 changed files with 86 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/client/src/widgets/bulk_actions/label/delete_label.ts
View File

@@ -1,43 +0,0 @@
import { t } from "../../../services/i18n.js";
import SpacedUpdate from "../../../services/spaced_update.js";
import AbstractBulkAction from "../abstract_bulk_action.js";
const TPL = /*html*/`
<tr>
<td>
${t("delete_label.delete_label")}
</td>
<td>
<input type="text"
class="form-control label-name"
pattern="[\\p{L}\\p{N}_:]+"
title="${t("delete_label.label_name_title")}"
placeholder="${t("delete_label.label_name_placeholder")}"/>
</td>
<td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span>
</td>
</tr>`;
export default class DeleteLabelBulkAction extends AbstractBulkAction {
static get actionName() {
return "deleteLabel";
}
static get actionTitle() {
return t("delete_label.delete_label");
}
doRender() {
const $action = $(TPL);
const $labelName = $action.find(".label-name");
$labelName.val(this.actionDef.labelName || "");
const spacedUpdate = new SpacedUpdate(async () => {
await this.saveAction({ labelName: $labelName.val() });
}, 1000);
$labelName.on("input", () => spacedUpdate.scheduleUpdate());
return $action;
}
}

38
apps/client/src/widgets/bulk_actions/label/delete_label.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { useEffect, useState } from "preact/hooks";
import { t } from "../../../services/i18n.js";
import FormTextBox from "../../react/FormTextBox.jsx";
import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
import { useSpacedUpdate } from "../../react/hooks.jsx";
import BulkAction from "../BulkAction.jsx";
function DeleteLabelBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition}) {
const [ labelName, setLabelName ] = useState<string>(actionDef.labelName ?? "");
const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ labelName }));
useEffect(() => spacedUpdate.scheduleUpdate(), [labelName]);
return (
<BulkAction
label={t("delete_label.delete_label")}
>
<FormTextBox
pattern="[\\p{L}\\p{N}_:]+"
title={t("delete_label.label_name_title")}
placeholder={t("delete_label.label_name_placeholder")}
currentValue={labelName} onChange={setLabelName}
/>
</BulkAction>
);
}
export default class DeleteLabelBulkAction extends AbstractBulkAction {
static get actionName() {
return "deleteLabel";
}
static get actionTitle() {
return t("delete_label.delete_label");
}
doRender() {
return <DeleteLabelBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
}
}

60
apps/client/src/widgets/bulk_actions/label/rename_label.ts
View File

@@ -1,60 +0,0 @@
import { t } from "../../../services/i18n.js";
import SpacedUpdate from "../../../services/spaced_update.js";
import AbstractBulkAction from "../abstract_bulk_action.js";
const TPL = /*html*/`
<tr>
<td colspan="2">
<div style="display: flex; align-items: center">
<div style="margin-right: 10px; flex-shrink: 0;">${t("rename_label.rename_label_from")}</div>
<input type="text"
class="form-control old-label-name"
placeholder="${t("rename_label.old_name_placeholder")}"
pattern="[\\p{L}\\p{N}_:]+"
title="${t("rename_label.name_title")}"/>
<div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("rename_label.to")}</div>
<input type="text"
class="form-control new-label-name"
placeholder="${t("rename_label.new_name_placeholder")}"
pattern="[\\p{L}\\p{N}_:]+"
title="${t("rename_label.name_title")}"/>
</div>
</td>
<td class="button-column">
<span class="bx bx-x icon-action action-conf-del"></span>
</td>
</tr>`;
export default class RenameLabelBulkAction extends AbstractBulkAction {
static get actionName() {
return "renameLabel";
}
static get actionTitle() {
return t("rename_label.rename_label");
}
doRender() {
const $action = $(TPL);
const $oldLabelName = $action.find(".old-label-name");
$oldLabelName.val(this.actionDef.oldLabelName || "");
const $newLabelName = $action.find(".new-label-name");
$newLabelName.val(this.actionDef.newLabelName || "");
const spacedUpdate = new SpacedUpdate(async () => {
await this.saveAction({
oldLabelName: $oldLabelName.val(),
newLabelName: $newLabelName.val()
});
}, 1000);
$oldLabelName.on("input", () => spacedUpdate.scheduleUpdate());
$newLabelName.on("input", () => spacedUpdate.scheduleUpdate());
return $action;
}
}

48
apps/client/src/widgets/bulk_actions/label/rename_label.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { useEffect, useState } from "preact/hooks";
import { t } from "../../../services/i18n.js";
import FormTextBox from "../../react/FormTextBox.jsx";
import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
import BulkAction, { BulkActionText } from "../BulkAction.jsx";
import { useSpacedUpdate } from "../../react/hooks.jsx";
function RenameLabelBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition}) {
const [ oldLabelName, setOldLabelName ] = useState(actionDef.oldLabelName);
const [ newLabelName, setNewLabelName ] = useState(actionDef.newLabelName);
const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ oldLabelName, newLabelName }));
useEffect(() => spacedUpdate.scheduleUpdate(), [ oldLabelName, newLabelName ]);
return (
<BulkAction
label={t("rename_label.rename_label_from")}
>
<FormTextBox
placeholder={t("rename_label.old_name_placeholder")}
pattern="[\\p{L}\\p{N}_:]+"
title={t("rename_label.name_title")}
currentValue={oldLabelName} onChange={setOldLabelName}
/>
<BulkActionText text={t("rename_label.to")} />
<FormTextBox
placeholder={t("rename_label.new_name_placeholder")}
pattern="[\\p{L}\\p{N}_:]+"
title={t("rename_label.name_title")}
currentValue={newLabelName} onChange={setNewLabelName}
/>
</BulkAction>
)
}
export default class RenameLabelBulkAction extends AbstractBulkAction {
static get actionName() {
return "renameLabel";
}
static get actionTitle() {
return t("rename_label.rename_label");
}
doRender() {
return <RenameLabelBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
}
}