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

Add manual toolbox module ordering
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-09 20:51:51 +02:00
parent 7140012a98
commit e043d31fa8
10 changed files with 321 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

64
website/src/features/toolboxes/ToolboxPages.jsx
View file

@ -20,6 +20,7 @@ import {
normalizeEquipmentPlannerData,
normalizeImageAnnotationData,
normalizeLinksData,
normalizeModuleOrder,
normalizeNotepadData,
normalizeTableData,
normalizeTaskPlannerData,
@ -31,6 +32,31 @@ import {
const DRAWER_WIDTH_SETTING = "drawerWidth";
function addModuleToOrder(moduleOrder, modules, moduleId) {
const order = normalizeModuleOrder(moduleOrder, modules);
const two = [
order.two[0].filter((id) => id !== moduleId),
order.two[1].filter((id) => id !== moduleId)
];
const targetColumnIndex = two[0].length <= two[1].length ? 0 : 1;
two[targetColumnIndex].push(moduleId);
return {
one: [...order.one.filter((id) => id !== moduleId), moduleId],
two
};
}
function removeModuleFromOrder(moduleOrder, modules, moduleId) {
const order = normalizeModuleOrder(moduleOrder, modules);
return {
one: order.one.filter((id) => id !== moduleId),
two: [
order.two[0].filter((id) => id !== moduleId),
order.two[1].filter((id) => id !== moduleId)
]
};
}
async function copyText(value) {
try {
await navigator.clipboard.writeText(value);
@ -144,7 +170,7 @@ export function ToolboxPage(props) {
}
function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, storageUsage, getModuleData, updateToolbox, updateModuleData, addImageFiles }) {
const moduleColumns = Number(toolbox.moduleColumns) === 1 ? 1 : 2;
const moduleColumns = embedded || Number(toolbox.moduleColumns) === 1 ? 1 : 2;
const toolboxGameCover = getGameCardCover(toolboxGame);
const moduleText = siteContent.toolboxes.modules;
const moduleContext = {
@ -178,28 +204,27 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
function addModule(type) {
if (!type) return;
updateToolbox({ ...toolbox, modules: [...toolbox.modules, { id: uid("mod"), type }] });
const module = { id: uid("mod"), type };
const modules = [...toolbox.modules, module];
updateToolbox({
...toolbox,
modules,
moduleOrder: addModuleToOrder(toolbox.moduleOrder, modules, module.id)
});
}
function createImageAnnotationModule(dataUrl) {
if (!dataUrl) return;
const moduleId = uid("mod");
updateToolbox({ ...toolbox, modules: [...toolbox.modules, { id: moduleId, type: "imageAnnotation" }] });
const modules = [...toolbox.modules, { id: moduleId, type: "imageAnnotation" }];
updateToolbox({
...toolbox,
modules,
moduleOrder: addModuleToOrder(toolbox.moduleOrder, modules, moduleId)
});
updateModuleData(toolbox.id, moduleId, { image: dataUrl, markers: [] }, "imageAnnotation");
}
function moveModule(fromModuleId, toModuleId, placement = "before") {
if (!fromModuleId || !toModuleId || fromModuleId === toModuleId) return;
const modules = [...toolbox.modules];
const fromIndex = modules.findIndex((module) => module.id === fromModuleId);
const toIndex = modules.findIndex((module) => module.id === toModuleId);
if (fromIndex < 0 || toIndex < 0) return;
const [moved] = modules.splice(fromIndex, 1);
const targetIndex = modules.findIndex((module) => module.id === toModuleId);
modules.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
updateToolbox({ ...toolbox, modules });
}
return (
<div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
<section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
@ -241,6 +266,7 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
context={moduleContext}
onRename={(moduleId, title) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? { ...module, title } : module) })}
onUpdateModule={(moduleId, updater) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? updater(module) : module) })}
onModuleOrderChange={(moduleOrder) => updateToolbox({ ...toolbox, moduleOrder })}
onDelete={(moduleId) => actions.setConfirmModal({
title: "Retirer l'outil",
message: "Retirer cet outil de la toolbox ?",
@ -249,10 +275,14 @@ function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, sto
onResolve: (confirmed) => {
if (!confirmed) return;
actions.removeModuleData(toolbox.id, moduleId);
updateToolbox({ ...toolbox, modules: toolbox.modules.filter((module) => module.id !== moduleId) });
const modules = toolbox.modules.filter((module) => module.id !== moduleId);
updateToolbox({
...toolbox,
modules,
moduleOrder: removeModuleFromOrder(toolbox.moduleOrder, modules, moduleId)
});
}
})}
onMove={moveModule}
/>
{!embedded && <StorageQuota usage={storageUsage} />}
</div>