add categories to task planner

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

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