fix drag&drop to reorganize combos

website/src/features/toolboxes/modules/TaskPlannerModule.jsx

@@ -6,6 +6,7 @@ import { usePointerReorder } from "../../../hooks/usePointerReorder.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" },
@@ -95,17 +96,38 @@ function getBoundaryTaskId(tasks, taskIds, placement) {
   return placement === "after" ? orderedTasks.at(-1)?.id || "" : orderedTasks[0]?.id || "";
 }
 
-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];
+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";
 }
@@ -257,12 +279,36 @@ 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 || {};
@@ -280,13 +326,17 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
     dropTarget,
     startDrag
   } = usePointerReorder({
-    targetSelector: ".task-planner-item, .task-planner-category-section, .task-planner-uncategorized-drop-zone",
+    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);
+      }
       if (target.classList.contains("task-planner-uncategorized-drop-zone")) {
         return !draggingParentId && Boolean(draggingCategory);
       }
@@ -321,8 +371,25 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
         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 (!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) });
+        return;
+      }
       if (isCategorySectionId(toId)) {
         const targetCategory = parseCategorySectionId(toId).category;
+        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) });
+          return;
+        }
         moveToCategory(targetCategory);
         return;
       }
@@ -339,11 +406,17 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
     dropTarget: categoryDropTarget,
     startDrag: startCategoryDrag
   } = usePointerReorder({
-    targetSelector: ".task-planner-category-section, .task-planner-item",
-    getTargetId: (target) => target.dataset.taskId || getCategorySectionId(target.dataset.parentId || "", target.dataset.category || ""),
+    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 || target.dataset.parentId !== draggingCategory.parentId) return false;
+      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;
     },
@@ -351,6 +424,35 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
       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);
@@ -359,7 +461,7 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
           save({
             ...data,
             tasks: moveTaskGroup(data.tasks, movingIds, boundaryTaskId, placement),
-            categoryOrder: moveCategory(data.categoryOrder, fromCategory, toCategory, placement)
+            categoryOrder: moveCategory(data.categoryOrder, rootCategories, fromCategory, toCategory, placement)
           });
         }
         return;
@@ -643,7 +745,15 @@ function TaskPlannerBranch({
   if (!children.length) return null;
   const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
   const draggingTask = draggingId ? getTaskById(tasks, draggingId) : null;
-  const showUncategorizedDropZone = !parentId && draggingTask && !parentMap.get(draggingTask.id) && Boolean(getTaskCategoryDataset(draggingTask, tasks, parentMap));
+  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)
+  );
 
   function hasVisibleDescendants(taskId, seen = new Set()) {
     if (seen.has(taskId)) return false;
@@ -728,6 +838,8 @@ function TaskPlannerBranch({
       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",
@@ -737,7 +849,22 @@ function TaskPlannerBranch({
         categoryDropTarget.id === categoryId || dropTarget.id === categoryId ? "is-drop-target" : "",
         (categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (dropTarget.id === categoryId && dropTarget.placement === "after") ? "drop-after" : ""
       ].filter(Boolean).join(" ");
-      return (
+      const beforeDropZone = showCategoryBoundaryDropZones ? (
+        <li
+          className={`task-planner-category-boundary-drop-zone ${dropTarget.id === beforeDropId || categoryDropTarget.id === beforeDropId ? "is-drop-target" : ""}`}
+          key={`${parentId || "root"}:${group.category}:before-drop`}
+          data-drop-id={beforeDropId}
+        />
+      ) : null;
+      const afterDropZone = showCategoryBoundaryDropZones ? (
+        <li
+          className={`task-planner-category-boundary-drop-zone ${dropTarget.id === afterDropId || categoryDropTarget.id === afterDropId ? "is-drop-target" : ""}`}
+          key={`${parentId || "root"}:${group.category}:after-drop`}
+          data-drop-id={afterDropId}
+        />
+      ) : null;
+      return [
+        beforeDropZone,
         <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 className="task-planner-category-title">
@@ -771,8 +898,9 @@ function TaskPlannerBranch({
               {groupTasks.map(renderTask).filter(Boolean)}
             </ul>
           )}
-        </li>
-      );
+        </li>,
+        afterDropZone
+      ];
   }
 
   const entries = groupedTasks.entries.map((entry) => {