mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 23:29:02 +02:00
feat(react/bulk_actions): improve delete relation
This commit is contained in:
parent
5c8e4fd6fd
commit
356adebbce
@ -1,45 +0,0 @@
|
||||
import SpacedUpdate from "../../../services/spaced_update.js";
|
||||
import AbstractBulkAction from "../abstract_bulk_action.js";
|
||||
import { t } from "../../../services/i18n.js";
|
||||
|
||||
const TPL = /*html*/`
|
||||
<tr>
|
||||
<td>
|
||||
${t("delete_relation.delete_relation")}
|
||||
</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center">
|
||||
<input type="text"
|
||||
class="form-control relation-name"
|
||||
pattern="[\\p{L}\\p{N}_:]+"
|
||||
placeholder="${t("delete_relation.relation_name")}"
|
||||
title="${t("delete_relation.allowed_characters")}"/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="button-column">
|
||||
<span class="bx bx-x icon-action action-conf-del"></span>
|
||||
</td>
|
||||
</tr>`;
|
||||
|
||||
export default class DeleteRelationBulkAction extends AbstractBulkAction {
|
||||
static get actionName() {
|
||||
return "deleteRelation";
|
||||
}
|
||||
static get actionTitle() {
|
||||
return t("delete_relation.delete_relation");
|
||||
}
|
||||
|
||||
doRender() {
|
||||
const $action = $(TPL);
|
||||
const $relationName = $action.find(".relation-name");
|
||||
$relationName.val(this.actionDef.relationName || "");
|
||||
|
||||
const spacedUpdate = new SpacedUpdate(async () => {
|
||||
await this.saveAction({ relationName: $relationName.val() });
|
||||
}, 1000);
|
||||
|
||||
$relationName.on("input", () => spacedUpdate.scheduleUpdate());
|
||||
|
||||
return $action;
|
||||
}
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
|
||||
import { t } from "../../../services/i18n.js";
|
||||
import BulkAction from "../BulkAction.jsx";
|
||||
import FormTextBox from "../../react/FormTextBox.jsx";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import { useSpacedUpdate } from "../../react/hooks.jsx";
|
||||
|
||||
function DeleteRelationBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
|
||||
const [ relationName, setRelationName ] = useState(actionDef.relationName);
|
||||
const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ relationName }));
|
||||
useEffect(() => spacedUpdate.scheduleUpdate(), [ relationName ]);
|
||||
|
||||
return (
|
||||
<BulkAction
|
||||
bulkAction={bulkAction}
|
||||
label={t("delete_relation.delete_relation")}
|
||||
>
|
||||
<FormTextBox
|
||||
pattern="[\\p{L}\\p{N}_:]+"
|
||||
placeholder={t("delete_relation.relation_name")}
|
||||
title={t("delete_relation.allowed_characters")}
|
||||
currentValue={relationName} onChange={setRelationName}
|
||||
/>
|
||||
</BulkAction>
|
||||
)
|
||||
}
|
||||
|
||||
export default class DeleteRelationBulkAction extends AbstractBulkAction {
|
||||
|
||||
static get actionName() {
|
||||
return "deleteRelation";
|
||||
}
|
||||
|
||||
static get actionTitle() {
|
||||
return t("delete_relation.delete_relation");
|
||||
}
|
||||
|
||||
doRender() {
|
||||
return <DeleteRelationBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user