shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve toolbox reorder and checklist editing UX
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-02 22:12:33 +02:00
parent 1e4ac4259b
commit 8eb622e05d
11 changed files with 695 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

17
website/src/features/toolboxes/modules/CountersModule.jsx
View file

@ -1,12 +1,12 @@
// Rôle : fournit l'outil compteurs personnalisables.
import { useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { useDraftForm } from "../../../hooks/useDraftForm.js";
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
export function CountersModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeCountersData(context.getModuleData(toolboxId, moduleId, { counters: [] }));
const textContent = context.moduleText?.counters || {};
const [label, setLabel] = useState("");
const counterDraft = useDraftForm({ label: "" });
const {
itemReorder,
getItemProps,
@ -28,12 +28,13 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
}
function addCounter(event) {
event.preventDefault();
const cleanLabel = label.trim();
if (!cleanLabel) return;
counterDraft.handleSubmit(event, (draft, { reset }) => {
const cleanLabel = draft.label.trim();
if (!cleanLabel) return;
save([...data.counters, { id: context.uid("counter"), label: cleanLabel, value: 0 }]);
setLabel("");
save([...data.counters, { id: context.uid("counter"), label: cleanLabel, value: 0 }]);
reset();
});
}
function updateCounter(counterId, updater) {
@ -44,7 +45,7 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
<>
{editing && (
<form className="inline-form counters-add-form module-add-panel" onSubmit={addCounter}>
<input name="label" placeholder={textContent.labelPlaceholder || "Nom du compteur"} value={label} onChange={(event) => setLabel(event.target.value)} />
<input {...counterDraft.getFieldProps("label", { placeholder: textContent.labelPlaceholder || "Nom du compteur" })} />
<button className="primary">{textContent.addButton || "Ajouter"}</button>
</form>
)}