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

add categories to task planner
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-28 09:32:14 +02:00
parent e306bfc5d6
commit 3cd350c7b8
10 changed files with 459 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/STORAGE_SCHEMA.md
View file

@ -269,11 +269,13 @@ Type : `taskPlanner`
"weeklyResetDay": 1,
"resetTime": "00:00",
"lastResetAt": 1760000000000,
"categoryOrder": ["Raid", "Farm"],
"tasks": [
{
"id": "task1",
"title": "Quête 1",
"description": "Préparer la route.",
"category": "Raid",
"type": "daily",
"checked": true,
"checkedAt": 1760000000000
@ -295,7 +297,7 @@ Type : `taskPlanner`
"id": "relation2",
"fromTaskId": "task2",
"toTaskId": "task1",
"dependency": true
"prerequisite": true
}
]
}
@ -308,10 +310,14 @@ Notes :
- `weeklyResetDay` suit les jours JavaScript : `0` dimanche, `1` lundi, ..., `6` samedi.
- `resetTime` est global à l'outil et vaut `HH:MM`.
- `weeklyResetDay` sur une tâche hebdo surcharge le jour global.
- `category` sur une tâche racine est facultatif. Les tâches enfants héritent de la catégorie effective de leur parent et ne stockent pas de catégorie propre.
- Les tâches catégorisées sont regroupées par catégorie au niveau racine.
- `categoryOrder` stocke l'ordre d'affichage des catégories utilisées. Les catégories absentes des tâches sont retirées à la normalisation.
- `relations` stocke les parents directionnels. `fromTaskId` désigne la tâche enfant, `toTaskId` son parent.
- une tâche ne conserve qu'un seul parent.
- `dependency: true` marque aussi ce parent comme pré requis.
- `prerequisite: true` marque aussi ce parent comme pré requis.
- Les pré requis sont non bloquants : ils affichent un avertissement si le parent requis n'est pas effectué.
- En tri manuel, une tâche catégorisée ne peut être réordonnée qu'avec des tâches du même parent et de la même catégorie.
Stockage compact :
@ -320,10 +326,12 @@ Stockage compact :
- `resetTime` est omis si la valeur vaut `00:00`.
- `lastResetAt` est omis si la valeur vaut `0`.
- `description` est omis si vide.
- `category` est omis si vide ou si la tâche a un parent.
- `categoryOrder` est omis si aucune catégorie n'est utilisée.
- `checked` et `checkedAt` sont omis si la tâche n'est pas effectuée.
- `weeklyResetDay` unitaire est omis si non défini.
- `relations` est omis si vide.
- `relations[].dependency` est omis si `false`.
- `relations[].prerequisite` est omis si `false`.
## Outil Liens

11
tests/helpers/data-validation.mjs
View file

@ -211,15 +211,18 @@ export function validateSiteContent(site) {
"toolboxes.modules.taskPlanner.showDescriptionTitle",
"toolboxes.modules.taskPlanner.hideDescriptionTitle",
"toolboxes.modules.taskPlanner.taskSettingsTitle",
"toolboxes.modules.taskPlanner.missingDependencyTitle",
"toolboxes.modules.taskPlanner.missingDependencyBadge",
"toolboxes.modules.taskPlanner.missingDependencyNotice",
"toolboxes.modules.taskPlanner.missingPrerequisiteTitle",
"toolboxes.modules.taskPlanner.missingPrerequisiteBadge",
"toolboxes.modules.taskPlanner.missingPrerequisiteNotice",
"toolboxes.modules.taskPlanner.categoryLabel",
"toolboxes.modules.taskPlanner.categoryPlaceholder",
"toolboxes.modules.taskPlanner.categoryReorderTitle",
"toolboxes.modules.taskPlanner.taskWeeklyResetDayLabel",
"toolboxes.modules.taskPlanner.inheritWeeklyResetDay",
"toolboxes.modules.taskPlanner.linksLabel",
"toolboxes.modules.taskPlanner.emptyLinks",
"toolboxes.modules.taskPlanner.addLinkLabel",
"toolboxes.modules.taskPlanner.dependencyCheckboxLabel",
"toolboxes.modules.taskPlanner.prerequisiteCheckboxLabel",
"toolboxes.modules.taskPlanner.removeRelationTitle",
"toolboxes.modules.taskPlanner.emptyTasks",
"toolboxes.modules.imageAnnotation.addImage",

4
tests/static-toolboxes.test.mjs
View file

@ -141,7 +141,9 @@ test("toolbox module registry and modules expose expected behavior", async () =>
assert.match(taskPlannerModule, /normalizeTaskPlannerData/);
assert.match(taskPlannerModule, /applyDueResets/);
assert.match(taskPlannerModule, /relations/);
assert.match(taskPlannerModule, /dependency/);
assert.match(taskPlannerModule, /prerequisite/);
assert.match(taskPlannerModule, /categoryOrder/);
assert.match(taskPlannerModule, /categoryLabel/);
assert.match(taskPlannerModule, /task-planner-warning/);
assert.match(taskPlannerModule, /usePointerReorder/);
assert.match(checklistModule, /export function ChecklistModule/);

45
tests/toolbox-modules.test.mjs
View file

@ -33,14 +33,15 @@ test("task planner data normalizes invalid settings and relations", () => {
sortMode: "unknown",
weeklyResetDay: 9,
resetTime: "27:80",
categoryOrder: ["Raid", "Missing", "Farm", "Raid"],
tasks: [
{ id: "task1", title: "Daily", type: "daily", checked: true, checkedAt: 1000 },
{ id: "task2", title: "Weekly", type: "weekly", weeklyResetDay: 4 },
{ id: "task3", title: "Invalid type", type: "later" }
{ id: "task1", title: "Daily", type: "daily", checked: true, checkedAt: 1000, category: "Farm" },
{ id: "task2", title: "Weekly", type: "weekly", weeklyResetDay: 4, category: "Raid" },
{ id: "task3", title: "Invalid type", type: "later", category: "Farm" }
],
relations: [
{ id: "link1", fromTaskId: "task1", toTaskId: "task2" },
{ id: "dep1", fromTaskId: "task2", toTaskId: "task1", dependency: true },
{ id: "dep1", fromTaskId: "task3", toTaskId: "task2", prerequisite: true },
{ id: "bad", fromTaskId: "task1", toTaskId: "missing" },
{ id: "self", fromTaskId: "task2", toTaskId: "task2" }
]
@ -49,29 +50,16 @@ test("task planner data normalizes invalid settings and relations", () => {
assert.equal(normalized.sortMode, "manual");
assert.equal(normalized.weeklyResetDay, 1);
assert.equal(normalized.resetTime, "00:00");
assert.deepEqual(normalized.categoryOrder, ["Raid"]);
assert.equal(normalized.tasks[0].category, undefined);
assert.equal(normalized.tasks[1].weeklyResetDay, 4);
assert.equal(normalized.tasks[1].category, "Raid");
assert.equal(normalized.tasks[2].type, "unique");
assert.deepEqual(normalized.relations.map((relation) => relation.id), ["link1", "dep1"]);
assert.equal(normalized.relations[0].dependency, false);
assert.equal(normalized.relations[1].dependency, true);
assert.equal(normalized.relations[0].prerequisite, false);
assert.equal(normalized.relations[1].prerequisite, true);
});
test("task planner accepts temporary split links data as combined relations", () => {
const normalized = normalizeTaskPlannerData({
tasks: [
{ id: "task1", title: "Daily", type: "daily" },
{ id: "task2", title: "Weekly", type: "weekly" }
],
links: [{ id: "link1", fromTaskId: "task1", toTaskId: "task2" }],
dependencies: [{ id: "dep1", fromTaskId: "task2", toTaskId: "task1" }]
});
assert.deepEqual(normalized.relations.map((relation) => relation.toTaskId), ["task2", "task1"]);
assert.equal(normalized.relations[0].dependency, false);
assert.equal(normalized.relations[1].dependency, true);
});
test("task planner storage compacts defaults and export remaps task relations", () => {
const compact = compactModuleDataForStorage("taskPlanner", {
sortMode: "type",
@ -79,18 +67,20 @@ test("task planner storage compacts defaults and export remaps task relations",
resetTime: "00:00",
tasks: [
{ id: "task1", title: "Daily", description: "", type: "daily", checked: false },
{ id: "task2", title: "Weekly", description: "Run", type: "weekly", checked: true, checkedAt: 2000, weeklyResetDay: 5 }
{ id: "task2", title: "Weekly", description: "Run", type: "weekly", checked: true, checkedAt: 2000, weeklyResetDay: 5, category: "Raid" }
],
categoryOrder: ["Raid"],
relations: [
{ id: "link1", fromTaskId: "task1", toTaskId: "task2", dependency: false },
{ id: "dep1", fromTaskId: "task2", toTaskId: "task1", dependency: true }
{ id: "dep1", fromTaskId: "task1", toTaskId: "task2", prerequisite: true }
]
});
assert.equal(compact.sortMode, "type");
assert.equal(compact.weeklyResetDay, undefined);
assert.equal(compact.resetTime, undefined);
assert.deepEqual(compact.categoryOrder, ["Raid"]);
assert.deepEqual(compact.tasks[0], { id: "task1", title: "Daily", type: "daily" });
assert.equal(compact.tasks[1].category, "Raid");
assert.equal(compact.tasks[1].weeklyResetDay, 5);
const exported = createToolboxExportPayload(
@ -101,8 +91,5 @@ test("task planner storage compacts defaults and export remaps task relations",
assert.deepEqual(exportedPlanner.tasks.map((task) => task.id), ["a1", "a2"]);
assert.equal(exportedPlanner.relations[0].fromTaskId, "a1");
assert.equal(exportedPlanner.relations[0].toTaskId, "a2");
assert.equal(exportedPlanner.relations[0].dependency, undefined);
assert.equal(exportedPlanner.relations[1].fromTaskId, "a2");
assert.equal(exportedPlanner.relations[1].toTaskId, "a1");
assert.equal(exportedPlanner.relations[1].dependency, true);
assert.equal(exportedPlanner.relations[0].prerequisite, true);
});

11
website/public/data/site.json
View file

@ -345,15 +345,18 @@
"showDescriptionTitle": "Afficher la description",
"hideDescriptionTitle": "Masquer la description",
"taskSettingsTitle": "Réglages de la tâche",
"missingDependencyTitle": "Pré requis non effectué",
"missingDependencyBadge": "Pré requis",
"missingDependencyNotice": "Pré requis parent non effectué",
"missingPrerequisiteTitle": "Pré requis non effectué",
"missingPrerequisiteBadge": "Pré requis",
"missingPrerequisiteNotice": "Pré requis parent non effectué",
"categoryLabel": "Catégorie",
"categoryPlaceholder": "Nom de catégorie",
"categoryReorderTitle": "Déplacer la catégorie",
"taskWeeklyResetDayLabel": "Jour hebdo",
"inheritWeeklyResetDay": "Global",
"linksLabel": "Parent",
"emptyLinks": "Aucun parent",
"addLinkLabel": "Définir un parent",
"dependencyCheckboxLabel": "Pré requis",
"prerequisiteCheckboxLabel": "Pré requis",
"removeRelationTitle": "Retirer",
"emptyTasks": "Aucune tâche planifiée."
},

326
website/src/features/toolboxes/modules/TaskPlannerModule.jsx
View file

@ -76,6 +76,17 @@ function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
return nextTasks;
}
function moveCategory(categoryOrder, fromCategory, toCategory, placement = "before") {
const index = categoryOrder.indexOf(fromCategory);
const targetIndex = categoryOrder.indexOf(toCategory);
if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return categoryOrder;
const nextOrder = [...categoryOrder];
const [moved] = nextOrder.splice(index, 1);
const nextTargetIndex = nextOrder.indexOf(toCategory);
nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
return nextOrder;
}
function sortTasks(tasks, sortMode) {
if (sortMode !== "type") return tasks;
const order = new Map(TASK_TYPES.map((type, index) => [type, index]));
@ -112,6 +123,82 @@ function getTasksForParent(tasks, parentMap, parentId, sortMode) {
return sortTasks(tasks.filter((task) => (parentMap.get(task.id) || "") === parentId), sortMode);
}
function getTaskCategory(task) {
return String(task?.category || "").trim();
}
function getTaskById(tasks, taskId) {
return tasks.find((task) => task.id === taskId) || null;
}
function getEffectiveTaskCategory(task, tasks, parentMap) {
const parentId = parentMap.get(task?.id) || "";
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
return parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : getTaskCategory(task);
}
function getTaskCategoryForParent(task, tasks, parentMap, parentId) {
return parentId ? getEffectiveTaskCategory(task, tasks, parentMap) : getTaskCategory(task);
}
function getTaskCategoryDataset(task, tasks, parentMap) {
return getEffectiveTaskCategory(task, tasks, parentMap);
}
function countTaskTree(taskIds, tasks, parentMap) {
let count = 0;
const visited = new Set();
function visit(taskId) {
if (visited.has(taskId)) return;
visited.add(taskId);
count += 1;
tasks
.filter((task) => (parentMap.get(task.id) || "") === taskId)
.forEach((child) => visit(child.id));
}
taskIds.forEach(visit);
return count;
}
function getTaskCategoryGroups(tasks, parentMap, parentId, sortMode, categoryOrder) {
const siblings = getTasksForParent(tasks, parentMap, parentId, sortMode);
if (parentId) {
return {
uncategorized: siblings,
categories: []
};
}
const categories = [];
siblings.forEach((task) => {
const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
if (category && !categories.includes(category)) categories.push(category);
});
const orderedCategories = [
...categoryOrder.filter((category) => categories.includes(category)),
...categories.filter((category) => !categoryOrder.includes(category))
];
return {
uncategorized: siblings.filter((task) => !getTaskCategoryForParent(task, tasks, parentMap, parentId)),
categories: orderedCategories.map((category) => ({
category,
tasks: siblings.filter((task) => getTaskCategoryForParent(task, tasks, parentMap, parentId) === category)
})).filter((group) => group.tasks.length)
};
}
function getCategorySectionId(parentId, category) {
return `${parentId || ""}\n${category}`;
}
function parseCategorySectionId(id) {
const separatorIndex = id.indexOf("\n");
if (separatorIndex < 0) return { parentId: "", category: id };
return {
parentId: id.slice(0, separatorIndex),
category: id.slice(separatorIndex + 1)
};
}
export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
const textContent = context.moduleText?.taskPlanner || {};
@ -121,8 +208,8 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const [settingsOpen, setSettingsOpen] = useState(false);
const [openDescriptions, setOpenDescriptions] = useState(() => new Set());
const [openTaskSettings, setOpenTaskSettings] = useState(() => new Set());
const [dependencyNoticeTaskIds, setDependencyNoticeTaskIds] = useState(() => new Set());
const dependencyNoticeTimeouts = useRef(new Map());
const [prerequisiteNoticeTaskIds, setPrerequisiteNoticeTaskIds] = useState(() => new Set());
const prerequisiteNoticeTimeouts = useRef(new Map());
const parentMap = useMemo(() => getTaskParentMap(data.tasks, data.relations), [data.tasks, data.relations]);
const {
draggingId,
@ -131,9 +218,31 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
} = usePointerReorder({
targetSelector: ".task-planner-item",
getTargetId: (target) => target.dataset.taskId,
canDropOn: (target, draggingTaskId) => data.sortMode === "manual" && target.dataset.parentId === (parentMap.get(draggingTaskId) || ""),
canDropOn: (target, draggingTaskId) => {
const draggingTask = data.tasks.find((task) => task.id === draggingTaskId);
return data.sortMode === "manual"
&& target.dataset.parentId === (parentMap.get(draggingTaskId) || "")
&& target.dataset.category === getTaskCategoryDataset(draggingTask, data.tasks, parentMap);
},
onMove: (fromTaskId, toTaskId, placement) => save({ ...data, tasks: moveTask(data.tasks, fromTaskId, toTaskId, placement) })
});
const {
draggingId: draggingCategoryId,
dropTarget: categoryDropTarget,
startDrag: startCategoryDrag
} = usePointerReorder({
targetSelector: ".task-planner-category-section",
getTargetId: (target) => getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
canDropOn: (target, draggingIdValue) => {
const draggingCategory = parseCategorySectionId(draggingIdValue);
return target.dataset.parentId === draggingCategory.parentId && Boolean(target.dataset.category);
},
onMove: (fromId, toId, placement) => {
const fromCategory = parseCategorySectionId(fromId).category;
const toCategory = parseCategorySectionId(toId).category;
save({ ...data, categoryOrder: moveCategory(data.categoryOrder, fromCategory, toCategory, placement) });
}
});
function save(nextData) {
context.setModuleData(toolboxId, moduleId, nextData, "taskPlanner");
@ -145,7 +254,7 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
}, []);
useEffect(() => () => {
dependencyNoticeTimeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
prerequisiteNoticeTimeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
}, []);
useEffect(() => {
@ -191,9 +300,15 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
if (!toTaskId || fromTaskId === toTaskId || data.relations.some((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId)) return;
save({
...data,
tasks: data.tasks.map((task) => {
if (task.id !== fromTaskId || !task.category) return task;
const nextTask = { ...task };
delete nextTask.category;
return nextTask;
}),
relations: [
...data.relations.filter((relation) => relation.fromTaskId !== fromTaskId),
{ id: context.uid("relation"), fromTaskId, toTaskId, dependency: false }
{ id: context.uid("relation"), fromTaskId, toTaskId, prerequisite: false }
]
});
}
@ -205,16 +320,32 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
});
}
function setDependency(fromTaskId, toTaskId, dependency) {
function setPrerequisite(fromTaskId, toTaskId, prerequisite) {
const hasRelation = data.relations.some((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId);
save({
...data,
relations: hasRelation
? data.relations.map((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId ? { ...relation, dependency } : relation)
: [...data.relations, { id: context.uid("relation"), fromTaskId, toTaskId, dependency }]
? data.relations.map((relation) => relation.fromTaskId === fromTaskId && relation.toTaskId === toTaskId ? { ...relation, prerequisite } : relation)
: [...data.relations, { id: context.uid("relation"), fromTaskId, toTaskId, prerequisite }]
});
}
function setTaskCategory(taskId, category) {
const normalizedCategory = String(category || "").trim();
const tasks = data.tasks.map((task) => {
if (task.id !== taskId) return task;
const nextTask = { ...task };
if (normalizedCategory) nextTask.category = normalizedCategory;
else delete nextTask.category;
return nextTask;
});
const categoryOrder = [
...data.categoryOrder.filter((categoryName) => tasks.some((task) => task.category === categoryName)),
...tasks.map((task) => task.category).filter(Boolean).filter((categoryName) => !data.categoryOrder.includes(categoryName))
];
save({ ...data, tasks, categoryOrder });
}
function toggleSet(setter, taskId) {
setter((current) => {
const next = new Set(current);
@ -224,19 +355,19 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
});
}
function showDependencyNotice(taskId) {
const currentTimeoutId = dependencyNoticeTimeouts.current.get(taskId);
function showPrerequisiteNotice(taskId) {
const currentTimeoutId = prerequisiteNoticeTimeouts.current.get(taskId);
if (currentTimeoutId) window.clearTimeout(currentTimeoutId);
setDependencyNoticeTaskIds((current) => new Set(current).add(taskId));
setPrerequisiteNoticeTaskIds((current) => new Set(current).add(taskId));
const timeoutId = window.setTimeout(() => {
dependencyNoticeTimeouts.current.delete(taskId);
setDependencyNoticeTaskIds((current) => {
prerequisiteNoticeTimeouts.current.delete(taskId);
setPrerequisiteNoticeTaskIds((current) => {
const next = new Set(current);
next.delete(taskId);
return next;
});
}, 2600);
dependencyNoticeTimeouts.current.set(taskId, timeoutId);
prerequisiteNoticeTimeouts.current.set(taskId, timeoutId);
}
return (
@ -301,19 +432,23 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
data={data}
draggingId={draggingId}
dropTarget={dropTarget}
draggingCategoryId={draggingCategoryId}
categoryDropTarget={categoryDropTarget}
textContent={textContent}
openDescriptions={openDescriptions}
openTaskSettings={openTaskSettings}
dependencyNoticeTaskIds={dependencyNoticeTaskIds}
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
onDragStart={startDrag}
onCategoryDragStart={startCategoryDrag}
onToggleDescription={(taskId) => toggleSet(setOpenDescriptions, taskId)}
onToggleSettings={(taskId) => toggleSet(setOpenTaskSettings, taskId)}
onDependencyNotice={showDependencyNotice}
onPrerequisiteNotice={showPrerequisiteNotice}
onUpdateTask={updateTask}
onDeleteTask={deleteTask}
onAddLinkTarget={addLinkTarget}
onRemoveLinkTarget={removeLinkTarget}
onSetDependency={setDependency}
onSetPrerequisite={setPrerequisite}
onSetTaskCategory={setTaskCategory}
/>
) : (
<li className="task-planner-empty">{textContent.emptyTasks || "Aucune tâche planifiée."}</li>
@ -330,26 +465,31 @@ function TaskPlannerBranch({
data,
draggingId,
dropTarget,
draggingCategoryId,
categoryDropTarget,
textContent,
openDescriptions,
openTaskSettings,
dependencyNoticeTaskIds,
prerequisiteNoticeTaskIds,
onDragStart,
onCategoryDragStart,
onToggleDescription,
onToggleSettings,
onDependencyNotice,
onPrerequisiteNotice,
onUpdateTask,
onDeleteTask,
onAddLinkTarget,
onRemoveLinkTarget,
onSetDependency,
onSetPrerequisite,
onSetTaskCategory,
visited = new Set()
}) {
const children = getTasksForParent(tasks, parentMap, parentId, data.sortMode).filter((task) => !visited.has(task.id));
const groupedTasks = getTaskCategoryGroups(tasks, parentMap, parentId, data.sortMode, data.categoryOrder);
const children = [...groupedTasks.uncategorized, ...groupedTasks.categories.flatMap((group) => group.tasks)].filter((task) => !visited.has(task.id));
if (!children.length) return null;
const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
return children.map((task) => {
function renderTask(task) {
const nestedChildren = getTasksForParent(tasks, parentMap, task.id, data.sortMode).filter((child) => !nextVisited.has(child.id));
return (
<TaskPlannerItem
@ -364,16 +504,17 @@ function TaskPlannerBranch({
textContent={textContent}
descriptionOpen={openDescriptions.has(task.id)}
settingsOpen={openTaskSettings.has(task.id)}
dependencyNoticeVisible={dependencyNoticeTaskIds.has(task.id)}
prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
onDragStart={onDragStart}
onToggleDescription={() => onToggleDescription(task.id)}
onToggleSettings={() => onToggleSettings(task.id)}
onDependencyNotice={onDependencyNotice}
onPrerequisiteNotice={onPrerequisiteNotice}
onUpdateTask={onUpdateTask}
onDeleteTask={onDeleteTask}
onAddLinkTarget={onAddLinkTarget}
onRemoveLinkTarget={onRemoveLinkTarget}
onSetDependency={onSetDependency}
onSetPrerequisite={onSetPrerequisite}
onSetTaskCategory={onSetTaskCategory}
>
{nestedChildren.length ? (
<TaskPlannerBranch
@ -383,25 +524,67 @@ function TaskPlannerBranch({
data={data}
draggingId={draggingId}
dropTarget={dropTarget}
draggingCategoryId={draggingCategoryId}
categoryDropTarget={categoryDropTarget}
textContent={textContent}
openDescriptions={openDescriptions}
openTaskSettings={openTaskSettings}
dependencyNoticeTaskIds={dependencyNoticeTaskIds}
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
onDragStart={onDragStart}
onCategoryDragStart={onCategoryDragStart}
onToggleDescription={onToggleDescription}
onToggleSettings={onToggleSettings}
onDependencyNotice={onDependencyNotice}
onPrerequisiteNotice={onPrerequisiteNotice}
onUpdateTask={onUpdateTask}
onDeleteTask={onDeleteTask}
onAddLinkTarget={onAddLinkTarget}
onRemoveLinkTarget={onRemoveLinkTarget}
onSetDependency={onSetDependency}
onSetPrerequisite={onSetPrerequisite}
onSetTaskCategory={onSetTaskCategory}
visited={nextVisited}
/>
) : null}
</TaskPlannerItem>
);
});
}
return [
...groupedTasks.uncategorized.filter((task) => !visited.has(task.id)).map(renderTask),
...groupedTasks.categories.map((group) => {
const groupTasks = group.tasks.filter((task) => !visited.has(task.id));
if (!groupTasks.length) return null;
const groupCount = countTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
const categoryId = getCategorySectionId(parentId, group.category);
const sectionClassName = [
"task-planner-category-section",
draggingCategoryId === categoryId ? "is-dragging" : "",
categoryDropTarget.id === categoryId ? "is-drop-target" : "",
categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after" ? "drop-after" : ""
].filter(Boolean).join(" ");
return (
<li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} data-parent-id={parentId} data-category={group.category}>
<div className="checklist-section-header task-planner-category-header">
<div>
<button
className="task-planner-category-drag-handle"
type="button"
onPointerDown={(event) => onCategoryDragStart(event, categoryId)}
aria-label={`${textContent.categoryReorderTitle || "Déplacer la catégorie"} ${group.category}`}
title={textContent.categoryReorderTitle || "Déplacer la catégorie"}
>
<Icon name="drag" />
</button>
<h3>{group.category}</h3>
</div>
<span>{groupCount}</span>
</div>
<ul className="task-planner-list">
{groupTasks.map(renderTask)}
</ul>
</li>
);
})
].filter(Boolean);
}
function TaskPlannerItem({
@ -415,26 +598,32 @@ function TaskPlannerItem({
textContent,
descriptionOpen,
settingsOpen,
dependencyNoticeVisible,
prerequisiteNoticeVisible,
onDragStart,
onToggleDescription,
onToggleSettings,
onDependencyNotice,
onPrerequisiteNotice,
onUpdateTask,
onDeleteTask,
onAddLinkTarget,
onRemoveLinkTarget,
onSetDependency,
onSetPrerequisite,
onSetTaskCategory,
children
}) {
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
const inheritedCategory = parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : "";
const categoryValue = parentTask ? inheritedCategory : task.category || "";
const categoryEditable = !parentTask;
const [categoryDraft, setCategoryDraft] = useState(categoryValue);
const relations = data.relations.filter((relation) => relation.fromTaskId === task.id);
const missingDependencies = relations.filter((relation) => relation.dependency && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
const missingPrerequisites = relations.filter((relation) => relation.prerequisite && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
const relationTargets = tasks.filter((item) => item.id !== task.id && !relations.some((relation) => relation.toTaskId === item.id));
const noticeMessage = dependencyNoticeVisible && missingDependencies.length > 0 ? textContent.missingDependencyNotice || "Pré requis parent non effectué" : "";
const noticeMessage = prerequisiteNoticeVisible && missingPrerequisites.length > 0 ? textContent.missingPrerequisiteNotice || "Pré requis parent non effectué" : "";
const className = [
"task-planner-item",
task.checked ? "is-complete" : "",
missingDependencies.length ? "has-missing-dependency" : "",
missingPrerequisites.length ? "has-missing-prerequisite" : "",
draggingId === task.id ? "is-dragging" : "",
dropTarget.id === task.id ? "is-drop-target" : "",
dropTarget.id === task.id && dropTarget.placement === "after" ? "drop-after" : ""
@ -442,7 +631,7 @@ function TaskPlannerItem({
function updateChecked(event) {
const checked = event.target.checked;
if (checked && missingDependencies.length > 0) onDependencyNotice(task.id);
if (checked && missingPrerequisites.length > 0) onPrerequisiteNotice(task.id);
onUpdateTask(task.id, (current) => ({
...current,
checked,
@ -450,8 +639,16 @@ function TaskPlannerItem({
}));
}
useEffect(() => {
setCategoryDraft(categoryValue);
}, [categoryValue, task.id]);
function commitCategoryDraft() {
if (categoryEditable && categoryDraft.trim() !== (task.category || "")) onSetTaskCategory(task.id, categoryDraft);
}
return (
<li className={className} data-task-id={task.id} data-parent-id={parentId}>
<li className={className} data-task-id={task.id} data-parent-id={parentId} data-category={getTaskCategoryDataset(task, tasks, parentMap)}>
<div className="task-planner-line">
<button
className="task-planner-drag-handle"
@ -489,9 +686,9 @@ function TaskPlannerItem({
>
{TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
</select>
{missingDependencies.length > 0 && (
<span className="task-planner-warning" title={textContent.missingDependencyTitle || "Pré requis non effectué"}>
{textContent.missingDependencyBadge || "Pré requis"}
{missingPrerequisites.length > 0 && (
<span className="task-planner-warning" title={textContent.missingPrerequisiteTitle || "Pré requis non effectué"}>
{textContent.missingPrerequisiteBadge || "Pré requis"}
</span>
)}
<div className="task-planner-actions">
@ -522,13 +719,32 @@ function TaskPlannerItem({
</div>
<InlineNotice className="task-planner-notice" message={noticeMessage} />
{descriptionOpen && (
<textarea
className="task-planner-description"
value={task.description}
onChange={(event) => onUpdateTask(task.id, (current) => ({ ...current, description: event.target.value }))}
placeholder={textContent.descriptionPlaceholder || "Description"}
aria-label={`${textContent.descriptionLabel || "Description"} ${task.title}`}
/>
<div className="task-planner-description-panel">
<label className={`task-planner-category-field ${categoryEditable ? "" : "is-disabled"}`}>
<span>{textContent.categoryLabel || "Catégorie"}</span>
<input
value={categoryDraft}
onChange={(event) => setCategoryDraft(event.target.value)}
onBlur={commitCategoryDraft}
onKeyDown={(event) => {
if (event.key === "Enter") event.currentTarget.blur();
}}
disabled={!categoryEditable}
placeholder={textContent.categoryPlaceholder || "Nom de catégorie"}
aria-label={`${textContent.categoryLabel || "Catégorie"} ${task.title}`}
/>
</label>
<label className="task-planner-description-field">
<span>{textContent.descriptionLabel || "Description"}</span>
<textarea
className="task-planner-description"
value={task.description}
onChange={(event) => onUpdateTask(task.id, (current) => ({ ...current, description: event.target.value }))}
placeholder={textContent.descriptionPlaceholder || "Description"}
aria-label={`${textContent.descriptionLabel || "Description"} ${task.title}`}
/>
</label>
</div>
)}
{settingsOpen && (
<div className="task-planner-task-settings">
@ -562,10 +778,10 @@ function TaskPlannerItem({
emptyLabel={textContent.emptyLinks || "Aucun parent"}
addLabel={textContent.addLinkLabel || "Définir un parent"}
removeLabel={textContent.removeRelationTitle || "Retirer"}
dependencyLabel={textContent.dependencyCheckboxLabel || "Pré requis"}
prerequisiteLabel={textContent.prerequisiteCheckboxLabel || "Pré requis"}
onAddLinkTarget={onAddLinkTarget}
onRemoveLinkTarget={onRemoveLinkTarget}
onSetDependency={onSetDependency}
onSetPrerequisite={onSetPrerequisite}
/>
</div>
)}
@ -574,7 +790,7 @@ function TaskPlannerItem({
);
}
function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, dependencyLabel, onAddLinkTarget, onRemoveLinkTarget, onSetDependency }) {
function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, prerequisiteLabel, onAddLinkTarget, onRemoveLinkTarget, onSetPrerequisite }) {
const descendantIds = new Set();
function collectDescendants(taskId) {
tasks.filter((item) => parentMap.get(item.id) === taskId).forEach((child) => {
@ -592,14 +808,14 @@ function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets
{relations.length ? relations.map((relation) => (
<div className="task-planner-relation-chip" key={relation.id}>
<span>{getTaskTitle(tasks, relation.toTaskId)}</span>
<label title={dependencyLabel}>
<label title={prerequisiteLabel}>
<input
type="checkbox"
checked={relation.dependency}
onChange={(event) => onSetDependency(task.id, relation.toTaskId, event.target.checked)}
aria-label={`${dependencyLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
checked={relation.prerequisite}
onChange={(event) => onSetPrerequisite(task.id, relation.toTaskId, event.target.checked)}
aria-label={`${prerequisiteLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
/>
<span>{dependencyLabel}</span>
<span>{prerequisiteLabel}</span>
</label>
<button type="button" onClick={() => onRemoveLinkTarget(task.id, relation.toTaskId)} title={removeLabel} aria-label={`${removeLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}>
<Icon name="close" />

57
website/src/features/toolboxes/storage/toolboxStorage.js
View file

@ -154,8 +154,8 @@ export function normalizeChecklistData(data) {
const sections = Array.isArray(data?.sections)
? data.sections.map((section) => normalizeChecklistSection(section)).filter((section) => section.items.length || section.title)
: [];
const legacyItems = (data?.items || []).map(normalizeChecklistItem).filter((item) => item.label);
if (!sections.length && legacyItems.length) return { hideCompletedSections, hideCompletedSectionsFully, sections: [{ id: uid("section"), title: "", items: legacyItems }], items: legacyItems };
const simpleItems = (data?.items || []).map(normalizeChecklistItem).filter((item) => item.label);
if (!sections.length && simpleItems.length) return { hideCompletedSections, hideCompletedSectionsFully, sections: [{ id: uid("section"), title: "", items: simpleItems }], items: simpleItems };
const items = sections.flatMap((section) => section.items);
return { hideCompletedSections, hideCompletedSectionsFully, sections, items };
}
@ -267,7 +267,6 @@ export function normalizeCalculatorData(data) {
export function normalizeTimerData(data) {
const stopwatch = data?.stopwatch || {};
const legacyAlertMode = TIMER_ALERT_MODES.has(data?.alertMode) ? data.alertMode : "off";
const laps = (Array.isArray(stopwatch.laps) ? stopwatch.laps : [])
.map((lap) => ({
id: lap?.id || uid("timer"),
@ -282,7 +281,7 @@ export function normalizeTimerData(data) {
id: countdown?.id || uid("timer"),
label: String(countdown?.label || "Timer").trim() || "Timer",
type,
alertMode: TIMER_ALERT_MODES.has(countdown?.alertMode) ? countdown.alertMode : legacyAlertMode
alertMode: TIMER_ALERT_MODES.has(countdown?.alertMode) ? countdown.alertMode : "off"
};
if (type === "duration") {
const durationMs = Math.max(0, Number(countdown?.durationMs) || 0);
@ -299,8 +298,7 @@ export function normalizeTimerData(data) {
return isTimeString(pattern, true) ? { ...normalized, pattern } : null;
}
if (type === "interval") {
const legacyIntervalMs = (Number.parseInt(countdown?.intervalMinutes, 10) || 0) * 60000;
const intervalMs = Math.max(0, Number(countdown?.intervalMs) || legacyIntervalMs);
const intervalMs = Math.max(0, Number(countdown?.intervalMs) || 0);
const anchorAt = Math.max(0, Number(countdown?.anchorAt) || 0);
return intervalMs > 0 ? { ...normalized, intervalMs, anchorAt } : null;
}
@ -324,6 +322,7 @@ export function normalizeTimerData(data) {
function normalizeTaskPlannerTask(task) {
const title = String(task?.title || "").trim() || "Tâche";
const type = TASK_TYPES.has(task?.type) ? task.type : "unique";
const category = String(task?.category || "").trim();
const normalized = {
id: task?.id || uid("task"),
title,
@ -332,23 +331,29 @@ function normalizeTaskPlannerTask(task) {
checked: task?.checked === true,
checkedAt: normalizeTimestamp(task?.checkedAt)
};
if (category) normalized.category = category;
if (type === "weekly" && task?.weeklyResetDay !== undefined) normalized.weeklyResetDay = normalizeWeekDay(task.weeklyResetDay);
if (!normalized.checked) normalized.checkedAt = 0;
return normalized;
}
function normalizeTaskPlannerCategoryOrder(value, tasks) {
const categories = new Set(tasks.map((task) => task.category).filter(Boolean));
const ordered = [];
(Array.isArray(value) ? value : []).forEach((category) => {
const normalized = String(category || "").trim();
if (normalized && categories.has(normalized) && !ordered.includes(normalized)) ordered.push(normalized);
});
tasks.forEach((task) => {
if (task.category && !ordered.includes(task.category)) ordered.push(task.category);
});
return ordered;
}
function normalizeTaskPlannerRelations(data, taskIds) {
const seen = new Set();
const seenChildren = new Set();
const legacyDependencies = new Set((Array.isArray(data?.dependencies) ? data.dependencies : [])
.map((relation) => `${relation?.fromTaskId || ""}:${relation?.toTaskId || ""}`));
const sourceRelations = Array.isArray(data?.relations)
? data.relations
: [
...(Array.isArray(data?.links) ? data.links : []),
...(Array.isArray(data?.dependencies) ? data.dependencies : []).map((relation) => ({ ...relation, dependency: true }))
];
return sourceRelations
return (Array.isArray(data?.relations) ? data.relations : [])
.map((relation) => {
const fromTaskId = String(relation?.fromTaskId || "");
const toTaskId = String(relation?.toTaskId || "");
@ -361,22 +366,32 @@ function normalizeTaskPlannerRelations(data, taskIds) {
id: relation?.id || uid("relation"),
fromTaskId,
toTaskId,
dependency: relation?.dependency === true || legacyDependencies.has(key)
prerequisite: relation?.prerequisite === true
};
})
.filter(Boolean);
}
export function normalizeTaskPlannerData(data) {
const tasks = (Array.isArray(data?.tasks) ? data.tasks : []).map(normalizeTaskPlannerTask).filter(Boolean);
const rawTasks = (Array.isArray(data?.tasks) ? data.tasks : []).map(normalizeTaskPlannerTask).filter(Boolean);
const rawTaskIds = new Set(rawTasks.map((task) => task.id));
const relations = normalizeTaskPlannerRelations(data, rawTaskIds);
const childTaskIds = new Set(relations.map((relation) => relation.fromTaskId));
const tasks = rawTasks.map((task) => {
if (!childTaskIds.has(task.id) || !task.category) return task;
const normalized = { ...task };
delete normalized.category;
return normalized;
});
const taskIds = new Set(tasks.map((task) => task.id));
return {
sortMode: TASK_SORT_MODES.has(data?.sortMode) ? data.sortMode : "manual",
weeklyResetDay: normalizeWeekDay(data?.weeklyResetDay),
resetTime: isClockTimeString(data?.resetTime) ? data.resetTime : DEFAULT_TASK_PLANNER_RESET_TIME,
lastResetAt: normalizeTimestamp(data?.lastResetAt),
categoryOrder: normalizeTaskPlannerCategoryOrder(data?.categoryOrder, tasks),
tasks,
relations: normalizeTaskPlannerRelations(data, taskIds)
relations: relations.filter((relation) => taskIds.has(relation.fromTaskId) && taskIds.has(relation.toTaskId))
};
}
@ -387,7 +402,7 @@ function clampPercent(value) {
}
export function normalizeImageAnnotationData(data) {
const image = String(data?.image || data?.dataUrl || "");
const image = String(data?.image || "");
const markers = (data?.markers || [])
.map((marker) => ({
id: marker?.id || uid("marker"),
@ -528,12 +543,14 @@ export function compactModuleDataForStorage(type, value) {
type: task.type
};
if (task.description) compactTask.description = task.description;
if (task.category) compactTask.category = task.category;
if (task.checked) compactTask.checked = true;
if (task.checked && task.checkedAt) compactTask.checkedAt = task.checkedAt;
if (task.type === "weekly" && task.weeklyResetDay !== undefined) compactTask.weeklyResetDay = task.weeklyResetDay;
return compactTask;
});
}
if (normalized.categoryOrder.length) compact.categoryOrder = normalized.categoryOrder;
if (normalized.relations.length) {
compact.relations = normalized.relations.map((relation) => {
const compactRelation = {
@ -541,7 +558,7 @@ export function compactModuleDataForStorage(type, value) {
fromTaskId: relation.fromTaskId,
toTaskId: relation.toTaskId
};
if (relation.dependency) compactRelation.dependency = true;
if (relation.prerequisite) compactRelation.prerequisite = true;
return compactRelation;
});
}

4
website/src/styles/_overlays.scss
View file

@ -127,7 +127,7 @@
.image-viewer-side {
display: grid;
align-content: start;
grid-template-rows: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: var(--space-3);
min-width: 0;
width: 100%;
@ -151,6 +151,8 @@
.image-viewer-side .annotation-marker-list {
min-width: 0;
max-height: 100%;
align-content: start;
grid-auto-rows: max-content;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 4px;

2
website/src/styles/_responsive.scss
View file

@ -224,7 +224,7 @@
grid-row: 1;
}
.task-planner-description,
.task-planner-description-panel,
.task-planner-task-settings {
margin-left: 0;
}

105
website/src/styles/_toolboxes.scss
View file

@ -1336,6 +1336,65 @@ textarea:focus {
text-align: center;
}
.task-planner-category-section {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid rgba(246, 196, 83, 0.16);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.04), transparent 42%),
rgba(7, 10, 24, 0.18);
}
.task-planner-category-header {
padding: 0 2px;
}
.task-planner-category-header > div {
display: inline-flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
gap: 8px;
}
.task-planner-category-header h3 {
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--color-accent-gold);
font-size: var(--font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.task-planner-category-header > span {
flex: 0 0 auto;
padding: 3px 9px;
border: 1px solid rgba(246, 196, 83, 0.22);
border-radius: var(--radius-pill);
background: rgba(246, 196, 83, 0.08);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 800;
}
.task-planner-category-section.is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.task-planner-category-section.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-category-section.is-drop-target.drop-after {
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
.task-planner-item {
position: relative;
display: grid;
@ -1350,7 +1409,7 @@ textarea:focus {
opacity: 0.78;
}
.task-planner-item.has-missing-dependency {
.task-planner-item.has-missing-prerequisite {
border-color: rgba(246, 196, 83, 0.34);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.06), transparent 44%),
@ -1384,6 +1443,7 @@ textarea:focus {
}
.task-planner-drag-handle,
.task-planner-category-drag-handle,
.task-planner-delete-button {
display: inline-grid;
width: 30px;
@ -1403,6 +1463,7 @@ textarea:focus {
}
.task-planner-drag-handle .ui-icon,
.task-planner-category-drag-handle .ui-icon,
.task-planner-delete-button .ui-icon {
width: 15px;
height: 15px;
@ -1517,11 +1578,50 @@ textarea:focus {
}
}
.task-planner-description,
.task-planner-description-panel,
.task-planner-task-settings {
margin-left: 62px;
}
.task-planner-description-panel {
display: grid;
gap: 10px;
}
.task-planner-category-field,
.task-planner-description-field {
display: grid;
gap: 6px;
min-width: 0;
}
.task-planner-category-field span,
.task-planner-description-field span {
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 900;
text-transform: uppercase;
}
.task-planner-category-field input {
width: 100%;
}
.task-planner-category-field.is-disabled span {
color: rgba(148, 163, 184, 0.72);
}
.task-planner-category-field.is-disabled input,
.task-planner-category-field input:disabled {
border-color: rgba(165, 180, 252, 0.08);
background:
linear-gradient(135deg, rgba(148, 163, 184, 0.05), transparent 62%),
rgba(15, 23, 42, 0.42);
box-shadow: none;
color: rgba(203, 213, 225, 0.66);
cursor: not-allowed;
}
.task-planner-description {
min-height: 72px;
resize: vertical;
@ -2232,6 +2332,7 @@ textarea:focus {
.counter-actions button:not(.danger):hover,
.link-item button:not(.danger):hover,
.task-planner-drag-handle:hover:not(:disabled),
.task-planner-category-drag-handle:hover,
.task-planner-settings-toggle:hover,
.task-planner-settings-toggle.active,
.task-planner-dropdown-button:hover,