feat(react/bulk_actions): port rename relation

This commit is contained in:
Elian Doran 2025-08-09 20:09:27 +03:00
parent 356adebbce
commit 6f6643d758
No known key found for this signature in database
2 changed files with 49 additions and 60 deletions

View File

@ -1,60 +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 colspan="2">
<div style="display: flex; align-items: center">
<div style="margin-right: 10px; flex-shrink: 0;">${t("rename_relation.rename_relation_from")}</div>
<input type="text"
class="form-control old-relation-name"
placeholder="${t("rename_relation.old_name")}"
pattern="[\\p{L}\\p{N}_:]+"
title="${t("rename_relation.allowed_characters")}"/>
<div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("rename_relation.to")}</div>
<input type="text"
class="form-control new-relation-name"
placeholder="${t("rename_relation.new_name")}"
pattern="[\\p{L}\\p{N}_:]+"
title="${t("rename_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 RenameRelationBulkAction extends AbstractBulkAction {
static get actionName() {
return "renameRelation";
}
static get actionTitle() {
return t("rename_relation.rename_relation");
}
doRender() {
const $action = $(TPL);
const $oldRelationName = $action.find(".old-relation-name");
$oldRelationName.val(this.actionDef.oldRelationName || "");
const $newRelationName = $action.find(".new-relation-name");
$newRelationName.val(this.actionDef.newRelationName || "");
const spacedUpdate = new SpacedUpdate(async () => {
await this.saveAction({
oldRelationName: $oldRelationName.val(),
newRelationName: $newRelationName.val()
});
}, 1000);
$oldRelationName.on("input", () => spacedUpdate.scheduleUpdate());
$newRelationName.on("input", () => spacedUpdate.scheduleUpdate());
return $action;
}
}

View File

@ -0,0 +1,49 @@
import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
import { t } from "../../../services/i18n.js";
import BulkAction, { BulkActionText } from "../BulkAction.jsx";
import FormTextBox from "../../react/FormTextBox.jsx";
import { useEffect, useState } from "preact/hooks";
import { useSpacedUpdate } from "../../react/hooks.jsx";
function RenameRelationBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
const [ oldRelationName, setOldRelationName ] = useState(actionDef.oldRelationName);
const [ newRelationName, setNewRelationName ] = useState(actionDef.newRelationName);
const spacedUpdate = useSpacedUpdate(() => bulkAction.saveAction({ oldRelationName, newRelationName }));
useEffect(() => spacedUpdate.scheduleUpdate(), [ oldRelationName, newRelationName ]);
return (
<BulkAction
bulkAction={bulkAction}
label={t("rename_relation.rename_relation_from")}
>
<FormTextBox
placeholder={t("rename_relation.old_name")}
pattern="[\\p{L}\\p{N}_:]+"
title={t("rename_relation.allowed_characters")}
currentValue={oldRelationName} onChange={setOldRelationName}
/>
<BulkActionText text={t("rename_relation.to")} />
<FormTextBox
placeholder={t("rename_relation.new_name")}
pattern="[\\p{L}\\p{N}_:]+"
title={t("rename_relation.allowed_characters")}
currentValue={newRelationName} onChange={setNewRelationName}
/>
</BulkAction>
)
}
export default class RenameRelationBulkAction extends AbstractBulkAction {
static get actionName() {
return "renameRelation";
}
static get actionTitle() {
return t("rename_relation.rename_relation");
}
doRender() {
return <RenameRelationBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
}
}