Make Column undruggable

frontend/src/components/kanbanBoard/columnContainer.jsx

@@ -1,53 +1,31 @@
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { BsFillTrashFill } from "react-icons/bs";
 import { AiOutlinePlusCircle } from "react-icons/ai";
-import { CSS } from "@dnd-kit/utilities";
+import { useMemo } from "react";
-import { useMemo, useState } from "react";
 import { TaskCard } from "./taskCard";
 
-export function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
+export function ColumnContainer({ column, createTask, tasks, deleteTask, updateTask }) {
-  const [editMode, setEditMode] = useState(false);
-
   const tasksIds = useMemo(() => {
     return tasks.map((task) => task.id);
   }, [tasks]);
 
-  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+  const {
+    setNodeRef: columnNodeRef,
+    attributes: columnAttributes,
+    listeners: columnListeners,
+  } = useSortable({
     id: column.id,
     data: {
       type: "Column",
       column,
     },
-    disabled: editMode,
+    disabled: true, // Disable drag for the entire column
   });
 
-  const style = {
-    transition,
-    transform: CSS.Transform.toString(transform),
-  };
-
-  if (isDragging) {
-    return (
-      <div
-        ref={setNodeRef}
-        style={style}
-        className="
-      opacity-40
-      border-2
-      border-blue-500
-      w-[350px]
-      max-h-[400px]
-      rounded-md
-      flex
-      flex-col
-      "></div>
-    );
-  }
-
   return (
     <div
-      ref={setNodeRef}
+      ref={columnNodeRef}
-      style={style}
+      {...columnAttributes}
+      {...columnListeners}
       className="
   bg-[#f1f2f4]
   w-[280px]
@@ -58,62 +36,33 @@ export function ColumnContainer({ column, deleteColumn, updateColumn, createTask
   ">
       {/* Column title */}
       <div
-        {...attributes}
-        {...listeners}
-        onClick={() => {
-          setEditMode(true);
-        }}
         className="
       ml-3
       text-md
-      cursor-grab
       font-bold
       flex
       items-center
       justify-between
       ">
-        <div className="flex gap-2">
+        <div className="flex gap-2">{column.title}</div>
-          {!editMode && column.title}
-          {editMode && (
-            <input
-              className="bg-gray-200 focus:border-blue-500 border rounded-md outline-none px-2"
-              value={column.title}
-              onChange={(e) => updateColumn(column.id, e.target.value)}
-              autoFocus
-              onBlur={() => {
-                setEditMode(false);
-              }}
-              onKeyDown={(e) => {
-                if (e.key !== "Enter") return;
-                setEditMode(false);
-              }}
-            />
-          )}
-        </div>
-        <button
-          onClick={() => {
-            deleteColumn(column.id);
-          }}
-          className="
-        stroke-gray-500
-        hover:stroke-white
-        hover:bg-columnBackgroundColor
-        rounded
-        px-1
-        py-2
-        ">
-          <BsFillTrashFill />
-        </button>
       </div>
 
       {/* Column task container */}
       <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
         <SortableContext items={tasksIds}>
           {tasks.map((task) => (
-            <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
+            <TaskCard
+              key={task.id}
+              task={task}
+              deleteTask={deleteTask}
+              updateTask={updateTask}
+              // Adjust the useSortable hook for tasks
+              useSortable={(props) => useSortable({ ...props, disabled: false })}
+            />
           ))}
         </SortableContext>
       </div>
+
       {/* Column footer */}
       <button
         className="flex gap-2 items-center rounded-md p-2 my-2 hover:bg-zinc-200 active:bg-zinc-400"

frontend/src/components/kanbanBoard/columnContainerWrapper.jsx

@@ -1,12 +1,10 @@
 import { ColumnContainer } from "./columnContainer";
 
-export function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
+export function ColumnContainerCard({ column, createTask, tasks, deleteTask, updateTask }) {
   return (
-    <div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
+    <div className="card bg-[#f1f2f4] shadow border p-1 my-2">
       <ColumnContainer
         column={column}
-        deleteColumn={deleteColumn}
-        updateColumn={updateColumn}
         createTask={createTask}
         tasks={tasks}
         deleteTask={deleteTask}

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -10,7 +10,7 @@ export function KanbanBoard() {
   const [columns, setColumns] = useState([]);
   const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
   const [boardId, setBoardData] = useState();
-
+  const [isLoading, setLoading] = useState(false);
   const [tasks, setTasks] = useState([]);
 
   const [activeColumn, setActiveColumn] = useState(null);
@@ -74,13 +74,16 @@ export function KanbanBoard() {
   useEffect(() => {
     const fetchBoardData = async () => {
       try {
+        setLoading(true);
         const response = await axiosInstance.get("boards/");
         if (response.data && response.data.length > 0) {
           setBoardData(response.data[0]);
         }
       } catch (error) {
         console.error("Error fetching board data:", error);
+        setLoading(false);
       }
+      setLoading(false);
     };
     fetchBoardData();
   }, []);
@@ -92,26 +95,29 @@ export function KanbanBoard() {
       flex
       w-full
       items-center
+      justify-center
       overflow-x-auto
       overflow-y-hidden
   ">
       <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
-        <div className="ml-2 flex gap-4">
+        <div className="flex gap-4">
           <div className="flex gap-4">
-            <SortableContext items={columnsId}>
+            {!isLoading ? (
-              {columns.map((col) => (
+              <SortableContext items={columnsId}>
-                <ColumnContainerCard
+                {columns.map((col) => (
-                  key={col.id}
+                  <ColumnContainerCard
-                  column={col}
+                    key={col.id}
-                  deleteColumn={deleteColumn}
+                    column={col}
-                  updateColumn={updateColumn}
+                    createTask={createTask}
-                  createTask={createTask}
+                    deleteTask={deleteTask}
-                  deleteTask={deleteTask}
+                    updateTask={updateTask}
-                  updateTask={updateTask}
+                    tasks={tasks.filter((task) => task.columnId === col.id)}
-                  tasks={tasks.filter((task) => task.columnId === col.id)}
+                  />
-                />
+                ))}{" "}
-              ))}
+              </SortableContext>
-            </SortableContext>
+            ) : (
+              <span className="loading loading-dots loading-lg"></span>
+            )}
           </div>
         </div>
 
@@ -120,8 +126,6 @@ export function KanbanBoard() {
             {activeColumn && (
               <ColumnContainerCard
                 column={activeColumn}
-                deleteColumn={deleteColumn}
-                updateColumn={updateColumn}
                 createTask={createTask}
                 deleteTask={deleteTask}
                 updateTask={updateTask}
@@ -187,58 +191,6 @@ export function KanbanBoard() {
     setTasks(newTasks);
   }
 
-  function createNewColumn() {
-    axiosInstance
-      .post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
-      .then((response) => {
-        const newColumn = {
-          id: response.data.id,
-          title: response.data.name,
-        };
-
-        setColumns((prevColumns) => [...prevColumns, newColumn]);
-      })
-      .catch((error) => {
-        console.error("Error creating ListBoard:", error);
-      });
-  }
-
-  function deleteColumn(id) {
-    axiosInstance
-      .delete(`lists/${id}/`)
-      .then((response) => {
-        setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
-      })
-      .catch((error) => {
-        console.error("Error deleting ListBoard:", error);
-      });
-
-    const tasksToDelete = tasks.filter((t) => t.columnId === id);
-
-    tasksToDelete.forEach((task) => {
-      axiosInstance
-        .delete(`todo/${task.id}/`)
-        .then((response) => {
-          setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
-        })
-        .catch((error) => {
-          console.error("Error deleting Task:", error);
-        });
-    });
-  }
-
-  function updateColumn(id, title) {
-    // Update the column
-    axiosInstance
-      .patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements
-      .then((response) => {
-        setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
-      })
-      .catch((error) => {
-        console.error("Error updating ListBoard:", error);
-      });
-  }
-
   function onDragStart(event) {
     if (event.active.data.current?.type === "Column") {
       setActiveColumn(event.active.data.current.column);

frontend/src/components/navigations/IconSideNav.jsx

@@ -32,12 +32,12 @@ export const SideNav = () => {
   );
 };
 
-const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
+const NavItem = ({ icon, selected, id, setSelected, path }) => {
   const navigate = useNavigate();
 
   return (
     <motion.button
-      className="p-3 text-xl bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative"
+      className="p-3 text-xl text-white bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative"
       onClick={() => {
         setSelected(id);
         navigate(path);