Unify toolbox drag and drop reorder behavior
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s
This commit is contained in:
parent
a6d35c6e6b
commit
1879b245fb
17 changed files with 1258 additions and 929 deletions
|
|
@ -2,11 +2,9 @@
|
|||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { InlineNotice } from "../../../components/AppOverlays.jsx";
|
||||
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
|
||||
import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
|
||||
const TASK_TYPES = ["daily", "weekly", "unique"];
|
||||
const UNCATEGORIZED_DROP_ID = "task-planner:uncategorized";
|
||||
const CATEGORY_BOUNDARY_DROP_PREFIX = "task-planner:category-boundary";
|
||||
const WEEK_DAYS = [
|
||||
{ value: 1, label: "Lundi" },
|
||||
{ value: 2, label: "Mardi" },
|
||||
|
|
@ -78,56 +76,12 @@ function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
|
|||
return nextTasks;
|
||||
}
|
||||
|
||||
function moveTaskGroup(tasks, fromTaskIds, toTaskId, placement = "before") {
|
||||
const movingIds = new Set(fromTaskIds);
|
||||
if (!movingIds.size || movingIds.has(toTaskId)) return tasks;
|
||||
const targetIndex = tasks.findIndex((task) => task.id === toTaskId);
|
||||
if (targetIndex < 0) return tasks;
|
||||
const movingTasks = tasks.filter((task) => movingIds.has(task.id));
|
||||
const remainingTasks = tasks.filter((task) => !movingIds.has(task.id));
|
||||
const nextTargetIndex = remainingTasks.findIndex((task) => task.id === toTaskId);
|
||||
remainingTasks.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, ...movingTasks);
|
||||
return remainingTasks;
|
||||
}
|
||||
|
||||
function getBoundaryTaskId(tasks, taskIds, placement) {
|
||||
const ids = new Set(taskIds);
|
||||
const orderedTasks = tasks.filter((task) => ids.has(task.id));
|
||||
return placement === "after" ? orderedTasks.at(-1)?.id || "" : orderedTasks[0]?.id || "";
|
||||
}
|
||||
|
||||
function getRootCategories(tasks, parentMap) {
|
||||
const categories = [];
|
||||
tasks.forEach((task) => {
|
||||
if (parentMap.get(task.id) || !getTaskCategory(task) || categories.includes(task.category)) return;
|
||||
categories.push(task.category);
|
||||
});
|
||||
return categories;
|
||||
}
|
||||
|
||||
function getCompleteCategoryOrder(categoryOrder, categories) {
|
||||
return [
|
||||
...categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category) => !categoryOrder.includes(category))
|
||||
];
|
||||
}
|
||||
|
||||
function moveCategory(categoryOrder, categories, fromCategory, toCategory, placement = "before") {
|
||||
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories);
|
||||
const index = nextOrder.indexOf(fromCategory);
|
||||
const targetIndex = nextOrder.indexOf(toCategory);
|
||||
if (index < 0 || targetIndex < 0 || fromCategory === toCategory) return nextOrder;
|
||||
const [moved] = nextOrder.splice(index, 1);
|
||||
const nextTargetIndex = nextOrder.indexOf(toCategory);
|
||||
nextOrder.splice(placement === "after" ? nextTargetIndex + 1 : nextTargetIndex, 0, moved);
|
||||
return nextOrder;
|
||||
}
|
||||
|
||||
function moveCategoryToStart(categoryOrder, categories, fromCategory) {
|
||||
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
|
||||
return [fromCategory, ...nextOrder.filter(Boolean)];
|
||||
}
|
||||
|
||||
function getTaskTitle(tasks, taskId) {
|
||||
return tasks.find((task) => task.id === taskId)?.title || "Tâche supprimée";
|
||||
}
|
||||
|
|
@ -258,57 +212,12 @@ function getTaskCategoryGroups(tasks, parentMap, parentId, categoryOrder) {
|
|||
};
|
||||
}
|
||||
|
||||
function getCategorySectionId(parentId, category) {
|
||||
return `category\n${parentId || ""}\n${category}`;
|
||||
}
|
||||
|
||||
function parseCategorySectionId(id) {
|
||||
const parts = String(id || "").split("\n");
|
||||
if (parts[0] !== "category") return { parentId: "", category: "" };
|
||||
return {
|
||||
parentId: parts[1] || "",
|
||||
category: parts.slice(2).join("\n")
|
||||
};
|
||||
}
|
||||
|
||||
function isCategorySectionId(id) {
|
||||
return String(id || "").startsWith("category\n");
|
||||
}
|
||||
|
||||
function isUncategorizedDropId(id) {
|
||||
return id === UNCATEGORIZED_DROP_ID;
|
||||
}
|
||||
|
||||
function getCategoryBoundaryDropId(parentId, category, placement) {
|
||||
return `${CATEGORY_BOUNDARY_DROP_PREFIX}\n${parentId || ""}\n${category}\n${placement}`;
|
||||
}
|
||||
|
||||
function parseCategoryBoundaryDropId(id) {
|
||||
const parts = String(id || "").split("\n");
|
||||
if (parts[0] !== CATEGORY_BOUNDARY_DROP_PREFIX) return { parentId: "", category: "", placement: "" };
|
||||
return {
|
||||
parentId: parts[1] || "",
|
||||
category: parts[2] || "",
|
||||
placement: parts[3] === "after" ? "after" : "before"
|
||||
};
|
||||
}
|
||||
|
||||
function isCategoryBoundaryDropId(id) {
|
||||
return String(id || "").startsWith(`${CATEGORY_BOUNDARY_DROP_PREFIX}\n`);
|
||||
}
|
||||
|
||||
function getRootTaskIdsForCategory(tasks, parentMap, category) {
|
||||
return tasks
|
||||
.filter((task) => !parentMap.get(task.id) && getTaskCategory(task) === category)
|
||||
.map((task) => task.id);
|
||||
}
|
||||
|
||||
function getRootTaskIds(tasks, parentMap) {
|
||||
return tasks
|
||||
.filter((task) => !parentMap.get(task.id))
|
||||
.map((task) => task.id);
|
||||
}
|
||||
|
||||
export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
||||
const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
|
||||
const textContent = context.moduleText?.taskPlanner || {};
|
||||
|
|
@ -322,32 +231,40 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
|||
const prerequisiteNoticeTimeouts = useRef(new Map());
|
||||
const parentMap = useMemo(() => getTaskParentMap(data.tasks, data.relations), [data.tasks, data.relations]);
|
||||
const {
|
||||
draggingId,
|
||||
dropTarget,
|
||||
startDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: ".task-planner-item, .task-planner-category-section, .task-planner-uncategorized-drop-zone, .task-planner-category-boundary-drop-zone",
|
||||
getTargetId: (target) => target.dataset.dropId || target.dataset.taskId || getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
|
||||
canDropOn: (target, draggingTaskId) => {
|
||||
const draggingTask = data.tasks.find((task) => task.id === draggingTaskId);
|
||||
if (!draggingTask) return false;
|
||||
const draggingParentId = parentMap.get(draggingTaskId) || "";
|
||||
const draggingCategory = getTaskCategoryDataset(draggingTask, data.tasks, parentMap);
|
||||
if (target.classList.contains("task-planner-category-boundary-drop-zone")) {
|
||||
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
|
||||
return !draggingParentId && !boundary.parentId && Boolean(boundary.category);
|
||||
itemReorder,
|
||||
groupReorder,
|
||||
getItemProps,
|
||||
getGroupProps,
|
||||
getGroupBoundaryProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
isGroupDragging,
|
||||
isGroupDropTarget,
|
||||
isBoundaryDropTarget,
|
||||
getDropPlacement,
|
||||
shouldShowGroupBoundaries
|
||||
} = useGroupedReorder({
|
||||
namespace: "task-planner",
|
||||
items: data.tasks,
|
||||
getItemId: (task) => task.id,
|
||||
getParentId: (task) => parentMap.get(task.id) || "",
|
||||
getItemGroup: (task) => getTaskCategoryDataset(task, data.tasks, parentMap),
|
||||
getEffectiveGroup: (task) => getTaskCategoryDataset(task, data.tasks, parentMap),
|
||||
reorderFeatures: {
|
||||
item: {
|
||||
groupChange: true,
|
||||
boundaryDrop: true,
|
||||
rootOnly: true
|
||||
},
|
||||
group: {
|
||||
reorder: true,
|
||||
boundaryDrop: true,
|
||||
itemDrop: true,
|
||||
rootOnly: true
|
||||
}
|
||||
if (target.classList.contains("task-planner-uncategorized-drop-zone")) {
|
||||
return !draggingParentId && Boolean(draggingCategory);
|
||||
}
|
||||
if (target.classList.contains("task-planner-category-section")) {
|
||||
return !draggingParentId && !target.dataset.parentId && Boolean(target.dataset.category) && target.dataset.category !== draggingCategory;
|
||||
}
|
||||
if (target.dataset.parentId !== draggingParentId) return false;
|
||||
if (target.dataset.category === draggingCategory) return true;
|
||||
return !draggingParentId;
|
||||
},
|
||||
onMove: (fromTaskId, toId, placement) => {
|
||||
onItemMove: (operation) => {
|
||||
const fromTaskId = operation.sourceId;
|
||||
const fromTask = data.tasks.find((task) => task.id === fromTaskId);
|
||||
if (!fromTask) return;
|
||||
function setRootTaskCategory(tasks, category) {
|
||||
|
|
@ -359,7 +276,7 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
|||
return nextTask;
|
||||
});
|
||||
}
|
||||
function moveToCategory(category) {
|
||||
function moveToCategory(category, placement = operation.placement) {
|
||||
const nextTasks = setRootTaskCategory(data.tasks, category);
|
||||
const targetIds = category
|
||||
? getRootTaskIdsForCategory(data.tasks, parentMap, category).filter((taskId) => taskId !== fromTaskId)
|
||||
|
|
@ -367,108 +284,59 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
|||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
|
||||
save({ ...data, tasks: boundaryTaskId ? moveTask(nextTasks, fromTaskId, boundaryTaskId, placement) : nextTasks });
|
||||
}
|
||||
if (isUncategorizedDropId(toId)) {
|
||||
moveToCategory("");
|
||||
return;
|
||||
}
|
||||
if (isCategoryBoundaryDropId(toId)) {
|
||||
const boundary = parseCategoryBoundaryDropId(toId);
|
||||
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, boundary.category);
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, boundary.placement);
|
||||
if (operation.targetType === "boundary") {
|
||||
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, operation.targetGroup);
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, operation.placement);
|
||||
if (!boundaryTaskId) return;
|
||||
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
|
||||
const tasks = sourceCategory ? setRootTaskCategory(data.tasks, "") : data.tasks;
|
||||
save({ ...data, tasks: moveTask(tasks, fromTaskId, boundaryTaskId, boundary.placement) });
|
||||
save({ ...data, tasks: moveTask(tasks, fromTaskId, boundaryTaskId, operation.placement) });
|
||||
return;
|
||||
}
|
||||
if (isCategorySectionId(toId)) {
|
||||
const targetCategory = parseCategorySectionId(toId).category;
|
||||
if (operation.targetType === "group") {
|
||||
const targetCategory = operation.targetGroup;
|
||||
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
|
||||
if (!sourceCategory) {
|
||||
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, targetCategory);
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
|
||||
if (boundaryTaskId) save({ ...data, tasks: moveTask(data.tasks, fromTaskId, boundaryTaskId, placement) });
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, operation.placement);
|
||||
if (boundaryTaskId) save({ ...data, tasks: moveTask(data.tasks, fromTaskId, boundaryTaskId, operation.placement) });
|
||||
return;
|
||||
}
|
||||
moveToCategory(targetCategory);
|
||||
return;
|
||||
}
|
||||
const targetTask = data.tasks.find((task) => task.id === toId);
|
||||
const targetTask = data.tasks.find((task) => task.id === operation.targetId);
|
||||
const targetCategory = targetTask ? getTaskCategoryDataset(targetTask, data.tasks, parentMap) : "";
|
||||
const sourceCategory = getTaskCategoryDataset(fromTask, data.tasks, parentMap);
|
||||
const shouldChangeRootCategory = !parentMap.get(fromTaskId) && targetTask && !parentMap.get(toId) && targetCategory !== sourceCategory;
|
||||
const shouldChangeRootCategory = !parentMap.get(fromTaskId) && targetTask && !parentMap.get(operation.targetId) && targetCategory !== sourceCategory;
|
||||
const tasks = shouldChangeRootCategory ? setRootTaskCategory(data.tasks, targetCategory) : data.tasks;
|
||||
save({ ...data, tasks: moveTask(tasks, fromTaskId, toId, placement) });
|
||||
}
|
||||
});
|
||||
const {
|
||||
draggingId: draggingCategoryId,
|
||||
dropTarget: categoryDropTarget,
|
||||
startDrag: startCategoryDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: ".task-planner-category-section, .task-planner-item, .task-planner-uncategorized-drop-zone, .task-planner-category-boundary-drop-zone",
|
||||
getTargetId: (target) => target.dataset.dropId || target.dataset.taskId || getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
|
||||
canDropOn: (target, draggingIdValue) => {
|
||||
const draggingCategory = parseCategorySectionId(draggingIdValue);
|
||||
if (!draggingCategory.category) return false;
|
||||
if (target.classList.contains("task-planner-uncategorized-drop-zone")) return !draggingCategory.parentId;
|
||||
if (target.classList.contains("task-planner-category-boundary-drop-zone")) {
|
||||
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
|
||||
return boundary.parentId === draggingCategory.parentId && boundary.category && boundary.category !== draggingCategory.category;
|
||||
}
|
||||
if (target.dataset.parentId !== draggingCategory.parentId) return false;
|
||||
if (target.classList.contains("task-planner-category-section")) return Boolean(target.dataset.category);
|
||||
return !target.dataset.category;
|
||||
save({ ...data, tasks: moveTask(tasks, fromTaskId, operation.targetId, operation.placement) });
|
||||
},
|
||||
onMove: (fromId, toId, placement) => {
|
||||
const fromCategory = parseCategorySectionId(fromId).category;
|
||||
const movingIds = getRootTaskIdsForCategory(data.tasks, parentMap, fromCategory);
|
||||
if (!movingIds.length) return;
|
||||
const rootCategories = getRootCategories(data.tasks, parentMap);
|
||||
if (isUncategorizedDropId(toId)) {
|
||||
const targetIds = data.tasks
|
||||
.filter((task) => !parentMap.get(task.id) && !getTaskCategory(task) && !movingIds.includes(task.id))
|
||||
.map((task) => task.id);
|
||||
const rootIds = getRootTaskIds(data.tasks, parentMap).filter((taskId) => !movingIds.includes(taskId));
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement) || getBoundaryTaskId(data.tasks, rootIds, "before");
|
||||
if (boundaryTaskId) {
|
||||
save({
|
||||
...data,
|
||||
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, "before"),
|
||||
categoryOrder: moveCategoryToStart(data.categoryOrder, rootCategories, fromCategory)
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (isCategoryBoundaryDropId(toId)) {
|
||||
const boundary = parseCategoryBoundaryDropId(toId);
|
||||
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, boundary.category);
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, boundary.placement);
|
||||
if (boundaryTaskId) {
|
||||
save({
|
||||
...data,
|
||||
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, boundary.placement),
|
||||
categoryOrder: moveCategory(data.categoryOrder, rootCategories, fromCategory, boundary.category, boundary.placement)
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (isCategorySectionId(toId)) {
|
||||
const toCategory = parseCategorySectionId(toId).category;
|
||||
const targetIds = getRootTaskIdsForCategory(data.tasks, parentMap, toCategory);
|
||||
const boundaryTaskId = getBoundaryTaskId(data.tasks, targetIds, placement);
|
||||
if (boundaryTaskId) {
|
||||
save({
|
||||
...data,
|
||||
tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, placement),
|
||||
categoryOrder: moveCategory(data.categoryOrder, rootCategories, fromCategory, toCategory, placement)
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
save({ ...data, tasks: moveTaskGroup(data.tasks, movingIds, toId, placement) });
|
||||
}
|
||||
onGroupMove: (operation) => {
|
||||
save(applyGroupedReorderOperation(data, {
|
||||
operation,
|
||||
itemsKey: "tasks",
|
||||
groupOrderKey: "categoryOrder",
|
||||
getItemGroup: (task) => parentMap.get(task.id) ? "" : getTaskCategory(task),
|
||||
setItemGroup: (task) => task
|
||||
}));
|
||||
},
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
const reorder = {
|
||||
itemReorder,
|
||||
groupReorder,
|
||||
getItemProps,
|
||||
getGroupProps,
|
||||
getGroupBoundaryProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
isGroupDragging,
|
||||
isGroupDropTarget,
|
||||
isBoundaryDropTarget,
|
||||
getDropPlacement,
|
||||
shouldShowGroupBoundaries
|
||||
};
|
||||
|
||||
function save(nextData) {
|
||||
context.setModuleData(toolboxId, moduleId, nextData, "taskPlanner");
|
||||
|
|
@ -684,16 +552,11 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
|||
parentMap={parentMap}
|
||||
tasks={data.tasks}
|
||||
data={data}
|
||||
draggingId={draggingId}
|
||||
dropTarget={dropTarget}
|
||||
draggingCategoryId={draggingCategoryId}
|
||||
categoryDropTarget={categoryDropTarget}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
openDescriptions={openDescriptions}
|
||||
openTaskSettings={openTaskSettings}
|
||||
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
|
||||
onDragStart={startDrag}
|
||||
onCategoryDragStart={startCategoryDrag}
|
||||
onToggleDescription={(taskId) => toggleSet(setOpenDescriptions, taskId)}
|
||||
onToggleSettings={(taskId) => toggleSet(setOpenTaskSettings, taskId)}
|
||||
onPrerequisiteNotice={showPrerequisiteNotice}
|
||||
|
|
@ -718,16 +581,11 @@ function TaskPlannerBranch({
|
|||
parentMap,
|
||||
tasks,
|
||||
data,
|
||||
draggingId,
|
||||
dropTarget,
|
||||
draggingCategoryId,
|
||||
categoryDropTarget,
|
||||
reorder,
|
||||
textContent,
|
||||
openDescriptions,
|
||||
openTaskSettings,
|
||||
prerequisiteNoticeTaskIds,
|
||||
onDragStart,
|
||||
onCategoryDragStart,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
|
|
@ -744,16 +602,7 @@ function TaskPlannerBranch({
|
|||
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)]);
|
||||
const draggingTask = draggingId ? getTaskById(tasks, draggingId) : null;
|
||||
const draggingCategory = parseCategorySectionId(draggingCategoryId);
|
||||
const showUncategorizedDropZone = !parentId && (
|
||||
(draggingTask && !parentMap.get(draggingTask.id) && Boolean(getTaskCategoryDataset(draggingTask, tasks, parentMap)))
|
||||
|| Boolean(draggingCategory.category && !draggingCategory.parentId)
|
||||
);
|
||||
const showCategoryBoundaryDropZones = !parentId && (
|
||||
(draggingTask && !parentMap.get(draggingTask.id))
|
||||
|| Boolean(draggingCategory.category && !draggingCategory.parentId)
|
||||
);
|
||||
const showCategoryBoundaryDropZones = !parentId && reorder.shouldShowGroupBoundaries({ parentId });
|
||||
|
||||
function hasVisibleDescendants(taskId, seen = new Set()) {
|
||||
if (seen.has(taskId)) return false;
|
||||
|
|
@ -769,16 +618,11 @@ function TaskPlannerBranch({
|
|||
parentMap={parentMap}
|
||||
tasks={tasks}
|
||||
data={data}
|
||||
draggingId={draggingId}
|
||||
dropTarget={dropTarget}
|
||||
draggingCategoryId={draggingCategoryId}
|
||||
categoryDropTarget={categoryDropTarget}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
openDescriptions={openDescriptions}
|
||||
openTaskSettings={openTaskSettings}
|
||||
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
|
||||
onDragStart={onDragStart}
|
||||
onCategoryDragStart={onCategoryDragStart}
|
||||
onToggleDescription={onToggleDescription}
|
||||
onToggleSettings={onToggleSettings}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
|
|
@ -808,14 +652,11 @@ function TaskPlannerBranch({
|
|||
data={data}
|
||||
parentMap={parentMap}
|
||||
parentId={parentId}
|
||||
draggingId={draggingId}
|
||||
dropTarget={dropTarget}
|
||||
categoryDropTarget={categoryDropTarget}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
descriptionOpen={openDescriptions.has(task.id)}
|
||||
settingsOpen={openTaskSettings.has(task.id)}
|
||||
prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
|
||||
onDragStart={onDragStart}
|
||||
onToggleDescription={() => onToggleDescription(task.id)}
|
||||
onToggleSettings={() => onToggleSettings(task.id)}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
|
|
@ -837,41 +678,38 @@ function TaskPlannerBranch({
|
|||
if (data.hideCompleted && isTaskTreeComplete(groupTasks.map((task) => task.id), tasks, parentMap)) return null;
|
||||
const groupCount = countTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
|
||||
const groupCompletedCount = countCompletedTaskTree(groupTasks.map((task) => task.id), tasks, parentMap);
|
||||
const categoryId = getCategorySectionId(parentId, group.category);
|
||||
const beforeDropId = getCategoryBoundaryDropId(parentId, group.category, "before");
|
||||
const afterDropId = getCategoryBoundaryDropId(parentId, group.category, "after");
|
||||
const isCollapsed = data.collapsedCategories.includes(group.category);
|
||||
const sectionClassName = [
|
||||
"task-planner-category-section",
|
||||
groupCompletedCount === groupCount ? "is-complete" : "",
|
||||
isCollapsed ? "is-collapsed" : "",
|
||||
draggingCategoryId === categoryId ? "is-dragging" : "",
|
||||
categoryDropTarget.id === categoryId || dropTarget.id === categoryId ? "is-drop-target" : "",
|
||||
(categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (dropTarget.id === categoryId && dropTarget.placement === "after") ? "drop-after" : ""
|
||||
reorder.isGroupDragging(group.category, parentId) ? "is-dragging" : "",
|
||||
reorder.isGroupDropTarget(group.category, parentId) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("group", group.category, parentId) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const beforeDropZone = showCategoryBoundaryDropZones ? (
|
||||
<li
|
||||
className={`task-planner-category-boundary-drop-zone ${dropTarget.id === beforeDropId || categoryDropTarget.id === beforeDropId ? "is-drop-target" : ""}`}
|
||||
className={`task-planner-category-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "before" }) ? "is-drop-target" : ""}`}
|
||||
key={`${parentId || "root"}:${group.category}:before-drop`}
|
||||
data-drop-id={beforeDropId}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "before" })}
|
||||
/>
|
||||
) : null;
|
||||
const afterDropZone = showCategoryBoundaryDropZones ? (
|
||||
<li
|
||||
className={`task-planner-category-boundary-drop-zone ${dropTarget.id === afterDropId || categoryDropTarget.id === afterDropId ? "is-drop-target" : ""}`}
|
||||
className={`task-planner-category-boundary-drop-zone ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "after" }) ? "is-drop-target" : ""}`}
|
||||
key={`${parentId || "root"}:${group.category}:after-drop`}
|
||||
data-drop-id={afterDropId}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "after" })}
|
||||
/>
|
||||
) : null;
|
||||
return [
|
||||
beforeDropZone,
|
||||
<li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} data-parent-id={parentId} data-category={group.category}>
|
||||
<li className={sectionClassName} key={`${parentId || "root"}:${group.category}`} {...reorder.getGroupProps({ groupId: group.category, parentId })}>
|
||||
<div className="checklist-section-header task-planner-category-header">
|
||||
<div className="task-planner-category-title">
|
||||
<button
|
||||
className="task-planner-category-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => onCategoryDragStart(event, categoryId)}
|
||||
onPointerDown={(event) => reorder.groupReorder.startDrag(event, { groupId: group.category, parentId })}
|
||||
aria-label={`${textContent.categoryReorderTitle || "Déplacer la catégorie"} ${group.category}`}
|
||||
title={textContent.categoryReorderTitle || "Déplacer la catégorie"}
|
||||
>
|
||||
|
|
@ -907,18 +745,7 @@ function TaskPlannerBranch({
|
|||
if (entry.type === "task") return visited.has(entry.task.id) ? null : renderTask(entry.task);
|
||||
return renderCategory(entry.group);
|
||||
}).filter(Boolean);
|
||||
if (!showUncategorizedDropZone) return entries;
|
||||
const dropZoneClassName = [
|
||||
"task-planner-uncategorized-drop-zone",
|
||||
dropTarget.id === UNCATEGORIZED_DROP_ID ? "is-drop-target" : "",
|
||||
dropTarget.id === UNCATEGORIZED_DROP_ID && dropTarget.placement === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
return [
|
||||
<li className={dropZoneClassName} key={UNCATEGORIZED_DROP_ID} data-drop-id={UNCATEGORIZED_DROP_ID}>
|
||||
{textContent.uncategorizedDropTitle || "Sans catégorie"}
|
||||
</li>,
|
||||
...entries
|
||||
];
|
||||
return entries;
|
||||
}
|
||||
|
||||
function TaskPlannerItem({
|
||||
|
|
@ -927,14 +754,11 @@ function TaskPlannerItem({
|
|||
data,
|
||||
parentMap,
|
||||
parentId,
|
||||
draggingId,
|
||||
dropTarget,
|
||||
categoryDropTarget,
|
||||
reorder,
|
||||
textContent,
|
||||
descriptionOpen,
|
||||
settingsOpen,
|
||||
prerequisiteNoticeVisible,
|
||||
onDragStart,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
|
|
@ -961,9 +785,9 @@ function TaskPlannerItem({
|
|||
"task-planner-item",
|
||||
task.checked ? "is-complete" : "",
|
||||
missingPrerequisites.length ? "has-missing-prerequisite" : "",
|
||||
draggingId === task.id ? "is-dragging" : "",
|
||||
dropTarget.id === task.id || categoryDropTarget.id === task.id ? "is-drop-target" : "",
|
||||
(dropTarget.id === task.id && dropTarget.placement === "after") || (categoryDropTarget.id === task.id && categoryDropTarget.placement === "after") ? "drop-after" : ""
|
||||
reorder.isItemDragging(task.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(task.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", task.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
function updateChecked(event) {
|
||||
|
|
@ -1005,12 +829,12 @@ function TaskPlannerItem({
|
|||
}
|
||||
|
||||
return (
|
||||
<li className={className} data-task-id={task.id} data-parent-id={parentId} data-category={getTaskCategoryDataset(task, tasks, parentMap)}>
|
||||
<li className={className} {...reorder.getItemProps({ itemId: task.id, groupId: getTaskCategoryDataset(task, tasks, parentMap), parentId })}>
|
||||
<div className="task-planner-line">
|
||||
<button
|
||||
className="task-planner-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => onDragStart(event, task.id)}
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, task.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${task.title}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue