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
|
|
@ -1,6 +1,7 @@
|
|||
// Rôle : fournit l'outil calculateur avec résultats enregistrés en arborescence.
|
||||
import { useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
|
||||
function calculateExpression(expression) {
|
||||
const normalized = String(expression || "").replaceAll(",", ".").trim();
|
||||
|
|
@ -43,6 +44,17 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
|
|||
const calculatorCardRef = useRef(null);
|
||||
const result = useMemo(() => calculateExpression(expression), [expression]);
|
||||
const activeParent = data.entries.find((entry) => entry.id === activeParentId);
|
||||
const scopeParentId = (parentId = "") => `${moduleId}:${parentId}`;
|
||||
const reorder = useGroupedReorder({
|
||||
namespace: "calculator",
|
||||
items: data.entries,
|
||||
getItemId: (entry) => entry.id,
|
||||
getParentId: (entry) => scopeParentId(entry.parentId || ""),
|
||||
onItemMove: (operation) => {
|
||||
save(moveItem(data.entries, operation.sourceId, operation.targetId, operation.placement));
|
||||
},
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const element = calculatorCardRef.current;
|
||||
|
|
@ -165,7 +177,7 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
|
|||
</div>
|
||||
<div className={`tool-split-tree calculator-tree ${data.scrollResults ? "is-scrollable legacy-scrollbar" : ""}`}>
|
||||
{data.entries.length ? (
|
||||
<CalculatorEntries entries={data.entries} parentId="" activeParentId={activeParentId} textContent={textContent} onUse={useEntry} onRename={renameEntry} onDelete={deleteEntry} />
|
||||
<CalculatorEntries entries={data.entries} parentId="" getScopedParentId={scopeParentId} activeParentId={activeParentId} textContent={textContent} reorder={reorder} onUse={useEntry} onRename={renameEntry} onDelete={deleteEntry} />
|
||||
) : (
|
||||
<p className="muted">{textContent.emptyResults || "Aucun résultat enregistré."}</p>
|
||||
)}
|
||||
|
|
@ -175,16 +187,34 @@ export function CalculatorModule({ toolboxId, moduleId, context }) {
|
|||
);
|
||||
}
|
||||
|
||||
function CalculatorEntries({ entries, parentId, activeParentId, textContent, onUse, onRename, onDelete }) {
|
||||
function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentId, textContent, reorder, onUse, onRename, onDelete }) {
|
||||
const children = getChildren(entries, parentId);
|
||||
const [editingId, setEditingId] = useState("");
|
||||
if (!children.length) return null;
|
||||
|
||||
return (
|
||||
<ul className="tool-split-entry-list calculator-entry-list">
|
||||
{children.map((entry) => (
|
||||
<li className={`${entry.id === activeParentId ? "active" : ""} ${entry.id === editingId ? "is-editing" : ""}`} key={entry.id}>
|
||||
<div className="tool-split-entry calculator-entry">
|
||||
{children.map((entry) => {
|
||||
const className = [
|
||||
entry.id === activeParentId ? "active" : "",
|
||||
entry.id === editingId ? "is-editing" : "",
|
||||
reorder.isItemDragging(entry.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(entry.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", entry.id, parentId) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<li className={className} key={entry.id} {...reorder.getItemProps({ itemId: entry.id, parentId: getScopedParentId(parentId) })}>
|
||||
<div className="tool-split-entry calculator-entry has-drag-handle">
|
||||
<button
|
||||
className="calculator-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, entry.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${entry.label || formatResult(entry.value)}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
{entry.id === editingId ? (
|
||||
<>
|
||||
<span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
|
||||
|
|
@ -204,9 +234,10 @@ function CalculatorEntries({ entries, parentId, activeParentId, textContent, onU
|
|||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
<CalculatorEntries entries={entries} parentId={entry.id} activeParentId={activeParentId} textContent={textContent} onUse={onUse} onRename={onRename} onDelete={onDelete} />
|
||||
<CalculatorEntries entries={entries} parentId={entry.id} getScopedParentId={getScopedParentId} activeParentId={activeParentId} textContent={textContent} reorder={reorder} onUse={onUse} onRename={onRename} onDelete={onDelete} />
|
||||
</li>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Rôle : fournit l'outil Combos avec palettes d'inputs et rendu visuel par périphérique.
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
|
||||
|
||||
const UNCATEGORIZED_DROP_ID = "combos:uncategorized";
|
||||
const CATEGORY_SECTION_PREFIX = "combos:category";
|
||||
const CATEGORY_BOUNDARY_DROP_PREFIX = "combos:category-boundary";
|
||||
import {
|
||||
applyGroupedReorderOperation,
|
||||
getGroupedEntries,
|
||||
useGroupedReorder
|
||||
} from "../../../hooks/useGroupedReorder.js";
|
||||
|
||||
const DEVICE_OPTIONS = [
|
||||
{ value: "playstation", label: "PlayStation" },
|
||||
|
|
@ -142,358 +142,13 @@ function getComboCategory(combo) {
|
|||
return String(combo?.category || "").trim();
|
||||
}
|
||||
|
||||
function getCategoryGroups(combos, categoryOrder) {
|
||||
const categories = [];
|
||||
combos.forEach((combo) => {
|
||||
const category = getComboCategory(combo);
|
||||
if (category && !categories.includes(category)) categories.push(category);
|
||||
});
|
||||
const orderedCategories = [
|
||||
...categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category) => !categoryOrder.includes(category))
|
||||
];
|
||||
const groups = orderedCategories.map((category) => ({
|
||||
category,
|
||||
combos: combos.filter((combo) => getComboCategory(combo) === category)
|
||||
})).filter((group) => group.combos.length);
|
||||
const renderedCategories = new Set();
|
||||
return combos.map((combo) => {
|
||||
const category = getComboCategory(combo);
|
||||
if (!category) return { type: "combo", combo };
|
||||
if (renderedCategories.has(category)) return null;
|
||||
renderedCategories.add(category);
|
||||
return { type: "category", group: groups.find((group) => group.category === category) };
|
||||
}).filter(Boolean);
|
||||
function setComboCategory(combo, category) {
|
||||
const nextCombo = { ...combo };
|
||||
if (category) nextCombo.category = category;
|
||||
else delete nextCombo.category;
|
||||
return nextCombo;
|
||||
}
|
||||
|
||||
function getCategoryComboIds(combos, category) {
|
||||
return combos.filter((combo) => getComboCategory(combo) === category).map((combo) => combo.id);
|
||||
}
|
||||
|
||||
function getAllCategories(combos) {
|
||||
const categories = [];
|
||||
combos.forEach((combo) => {
|
||||
const category = getComboCategory(combo);
|
||||
if (category && !categories.includes(category)) categories.push(category);
|
||||
});
|
||||
return categories;
|
||||
}
|
||||
|
||||
function getCompleteCategoryOrder(categoryOrder, categories) {
|
||||
return [
|
||||
...categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category) => !categoryOrder.includes(category))
|
||||
];
|
||||
}
|
||||
|
||||
function getCategorySectionId(category) {
|
||||
return `${CATEGORY_SECTION_PREFIX}\n${category}`;
|
||||
}
|
||||
|
||||
function parseCategorySectionId(id) {
|
||||
const parts = String(id || "").split("\n");
|
||||
if (parts[0] !== CATEGORY_SECTION_PREFIX) return "";
|
||||
return parts.slice(1).join("\n");
|
||||
}
|
||||
|
||||
function isCategorySectionId(id) {
|
||||
return String(id || "").startsWith(`${CATEGORY_SECTION_PREFIX}\n`);
|
||||
}
|
||||
|
||||
function getCategoryBoundaryDropId(category, placement) {
|
||||
return `${CATEGORY_BOUNDARY_DROP_PREFIX}\n${category}\n${placement}`;
|
||||
}
|
||||
|
||||
function parseCategoryBoundaryDropId(id) {
|
||||
const parts = String(id || "").split("\n");
|
||||
if (parts[0] !== CATEGORY_BOUNDARY_DROP_PREFIX) return { category: "", placement: "" };
|
||||
return {
|
||||
category: parts[1] || "",
|
||||
placement: parts[2] === "after" ? "after" : "before"
|
||||
};
|
||||
}
|
||||
|
||||
function isCategoryBoundaryDropId(id) {
|
||||
return String(id || "").startsWith(`${CATEGORY_BOUNDARY_DROP_PREFIX}\n`);
|
||||
}
|
||||
|
||||
function isUncategorizedDropId(id) {
|
||||
return id === UNCATEGORIZED_DROP_ID;
|
||||
}
|
||||
|
||||
function moveComboGroup(combos, movingIds, targetComboId, placement = "before") {
|
||||
const movingSet = new Set(movingIds);
|
||||
if (!movingSet.size || movingSet.has(targetComboId)) return combos;
|
||||
const movingCombos = combos.filter((combo) => movingSet.has(combo.id));
|
||||
const remainingCombos = combos.filter((combo) => !movingSet.has(combo.id));
|
||||
const targetIndex = remainingCombos.findIndex((combo) => combo.id === targetComboId);
|
||||
if (targetIndex < 0) return combos;
|
||||
remainingCombos.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, ...movingCombos);
|
||||
return remainingCombos;
|
||||
}
|
||||
|
||||
function getBoundaryComboId(combos, comboIds, placement) {
|
||||
const ids = new Set(comboIds);
|
||||
const orderedCombos = combos.filter((combo) => ids.has(combo.id));
|
||||
return placement === "after" ? orderedCombos.at(-1)?.id || "" : orderedCombos[0]?.id || "";
|
||||
}
|
||||
|
||||
function moveCategoryOrder(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 moveCategoryOrderToStart(categoryOrder, categories, fromCategory) {
|
||||
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
|
||||
return [fromCategory, ...nextOrder];
|
||||
}
|
||||
|
||||
function moveCategoryOrderToEnd(categoryOrder, categories, fromCategory) {
|
||||
const nextOrder = getCompleteCategoryOrder(categoryOrder, categories).filter((category) => category !== fromCategory);
|
||||
return [...nextOrder, fromCategory];
|
||||
}
|
||||
|
||||
function moveComboToCategory(combos, comboId, category) {
|
||||
return combos.map((combo) => {
|
||||
if (combo.id !== comboId) return combo;
|
||||
const nextCombo = { ...combo };
|
||||
if (category) nextCombo.category = category;
|
||||
else delete nextCombo.category;
|
||||
return nextCombo;
|
||||
});
|
||||
}
|
||||
|
||||
function getFirstComboIdOutsideCategory(combos, category, excludedIds = []) {
|
||||
const excluded = new Set(excludedIds);
|
||||
return combos.find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
|
||||
}
|
||||
|
||||
function getLastComboIdOutsideCategory(combos, category, excludedIds = []) {
|
||||
const excluded = new Set(excludedIds);
|
||||
return [...combos].reverse().find((combo) => !excluded.has(combo.id) && getComboCategory(combo) !== category)?.id || "";
|
||||
}
|
||||
|
||||
function insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds) {
|
||||
const allCategories = getAllCategories(data.combos);
|
||||
const targetIds = getCategoryComboIds(data.combos, boundary.category);
|
||||
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
|
||||
if (!boundaryComboId) return data;
|
||||
return {
|
||||
...data,
|
||||
combos: moveComboGroup(data.combos, movingIds, boundaryComboId, boundary.placement),
|
||||
categoryOrder: moveCategoryOrder(data.categoryOrder, allCategories, fromCategory, boundary.category, boundary.placement)
|
||||
};
|
||||
}
|
||||
|
||||
function moveCategoryGroupToEdge(data, fromCategory, edge) {
|
||||
const movingIds = getCategoryComboIds(data.combos, fromCategory);
|
||||
if (!movingIds.length) return data;
|
||||
const allCategories = getAllCategories(data.combos);
|
||||
const boundaryComboId = edge === "start"
|
||||
? getFirstComboIdOutsideCategory(data.combos, fromCategory, movingIds)
|
||||
: getLastComboIdOutsideCategory(data.combos, fromCategory, movingIds);
|
||||
const combos = boundaryComboId
|
||||
? moveComboGroup(data.combos, movingIds, boundaryComboId, edge === "start" ? "before" : "after")
|
||||
: data.combos;
|
||||
return {
|
||||
...data,
|
||||
combos,
|
||||
categoryOrder: edge === "start"
|
||||
? moveCategoryOrderToStart(data.categoryOrder, allCategories, fromCategory)
|
||||
: moveCategoryOrderToEnd(data.categoryOrder, allCategories, fromCategory)
|
||||
};
|
||||
}
|
||||
|
||||
function moveComboToEdge(data, comboId, edge, category = "") {
|
||||
const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, category);
|
||||
const boundaryComboId = edge === "start"
|
||||
? nextCombosWithCategory.find((combo) => combo.id !== comboId)?.id || ""
|
||||
: [...nextCombosWithCategory].reverse().find((combo) => combo.id !== comboId)?.id || "";
|
||||
const combos = boundaryComboId
|
||||
? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, edge === "start" ? "before" : "after")
|
||||
: nextCombosWithCategory;
|
||||
return { ...data, combos };
|
||||
}
|
||||
|
||||
function moveComboBeforeCategoryBoundary(data, comboId, boundary) {
|
||||
const nextCombosWithCategory = moveComboToCategory(data.combos, comboId, "");
|
||||
const targetIds = getCategoryComboIds(data.combos, boundary.category).filter((id) => id !== comboId);
|
||||
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, boundary.placement);
|
||||
return {
|
||||
...data,
|
||||
combos: boundaryComboId ? moveComboGroup(nextCombosWithCategory, [comboId], boundaryComboId, boundary.placement) : nextCombosWithCategory
|
||||
};
|
||||
}
|
||||
|
||||
function addCategoryToOrder(categoryOrder, category) {
|
||||
return category && !categoryOrder.includes(category) ? [...categoryOrder, category] : categoryOrder;
|
||||
}
|
||||
|
||||
function cleanCategoryOrder(categoryOrder, combos) {
|
||||
const categories = getAllCategories(combos);
|
||||
return getCompleteCategoryOrder(categoryOrder, categories);
|
||||
}
|
||||
|
||||
function getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) {
|
||||
const dropId = getCategoryBoundaryDropId(category, edge === "start" ? "before" : "after");
|
||||
return categoryDropTarget.id === dropId || comboDropTarget.id === dropId;
|
||||
}
|
||||
|
||||
function getDropEdgeClass(categoryDropTarget, comboDropTarget, category, edge) {
|
||||
return getCategoryEdge(categoryDropTarget, comboDropTarget, category, edge) ? "is-drop-target" : "";
|
||||
}
|
||||
|
||||
function getEdgeFromPlacement(placement) {
|
||||
return placement === "after" ? "end" : "start";
|
||||
}
|
||||
|
||||
function insertComboIntoCategory(data, comboId, category, placement) {
|
||||
const nextCombos = moveComboToCategory(data.combos, comboId, category);
|
||||
const targetIds = getCategoryComboIds(data.combos, category).filter((id) => id !== comboId);
|
||||
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
|
||||
return {
|
||||
...data,
|
||||
combos: boundaryComboId ? moveComboGroup(nextCombos, [comboId], boundaryComboId, placement) : nextCombos,
|
||||
categoryOrder: addCategoryToOrder(data.categoryOrder, category),
|
||||
collapsedCategories: data.collapsedCategories.filter((item) => item !== category)
|
||||
};
|
||||
}
|
||||
|
||||
function moveCategoryGroupAroundCombo(data, fromCategory, targetComboId, placement, movingIds) {
|
||||
return {
|
||||
...data,
|
||||
combos: moveComboGroup(data.combos, movingIds, targetComboId, placement)
|
||||
};
|
||||
}
|
||||
|
||||
function getCategoryOrderAfterComboMove(categoryOrder, combos) {
|
||||
return cleanCategoryOrder(categoryOrder, combos);
|
||||
}
|
||||
|
||||
function moveComboAroundCombo(data, fromComboId, targetComboId, placement) {
|
||||
const targetCombo = data.combos.find((combo) => combo.id === targetComboId);
|
||||
if (!targetCombo) return data;
|
||||
const targetCategory = getComboCategory(targetCombo);
|
||||
const nextCombos = moveComboToCategory(data.combos, fromComboId, targetCategory);
|
||||
const movedCombos = moveComboGroup(nextCombos, [fromComboId], targetComboId, placement);
|
||||
return {
|
||||
...data,
|
||||
combos: movedCombos,
|
||||
categoryOrder: getCategoryOrderAfterComboMove(data.categoryOrder, movedCombos)
|
||||
};
|
||||
}
|
||||
|
||||
function isBoundaryEdgeTarget(toId, edge) {
|
||||
if (!isCategoryBoundaryDropId(toId)) return false;
|
||||
return parseCategoryBoundaryDropId(toId).placement === (edge === "start" ? "before" : "after");
|
||||
}
|
||||
|
||||
function moveCategoryBoundary(data, fromCategory, toId) {
|
||||
if (isUncategorizedDropId(toId)) return moveCategoryGroupToEdge(data, fromCategory, "start");
|
||||
if (!isCategoryBoundaryDropId(toId)) return data;
|
||||
const boundary = parseCategoryBoundaryDropId(toId);
|
||||
if (!boundary.category || boundary.category === fromCategory) return data;
|
||||
if (isBoundaryEdgeTarget(toId, "start") && getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos))[0] === boundary.category) {
|
||||
return moveCategoryGroupToEdge(data, fromCategory, "start");
|
||||
}
|
||||
if (isBoundaryEdgeTarget(toId, "end")) {
|
||||
const order = getCompleteCategoryOrder(data.categoryOrder, getAllCategories(data.combos));
|
||||
if (order.at(-1) === boundary.category) return moveCategoryGroupToEdge(data, fromCategory, "end");
|
||||
}
|
||||
const movingIds = getCategoryComboIds(data.combos, fromCategory);
|
||||
return insertCategoryGroupAtBoundary(data, fromCategory, boundary, movingIds);
|
||||
}
|
||||
|
||||
function moveCategoryOrderAroundTarget(categoryOrder, combos, fromCategory, toCategory, placement) {
|
||||
return moveCategoryOrder(categoryOrder, getAllCategories(combos), fromCategory, toCategory, placement);
|
||||
}
|
||||
|
||||
function moveCategoryAroundCategory(data, fromCategory, toCategory, placement) {
|
||||
const movingIds = getCategoryComboIds(data.combos, fromCategory);
|
||||
const targetIds = getCategoryComboIds(data.combos, toCategory);
|
||||
const boundaryComboId = getBoundaryComboId(data.combos, targetIds, placement);
|
||||
if (!boundaryComboId) return data;
|
||||
return {
|
||||
...data,
|
||||
combos: moveComboGroup(data.combos, movingIds, boundaryComboId, placement),
|
||||
categoryOrder: moveCategoryOrderAroundTarget(data.categoryOrder, data.combos, fromCategory, toCategory, placement)
|
||||
};
|
||||
}
|
||||
|
||||
function removeComboCategoryAtBoundary(data, comboId, boundary) {
|
||||
const nextData = moveComboBeforeCategoryBoundary(data, comboId, boundary);
|
||||
return {
|
||||
...nextData,
|
||||
categoryOrder: cleanCategoryOrder(nextData.categoryOrder, nextData.combos)
|
||||
};
|
||||
}
|
||||
|
||||
function moveComboByBoundary(data, fromComboId, toId) {
|
||||
const boundary = parseCategoryBoundaryDropId(toId);
|
||||
if (!boundary.category) return data;
|
||||
return removeComboCategoryAtBoundary(data, fromComboId, boundary);
|
||||
}
|
||||
|
||||
function removeComboCategory(data, comboId, placement) {
|
||||
return moveComboToEdge(data, comboId, getEdgeFromPlacement(placement), "");
|
||||
}
|
||||
|
||||
function insertAfterCategory(data, comboId, category, placement) {
|
||||
return insertComboIntoCategory(data, comboId, category, placement);
|
||||
}
|
||||
|
||||
function getCategoryTargetId(target) {
|
||||
if (target.dataset.dropId) return target.dataset.dropId;
|
||||
if (target.classList.contains("combos-category")) return getCategorySectionId(target.dataset.category || "");
|
||||
return target.dataset.comboId || "";
|
||||
}
|
||||
|
||||
function getComboTargetId(target) {
|
||||
if (target.dataset.dropId) return target.dataset.dropId;
|
||||
if (target.classList.contains("combo-card")) return target.dataset.comboId || "";
|
||||
return getCategorySectionId(target.dataset.category || "");
|
||||
}
|
||||
|
||||
function canDropComboOnTarget(target, draggingId, combos) {
|
||||
const draggingCombo = combos.find((combo) => combo.id === draggingId);
|
||||
if (!draggingCombo) return false;
|
||||
const draggingCategory = getComboCategory(draggingCombo);
|
||||
if (target.classList.contains("combos-root-drop-zone")) return Boolean(draggingCategory);
|
||||
if (target.classList.contains("combos-category-boundary-drop-zone")) return true;
|
||||
if (target.classList.contains("combos-category")) return target.dataset.category !== draggingCategory;
|
||||
if (target.classList.contains("combo-card")) return target.dataset.comboId !== draggingId;
|
||||
return false;
|
||||
}
|
||||
|
||||
function canDropCategoryOnTarget(target, draggingId) {
|
||||
const draggingCategory = parseCategorySectionId(draggingId);
|
||||
if (!draggingCategory) return false;
|
||||
if (target.classList.contains("combos-root-drop-zone")) return true;
|
||||
if (target.classList.contains("combos-category-boundary-drop-zone")) {
|
||||
const boundary = parseCategoryBoundaryDropId(target.dataset.dropId);
|
||||
return boundary.category && boundary.category !== draggingCategory;
|
||||
}
|
||||
if (target.classList.contains("combos-category")) return target.dataset.category && target.dataset.category !== draggingCategory;
|
||||
return !target.dataset.comboCategory;
|
||||
}
|
||||
|
||||
function getCategoryDropPlacement(event, target) {
|
||||
if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
|
||||
const rect = target.getBoundingClientRect();
|
||||
return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
|
||||
}
|
||||
|
||||
function getComboDropPlacement(event, target) {
|
||||
if (target.classList.contains("combos-category-boundary-drop-zone") || target.classList.contains("combos-root-drop-zone")) return "before";
|
||||
const rect = target.getBoundingClientRect();
|
||||
return event.clientY > rect.top + rect.height / 2 ? "after" : "before";
|
||||
}
|
||||
|
||||
function ComboInputToken({ input, device, palette = false, onClick, onDragStart }) {
|
||||
const label = getInputLabel(input);
|
||||
|
|
@ -629,28 +284,46 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
const paletteGroups = useMemo(() => getPaletteGroups(data.device, keyboardLayout), [data.device, keyboardLayout]);
|
||||
const paletteColumns = useMemo(() => getPaletteColumns(paletteGroups), [paletteGroups]);
|
||||
const cleanDraftInputs = draftInputs.map((step) => step.filter(Boolean)).filter((step) => step.length);
|
||||
const entries = getCategoryGroups(data.combos, data.categoryOrder);
|
||||
const {
|
||||
draggingId: draggingCategoryId,
|
||||
dropTarget: categoryDropTarget,
|
||||
startDrag: startCategoryDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: ".combos-category, .combo-card, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
|
||||
getTargetId: getCategoryTargetId,
|
||||
canDropOn: canDropCategoryOnTarget,
|
||||
getPlacement: getCategoryDropPlacement,
|
||||
onMove: moveCategory
|
||||
const entries = getGroupedEntries(data.combos, {
|
||||
groupOrder: data.categoryOrder,
|
||||
getItemGroup: getComboCategory,
|
||||
groupIdKey: "category",
|
||||
groupItemKey: "combos"
|
||||
});
|
||||
const {
|
||||
draggingId: draggingComboId,
|
||||
dropTarget: comboDropTarget,
|
||||
startDrag: startComboDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: ".combo-card, .combos-category, .combos-root-drop-zone, .combos-category-boundary-drop-zone",
|
||||
getTargetId: getComboTargetId,
|
||||
canDropOn: (target, draggingId) => canDropComboOnTarget(target, draggingId, data.combos),
|
||||
getPlacement: getComboDropPlacement,
|
||||
onMove: moveCombo
|
||||
itemReorder,
|
||||
groupReorder,
|
||||
getItemProps,
|
||||
getGroupProps,
|
||||
getGroupBoundaryProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
isGroupDragging,
|
||||
isGroupDropTarget,
|
||||
isBoundaryDropTarget,
|
||||
getDropPlacement,
|
||||
shouldShowGroupBoundaries
|
||||
} = useGroupedReorder({
|
||||
namespace: "combos",
|
||||
items: data.combos,
|
||||
getItemId: (combo) => combo.id,
|
||||
getItemGroup: getComboCategory,
|
||||
reorderFeatures: {
|
||||
item: {
|
||||
groupChange: true,
|
||||
boundaryDrop: true,
|
||||
ungroupedDrop: true
|
||||
},
|
||||
group: {
|
||||
reorder: true,
|
||||
boundaryDrop: true,
|
||||
ungroupedDrop: true,
|
||||
itemDrop: true
|
||||
}
|
||||
},
|
||||
onItemMove: applyComboReorder,
|
||||
onGroupMove: applyComboReorder,
|
||||
hierarchy: { enabled: false, stickyParents: false }
|
||||
});
|
||||
|
||||
function save(nextData) {
|
||||
|
|
@ -666,39 +339,15 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
});
|
||||
}
|
||||
|
||||
function moveCategory(fromId, toId, placement) {
|
||||
const fromCategory = parseCategorySectionId(fromId);
|
||||
const movingIds = getCategoryComboIds(data.combos, fromCategory);
|
||||
if (!movingIds.length) return;
|
||||
if (isUncategorizedDropId(toId) || isCategoryBoundaryDropId(toId)) {
|
||||
save(moveCategoryBoundary(data, fromCategory, toId));
|
||||
return;
|
||||
}
|
||||
if (isCategorySectionId(toId)) {
|
||||
save(moveCategoryAroundCategory(data, fromCategory, parseCategorySectionId(toId), placement));
|
||||
return;
|
||||
}
|
||||
if (data.combos.some((combo) => combo.id === toId)) {
|
||||
save(moveCategoryGroupAroundCombo(data, fromCategory, toId, placement, movingIds));
|
||||
}
|
||||
}
|
||||
|
||||
function moveCombo(fromComboId, targetId, placement) {
|
||||
const movedCombo = data.combos.find((combo) => combo.id === fromComboId);
|
||||
if (!movedCombo) return;
|
||||
if (isUncategorizedDropId(targetId)) {
|
||||
save(removeComboCategory(data, fromComboId, placement));
|
||||
return;
|
||||
}
|
||||
if (isCategoryBoundaryDropId(targetId)) {
|
||||
save(moveComboByBoundary(data, fromComboId, targetId));
|
||||
return;
|
||||
}
|
||||
if (isCategorySectionId(targetId)) {
|
||||
save(insertAfterCategory(data, fromComboId, parseCategorySectionId(targetId), placement));
|
||||
return;
|
||||
}
|
||||
save(moveComboAroundCombo(data, fromComboId, targetId, placement));
|
||||
function applyComboReorder(operation) {
|
||||
save(applyGroupedReorderOperation(data, {
|
||||
operation,
|
||||
itemsKey: "combos",
|
||||
groupOrderKey: "categoryOrder",
|
||||
collapsedGroupsKey: "collapsedCategories",
|
||||
getItemGroup: getComboCategory,
|
||||
setItemGroup: setComboCategory
|
||||
}));
|
||||
}
|
||||
|
||||
function addInputToStep(kind, value, stepIndex) {
|
||||
|
|
@ -880,16 +529,16 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
const comboClassName = [
|
||||
"combo-card",
|
||||
"is-editing",
|
||||
draggingComboId === combo.id ? "is-dragging" : "",
|
||||
comboDropTarget.id === combo.id || categoryDropTarget.id === combo.id ? "is-drop-target" : "",
|
||||
(comboDropTarget.id === combo.id && comboDropTarget.placement === "after") || (categoryDropTarget.id === combo.id && categoryDropTarget.placement === "after") ? "drop-after" : ""
|
||||
isItemDragging(combo.id) ? "is-dragging" : "",
|
||||
isItemDropTarget(combo.id) ? "is-drop-target" : "",
|
||||
getDropPlacement("item", combo.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
return (
|
||||
<article className={comboClassName} key={combo.id} data-combo-id={combo.id} data-combo-category={category}>
|
||||
<article className={comboClassName} key={combo.id} {...getItemProps({ itemId: combo.id, groupId: category })}>
|
||||
<button
|
||||
className="task-planner-drag-handle combo-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => startComboDrag(event, combo.id)}
|
||||
onPointerDown={(event) => itemReorder.startDrag(event, combo.id)}
|
||||
aria-label={`${textContent.reorderComboTitle || "Déplacer le combo"} ${combo.name}`}
|
||||
title={textContent.reorderComboTitle || "Déplacer le combo"}
|
||||
>
|
||||
|
|
@ -918,41 +567,38 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
|
||||
function renderCategory(group) {
|
||||
const category = group.category;
|
||||
const categoryId = getCategorySectionId(category);
|
||||
const beforeDropId = getCategoryBoundaryDropId(category, "before");
|
||||
const afterDropId = getCategoryBoundaryDropId(category, "after");
|
||||
const isCollapsed = data.collapsedCategories.includes(category);
|
||||
const categoryClassName = [
|
||||
"combos-category checklist-section is-grouped",
|
||||
isCollapsed ? "is-collapsed" : "",
|
||||
draggingCategoryId === categoryId ? "is-dragging" : "",
|
||||
categoryDropTarget.id === categoryId || comboDropTarget.id === categoryId ? "is-drop-target" : "",
|
||||
(categoryDropTarget.id === categoryId && categoryDropTarget.placement === "after") || (comboDropTarget.id === categoryId && comboDropTarget.placement === "after") ? "drop-after" : ""
|
||||
isGroupDragging(category) ? "is-dragging" : "",
|
||||
isGroupDropTarget(category) ? "is-drop-target" : "",
|
||||
getDropPlacement("group", category) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const showBoundaryDropZones = Boolean(draggingComboId || draggingCategoryId);
|
||||
const showBoundaryDropZones = shouldShowGroupBoundaries();
|
||||
const beforeDropZone = showBoundaryDropZones ? (
|
||||
<div
|
||||
className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "start")}`}
|
||||
className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "before" }) ? "is-drop-target" : ""}`}
|
||||
key={`${category}:before-drop`}
|
||||
data-drop-id={beforeDropId}
|
||||
{...getGroupBoundaryProps({ groupId: category, placement: "before" })}
|
||||
/>
|
||||
) : null;
|
||||
const afterDropZone = showBoundaryDropZones ? (
|
||||
<div
|
||||
className={`combos-category-boundary-drop-zone ${getDropEdgeClass(categoryDropTarget, comboDropTarget, category, "end")}`}
|
||||
className={`combos-category-boundary-drop-zone ${isBoundaryDropTarget({ groupId: category, placement: "after" }) ? "is-drop-target" : ""}`}
|
||||
key={`${category}:after-drop`}
|
||||
data-drop-id={afterDropId}
|
||||
{...getGroupBoundaryProps({ groupId: category, placement: "after" })}
|
||||
/>
|
||||
) : null;
|
||||
return [
|
||||
beforeDropZone,
|
||||
<section className={categoryClassName} key={category} data-category={category}>
|
||||
<section className={categoryClassName} key={category} {...getGroupProps({ groupId: category })}>
|
||||
<div className="checklist-section-header combos-category-header">
|
||||
<div className="combos-category-title">
|
||||
<button
|
||||
className="task-planner-category-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => startCategoryDrag(event, categoryId)}
|
||||
onPointerDown={(event) => groupReorder.startDrag(event, { groupId: category })}
|
||||
aria-label={`${textContent.reorderCategoryTitle || "Déplacer la catégorie"} ${category}`}
|
||||
title={textContent.reorderCategoryTitle || "Déplacer la catégorie"}
|
||||
>
|
||||
|
|
@ -984,17 +630,6 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
];
|
||||
}
|
||||
|
||||
function renderUncategorizedDropZone() {
|
||||
const draggingCombo = draggingComboId ? data.combos.find((combo) => combo.id === draggingComboId) : null;
|
||||
const draggingCategory = parseCategorySectionId(draggingCategoryId);
|
||||
if ((!draggingCombo || !getComboCategory(draggingCombo)) && !draggingCategory) return null;
|
||||
return (
|
||||
<div className={`combos-root-drop-zone is-visible ${comboDropTarget.id === UNCATEGORIZED_DROP_ID || categoryDropTarget.id === UNCATEGORIZED_DROP_ID ? "is-drop-target" : ""}`} data-drop-id={UNCATEGORIZED_DROP_ID}>
|
||||
{textContent.noCategoryLabel || "Sans catégorie"}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="combos-module">
|
||||
{(editing || editingComboId) && (
|
||||
|
|
@ -1115,8 +750,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
|
|||
)}
|
||||
|
||||
<div className="combos-category-list">
|
||||
{renderUncategorizedDropZone()}
|
||||
{entries.map((entry) => entry.type === "category" ? renderCategory(entry.group) : renderCombo(entry.combo))}
|
||||
{entries.map((entry) => entry.type === "group" ? renderCategory(entry.group) : renderCombo(entry.item))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
// Rôle : fournit l'outil compteurs personnalisables.
|
||||
import { useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
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 {
|
||||
itemReorder,
|
||||
getItemProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
getDropPlacement
|
||||
} = useGroupedReorder({
|
||||
namespace: "counters",
|
||||
items: data.counters,
|
||||
getItemId: (counter) => counter.id,
|
||||
getParentId: () => moduleId,
|
||||
orientation: "horizontal",
|
||||
onItemMove: (operation) => save(moveItem(data.counters, operation.sourceId, operation.targetId, operation.placement)),
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
function save(counters) {
|
||||
context.setModuleData(toolboxId, moduleId, { counters });
|
||||
|
|
@ -33,8 +49,25 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
|
|||
</form>
|
||||
)}
|
||||
<div className="counters-grid">
|
||||
{data.counters.map((counter) => (
|
||||
<article className="counter-item" key={counter.id}>
|
||||
{data.counters.map((counter) => {
|
||||
const className = [
|
||||
"counter-item",
|
||||
isItemDragging(counter.id) ? "is-dragging" : "",
|
||||
isItemDropTarget(counter.id) ? "is-drop-target" : "",
|
||||
getDropPlacement("item", counter.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<article className={className} key={counter.id} {...getItemProps({ itemId: counter.id, parentId: moduleId })}>
|
||||
<button
|
||||
className="counter-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => itemReorder.startDrag(event, counter.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${counter.label}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<div>
|
||||
<strong>{counter.value}</strong>
|
||||
<span>{counter.label}</span>
|
||||
|
|
@ -50,7 +83,8 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
|
|||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Rôle : fournit l'outil images avec import, collage, libellés et annotation rapide.
|
||||
import { useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
|
||||
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
|
||||
export function ImagesModule({ toolboxId, moduleId, context, editing }) {
|
||||
const data = context.getModuleData(toolboxId, moduleId, { images: [] });
|
||||
|
|
@ -9,24 +9,23 @@ export function ImagesModule({ toolboxId, moduleId, context, editing }) {
|
|||
const [dragOver, setDragOver] = useState(false);
|
||||
const pastePlaceholder = textContent.pastePlaceholder || "Coller une image ici";
|
||||
const {
|
||||
draggingId: draggingImageId,
|
||||
dropTarget,
|
||||
startDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: "[data-image-id]",
|
||||
getTargetId: (target) => target.dataset.imageId,
|
||||
canDropOn: (target) => target.dataset.imageModuleId === moduleId,
|
||||
getPlacement: (event, target) => {
|
||||
const rect = target.getBoundingClientRect();
|
||||
return event.clientX > rect.left + rect.width / 2 ? "after" : "before";
|
||||
itemReorder,
|
||||
getItemProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
getDropPlacement
|
||||
} = useGroupedReorder({
|
||||
namespace: "images",
|
||||
items: data.images,
|
||||
getItemId: (image) => image.id,
|
||||
getParentId: () => moduleId,
|
||||
orientation: "horizontal",
|
||||
onItemMove: (operation) => {
|
||||
context.setModuleData(toolboxId, moduleId, {
|
||||
images: moveItem(data.images, operation.sourceId, operation.targetId, operation.placement)
|
||||
});
|
||||
},
|
||||
onMove: (draggingId, targetId, placement) => {
|
||||
const nextImages = data.images.filter((image) => image.id !== draggingId);
|
||||
const targetIndex = nextImages.findIndex((image) => image.id === targetId);
|
||||
if (targetIndex === -1) return;
|
||||
nextImages.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, data.images.find((image) => image.id === draggingId));
|
||||
context.setModuleData(toolboxId, moduleId, { images: nextImages.filter(Boolean) });
|
||||
}
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
async function addFiles(files) {
|
||||
|
|
@ -90,20 +89,18 @@ export function ImagesModule({ toolboxId, moduleId, context, editing }) {
|
|||
)}
|
||||
<div className="images">
|
||||
{data.images.map((image) => {
|
||||
const isDragging = draggingImageId === image.id;
|
||||
const isDropTarget = dropTarget.id === image.id;
|
||||
const className = [
|
||||
isDragging ? "is-dragging" : "",
|
||||
isDropTarget ? "is-drop-target" : "",
|
||||
isDropTarget && dropTarget.placement === "after" ? "drop-after" : ""
|
||||
isItemDragging(image.id) ? "is-dragging" : "",
|
||||
isItemDropTarget(image.id) ? "is-drop-target" : "",
|
||||
getDropPlacement("item", image.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<figure key={image.id} className={className} data-image-id={image.id} data-image-module-id={moduleId}>
|
||||
<figure key={image.id} className={className} {...getItemProps({ itemId: image.id, parentId: moduleId })}>
|
||||
<button
|
||||
className="image-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => startDrag(event, image.id)}
|
||||
onPointerDown={(event) => itemReorder.startDrag(event, image.id)}
|
||||
aria-label={textContent.reorderAriaLabel || "Déplacer l'image"}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Rôle : fournit l'outil liens avec ajout manuel et import texte.
|
||||
import { useCallback, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { TextImportModal } from "./TextImportModal.jsx";
|
||||
import { parseColonImportLines } from "./textImport.js";
|
||||
|
||||
|
|
@ -13,6 +14,20 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
|||
const [importOpen, setImportOpen] = useState(false);
|
||||
const [copiedId, setCopiedId] = useState("");
|
||||
const closeImportModal = useCallback(() => setImportOpen(false), []);
|
||||
const {
|
||||
itemReorder,
|
||||
getItemProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
getDropPlacement
|
||||
} = useGroupedReorder({
|
||||
namespace: "links",
|
||||
items: data.links,
|
||||
getItemId: (link) => link.id,
|
||||
getParentId: () => moduleId,
|
||||
onItemMove: (operation) => save(moveItem(data.links, operation.sourceId, operation.targetId, operation.placement)),
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
function save(links) {
|
||||
context.setModuleData(toolboxId, moduleId, { links });
|
||||
|
|
@ -88,8 +103,25 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
|||
/>
|
||||
)}
|
||||
<ul className="links-list">
|
||||
{data.links.map((link) => (
|
||||
<li className="link-item" key={link.id}>
|
||||
{data.links.map((link) => {
|
||||
const className = [
|
||||
"link-item",
|
||||
isItemDragging(link.id) ? "is-dragging" : "",
|
||||
isItemDropTarget(link.id) ? "is-drop-target" : "",
|
||||
getDropPlacement("item", link.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<li className={className} key={link.id} {...getItemProps({ itemId: link.id, parentId: moduleId })}>
|
||||
<button
|
||||
className="link-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => itemReorder.startDrag(event, link.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${link.title || link.url}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<a href={link.url} target="_blank" rel="noreferrer" title={link.url}>
|
||||
<strong>{link.title || context.hostnameFromUrl(link.url)}</strong>
|
||||
<span>{link.url}</span>
|
||||
|
|
@ -103,7 +135,8 @@ export function LinksModule({ toolboxId, moduleId, context, editing }) {
|
|||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { Tabs } from "../../../components/Tabs.jsx";
|
||||
import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import {
|
||||
formatDuration,
|
||||
formatDurationWithCentiseconds,
|
||||
|
|
@ -93,6 +94,18 @@ export function TimerModule({ toolboxId, moduleId, context }) {
|
|||
if (!data.sortResults) return countdowns;
|
||||
return [...countdowns].sort((a, b) => (a.targetMs || Number.POSITIVE_INFINITY) - (b.targetMs || Number.POSITIVE_INFINITY));
|
||||
}, [data.countdowns, data.sortResults, nowMs]);
|
||||
const countdownReorder = useGroupedReorder({
|
||||
namespace: "timer-countdowns",
|
||||
items: data.countdowns,
|
||||
getItemId: (countdown) => countdown.id,
|
||||
getParentId: () => moduleId,
|
||||
canMoveItem: () => !data.sortResults,
|
||||
onItemMove: (operation) => {
|
||||
if (data.sortResults) return;
|
||||
save({ ...data, countdowns: moveItem(data.countdowns, operation.sourceId, operation.targetId, operation.placement) });
|
||||
},
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
function save(nextData) {
|
||||
context.setModuleData(toolboxId, moduleId, nextData);
|
||||
|
|
@ -300,7 +313,7 @@ export function TimerModule({ toolboxId, moduleId, context }) {
|
|||
{activeTab === "stopwatch" ? (
|
||||
<StopwatchLapList laps={data.stopwatch.laps} textContent={textContent} onRename={renameLap} onDelete={deleteLap} />
|
||||
) : (
|
||||
<CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onDelete={deleteCountdown} />
|
||||
<CountdownList countdowns={visibleCountdowns} nowMs={nowMs} textContent={textContent} reorder={countdownReorder} reorderEnabled={!data.sortResults} parentId={moduleId} onRename={renameCountdown} onAlertModeChange={setCountdownAlertMode} onReset={resetCountdown} onDelete={deleteCountdown} />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -471,7 +484,7 @@ function StopwatchLapList({ laps, textContent, onRename, onDelete }) {
|
|||
);
|
||||
}
|
||||
|
||||
function CountdownList({ countdowns, nowMs, textContent, onRename, onAlertModeChange, onReset, onDelete }) {
|
||||
function CountdownList({ countdowns, nowMs, textContent, reorder, reorderEnabled, parentId, onRename, onAlertModeChange, onReset, onDelete }) {
|
||||
const [editingId, setEditingId] = useState("");
|
||||
if (!countdowns.length) return <p className="muted">{textContent.emptyCountdowns || "Aucun compte à rebours configuré."}</p>;
|
||||
return (
|
||||
|
|
@ -482,9 +495,30 @@ function CountdownList({ countdowns, nowMs, textContent, onRename, onAlertModeCh
|
|||
const canReset = countdown.type === "duration"
|
||||
|| countdown.type === "interval"
|
||||
|| (countdown.type === "daily_time" && expired);
|
||||
const className = [
|
||||
"timer-list-item",
|
||||
expired ? "is-expired" : "",
|
||||
editingId === countdown.id ? "is-editing" : "",
|
||||
reorderEnabled && reorder.isItemDragging(countdown.id) ? "is-dragging" : "",
|
||||
reorderEnabled && reorder.isItemDropTarget(countdown.id) ? "is-drop-target" : "",
|
||||
reorderEnabled && reorder.getDropPlacement("item", countdown.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const reorderProps = reorderEnabled ? reorder.getItemProps({ itemId: countdown.id, parentId }) : {};
|
||||
|
||||
return (
|
||||
<li key={countdown.id} className={`timer-list-item ${expired ? "is-expired" : ""} ${editingId === countdown.id ? "is-editing" : ""}`}>
|
||||
<div className={`tool-split-entry timer-entry has-single-action ${editingId !== countdown.id ? "has-inline-controls" : ""} ${canReset && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
|
||||
<li key={countdown.id} className={className} {...reorderProps}>
|
||||
<div className={`tool-split-entry timer-entry has-single-action ${reorderEnabled ? "has-drag-handle" : ""} ${editingId !== countdown.id ? "has-inline-controls" : ""} ${canReset && editingId !== countdown.id ? "has-inline-reset" : ""}`}>
|
||||
{reorderEnabled && (
|
||||
<button
|
||||
className="timer-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, countdown.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${countdown.label}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
)}
|
||||
{editingId === countdown.id ? (
|
||||
<EditableTimerLabel
|
||||
value={countdown.label}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|||
import { createPortal } from "react-dom";
|
||||
import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { usePointerReorder } from "../../../hooks/usePointerReorder.js";
|
||||
import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { lockBodyScroll } from "../../../utils/bodyScrollLock.js";
|
||||
import { CalculatorModule } from "./CalculatorModule.jsx";
|
||||
import { ChecklistModule } from "./ChecklistModule.jsx";
|
||||
|
|
@ -180,14 +180,18 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
|
|||
const moduleElementsRef = useRef(new Map());
|
||||
const moduleIdSignature = useMemo(() => toolbox.modules.map((module) => module.id).join("|"), [toolbox.modules]);
|
||||
const {
|
||||
draggingId: draggingModuleId,
|
||||
dropTarget,
|
||||
startDrag: startModuleDrag
|
||||
} = usePointerReorder({
|
||||
targetSelector: ".module",
|
||||
getTargetId: (target) => target.dataset.moduleId,
|
||||
canDropOn: (target) => target.dataset.toolboxId === toolbox.id,
|
||||
onMove
|
||||
itemReorder,
|
||||
getItemProps,
|
||||
isItemDragging,
|
||||
isItemDropTarget,
|
||||
getDropPlacement
|
||||
} = useGroupedReorder({
|
||||
namespace: "toolbox-modules",
|
||||
items: toolbox.modules,
|
||||
getItemId: (module) => module.id,
|
||||
getParentId: () => toolbox.id,
|
||||
onItemMove: (operation) => onMove(operation.sourceId, operation.targetId, operation.placement),
|
||||
hierarchy: { enabled: true, stickyParents: true }
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -246,9 +250,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
|
|||
toolbox={toolbox}
|
||||
module={module}
|
||||
context={context}
|
||||
draggingModuleId={draggingModuleId}
|
||||
dropTarget={dropTarget}
|
||||
onDragStart={startModuleDrag}
|
||||
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
|
||||
onRename={onRename}
|
||||
onUpdateModule={onUpdateModule}
|
||||
onDelete={onDelete}
|
||||
|
|
@ -273,9 +275,7 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
|
|||
toolbox={toolbox}
|
||||
module={module}
|
||||
context={context}
|
||||
draggingModuleId={draggingModuleId}
|
||||
dropTarget={dropTarget}
|
||||
onDragStart={startModuleDrag}
|
||||
reorder={{ itemReorder, getItemProps, isItemDragging, isItemDropTarget, getDropPlacement }}
|
||||
onRename={onRename}
|
||||
onUpdateModule={onUpdateModule}
|
||||
onDelete={onDelete}
|
||||
|
|
@ -289,27 +289,24 @@ export function ToolboxModules({ toolbox, moduleColumns, context, onRename, onUp
|
|||
);
|
||||
}
|
||||
|
||||
function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, onDragStart, onRename, onUpdateModule, onDelete, registerModuleElement }) {
|
||||
function ModuleShell({ toolbox, module, context, reorder, onRename, onUpdateModule, onDelete, registerModuleElement }) {
|
||||
const definition = MODULE_COMPONENTS[module.type] || MODULE_COMPONENTS.notepad;
|
||||
const Component = definition.Component;
|
||||
const label = definition.label || module.type;
|
||||
const [editing, setEditing] = useState(false);
|
||||
const scrollable = definition.scrollable && module.scrollable === true;
|
||||
const isDragging = draggingModuleId === module.id;
|
||||
const isDropTarget = dropTarget.id === module.id;
|
||||
const className = [
|
||||
"module",
|
||||
isDragging ? "is-dragging" : "",
|
||||
isDropTarget ? "is-drop-target" : "",
|
||||
isDropTarget && dropTarget.placement === "after" ? "drop-after" : "",
|
||||
reorder.isItemDragging(module.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(module.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", module.id) === "after" ? "drop-after" : "",
|
||||
scrollable ? "is-scrollable" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<article
|
||||
className={className}
|
||||
data-toolbox-id={toolbox.id}
|
||||
data-module-id={module.id}
|
||||
{...reorder.getItemProps({ itemId: module.id, parentId: toolbox.id })}
|
||||
ref={(element) => registerModuleElement?.(module.id, element)}
|
||||
>
|
||||
<header>
|
||||
|
|
@ -317,7 +314,7 @@ function ModuleShell({ toolbox, module, context, draggingModuleId, dropTarget, o
|
|||
<button
|
||||
className="module-drag-handle"
|
||||
type="button"
|
||||
onPointerDown={(event) => onDragStart(event, module.id)}
|
||||
onPointerDown={(event) => reorder.itemReorder.startDrag(event, module.id)}
|
||||
aria-label={`Déplacer ${module.title || label}`}
|
||||
title="Déplacer"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue