Extract toolbox planner helpers
This commit is contained in:
parent
c312b9ed91
commit
348f6f278b
5 changed files with 826 additions and 783 deletions
|
|
@ -6,70 +6,19 @@ import { Tooltip } from "../../../components/Tooltip.jsx";
|
|||
import { applyGroupedReorderOperation, moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
||||
import { TextExchangeActions } from "./TextExchangeActions.jsx";
|
||||
|
||||
const SOCKET_SHAPES = ["ball", "jewel"];
|
||||
const SOCKET_COLORS = ["red", "orange", "amber", "yellow", "lime", "green", "teal", "cyan", "blue", "indigo", "violet", "purple", "pink", "rose", "white", "gray", "black"];
|
||||
const SOCKET_COLOR_VALUES = {
|
||||
red: "#ef4444",
|
||||
orange: "#f97316",
|
||||
amber: "#f59e0b",
|
||||
yellow: "var(--color-accent-gold)",
|
||||
lime: "#84cc16",
|
||||
green: "#22c55e",
|
||||
teal: "#14b8a6",
|
||||
cyan: "var(--color-accent-cyan)",
|
||||
blue: "#3b82f6",
|
||||
indigo: "var(--color-accent-indigo)",
|
||||
violet: "#7c3aed",
|
||||
purple: "var(--color-primary)",
|
||||
pink: "var(--color-accent-pink)",
|
||||
rose: "#f43f5e",
|
||||
white: "#f8fafc",
|
||||
gray: "#64748b",
|
||||
black: "#020617"
|
||||
};
|
||||
const EQUIPMENT_ICONS = [
|
||||
{ icon: "helmet", label: "Casque" },
|
||||
{ icon: "chest-armor", label: "Chest" },
|
||||
{ icon: "glove", label: "Gants" },
|
||||
{ icon: "boot", label: "Bottes" },
|
||||
{ icon: "necklace", label: "Collier" },
|
||||
{ icon: "earring", label: "Earring" },
|
||||
{ icon: "ring", label: "Anneau" },
|
||||
{ icon: "sword", label: "Épée" },
|
||||
{ icon: "gun", label: "Gun" },
|
||||
{ icon: "shield", label: "Bouclier" }
|
||||
];
|
||||
const TRAIT_ICONS = ["sword", "shield"];
|
||||
const DETAIL_TABS = ["stats", "sockets", "craft"];
|
||||
|
||||
function getCharacteristicCategories(equipment) {
|
||||
const categories = equipment.characteristics.map((trait) => trait.category).filter(Boolean);
|
||||
return [
|
||||
...equipment.categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category, index) => categories.indexOf(category) === index && !equipment.categoryOrder.includes(category))
|
||||
];
|
||||
}
|
||||
|
||||
function setItemCategory(item, category) {
|
||||
const nextItem = { ...item };
|
||||
if (category) nextItem.category = category;
|
||||
else delete nextItem.category;
|
||||
return nextItem;
|
||||
}
|
||||
|
||||
function formatValue(value) {
|
||||
if (typeof value === "number") return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
|
||||
return String(value || "");
|
||||
}
|
||||
|
||||
function createLocalId(prefix) {
|
||||
return globalThis.crypto?.randomUUID?.() || `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
function getSocketItemName(equipment, socketItemId) {
|
||||
return equipment.socketItems.find((socketItem) => socketItem.id === socketItemId)?.name || "";
|
||||
}
|
||||
import {
|
||||
DETAIL_TABS,
|
||||
EQUIPMENT_ICONS,
|
||||
SOCKET_COLORS,
|
||||
SOCKET_COLOR_VALUES,
|
||||
SOCKET_SHAPES,
|
||||
TRAIT_ICONS,
|
||||
createLocalId,
|
||||
formatValue,
|
||||
getCharacteristicCategories,
|
||||
getSocketItemName,
|
||||
setItemCategory
|
||||
} from "./equipmentPlannerOptions.js";
|
||||
|
||||
function SocketShapeIcon({ shape, color = "gray", className = "" }) {
|
||||
return (
|
||||
|
|
|
|||
522
website/src/features/toolboxes/modules/TaskPlannerItems.jsx
Normal file
522
website/src/features/toolboxes/modules/TaskPlannerItems.jsx
Normal file
|
|
@ -0,0 +1,522 @@
|
|||
// Rôle : rend les branches, items et panneaux secondaires du task planner.
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { InlineNotice } from "../../../components/AppOverlays.jsx";
|
||||
import { Tooltip } from "../../../components/Tooltip.jsx";
|
||||
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
||||
import {
|
||||
TASK_TYPES,
|
||||
WEEK_DAYS,
|
||||
countCompletedTaskTree,
|
||||
countTaskTree,
|
||||
getEffectiveTaskCategory,
|
||||
getTaskById,
|
||||
getTaskCategoryDataset,
|
||||
getTaskCategoryGroups,
|
||||
getTaskTitle,
|
||||
getTaskTypeLabel,
|
||||
getTasksForParent,
|
||||
isTaskTreeComplete
|
||||
} from "./taskPlannerUtils.js";
|
||||
|
||||
export function TaskPlannerBranch({
|
||||
parentId,
|
||||
parentMap,
|
||||
tasks,
|
||||
data,
|
||||
reorder,
|
||||
textContent,
|
||||
openDescriptions,
|
||||
openTaskSettings,
|
||||
prerequisiteNoticeTaskIds,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
onUpdateTask,
|
||||
onDeleteTask,
|
||||
onAddLinkTarget,
|
||||
onRemoveLinkTarget,
|
||||
onSetPrerequisite,
|
||||
onSetTaskCategory,
|
||||
onToggleCategoryCollapsed,
|
||||
visited = new Set()
|
||||
}) {
|
||||
const groupedTasks = getTaskCategoryGroups(tasks, parentMap, parentId, data.categoryOrder);
|
||||
const children = [...groupedTasks.uncategorized, ...groupedTasks.categories.flatMap((group) => group.tasks)].filter((task) => !visited.has(task.id));
|
||||
if (!children.length) return null;
|
||||
const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
|
||||
const showCategoryBoundaryDropZones = !parentId && reorder.shouldShowGroupBoundaries({ parentId });
|
||||
|
||||
function hasVisibleDescendants(taskId, seen = new Set()) {
|
||||
if (seen.has(taskId)) return false;
|
||||
seen.add(taskId);
|
||||
return getTasksForParent(tasks, parentMap, taskId).some((child) => !child.checked || hasVisibleDescendants(child.id, seen));
|
||||
}
|
||||
|
||||
function renderTask(task) {
|
||||
const nestedChildren = getTasksForParent(tasks, parentMap, task.id).filter((child) => !nextVisited.has(child.id));
|
||||
const nestedBranch = nestedChildren.length ? (
|
||||
<TaskPlannerBranch
|
||||
parentId={task.id}
|
||||
parentMap={parentMap}
|
||||
tasks={tasks}
|
||||
data={data}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
openDescriptions={openDescriptions}
|
||||
openTaskSettings={openTaskSettings}
|
||||
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
|
||||
onToggleDescription={onToggleDescription}
|
||||
onToggleSettings={onToggleSettings}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
onUpdateTask={onUpdateTask}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
onSetTaskCategory={onSetTaskCategory}
|
||||
onToggleCategoryCollapsed={onToggleCategoryCollapsed}
|
||||
visited={nextVisited}
|
||||
/>
|
||||
) : null;
|
||||
if (data.hideCompleted && task.checked) {
|
||||
if (!hasVisibleDescendants(task.id)) return null;
|
||||
return (
|
||||
<li className="task-planner-hidden-parent" key={`${task.id}:visible-children`}>
|
||||
<div className="task-planner-hidden-parent-line">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.checked}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => ({
|
||||
...current,
|
||||
checked: event.target.checked,
|
||||
checkedAt: event.target.checked ? Date.now() : 0
|
||||
}))}
|
||||
aria-label={`${textContent.uncheckTitle || "Marquer non effectué"} ${task.title}`}
|
||||
/>
|
||||
<span title={task.title}>{task.title}</span>
|
||||
<small>{getTaskTypeLabel(task.type, textContent)}</small>
|
||||
</div>
|
||||
<ul className="task-planner-list task-planner-child-list">{nestedBranch}</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TaskPlannerItem
|
||||
key={task.id}
|
||||
task={task}
|
||||
tasks={tasks}
|
||||
data={data}
|
||||
parentMap={parentMap}
|
||||
parentId={parentId}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
descriptionOpen={openDescriptions.has(task.id)}
|
||||
settingsOpen={openTaskSettings.has(task.id)}
|
||||
prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
|
||||
onToggleDescription={() => onToggleDescription(task.id)}
|
||||
onToggleSettings={() => onToggleSettings(task.id)}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
onUpdateTask={onUpdateTask}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
onSetTaskCategory={onSetTaskCategory}
|
||||
>
|
||||
{nestedBranch}
|
||||
</TaskPlannerItem>
|
||||
);
|
||||
}
|
||||
|
||||
function renderCategory(group) {
|
||||
const groupTasks = group.tasks.filter((task) => !visited.has(task.id));
|
||||
if (!groupTasks.length) return null;
|
||||
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 isCollapsed = data.collapsedCategories.includes(group.category);
|
||||
const sectionClassName = [
|
||||
"task-planner-category-section",
|
||||
groupCompletedCount === groupCount ? "is-complete" : "",
|
||||
isCollapsed ? "is-collapsed" : "",
|
||||
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 ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "before" }) ? "is-drop-target" : ""}`}
|
||||
key={`${parentId || "root"}:${group.category}:before-drop`}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "before" })}
|
||||
/>
|
||||
) : null;
|
||||
const afterDropZone = showCategoryBoundaryDropZones ? (
|
||||
<li
|
||||
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`}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "after" })}
|
||||
/>
|
||||
) : null;
|
||||
return [
|
||||
beforeDropZone,
|
||||
<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) => 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"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<h3>{group.category}</h3>
|
||||
</div>
|
||||
<div className="task-planner-category-actions">
|
||||
<span>{groupCompletedCount} / {groupCount}</span>
|
||||
<button
|
||||
className="checklist-section-collapse-button"
|
||||
type="button"
|
||||
onClick={() => onToggleCategoryCollapsed(group.category)}
|
||||
aria-expanded={!isCollapsed}
|
||||
title={isCollapsed ? textContent.showCategoryTitle || "Afficher cette catégorie" : textContent.hideCategoryTitle || "Réduire cette catégorie"}
|
||||
aria-label={isCollapsed ? textContent.showCategoryTitle || "Afficher cette catégorie" : textContent.hideCategoryTitle || "Réduire cette catégorie"}
|
||||
>
|
||||
<Icon name={isCollapsed ? "chevron-down" : "chevron-up"} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<ul className="task-planner-list">
|
||||
{groupTasks.map(renderTask).filter(Boolean)}
|
||||
</ul>
|
||||
)}
|
||||
</li>,
|
||||
afterDropZone
|
||||
];
|
||||
}
|
||||
|
||||
const entries = groupedTasks.entries.map((entry) => {
|
||||
if (entry.type === "task") return visited.has(entry.task.id) ? null : renderTask(entry.task);
|
||||
return renderCategory(entry.group);
|
||||
}).filter(Boolean);
|
||||
return entries;
|
||||
}
|
||||
|
||||
function TaskPlannerItem({
|
||||
task,
|
||||
tasks,
|
||||
data,
|
||||
parentMap,
|
||||
parentId,
|
||||
reorder,
|
||||
textContent,
|
||||
descriptionOpen,
|
||||
settingsOpen,
|
||||
prerequisiteNoticeVisible,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
onUpdateTask,
|
||||
onDeleteTask,
|
||||
onAddLinkTarget,
|
||||
onRemoveLinkTarget,
|
||||
onSetPrerequisite,
|
||||
onSetTaskCategory,
|
||||
children
|
||||
}) {
|
||||
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
|
||||
const inheritedCategory = parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : "";
|
||||
const categoryValue = parentTask ? inheritedCategory : task.category || "";
|
||||
const categoryEditable = !parentTask;
|
||||
const relations = data.relations.filter((relation) => relation.fromTaskId === task.id);
|
||||
const missingPrerequisites = relations.filter((relation) => relation.prerequisite && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
|
||||
const relationTargets = tasks.filter((item) => item.id !== task.id && !relations.some((relation) => relation.toTaskId === item.id));
|
||||
const noticeMessage = prerequisiteNoticeVisible && missingPrerequisites.length > 0 ? textContent.missingPrerequisiteNotice || "Pré requis parent non effectué" : "";
|
||||
const className = [
|
||||
"task-planner-item",
|
||||
task.checked ? "is-complete" : "",
|
||||
missingPrerequisites.length ? "has-missing-prerequisite" : "",
|
||||
reorder.isItemDragging(task.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(task.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", task.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const titleEdit = useInlineEdit({
|
||||
value: task.title,
|
||||
transform: (draft) => String(draft || "").trim() || task.title,
|
||||
onCommit: (title) => onUpdateTask(task.id, (current) => ({ ...current, title }))
|
||||
});
|
||||
const categoryEdit = useInlineEdit({
|
||||
value: categoryValue,
|
||||
onCommit: (category) => {
|
||||
if (categoryEditable) onSetTaskCategory(task.id, category);
|
||||
}
|
||||
});
|
||||
const descriptionEdit = useInlineEdit({
|
||||
value: task.description,
|
||||
onCommit: (description) => onUpdateTask(task.id, (current) => ({ ...current, description })),
|
||||
commitOnEnter: false
|
||||
});
|
||||
|
||||
function updateChecked(event) {
|
||||
const checked = event.target.checked;
|
||||
if (checked && missingPrerequisites.length > 0) onPrerequisiteNotice(task.id);
|
||||
onUpdateTask(task.id, (current) => ({
|
||||
...current,
|
||||
checked,
|
||||
checkedAt: checked ? Date.now() : 0
|
||||
}));
|
||||
}
|
||||
|
||||
return (
|
||||
<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) => reorder.itemReorder.startDrag(event, task.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${task.title}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.checked}
|
||||
onChange={updateChecked}
|
||||
aria-label={`${task.checked ? textContent.uncheckTitle || "Marquer non effectué" : textContent.checkTitle || "Marquer effectué"} ${task.title}`}
|
||||
/>
|
||||
<input
|
||||
{...titleEdit.getInputProps({
|
||||
className: "tool-split-entry-label task-planner-title-input",
|
||||
"aria-label": textContent.titleLabel || "Titre"
|
||||
})}
|
||||
/>
|
||||
<select
|
||||
className="task-planner-type-select"
|
||||
value={task.type}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextType = event.target.value;
|
||||
const nextTask = { ...current, type: nextType };
|
||||
if (nextType !== "weekly") delete nextTask.weeklyResetDay;
|
||||
if (nextType !== "daily") delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
aria-label={textContent.typeLabel || "Type"}
|
||||
>
|
||||
{TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
|
||||
</select>
|
||||
{missingPrerequisites.length > 0 && (
|
||||
<Tooltip
|
||||
className="task-planner-warning"
|
||||
content={<MissingPrerequisitesTooltip missingPrerequisites={missingPrerequisites} tasks={tasks} textContent={textContent} />}
|
||||
position="top-start"
|
||||
>
|
||||
{textContent.missingPrerequisiteBadge || "Pré requis"}
|
||||
</Tooltip>
|
||||
)}
|
||||
<div className="task-planner-actions">
|
||||
<button
|
||||
className={`task-planner-dropdown-button ${descriptionOpen ? "active" : ""}`}
|
||||
type="button"
|
||||
onClick={onToggleDescription}
|
||||
aria-expanded={descriptionOpen}
|
||||
aria-label={`${descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"} ${task.title}`}
|
||||
title={descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"}
|
||||
>
|
||||
<Icon name={descriptionOpen ? "chevron-up" : "chevron-down"} />
|
||||
</button>
|
||||
<button
|
||||
className={`task-planner-settings-button ${settingsOpen ? "active" : ""}`}
|
||||
type="button"
|
||||
onClick={onToggleSettings}
|
||||
aria-expanded={settingsOpen}
|
||||
aria-label={`${textContent.taskSettingsTitle || "Réglages de la tâche"} ${task.title}`}
|
||||
title={textContent.taskSettingsTitle || "Réglages de la tâche"}
|
||||
>
|
||||
<Icon name="settings" />
|
||||
</button>
|
||||
<button className="task-planner-delete-button danger" type="button" onClick={() => onDeleteTask(task.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${task.title}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<InlineNotice className="task-planner-notice" message={noticeMessage} />
|
||||
{descriptionOpen && (
|
||||
<div className="task-planner-description-panel">
|
||||
<label className={`task-planner-category-field ${categoryEditable ? "" : "is-disabled"}`}>
|
||||
<span>{textContent.categoryLabel || "Catégorie"}</span>
|
||||
<input
|
||||
{...categoryEdit.getInputProps({
|
||||
disabled: !categoryEditable,
|
||||
placeholder: textContent.categoryPlaceholder || "Nom de catégorie",
|
||||
"aria-label": `${textContent.categoryLabel || "Catégorie"} ${task.title}`
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label className="task-planner-description-field">
|
||||
<span>{textContent.descriptionLabel || "Description"}</span>
|
||||
<textarea
|
||||
{...descriptionEdit.getInputProps({
|
||||
className: "task-planner-description",
|
||||
placeholder: textContent.descriptionPlaceholder || "Description",
|
||||
"aria-label": `${textContent.descriptionLabel || "Description"} ${task.title}`
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{settingsOpen && (
|
||||
<div className="task-planner-task-settings">
|
||||
<TaskResetSettings task={task} data={data} textContent={textContent} onUpdateTask={onUpdateTask} />
|
||||
<LinksEditor
|
||||
label={textContent.linksLabel || "Parent"}
|
||||
relations={relations}
|
||||
task={task}
|
||||
tasks={tasks}
|
||||
parentMap={parentMap}
|
||||
relationTargets={relationTargets}
|
||||
emptyLabel={textContent.emptyLinks || "Aucun parent"}
|
||||
addLabel={textContent.addLinkLabel || "Définir un parent"}
|
||||
removeLabel={textContent.removeRelationTitle || "Retirer"}
|
||||
prerequisiteLabel={textContent.prerequisiteCheckboxLabel || "Pré requis"}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{children && <ul className="task-planner-list task-planner-child-list">{children}</ul>}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function MissingPrerequisitesTooltip({ missingPrerequisites, tasks, textContent }) {
|
||||
return (
|
||||
<span className="task-planner-prerequisite-tooltip">
|
||||
<strong>{textContent.missingPrerequisiteTitle || "Pré requis non effectué"}</strong>
|
||||
<span>
|
||||
{missingPrerequisites.map((relation) => (
|
||||
<span key={relation.id}>{getTaskTitle(tasks, relation.toTaskId)}</span>
|
||||
))}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskResetSettings({ task, data, textContent, onUpdateTask }) {
|
||||
if (task.type === "daily") {
|
||||
const hasOverride = Boolean(task.dailyResetTime);
|
||||
return (
|
||||
<div className="task-planner-reset-override">
|
||||
<span>{textContent.taskDailyResetTimeLabel || "Heure quotidienne"}</span>
|
||||
<div className="task-planner-reset-control">
|
||||
<input
|
||||
type="time"
|
||||
value={task.dailyResetTime || data.resetTime}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
if (event.target.value && event.target.value !== data.resetTime) nextTask.dailyResetTime = event.target.value;
|
||||
else delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
aria-label={`${textContent.taskDailyResetTimeLabel || "Heure quotidienne"} ${task.title}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
disabled={!hasOverride}
|
||||
title={textContent.inheritResetTime || "Utiliser l'heure globale"}
|
||||
aria-label={`${textContent.inheritResetTime || "Utiliser l'heure globale"} ${task.title}`}
|
||||
>
|
||||
<Icon name="rubber" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (task.type === "weekly") {
|
||||
return (
|
||||
<label className="task-planner-reset-override">
|
||||
<span>{textContent.taskWeeklyResetDayLabel || "Jour hebdo"}</span>
|
||||
<select
|
||||
value={task.weeklyResetDay ?? ""}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
if (event.target.value === "") {
|
||||
delete nextTask.weeklyResetDay;
|
||||
} else {
|
||||
nextTask.weeklyResetDay = Number(event.target.value);
|
||||
}
|
||||
return nextTask;
|
||||
})}
|
||||
>
|
||||
<option value="">{textContent.inheritWeeklyResetDay || "Global"}</option>
|
||||
{WEEK_DAYS.map((day) => <option key={day.value} value={day.value}>{day.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="task-planner-reset-override is-empty">
|
||||
<span>{textContent.taskResetLabel || "Réinitialisation"}</span>
|
||||
<p>{textContent.noTaskResetLabel || "Aucun reset"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, prerequisiteLabel, onAddLinkTarget, onRemoveLinkTarget, onSetPrerequisite }) {
|
||||
const descendantIds = new Set();
|
||||
function collectDescendants(taskId) {
|
||||
tasks.filter((item) => parentMap.get(item.id) === taskId).forEach((child) => {
|
||||
descendantIds.add(child.id);
|
||||
collectDescendants(child.id);
|
||||
});
|
||||
}
|
||||
collectDescendants(task.id);
|
||||
const availableTargets = relationTargets.filter((target) => !descendantIds.has(target.id));
|
||||
|
||||
return (
|
||||
<div className="task-planner-relations">
|
||||
<span>{label}</span>
|
||||
<select
|
||||
value=""
|
||||
onChange={(event) => {
|
||||
onAddLinkTarget(task.id, event.target.value);
|
||||
event.target.value = "";
|
||||
}}
|
||||
aria-label={addLabel}
|
||||
>
|
||||
<option value="">{addLabel}</option>
|
||||
{availableTargets.map((target) => <option key={target.id} value={target.id}>{target.title}</option>)}
|
||||
</select>
|
||||
<div>
|
||||
{relations.length ? relations.map((relation) => (
|
||||
<div className="task-planner-relation-chip" key={relation.id}>
|
||||
<span>{getTaskTitle(tasks, relation.toTaskId)}</span>
|
||||
<label title={prerequisiteLabel}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={relation.prerequisite}
|
||||
onChange={(event) => onSetPrerequisite(task.id, relation.toTaskId, event.target.checked)}
|
||||
aria-label={`${prerequisiteLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
|
||||
/>
|
||||
<span>{prerequisiteLabel}</span>
|
||||
</label>
|
||||
<button type="button" onClick={() => onRemoveLinkTarget(task.id, relation.toTaskId)} title={removeLabel} aria-label={`${removeLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</div>
|
||||
)) : <em>{emptyLabel}</em>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,226 +1,22 @@
|
|||
// Rôle : fournit l'outil task planner avec tâches récurrentes, parents, pré requis et échange texte.
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../components/Icon.jsx";
|
||||
import { InlineNotice } from "../../../components/AppOverlays.jsx";
|
||||
import { Tooltip } from "../../../components/Tooltip.jsx";
|
||||
import { useDraftForm } from "../../../hooks/useDraftForm.js";
|
||||
import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
|
||||
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
|
||||
import { TextExchangeActions } from "./TextExchangeActions.jsx";
|
||||
|
||||
const TASK_TYPES = ["daily", "weekly", "unique"];
|
||||
const WEEK_DAYS = [
|
||||
{ value: 1, label: "Lundi" },
|
||||
{ value: 2, label: "Mardi" },
|
||||
{ value: 3, label: "Mercredi" },
|
||||
{ value: 4, label: "Jeudi" },
|
||||
{ value: 5, label: "Vendredi" },
|
||||
{ value: 6, label: "Samedi" },
|
||||
{ value: 0, label: "Dimanche" }
|
||||
];
|
||||
|
||||
function getTaskTypeLabel(type, textContent) {
|
||||
if (type === "daily") return textContent.dailyType || "Quotidienne";
|
||||
if (type === "weekly") return textContent.weeklyType || "Hebdomadaire";
|
||||
return textContent.uniqueType || "Ponctuelle";
|
||||
}
|
||||
|
||||
function parseResetTime(value) {
|
||||
const [hours, minutes] = String(value || "00:00").split(":").map((part) => Number.parseInt(part, 10));
|
||||
return {
|
||||
hours: Number.isInteger(hours) ? Math.min(23, Math.max(0, hours)) : 0,
|
||||
minutes: Number.isInteger(minutes) ? Math.min(59, Math.max(0, minutes)) : 0
|
||||
};
|
||||
}
|
||||
|
||||
function getLatestDailyReset(now, resetTime) {
|
||||
const { hours, minutes } = parseResetTime(resetTime);
|
||||
const reset = new Date(now);
|
||||
reset.setHours(hours, minutes, 0, 0);
|
||||
if (reset.getTime() > now) reset.setDate(reset.getDate() - 1);
|
||||
return reset.getTime();
|
||||
}
|
||||
|
||||
function getLatestWeeklyReset(now, resetTime, weekDay) {
|
||||
const { hours, minutes } = parseResetTime(resetTime);
|
||||
const reset = new Date(now);
|
||||
reset.setHours(hours, minutes, 0, 0);
|
||||
const dayDiff = (reset.getDay() - weekDay + 7) % 7;
|
||||
reset.setDate(reset.getDate() - dayDiff);
|
||||
if (reset.getTime() > now) reset.setDate(reset.getDate() - 7);
|
||||
return reset.getTime();
|
||||
}
|
||||
|
||||
function applyDueResets(data, now = Date.now()) {
|
||||
let latestResetAt = data.lastResetAt;
|
||||
let changed = false;
|
||||
const tasks = data.tasks.map((task) => {
|
||||
if (task.type === "unique") return task;
|
||||
const resetAt = task.type === "daily"
|
||||
? getLatestDailyReset(now, task.dailyResetTime || data.resetTime)
|
||||
: getLatestWeeklyReset(now, data.resetTime, task.weeklyResetDay ?? data.weeklyResetDay);
|
||||
latestResetAt = Math.max(latestResetAt, resetAt);
|
||||
if (!task.checked || resetAt <= (task.checkedAt || data.lastResetAt)) return task;
|
||||
changed = true;
|
||||
return { ...task, checked: false, checkedAt: 0 };
|
||||
});
|
||||
|
||||
if (latestResetAt > data.lastResetAt) changed = true;
|
||||
return changed ? { ...data, lastResetAt: latestResetAt, tasks } : data;
|
||||
}
|
||||
|
||||
function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
|
||||
const nextTasks = [...tasks];
|
||||
const fromIndex = nextTasks.findIndex((task) => task.id === fromTaskId);
|
||||
const toIndex = nextTasks.findIndex((task) => task.id === toTaskId);
|
||||
if (fromIndex < 0 || toIndex < 0) return tasks;
|
||||
const [moved] = nextTasks.splice(fromIndex, 1);
|
||||
const targetIndex = nextTasks.findIndex((task) => task.id === toTaskId);
|
||||
nextTasks.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
|
||||
return nextTasks;
|
||||
}
|
||||
|
||||
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 getTaskTitle(tasks, taskId) {
|
||||
return tasks.find((task) => task.id === taskId)?.title || "Tâche supprimée";
|
||||
}
|
||||
|
||||
function getTaskParentId(taskId, relations, taskIds) {
|
||||
return relations.find((relation) => relation.fromTaskId === taskId && taskIds.has(relation.toTaskId))?.toTaskId || "";
|
||||
}
|
||||
|
||||
function getTaskParentMap(tasks, relations) {
|
||||
const taskIds = new Set(tasks.map((task) => task.id));
|
||||
const parentMap = new Map(tasks.map((task) => [task.id, getTaskParentId(task.id, relations, taskIds)]));
|
||||
tasks.forEach((task) => {
|
||||
const visited = new Set([task.id]);
|
||||
let parentId = parentMap.get(task.id);
|
||||
while (parentId) {
|
||||
if (visited.has(parentId)) {
|
||||
parentMap.set(task.id, "");
|
||||
return;
|
||||
}
|
||||
visited.add(parentId);
|
||||
parentId = parentMap.get(parentId);
|
||||
}
|
||||
});
|
||||
return parentMap;
|
||||
}
|
||||
|
||||
function getTasksForParent(tasks, parentMap, parentId) {
|
||||
return tasks.filter((task) => (parentMap.get(task.id) || "") === parentId);
|
||||
}
|
||||
|
||||
function getTaskCategory(task) {
|
||||
return String(task?.category || "").trim();
|
||||
}
|
||||
|
||||
function getTaskById(tasks, taskId) {
|
||||
return tasks.find((task) => task.id === taskId) || null;
|
||||
}
|
||||
|
||||
function getEffectiveTaskCategory(task, tasks, parentMap) {
|
||||
const parentId = parentMap.get(task?.id) || "";
|
||||
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
|
||||
return parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : getTaskCategory(task);
|
||||
}
|
||||
|
||||
function getTaskCategoryForParent(task, tasks, parentMap, parentId) {
|
||||
return parentId ? getEffectiveTaskCategory(task, tasks, parentMap) : getTaskCategory(task);
|
||||
}
|
||||
|
||||
function getTaskCategoryDataset(task, tasks, parentMap) {
|
||||
return getEffectiveTaskCategory(task, tasks, parentMap);
|
||||
}
|
||||
|
||||
function countTaskTree(taskIds, tasks, parentMap) {
|
||||
let count = 0;
|
||||
const visited = new Set();
|
||||
function visit(taskId) {
|
||||
if (visited.has(taskId)) return;
|
||||
visited.add(taskId);
|
||||
count += 1;
|
||||
tasks
|
||||
.filter((task) => (parentMap.get(task.id) || "") === taskId)
|
||||
.forEach((child) => visit(child.id));
|
||||
}
|
||||
taskIds.forEach(visit);
|
||||
return count;
|
||||
}
|
||||
|
||||
function getTaskTreeIds(taskIds, tasks, parentMap) {
|
||||
const ids = [];
|
||||
const visited = new Set();
|
||||
function visit(taskId) {
|
||||
if (visited.has(taskId)) return;
|
||||
visited.add(taskId);
|
||||
ids.push(taskId);
|
||||
tasks
|
||||
.filter((task) => (parentMap.get(task.id) || "") === taskId)
|
||||
.forEach((child) => visit(child.id));
|
||||
}
|
||||
taskIds.forEach(visit);
|
||||
return ids;
|
||||
}
|
||||
|
||||
function countCompletedTaskTree(taskIds, tasks, parentMap) {
|
||||
const taskIdsSet = new Set(getTaskTreeIds(taskIds, tasks, parentMap));
|
||||
return tasks.filter((task) => taskIdsSet.has(task.id) && task.checked).length;
|
||||
}
|
||||
|
||||
function isTaskTreeComplete(taskIds, tasks, parentMap) {
|
||||
const treeIds = getTaskTreeIds(taskIds, tasks, parentMap);
|
||||
return treeIds.length > 0 && treeIds.every((taskId) => getTaskById(tasks, taskId)?.checked);
|
||||
}
|
||||
|
||||
function getTaskCategoryGroups(tasks, parentMap, parentId, categoryOrder) {
|
||||
const siblings = getTasksForParent(tasks, parentMap, parentId);
|
||||
if (parentId) {
|
||||
return {
|
||||
entries: siblings.map((task) => ({ type: "task", task })),
|
||||
uncategorized: siblings,
|
||||
categories: []
|
||||
};
|
||||
}
|
||||
const categories = [];
|
||||
siblings.forEach((task) => {
|
||||
const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
|
||||
if (category && !categories.includes(category)) categories.push(category);
|
||||
});
|
||||
const orderedCategories = [
|
||||
...categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category) => !categoryOrder.includes(category))
|
||||
];
|
||||
const uncategorized = siblings.filter((task) => !getTaskCategoryForParent(task, tasks, parentMap, parentId));
|
||||
const categoryGroups = orderedCategories.map((category) => ({
|
||||
category,
|
||||
tasks: siblings.filter((task) => getTaskCategoryForParent(task, tasks, parentMap, parentId) === category)
|
||||
})).filter((group) => group.tasks.length);
|
||||
const renderedCategories = new Set();
|
||||
const entries = siblings.map((task) => {
|
||||
const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
|
||||
if (!category) return { type: "task", task };
|
||||
if (renderedCategories.has(category)) return null;
|
||||
renderedCategories.add(category);
|
||||
return { type: "category", group: categoryGroups.find((group) => group.category === category) };
|
||||
}).filter(Boolean);
|
||||
return {
|
||||
entries,
|
||||
uncategorized,
|
||||
categories: categoryGroups
|
||||
};
|
||||
}
|
||||
|
||||
function getRootTaskIdsForCategory(tasks, parentMap, category) {
|
||||
return tasks
|
||||
.filter((task) => !parentMap.get(task.id) && getTaskCategory(task) === category)
|
||||
.map((task) => task.id);
|
||||
}
|
||||
import { TaskPlannerBranch } from "./TaskPlannerItems.jsx";
|
||||
import {
|
||||
TASK_TYPES,
|
||||
WEEK_DAYS,
|
||||
applyDueResets,
|
||||
getBoundaryTaskId,
|
||||
getRootTaskIdsForCategory,
|
||||
getTaskCategory,
|
||||
getTaskCategoryDataset,
|
||||
getTaskParentMap,
|
||||
getTaskTypeLabel,
|
||||
moveTask
|
||||
} from "./taskPlannerUtils.js";
|
||||
|
||||
export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
||||
const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
|
||||
|
|
@ -581,505 +377,3 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskPlannerBranch({
|
||||
parentId,
|
||||
parentMap,
|
||||
tasks,
|
||||
data,
|
||||
reorder,
|
||||
textContent,
|
||||
openDescriptions,
|
||||
openTaskSettings,
|
||||
prerequisiteNoticeTaskIds,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
onUpdateTask,
|
||||
onDeleteTask,
|
||||
onAddLinkTarget,
|
||||
onRemoveLinkTarget,
|
||||
onSetPrerequisite,
|
||||
onSetTaskCategory,
|
||||
onToggleCategoryCollapsed,
|
||||
visited = new Set()
|
||||
}) {
|
||||
const groupedTasks = getTaskCategoryGroups(tasks, parentMap, parentId, data.categoryOrder);
|
||||
const children = [...groupedTasks.uncategorized, ...groupedTasks.categories.flatMap((group) => group.tasks)].filter((task) => !visited.has(task.id));
|
||||
if (!children.length) return null;
|
||||
const nextVisited = new Set([...visited, ...children.map((task) => task.id)]);
|
||||
const showCategoryBoundaryDropZones = !parentId && reorder.shouldShowGroupBoundaries({ parentId });
|
||||
|
||||
function hasVisibleDescendants(taskId, seen = new Set()) {
|
||||
if (seen.has(taskId)) return false;
|
||||
seen.add(taskId);
|
||||
return getTasksForParent(tasks, parentMap, taskId).some((child) => !child.checked || hasVisibleDescendants(child.id, seen));
|
||||
}
|
||||
|
||||
function renderTask(task) {
|
||||
const nestedChildren = getTasksForParent(tasks, parentMap, task.id).filter((child) => !nextVisited.has(child.id));
|
||||
const nestedBranch = nestedChildren.length ? (
|
||||
<TaskPlannerBranch
|
||||
parentId={task.id}
|
||||
parentMap={parentMap}
|
||||
tasks={tasks}
|
||||
data={data}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
openDescriptions={openDescriptions}
|
||||
openTaskSettings={openTaskSettings}
|
||||
prerequisiteNoticeTaskIds={prerequisiteNoticeTaskIds}
|
||||
onToggleDescription={onToggleDescription}
|
||||
onToggleSettings={onToggleSettings}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
onUpdateTask={onUpdateTask}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
onSetTaskCategory={onSetTaskCategory}
|
||||
onToggleCategoryCollapsed={onToggleCategoryCollapsed}
|
||||
visited={nextVisited}
|
||||
/>
|
||||
) : null;
|
||||
if (data.hideCompleted && task.checked) {
|
||||
if (!hasVisibleDescendants(task.id)) return null;
|
||||
return (
|
||||
<li className="task-planner-hidden-parent" key={`${task.id}:visible-children`}>
|
||||
<div className="task-planner-hidden-parent-line">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.checked}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => ({
|
||||
...current,
|
||||
checked: event.target.checked,
|
||||
checkedAt: event.target.checked ? Date.now() : 0
|
||||
}))}
|
||||
aria-label={`${textContent.uncheckTitle || "Marquer non effectué"} ${task.title}`}
|
||||
/>
|
||||
<span title={task.title}>{task.title}</span>
|
||||
<small>{getTaskTypeLabel(task.type, textContent)}</small>
|
||||
</div>
|
||||
<ul className="task-planner-list task-planner-child-list">{nestedBranch}</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TaskPlannerItem
|
||||
key={task.id}
|
||||
task={task}
|
||||
tasks={tasks}
|
||||
data={data}
|
||||
parentMap={parentMap}
|
||||
parentId={parentId}
|
||||
reorder={reorder}
|
||||
textContent={textContent}
|
||||
descriptionOpen={openDescriptions.has(task.id)}
|
||||
settingsOpen={openTaskSettings.has(task.id)}
|
||||
prerequisiteNoticeVisible={prerequisiteNoticeTaskIds.has(task.id)}
|
||||
onToggleDescription={() => onToggleDescription(task.id)}
|
||||
onToggleSettings={() => onToggleSettings(task.id)}
|
||||
onPrerequisiteNotice={onPrerequisiteNotice}
|
||||
onUpdateTask={onUpdateTask}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
onSetTaskCategory={onSetTaskCategory}
|
||||
>
|
||||
{nestedBranch}
|
||||
</TaskPlannerItem>
|
||||
);
|
||||
}
|
||||
|
||||
function renderCategory(group) {
|
||||
const groupTasks = group.tasks.filter((task) => !visited.has(task.id));
|
||||
if (!groupTasks.length) return null;
|
||||
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 isCollapsed = data.collapsedCategories.includes(group.category);
|
||||
const sectionClassName = [
|
||||
"task-planner-category-section",
|
||||
groupCompletedCount === groupCount ? "is-complete" : "",
|
||||
isCollapsed ? "is-collapsed" : "",
|
||||
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 ${reorder.isBoundaryDropTarget({ groupId: group.category, parentId, placement: "before" }) ? "is-drop-target" : ""}`}
|
||||
key={`${parentId || "root"}:${group.category}:before-drop`}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "before" })}
|
||||
/>
|
||||
) : null;
|
||||
const afterDropZone = showCategoryBoundaryDropZones ? (
|
||||
<li
|
||||
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`}
|
||||
{...reorder.getGroupBoundaryProps({ groupId: group.category, parentId, placement: "after" })}
|
||||
/>
|
||||
) : null;
|
||||
return [
|
||||
beforeDropZone,
|
||||
<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) => 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"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<h3>{group.category}</h3>
|
||||
</div>
|
||||
<div className="task-planner-category-actions">
|
||||
<span>{groupCompletedCount} / {groupCount}</span>
|
||||
<button
|
||||
className="checklist-section-collapse-button"
|
||||
type="button"
|
||||
onClick={() => onToggleCategoryCollapsed(group.category)}
|
||||
aria-expanded={!isCollapsed}
|
||||
title={isCollapsed ? textContent.showCategoryTitle || "Afficher cette catégorie" : textContent.hideCategoryTitle || "Réduire cette catégorie"}
|
||||
aria-label={isCollapsed ? textContent.showCategoryTitle || "Afficher cette catégorie" : textContent.hideCategoryTitle || "Réduire cette catégorie"}
|
||||
>
|
||||
<Icon name={isCollapsed ? "chevron-down" : "chevron-up"} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<ul className="task-planner-list">
|
||||
{groupTasks.map(renderTask).filter(Boolean)}
|
||||
</ul>
|
||||
)}
|
||||
</li>,
|
||||
afterDropZone
|
||||
];
|
||||
}
|
||||
|
||||
const entries = groupedTasks.entries.map((entry) => {
|
||||
if (entry.type === "task") return visited.has(entry.task.id) ? null : renderTask(entry.task);
|
||||
return renderCategory(entry.group);
|
||||
}).filter(Boolean);
|
||||
return entries;
|
||||
}
|
||||
|
||||
function TaskPlannerItem({
|
||||
task,
|
||||
tasks,
|
||||
data,
|
||||
parentMap,
|
||||
parentId,
|
||||
reorder,
|
||||
textContent,
|
||||
descriptionOpen,
|
||||
settingsOpen,
|
||||
prerequisiteNoticeVisible,
|
||||
onToggleDescription,
|
||||
onToggleSettings,
|
||||
onPrerequisiteNotice,
|
||||
onUpdateTask,
|
||||
onDeleteTask,
|
||||
onAddLinkTarget,
|
||||
onRemoveLinkTarget,
|
||||
onSetPrerequisite,
|
||||
onSetTaskCategory,
|
||||
children
|
||||
}) {
|
||||
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
|
||||
const inheritedCategory = parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : "";
|
||||
const categoryValue = parentTask ? inheritedCategory : task.category || "";
|
||||
const categoryEditable = !parentTask;
|
||||
const relations = data.relations.filter((relation) => relation.fromTaskId === task.id);
|
||||
const missingPrerequisites = relations.filter((relation) => relation.prerequisite && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
|
||||
const relationTargets = tasks.filter((item) => item.id !== task.id && !relations.some((relation) => relation.toTaskId === item.id));
|
||||
const noticeMessage = prerequisiteNoticeVisible && missingPrerequisites.length > 0 ? textContent.missingPrerequisiteNotice || "Pré requis parent non effectué" : "";
|
||||
const className = [
|
||||
"task-planner-item",
|
||||
task.checked ? "is-complete" : "",
|
||||
missingPrerequisites.length ? "has-missing-prerequisite" : "",
|
||||
reorder.isItemDragging(task.id) ? "is-dragging" : "",
|
||||
reorder.isItemDropTarget(task.id) ? "is-drop-target" : "",
|
||||
reorder.getDropPlacement("item", task.id) === "after" ? "drop-after" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const titleEdit = useInlineEdit({
|
||||
value: task.title,
|
||||
transform: (draft) => String(draft || "").trim() || task.title,
|
||||
onCommit: (title) => onUpdateTask(task.id, (current) => ({ ...current, title }))
|
||||
});
|
||||
const categoryEdit = useInlineEdit({
|
||||
value: categoryValue,
|
||||
onCommit: (category) => {
|
||||
if (categoryEditable) onSetTaskCategory(task.id, category);
|
||||
}
|
||||
});
|
||||
const descriptionEdit = useInlineEdit({
|
||||
value: task.description,
|
||||
onCommit: (description) => onUpdateTask(task.id, (current) => ({ ...current, description })),
|
||||
commitOnEnter: false
|
||||
});
|
||||
|
||||
function updateChecked(event) {
|
||||
const checked = event.target.checked;
|
||||
if (checked && missingPrerequisites.length > 0) onPrerequisiteNotice(task.id);
|
||||
onUpdateTask(task.id, (current) => ({
|
||||
...current,
|
||||
checked,
|
||||
checkedAt: checked ? Date.now() : 0
|
||||
}));
|
||||
}
|
||||
|
||||
return (
|
||||
<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) => reorder.itemReorder.startDrag(event, task.id)}
|
||||
aria-label={`${textContent.reorderTitle || "Déplacer"} ${task.title}`}
|
||||
title={textContent.reorderTitle || "Déplacer"}
|
||||
>
|
||||
<Icon name="drag" />
|
||||
</button>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.checked}
|
||||
onChange={updateChecked}
|
||||
aria-label={`${task.checked ? textContent.uncheckTitle || "Marquer non effectué" : textContent.checkTitle || "Marquer effectué"} ${task.title}`}
|
||||
/>
|
||||
<input
|
||||
{...titleEdit.getInputProps({
|
||||
className: "tool-split-entry-label task-planner-title-input",
|
||||
"aria-label": textContent.titleLabel || "Titre"
|
||||
})}
|
||||
/>
|
||||
<select
|
||||
className="task-planner-type-select"
|
||||
value={task.type}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextType = event.target.value;
|
||||
const nextTask = { ...current, type: nextType };
|
||||
if (nextType !== "weekly") delete nextTask.weeklyResetDay;
|
||||
if (nextType !== "daily") delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
aria-label={textContent.typeLabel || "Type"}
|
||||
>
|
||||
{TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
|
||||
</select>
|
||||
{missingPrerequisites.length > 0 && (
|
||||
<Tooltip
|
||||
className="task-planner-warning"
|
||||
content={<MissingPrerequisitesTooltip missingPrerequisites={missingPrerequisites} tasks={tasks} textContent={textContent} />}
|
||||
position="top-start"
|
||||
>
|
||||
{textContent.missingPrerequisiteBadge || "Pré requis"}
|
||||
</Tooltip>
|
||||
)}
|
||||
<div className="task-planner-actions">
|
||||
<button
|
||||
className={`task-planner-dropdown-button ${descriptionOpen ? "active" : ""}`}
|
||||
type="button"
|
||||
onClick={onToggleDescription}
|
||||
aria-expanded={descriptionOpen}
|
||||
aria-label={`${descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"} ${task.title}`}
|
||||
title={descriptionOpen ? textContent.hideDescriptionTitle || "Masquer la description" : textContent.showDescriptionTitle || "Afficher la description"}
|
||||
>
|
||||
<Icon name={descriptionOpen ? "chevron-up" : "chevron-down"} />
|
||||
</button>
|
||||
<button
|
||||
className={`task-planner-settings-button ${settingsOpen ? "active" : ""}`}
|
||||
type="button"
|
||||
onClick={onToggleSettings}
|
||||
aria-expanded={settingsOpen}
|
||||
aria-label={`${textContent.taskSettingsTitle || "Réglages de la tâche"} ${task.title}`}
|
||||
title={textContent.taskSettingsTitle || "Réglages de la tâche"}
|
||||
>
|
||||
<Icon name="settings" />
|
||||
</button>
|
||||
<button className="task-planner-delete-button danger" type="button" onClick={() => onDeleteTask(task.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${task.title}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<InlineNotice className="task-planner-notice" message={noticeMessage} />
|
||||
{descriptionOpen && (
|
||||
<div className="task-planner-description-panel">
|
||||
<label className={`task-planner-category-field ${categoryEditable ? "" : "is-disabled"}`}>
|
||||
<span>{textContent.categoryLabel || "Catégorie"}</span>
|
||||
<input
|
||||
{...categoryEdit.getInputProps({
|
||||
disabled: !categoryEditable,
|
||||
placeholder: textContent.categoryPlaceholder || "Nom de catégorie",
|
||||
"aria-label": `${textContent.categoryLabel || "Catégorie"} ${task.title}`
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<label className="task-planner-description-field">
|
||||
<span>{textContent.descriptionLabel || "Description"}</span>
|
||||
<textarea
|
||||
{...descriptionEdit.getInputProps({
|
||||
className: "task-planner-description",
|
||||
placeholder: textContent.descriptionPlaceholder || "Description",
|
||||
"aria-label": `${textContent.descriptionLabel || "Description"} ${task.title}`
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{settingsOpen && (
|
||||
<div className="task-planner-task-settings">
|
||||
<TaskResetSettings task={task} data={data} textContent={textContent} onUpdateTask={onUpdateTask} />
|
||||
<LinksEditor
|
||||
label={textContent.linksLabel || "Parent"}
|
||||
relations={relations}
|
||||
task={task}
|
||||
tasks={tasks}
|
||||
parentMap={parentMap}
|
||||
relationTargets={relationTargets}
|
||||
emptyLabel={textContent.emptyLinks || "Aucun parent"}
|
||||
addLabel={textContent.addLinkLabel || "Définir un parent"}
|
||||
removeLabel={textContent.removeRelationTitle || "Retirer"}
|
||||
prerequisiteLabel={textContent.prerequisiteCheckboxLabel || "Pré requis"}
|
||||
onAddLinkTarget={onAddLinkTarget}
|
||||
onRemoveLinkTarget={onRemoveLinkTarget}
|
||||
onSetPrerequisite={onSetPrerequisite}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{children && <ul className="task-planner-list task-planner-child-list">{children}</ul>}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function MissingPrerequisitesTooltip({ missingPrerequisites, tasks, textContent }) {
|
||||
return (
|
||||
<span className="task-planner-prerequisite-tooltip">
|
||||
<strong>{textContent.missingPrerequisiteTitle || "Pré requis non effectué"}</strong>
|
||||
<span>
|
||||
{missingPrerequisites.map((relation) => (
|
||||
<span key={relation.id}>{getTaskTitle(tasks, relation.toTaskId)}</span>
|
||||
))}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskResetSettings({ task, data, textContent, onUpdateTask }) {
|
||||
if (task.type === "daily") {
|
||||
const hasOverride = Boolean(task.dailyResetTime);
|
||||
return (
|
||||
<div className="task-planner-reset-override">
|
||||
<span>{textContent.taskDailyResetTimeLabel || "Heure quotidienne"}</span>
|
||||
<div className="task-planner-reset-control">
|
||||
<input
|
||||
type="time"
|
||||
value={task.dailyResetTime || data.resetTime}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
if (event.target.value && event.target.value !== data.resetTime) nextTask.dailyResetTime = event.target.value;
|
||||
else delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
aria-label={`${textContent.taskDailyResetTimeLabel || "Heure quotidienne"} ${task.title}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
delete nextTask.dailyResetTime;
|
||||
return nextTask;
|
||||
})}
|
||||
disabled={!hasOverride}
|
||||
title={textContent.inheritResetTime || "Utiliser l'heure globale"}
|
||||
aria-label={`${textContent.inheritResetTime || "Utiliser l'heure globale"} ${task.title}`}
|
||||
>
|
||||
<Icon name="rubber" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (task.type === "weekly") {
|
||||
return (
|
||||
<label className="task-planner-reset-override">
|
||||
<span>{textContent.taskWeeklyResetDayLabel || "Jour hebdo"}</span>
|
||||
<select
|
||||
value={task.weeklyResetDay ?? ""}
|
||||
onChange={(event) => onUpdateTask(task.id, (current) => {
|
||||
const nextTask = { ...current };
|
||||
if (event.target.value === "") {
|
||||
delete nextTask.weeklyResetDay;
|
||||
} else {
|
||||
nextTask.weeklyResetDay = Number(event.target.value);
|
||||
}
|
||||
return nextTask;
|
||||
})}
|
||||
>
|
||||
<option value="">{textContent.inheritWeeklyResetDay || "Global"}</option>
|
||||
{WEEK_DAYS.map((day) => <option key={day.value} value={day.value}>{day.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="task-planner-reset-override is-empty">
|
||||
<span>{textContent.taskResetLabel || "Réinitialisation"}</span>
|
||||
<p>{textContent.noTaskResetLabel || "Aucun reset"}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinksEditor({ label, relations, task, tasks, parentMap, relationTargets, emptyLabel, addLabel, removeLabel, prerequisiteLabel, onAddLinkTarget, onRemoveLinkTarget, onSetPrerequisite }) {
|
||||
const descendantIds = new Set();
|
||||
function collectDescendants(taskId) {
|
||||
tasks.filter((item) => parentMap.get(item.id) === taskId).forEach((child) => {
|
||||
descendantIds.add(child.id);
|
||||
collectDescendants(child.id);
|
||||
});
|
||||
}
|
||||
collectDescendants(task.id);
|
||||
const availableTargets = relationTargets.filter((target) => !descendantIds.has(target.id));
|
||||
|
||||
return (
|
||||
<div className="task-planner-relations">
|
||||
<span>{label}</span>
|
||||
<select
|
||||
value=""
|
||||
onChange={(event) => {
|
||||
onAddLinkTarget(task.id, event.target.value);
|
||||
event.target.value = "";
|
||||
}}
|
||||
aria-label={addLabel}
|
||||
>
|
||||
<option value="">{addLabel}</option>
|
||||
{availableTargets.map((target) => <option key={target.id} value={target.id}>{target.title}</option>)}
|
||||
</select>
|
||||
<div>
|
||||
{relations.length ? relations.map((relation) => (
|
||||
<div className="task-planner-relation-chip" key={relation.id}>
|
||||
<span>{getTaskTitle(tasks, relation.toTaskId)}</span>
|
||||
<label title={prerequisiteLabel}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={relation.prerequisite}
|
||||
onChange={(event) => onSetPrerequisite(task.id, relation.toTaskId, event.target.checked)}
|
||||
aria-label={`${prerequisiteLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}
|
||||
/>
|
||||
<span>{prerequisiteLabel}</span>
|
||||
</label>
|
||||
<button type="button" onClick={() => onRemoveLinkTarget(task.id, relation.toTaskId)} title={removeLabel} aria-label={`${removeLabel} ${getTaskTitle(tasks, relation.toTaskId)}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</div>
|
||||
)) : <em>{emptyLabel}</em>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
// Rôle : regroupe les options et helpers purs de l'outil equipment planner.
|
||||
export const SOCKET_SHAPES = ["ball", "jewel"];
|
||||
export const SOCKET_COLORS = ["red", "orange", "amber", "yellow", "lime", "green", "teal", "cyan", "blue", "indigo", "violet", "purple", "pink", "rose", "white", "gray", "black"];
|
||||
export const SOCKET_COLOR_VALUES = {
|
||||
red: "#ef4444",
|
||||
orange: "#f97316",
|
||||
amber: "#f59e0b",
|
||||
yellow: "var(--color-accent-gold)",
|
||||
lime: "#84cc16",
|
||||
green: "#22c55e",
|
||||
teal: "#14b8a6",
|
||||
cyan: "var(--color-accent-cyan)",
|
||||
blue: "#3b82f6",
|
||||
indigo: "var(--color-accent-indigo)",
|
||||
violet: "#7c3aed",
|
||||
purple: "var(--color-primary)",
|
||||
pink: "var(--color-accent-pink)",
|
||||
rose: "#f43f5e",
|
||||
white: "#f8fafc",
|
||||
gray: "#64748b",
|
||||
black: "#020617"
|
||||
};
|
||||
export const EQUIPMENT_ICONS = [
|
||||
{ icon: "helmet", label: "Casque" },
|
||||
{ icon: "chest-armor", label: "Chest" },
|
||||
{ icon: "glove", label: "Gants" },
|
||||
{ icon: "boot", label: "Bottes" },
|
||||
{ icon: "necklace", label: "Collier" },
|
||||
{ icon: "earring", label: "Earring" },
|
||||
{ icon: "ring", label: "Anneau" },
|
||||
{ icon: "sword", label: "Épée" },
|
||||
{ icon: "gun", label: "Gun" },
|
||||
{ icon: "shield", label: "Bouclier" }
|
||||
];
|
||||
export const TRAIT_ICONS = ["sword", "shield"];
|
||||
export const DETAIL_TABS = ["stats", "sockets", "craft"];
|
||||
|
||||
export function getCharacteristicCategories(equipment) {
|
||||
const categories = equipment.characteristics.map((trait) => trait.category).filter(Boolean);
|
||||
return [
|
||||
...equipment.categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category, index) => categories.indexOf(category) === index && !equipment.categoryOrder.includes(category))
|
||||
];
|
||||
}
|
||||
|
||||
export function setItemCategory(item, category) {
|
||||
const nextItem = { ...item };
|
||||
if (category) nextItem.category = category;
|
||||
else delete nextItem.category;
|
||||
return nextItem;
|
||||
}
|
||||
|
||||
export function formatValue(value) {
|
||||
if (typeof value === "number") return Number.isInteger(value) ? String(value) : String(Math.round(value * 1000) / 1000);
|
||||
return String(value || "");
|
||||
}
|
||||
|
||||
export function createLocalId(prefix) {
|
||||
return globalThis.crypto?.randomUUID?.() || `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
export function getSocketItemName(equipment, socketItemId) {
|
||||
return equipment.socketItems.find((socketItem) => socketItem.id === socketItemId)?.name || "";
|
||||
}
|
||||
214
website/src/features/toolboxes/modules/taskPlannerUtils.js
Normal file
214
website/src/features/toolboxes/modules/taskPlannerUtils.js
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
// Rôle : regroupe les constantes et helpers purs de l'outil task planner.
|
||||
export const TASK_TYPES = ["daily", "weekly", "unique"];
|
||||
export const WEEK_DAYS = [
|
||||
{ value: 1, label: "Lundi" },
|
||||
{ value: 2, label: "Mardi" },
|
||||
{ value: 3, label: "Mercredi" },
|
||||
{ value: 4, label: "Jeudi" },
|
||||
{ value: 5, label: "Vendredi" },
|
||||
{ value: 6, label: "Samedi" },
|
||||
{ value: 0, label: "Dimanche" }
|
||||
];
|
||||
|
||||
export function getTaskTypeLabel(type, textContent) {
|
||||
if (type === "daily") return textContent.dailyType || "Quotidienne";
|
||||
if (type === "weekly") return textContent.weeklyType || "Hebdomadaire";
|
||||
return textContent.uniqueType || "Ponctuelle";
|
||||
}
|
||||
|
||||
export function parseResetTime(value) {
|
||||
const [hours, minutes] = String(value || "00:00").split(":").map((part) => Number.parseInt(part, 10));
|
||||
return {
|
||||
hours: Number.isInteger(hours) ? Math.min(23, Math.max(0, hours)) : 0,
|
||||
minutes: Number.isInteger(minutes) ? Math.min(59, Math.max(0, minutes)) : 0
|
||||
};
|
||||
}
|
||||
|
||||
export function getLatestDailyReset(now, resetTime) {
|
||||
const { hours, minutes } = parseResetTime(resetTime);
|
||||
const reset = new Date(now);
|
||||
reset.setHours(hours, minutes, 0, 0);
|
||||
if (reset.getTime() > now) reset.setDate(reset.getDate() - 1);
|
||||
return reset.getTime();
|
||||
}
|
||||
|
||||
export function getLatestWeeklyReset(now, resetTime, weekDay) {
|
||||
const { hours, minutes } = parseResetTime(resetTime);
|
||||
const reset = new Date(now);
|
||||
reset.setHours(hours, minutes, 0, 0);
|
||||
const dayDiff = (reset.getDay() - weekDay + 7) % 7;
|
||||
reset.setDate(reset.getDate() - dayDiff);
|
||||
if (reset.getTime() > now) reset.setDate(reset.getDate() - 7);
|
||||
return reset.getTime();
|
||||
}
|
||||
|
||||
export function applyDueResets(data, now = Date.now()) {
|
||||
let latestResetAt = data.lastResetAt;
|
||||
let changed = false;
|
||||
const tasks = data.tasks.map((task) => {
|
||||
if (task.type === "unique") return task;
|
||||
const resetAt = task.type === "daily"
|
||||
? getLatestDailyReset(now, task.dailyResetTime || data.resetTime)
|
||||
: getLatestWeeklyReset(now, data.resetTime, task.weeklyResetDay ?? data.weeklyResetDay);
|
||||
latestResetAt = Math.max(latestResetAt, resetAt);
|
||||
if (!task.checked || resetAt <= (task.checkedAt || data.lastResetAt)) return task;
|
||||
changed = true;
|
||||
return { ...task, checked: false, checkedAt: 0 };
|
||||
});
|
||||
|
||||
if (latestResetAt > data.lastResetAt) changed = true;
|
||||
return changed ? { ...data, lastResetAt: latestResetAt, tasks } : data;
|
||||
}
|
||||
|
||||
export function moveTask(tasks, fromTaskId, toTaskId, placement = "before") {
|
||||
const nextTasks = [...tasks];
|
||||
const fromIndex = nextTasks.findIndex((task) => task.id === fromTaskId);
|
||||
const toIndex = nextTasks.findIndex((task) => task.id === toTaskId);
|
||||
if (fromIndex < 0 || toIndex < 0) return tasks;
|
||||
const [moved] = nextTasks.splice(fromIndex, 1);
|
||||
const targetIndex = nextTasks.findIndex((task) => task.id === toTaskId);
|
||||
nextTasks.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
|
||||
return nextTasks;
|
||||
}
|
||||
|
||||
export 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 || "";
|
||||
}
|
||||
|
||||
export function getTaskTitle(tasks, taskId) {
|
||||
return tasks.find((task) => task.id === taskId)?.title || "Tâche supprimée";
|
||||
}
|
||||
|
||||
export function getTaskParentId(taskId, relations, taskIds) {
|
||||
return relations.find((relation) => relation.fromTaskId === taskId && taskIds.has(relation.toTaskId))?.toTaskId || "";
|
||||
}
|
||||
|
||||
export function getTaskParentMap(tasks, relations) {
|
||||
const taskIds = new Set(tasks.map((task) => task.id));
|
||||
const parentMap = new Map(tasks.map((task) => [task.id, getTaskParentId(task.id, relations, taskIds)]));
|
||||
tasks.forEach((task) => {
|
||||
const visited = new Set([task.id]);
|
||||
let parentId = parentMap.get(task.id);
|
||||
while (parentId) {
|
||||
if (visited.has(parentId)) {
|
||||
parentMap.set(task.id, "");
|
||||
return;
|
||||
}
|
||||
visited.add(parentId);
|
||||
parentId = parentMap.get(parentId);
|
||||
}
|
||||
});
|
||||
return parentMap;
|
||||
}
|
||||
|
||||
export function getTasksForParent(tasks, parentMap, parentId) {
|
||||
return tasks.filter((task) => (parentMap.get(task.id) || "") === parentId);
|
||||
}
|
||||
|
||||
export function getTaskCategory(task) {
|
||||
return String(task?.category || "").trim();
|
||||
}
|
||||
|
||||
export function getTaskById(tasks, taskId) {
|
||||
return tasks.find((task) => task.id === taskId) || null;
|
||||
}
|
||||
|
||||
export function getEffectiveTaskCategory(task, tasks, parentMap) {
|
||||
const parentId = parentMap.get(task?.id) || "";
|
||||
const parentTask = parentId ? getTaskById(tasks, parentId) : null;
|
||||
return parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : getTaskCategory(task);
|
||||
}
|
||||
|
||||
export function getTaskCategoryForParent(task, tasks, parentMap, parentId) {
|
||||
return parentId ? getEffectiveTaskCategory(task, tasks, parentMap) : getTaskCategory(task);
|
||||
}
|
||||
|
||||
export function getTaskCategoryDataset(task, tasks, parentMap) {
|
||||
return getEffectiveTaskCategory(task, tasks, parentMap);
|
||||
}
|
||||
|
||||
export function countTaskTree(taskIds, tasks, parentMap) {
|
||||
let count = 0;
|
||||
const visited = new Set();
|
||||
function visit(taskId) {
|
||||
if (visited.has(taskId)) return;
|
||||
visited.add(taskId);
|
||||
count += 1;
|
||||
tasks
|
||||
.filter((task) => (parentMap.get(task.id) || "") === taskId)
|
||||
.forEach((child) => visit(child.id));
|
||||
}
|
||||
taskIds.forEach(visit);
|
||||
return count;
|
||||
}
|
||||
|
||||
export function getTaskTreeIds(taskIds, tasks, parentMap) {
|
||||
const ids = [];
|
||||
const visited = new Set();
|
||||
function visit(taskId) {
|
||||
if (visited.has(taskId)) return;
|
||||
visited.add(taskId);
|
||||
ids.push(taskId);
|
||||
tasks
|
||||
.filter((task) => (parentMap.get(task.id) || "") === taskId)
|
||||
.forEach((child) => visit(child.id));
|
||||
}
|
||||
taskIds.forEach(visit);
|
||||
return ids;
|
||||
}
|
||||
|
||||
export function countCompletedTaskTree(taskIds, tasks, parentMap) {
|
||||
const taskIdsSet = new Set(getTaskTreeIds(taskIds, tasks, parentMap));
|
||||
return tasks.filter((task) => taskIdsSet.has(task.id) && task.checked).length;
|
||||
}
|
||||
|
||||
export function isTaskTreeComplete(taskIds, tasks, parentMap) {
|
||||
const treeIds = getTaskTreeIds(taskIds, tasks, parentMap);
|
||||
return treeIds.length > 0 && treeIds.every((taskId) => getTaskById(tasks, taskId)?.checked);
|
||||
}
|
||||
|
||||
export function getTaskCategoryGroups(tasks, parentMap, parentId, categoryOrder) {
|
||||
const siblings = getTasksForParent(tasks, parentMap, parentId);
|
||||
if (parentId) {
|
||||
return {
|
||||
entries: siblings.map((task) => ({ type: "task", task })),
|
||||
uncategorized: siblings,
|
||||
categories: []
|
||||
};
|
||||
}
|
||||
const categories = [];
|
||||
siblings.forEach((task) => {
|
||||
const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
|
||||
if (category && !categories.includes(category)) categories.push(category);
|
||||
});
|
||||
const orderedCategories = [
|
||||
...categoryOrder.filter((category) => categories.includes(category)),
|
||||
...categories.filter((category) => !categoryOrder.includes(category))
|
||||
];
|
||||
const uncategorized = siblings.filter((task) => !getTaskCategoryForParent(task, tasks, parentMap, parentId));
|
||||
const categoryGroups = orderedCategories.map((category) => ({
|
||||
category,
|
||||
tasks: siblings.filter((task) => getTaskCategoryForParent(task, tasks, parentMap, parentId) === category)
|
||||
})).filter((group) => group.tasks.length);
|
||||
const renderedCategories = new Set();
|
||||
const entries = siblings.map((task) => {
|
||||
const category = getTaskCategoryForParent(task, tasks, parentMap, parentId);
|
||||
if (!category) return { type: "task", task };
|
||||
if (renderedCategories.has(category)) return null;
|
||||
renderedCategories.add(category);
|
||||
return { type: "category", group: categoryGroups.find((group) => group.category === category) };
|
||||
}).filter(Boolean);
|
||||
return {
|
||||
entries,
|
||||
uncategorized,
|
||||
categories: categoryGroups
|
||||
};
|
||||
}
|
||||
|
||||
export function getRootTaskIdsForCategory(tasks, parentMap, category) {
|
||||
return tasks
|
||||
.filter((task) => !parentMap.get(task.id) && getTaskCategory(task) === category)
|
||||
.map((task) => task.id);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue