Add task drag-and-drop reordering

SachaProbo · SachaProbo · commit 964f45f736d0 · 2026-03-26T20:04:36.000+01:00
Order tasks by priority (ASC) by default. Enable drag-and-drop
on the TODO and DONE tabs using native HTML5 drag events,
following the compliance external URLs pattern. The "All" tab
remains read-only since priority is scoped per state.

Signed-off-by: Sacha Al Himdani &lt;sacha@getprobo.com&gt;
diff --git a/apps/console/src/components/tasks/TasksCard.tsx b/apps/console/src/components/tasks/TasksCard.tsx
@@ -1,4 +1,4 @@
-import { formatDate, formatDuration, promisifyMutation } from "@probo/helpers";
+import { formatDate, formatDuration, formatError, promisifyMutation } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
 import {
@@ -16,8 +16,9 @@ import {
   TaskStateIcon,
   useConfirm,
   useDialogRef,
+  useToast,
 } from "@probo/ui";
-import { Fragment } from "react";
+import { Fragment, useState, useTransition } from "react";
 import {
   graphql,
   useFragment,
@@ -46,11 +47,31 @@ type Props = {
       { __typename: "Measure" }
     >["tasks"]["edges"];
   connectionId: string;
+  canReorder?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  refetch?: (...args: any[]) => void;
 };
 
-export function TasksCard({ tasks, connectionId }: Props) {
+const updatePriorityMutation = graphql`
+  mutation TasksCardUpdatePriorityMutation($input: UpdateTaskInput!) {
+    updateTask(input: $input) {
+      task {
+        id
+        priority
+      }
+    }
+  }
+`;
+
+export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
   const { __ } = useTranslate();
   const hash = useLocation().hash.replace("#", "");
+  const [, startTransition] = useTransition();
+
+  const { toast } = useToast();
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [previewOrder, setPreviewOrder] = useState<string[] | null>(null);
+  const [updatePriority] = useMutation<TaskFormDialogUpdateMutation>(updatePriorityMutation);
 
   const hashes = [
     { hash: "", label: __("To do"), state: "TODO" },
@@ -65,6 +86,95 @@ export function TasksCard({ tasks, connectionId }: Props) {
   ]);
 
   const filteredTasks = tasksPerHash.get(hash) ?? [];
+  const canDrag = !!canReorder && hash !== "all";
+
+  const handleDragOver = (e: React.DragEvent, hoveredId: string) => {
+    e.preventDefault();
+    if (draggedId === null || hoveredId === draggedId) return;
+    const ids = filteredTasks.map(({ node }) => node.id);
+    const fromIdx = ids.indexOf(draggedId);
+    if (fromIdx === -1) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    const insertBefore = e.clientY < midY;
+    const hoverIdx = ids.indexOf(hoveredId);
+    let targetIdx = insertBefore ? hoverIdx : hoverIdx + 1;
+    if (targetIdx > fromIdx) targetIdx--;
+    if (targetIdx === fromIdx) {
+      setPreviewOrder(null);
+      return;
+    }
+    const reordered = [...ids];
+    reordered.splice(fromIdx, 1);
+    reordered.splice(targetIdx, 0, draggedId);
+    setPreviewOrder(reordered);
+  };
+
+  const handleDrop = async () => {
+    if (draggedId === null || previewOrder === null) {
+      setDraggedId(null);
+      return;
+    }
+
+    const newIdx = previewOrder.indexOf(draggedId);
+
+    // Find the priority of the task currently at the position we want
+    const originalIds = filteredTasks.map(({ node }) => node.id);
+    const originalIdx = originalIds.indexOf(draggedId);
+    let targetOriginalIdx = newIdx;
+    if (targetOriginalIdx >= originalIdx) targetOriginalIdx++;
+    if (targetOriginalIdx >= filteredTasks.length) targetOriginalIdx = filteredTasks.length - 1;
+    const targetPriority = filteredTasks[targetOriginalIdx].node.priority;
+
+    setDraggedId(null);
+
+    await promisifyMutation(updatePriority)({
+      variables: {
+        input: {
+          taskId: draggedId,
+          priority: targetPriority,
+        },
+      },
+      onCompleted: (_, errors) => {
+        if (errors?.length) {
+          toast({
+            title: __("Error"),
+            description: formatError(
+              __("Failed to reorder task."),
+              errors,
+            ),
+            variant: "destructive",
+          });
+        }
+        if (refetch) {
+          startTransition(() => {
+            refetch(
+              {},
+              { fetchPolicy: errors?.length ? "network-only" : "store-and-network" },
+            );
+          });
+        }
+      },
+      onError: () => {
+        toast({
+          title: __("Error"),
+          description: __("Failed to reorder task."),
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  const displayTasks = (() => {
+    if (!previewOrder) return filteredTasks;
+    const byId = new Map(filteredTasks.map(edge => [edge.node.id, edge]));
+    const currentIdSet = new Set(byId.keys());
+    const previewIdSet = new Set(previewOrder);
+    if (currentIdSet.size !== previewIdSet.size || [...currentIdSet].some(id => !previewIdSet.has(id))) {
+      return filteredTasks;
+    }
+    return previewOrder.map(id => byId.get(id)!);
+  })();
 
   usePageTitle(__("Tasks"));
 
@@ -108,23 +218,42 @@ export function TasksCard({ tasks, connectionId }: Props) {
                         </Fragment>
                       ))
                   // Todo and Done tab simply list todos
-                  : filteredTasks?.map(({ node: task }) => (
+                  : displayTasks.map(({ node: task }) => (
                       <TaskRow
                         key={task.id}
                         fKey={task}
                         connectionId={connectionId}
+                        canDrag={canDrag}
+                        isDragging={draggedId === task.id}
+                        isGhost={previewOrder !== null && draggedId === task.id}
+                        onDragStart={() => setDraggedId(task.id)}
+                        onDragOver={e => handleDragOver(e, task.id)}
+                        onDrop={() => void handleDrop()}
+                        onDragEnd={() => setDraggedId(null)}
                       />
                     ))}
               </div>
             </Card>
           )}
+      {canDrag && filteredTasks.length > 1 && (
+        <p className="text-sm text-txt-tertiary">
+          {__("Drag and drop to reorder tasks")}
+        </p>
+      )}
     </div>
   );
 }
 
 type TaskRowProps = {
   fKey: TasksCard_TaskRowFragment$key | TaskFormDialogFragment$key;
   connectionId: string;
+  canDrag?: boolean;
+  isDragging?: boolean;
+  isGhost?: boolean;
+  onDragStart?: () => void;
+  onDragOver?: (e: React.DragEvent) => void;
+  onDrop?: () => void;
+  onDragEnd?: () => void;
 };
 
 const fragment = graphql`
@@ -175,6 +304,8 @@ function TaskRow(props: TaskRowProps) {
     );
   const [updateTask, isUpdating] = useMutation<TaskFormDialogUpdateMutation>(taskUpdateMutation);
 
+  const [isMouseDown, setIsMouseDown] = useState(false);
+
   const onToggle = async () => {
     await promisifyMutation(updateTask)({
       variables: {
@@ -211,13 +342,37 @@ function TaskRow(props: TaskRowProps) {
     );
   };
 
+  const canDrag = props.canDrag;
+  const isDragging = props.isDragging;
+  const isGhost = props.isGhost;
+
+  const className = [
+    "transition-all duration-150",
+    canDrag && isDragging && !isGhost && "opacity-40 cursor-grabbing",
+    canDrag && !isDragging && !isMouseDown && "cursor-grab",
+    canDrag && !isDragging && isMouseDown && "cursor-grabbing",
+    isGhost && "opacity-50 bg-primary-50",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
     <>
       <TaskFormDialog
         task={props.fKey as TaskFormDialogFragment$key}
         ref={dialogRef}
       />
-      <div className="flex items-center justify-between py-3 px-6">
+      <div
+        className={`flex items-center justify-between py-3 px-6 ${className}`}
+        draggable={canDrag}
+        onDragStart={canDrag ? props.onDragStart : undefined}
+        onDragOver={canDrag ? props.onDragOver : undefined}
+        onDrop={canDrag ? props.onDrop : undefined}
+        onDragEnd={canDrag ? props.onDragEnd : undefined}
+        onMouseDown={canDrag ? () => setIsMouseDown(true) : undefined}
+        onMouseUp={canDrag ? () => setIsMouseDown(false) : undefined}
+        onMouseLeave={canDrag ? () => setIsMouseDown(false) : undefined}
+      >
         <div className="flex gap-2 items-start">
           <div className="flex items-center gap-2 pt-[2px]">
             <PriorityLevel level={1} />
diff --git a/apps/console/src/pages/organizations/measures/tabs/MeasureTasksTab.tsx b/apps/console/src/pages/organizations/measures/tabs/MeasureTasksTab.tsx
@@ -15,7 +15,7 @@ const tasksQuery = graphql`
       ... on Measure {
         id
         canCreateTask: permission(action: "core:task:create")
-        tasks(first: 100)
+        tasks(first: 100, orderBy: { field: PRIORITY, direction: ASC })
           @connection(key: "Measure__tasks")
           @required(action: THROW) {
           __id
@@ -24,6 +24,8 @@ const tasksQuery = graphql`
               id
               # eslint-disable-next-line relay/unused-fields
               state
+              # eslint-disable-next-line relay/unused-fields
+              priority
               ...TaskFormDialogFragment
               ...TasksCard_TaskRowFragment
             }
diff --git a/apps/console/src/pages/organizations/tasks/TasksPage.tsx b/apps/console/src/pages/organizations/tasks/TasksPage.tsx
@@ -20,12 +20,13 @@ const tasksFragment = graphql`
   @refetchable(queryName: "TasksPageFragment_query")
   @argumentDefinitions(
     first: { type: "Int", defaultValue: 500 }
-    order: { type: "TaskOrder", defaultValue: null }
+    order: { type: "TaskOrder", defaultValue: { field: PRIORITY, direction: ASC } }
     after: { type: "CursorKey", defaultValue: null }
     before: { type: "CursorKey", defaultValue: null }
     last: { type: "Int", defaultValue: null }
   ) {
     canCreateTask: permission(action: "core:task:create")
+    canUpdateTask: permission(action: "core:task:update")
     tasks(
       first: $first
       after: $after
@@ -41,6 +42,8 @@ const tasksFragment = graphql`
           id
           # eslint-disable-next-line relay/unused-fields
           state
+          # eslint-disable-next-line relay/unused-fields
+          priority
           ...TaskFormDialogFragment
           ...TasksCard_TaskRowFragment
         }
@@ -56,7 +59,7 @@ interface Props {
 export default function TasksPage({ queryRef }: Props) {
   const { __ } = useTranslate();
   const query = usePreloadedQuery(tasksQuery, queryRef);
-  const [data] = useRefetchableFragment<TasksPageFragment_query, TasksPageFragment$key>(
+  const [data, refetch] = useRefetchableFragment<TasksPageFragment_query, TasksPageFragment$key>(
     tasksFragment,
     query.organization as TasksPageFragment$key,
   );
@@ -77,7 +80,12 @@ export default function TasksPage({ queryRef }: Props) {
           </TaskFormDialog>
         )}
       </PageHeader>
-      <TasksCard connectionId={connectionId} tasks={data.tasks.edges} />
+      <TasksCard
+        connectionId={connectionId}
+        tasks={data.tasks.edges}
+        canReorder={data.canUpdateTask}
+        refetch={refetch}
+      />
     </div>
   );
 }
