Merge pull request #4060 from Northeastern-Electric-Racing/#4020-improved-task-dragging

#4020 improved task dragging

Author: chpy04

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -13,16 +13,22 @@ export const TaskColumn = ({
   status,
   tasks,
   project,
+  equalizedHeight,
+  isDragging,
   onEditTask,
   onDeleteTask,
-  onAddTask
+  onAddTask,
+  onHeightChange
 }: {
-  status: Task['status'];
+  status: TaskStatus;
   tasks: TaskWithIndex[];
   project: Project;
+  equalizedHeight: number;
+  isDragging: boolean;
   onEditTask: (task: Task) => void;
   onDeleteTask: (taskId: string) => void;
   onAddTask: (task: Task) => void;
+  onHeightChange: (status: TaskStatus, height: number) => void;
 }) => {
   const { mutateAsync: createTask } = useCreateTask();
   const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
@@ -62,27 +68,51 @@ export const TaskColumn = ({
       <Box
         sx={{
           flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
           paddingTop: '8px',
           paddingBottom: '16px',
           backgroundColor: theme.palette.background.paper,
           marginLeft: '5px',
-          borderRadius: '5px'
+          borderRadius: '5px',
+          minHeight: isDragging ? `${equalizedHeight}px` : undefined
         }}
       >
         <Typography align="center" variant="h5">
           {statusNames[status]}
         </Typography>
+        <NERButton
+          sx={{
+            marginTop: '5px',
+            backgroundColor: theme.palette.secondary.contrastText,
+            width: 'calc(100% - 10px)',
+            marginX: '5px'
+          }}
+          onClick={() => setShowCreateTaskModal(true)}
+        >
+          + Add A Task
+        </NERButton>
         <Droppable droppableId={status}>
           {(droppableProvided, snapshot) => (
             <Box
-              ref={droppableProvided.innerRef}
+              ref={(droppableBox: HTMLElement | null) => {
+                droppableProvided.innerRef(droppableBox); // give dnd lib access to dom node
+                if (!droppableBox) return;
+
+                const observer = new ResizeObserver(() => {
+                  onHeightChange(status, droppableBox.scrollHeight);
+                });
+                observer.observe(droppableBox);
+                return () => observer.disconnect();
+              }}
               {...droppableProvided.droppableProps}
               className={snapshot.isDraggingOver ? ' isDraggingOver' : ''}
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
                 borderRadius: 5,
                 padding: '5px',
+                flex: 1,
                 '&.isDraggingOver': {
                   bgcolor: '#dadadf'
                 }
@@ -102,17 +132,6 @@ export const TaskColumn = ({
             </Box>
           )}
         </Droppable>
-        <NERButton
-          sx={{
-            marginTop: '5px',
-            backgroundColor: theme.palette.secondary.contrastText,
-            width: 'calc(100% - 10px)',
-            marginX: '5px'
-          }}
-          onClick={() => setShowCreateTaskModal(true)}
-        >
-          + Add A Task
-        </NERButton>
       </Box>
     </>
   );

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskListContent.tsx

@@ -1,7 +1,7 @@
-import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd';
+import { DragDropContext, OnDragEndResponder, OnDragStartResponder } from '@hello-pangea/dnd';
 import { Box } from '@mui/material';
-import { useState } from 'react';
-import { Project, Task, TaskWithIndex } from 'shared';
+import { useCallback, useState } from 'react';
+import { Project, Task, TaskStatus, TaskWithIndex } from 'shared';
 import { getTasksByStatus, statuses, TasksByStatus } from '.';
 import { useSetTaskStatus } from '../../../../../hooks/tasks.hooks';
 import { useToast } from '../../../../../hooks/toasts.hooks';
@@ -19,6 +19,14 @@ export const TaskListContent = ({ project }: TaskListProps) => {
 
   const toast = useToast();
 
+  const [isDragging, setIsDragging] = useState(false);
+  const [columnHeights, setColumnHeights] = useState<Partial<Record<TaskStatus, number>>>({});
+  const equalizedHeight = Math.max(...(Object.values(columnHeights) as number[]));
+
+  const onHeightChange = useCallback((status: TaskStatus, height: number) => {
+    setColumnHeights((prev) => ({ ...prev, [status]: height }));
+  }, []);
+
   const onDeleteTask = (taskId: string) => {
     setTasksByStatus((prev) => {
       const newTasksByStatus = { ...prev };
@@ -54,7 +62,12 @@ export const TaskListContent = ({ project }: TaskListProps) => {
     }));
   };
 
+  const onDragStart: OnDragStartResponder = () => {
+    setIsDragging(true);
+  };
+
   const onDragEnd: OnDragEndResponder = async (result) => {
+    setIsDragging(false);
     const { destination, source } = result;
 
     if (!destination) {
@@ -110,17 +123,20 @@ export const TaskListContent = ({ project }: TaskListProps) => {
   };
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
+    <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
       <Box display="flex">
         {statuses.map((status) => (
           <TaskColumn
             onAddTask={onAddTask}
             onDeleteTask={onDeleteTask}
             onEditTask={onEditTask}
+            onHeightChange={onHeightChange}
             status={status}
             tasks={tasksByStatus[status]}
             key={status}
             project={project}
+            equalizedHeight={equalizedHeight}
+            isDragging={isDragging}
           />
         ))}
       </Box>