TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 22:14:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Completely remove drag functionality of column

Browse Source
This commit is contained in:
sosokker 2023-11-23 13:14:24 +07:00
parent 5051f1f460
commit fd052fb613
2 changed files with 93 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/kanbanBoard/columnContainer.jsx
View File

@ -4,28 +4,13 @@ import { useMemo } from "react";
import { TaskCard } from "./taskCard";
export function ColumnContainer({ column, createTask, tasks, deleteTask, updateTask }) {
// Memoize task IDs to prevent unnecessary recalculations
const tasksIds = useMemo(() => {
return tasks.map((task) => task.id);
}, [tasks]);
const {
setNodeRef: columnNodeRef,
attributes: columnAttributes,
listeners: columnListeners,
} = useSortable({
id: column.id,
data: {
type: "Column",
column,
},
disabled: true, // Disable drag for the entire column
});
return (
<div
ref={columnNodeRef}
{...columnAttributes}
{...columnListeners}
className="
bg-[#f1f2f4]
w-[280px]
@ -49,14 +34,16 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
{/* Column task container */}
<div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
{/* Provide a SortableContext for the tasks within the column */}
<SortableContext items={tasksIds}>
{/* Render TaskCard for each task in the column */}
{tasks.map((task) => (
<TaskCard
key={task.id}
task={task}
deleteTask={deleteTask}
updateTask={updateTask}
// Adjust the useSortable hook for tasks
// Adjust the useSortable hook for tasks to enable dragging
useSortable={(props) => useSortable({ ...props, disabled: false })}
/>
))}

177
frontend/src/components/kanbanBoard/kanbanBoard.jsx
View File

@ -8,14 +8,13 @@ import { axiosInstance } from "src/api/AxiosConfig";
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);
const [activeTask, setActiveTask] = useState(null);
const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
// ---------------- END STATE INITIATE ----------------
const sensors = useSensors(
useSensor(PointerSensor, {
@ -25,6 +24,76 @@ export function KanbanBoard() {
})
);
// ---------------- Task Handlers ----------------
const handleTaskUpdate = (tasks, setTasks, updatedTask) => {
const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
setTasks(updatedTasks);
};
const handleApiError = (error, action) => {
console.error(`Error ${action}:`, error);
};
const createTask = async (columnId, setTasks) => {
try {
const response = await axiosInstance.post("todo/", {
title: `Task ${tasks.length + 1}`,
importance: 1,
difficulty: 1,
challenge: false,
fromSystem: false,
is_active: false,
is_full_day_event: false,
completed: false,
priority: 1,
list_board: columnId,
});
const newTask = {
id: response.data.id,
columnId,
content: response.data.title,
};
setTasks((tasks) => [...tasks, newTask]);
} catch (error) {
handleApiError(error, "creating task");
}
};
const deleteTask = async (id, tasks, setTasks) => {
try {
await axiosInstance.delete(`todo/${id}/`);
const newTasks = tasks.filter((task) => task.id !== id);
setTasks(newTasks);
} catch (error) {
handleApiError(error, "deleting task");
}
};
const updateTask = async (id, content, tasks, setTasks) => {
try {
if (content === "") {
await deleteTask(id, tasks, setTasks);
} else {
const response = await axiosInstance.put(`todo/${id}/`, { content });
const updatedTask = {
id,
columnId: response.data.list_board,
content: response.data.title,
};
handleTaskUpdate(tasks, setTasks, updatedTask);
}
} catch (error) {
handleApiError(error, "updating task");
}
};
// ---------------- END Task Handlers ----------------
// ---------------- Fetch Data ----------------
useEffect(() => {
const fetchData = async () => {
try {
@ -88,6 +157,8 @@ export function KanbanBoard() {
fetchBoardData();
}, []);
// ---------------- END Fetch Data ----------------
return (
<div
className="
@ -123,15 +194,6 @@ export function KanbanBoard() {
{createPortal(
<DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
{activeColumn && (
<ColumnContainerCard
column={activeColumn}
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
/>
)}
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
</DragOverlay>,
document.body
@ -140,97 +202,31 @@ export function KanbanBoard() {
</div>
);
function createTask(columnId, setTasks) {
const newTaskData = {
title: `Task ${tasks.length + 1}`,
importance: 1,
difficulty: 1,
challenge: false,
fromSystem: false,
is_active: false,
is_full_day_event: false,
completed: false,
priority: 1,
list_board: columnId,
};
axiosInstance
.post("todo/", newTaskData)
.then((response) => {
const newTask = {
id: response.data.id,
columnId,
content: response.data.title,
};
})
.catch((error) => {
console.error("Error creating task:", error);
});
setTasks((tasks) => [...tasks, newTask]);
}
function deleteTask(id) {
const newTasks = tasks.filter((task) => task.id !== id);
axiosInstance
.delete(`todo/${id}/`)
.then((response) => {
setTasks(newTasks);
})
.catch((error) => {
console.error("Error deleting Task:", error);
});
setTasks(newTasks);
}
function updateTask(id, content) {
const newTasks = tasks.map((task) => {
if (task.id !== id) return task;
return { ...task, content };
});
if (content === "") return deleteTask(id);
setTasks(newTasks);
}
// Handle the start of a drag event
function onDragStart(event) {
if (event.active.data.current?.type === "Column") {
setActiveColumn(event.active.data.current.column);
return;
}
// Check if the dragged item is a Task
if (event.active.data.current?.type === "Task") {
setActiveTask(event.active.data.current.task);
return;
}
}
// Handle the end of a drag event
function onDragEnd(event) {
setActiveColumn(null);
// Reset active column and task after the drag ends
setActiveTask(null);
const { active, over } = event;
if (!over) return;
if (!over) return; // If not dropped over anything, exit
const activeId = active.id;
const overId = over.id;
const isActiveAColumn = active.data.current?.type === "Column";
const isActiveATask = active.data.current?.type === "Task";
const isOverAColumn = over.data.current?.type === "Column";
const isOverATask = over.data.current?.type === "Task";
// Reorder columns if the dragged item is a column
if (isActiveAColumn && isOverAColumn) {
setColumns((columns) => {
const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
const overColumnIndex = columns.findIndex((col) => col.id === overId);
const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
return reorderedColumns;
});
}
// Reorder tasks within the same column
// Reorder logic for Tasks within the same column
if (isActiveATask && isOverATask) {
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
@ -249,6 +245,7 @@ export function KanbanBoard() {
tasks[activeIndex].columnId = overId;
// API call to update task's columnId
axiosInstance
.put(`todo/change_task_list_board/`, { todo_id: activeId, new_list_board_id: overId, new_index: 0 })
.then((response) => {})
@ -261,25 +258,28 @@ export function KanbanBoard() {
}
}
// Handle the drag-over event
function onDragOver(event) {
const { active, over } = event;
if (!over) return;
if (!over) return; // If not over anything, exit
const activeId = active.id;
const overId = over.id;
if (activeId === overId) return;
if (activeId === overId) return; // If over the same element, exit
const isActiveATask = active.data.current?.type === "Task";
const isOverATask = over.data.current?.type === "Task";
if (!isActiveATask) return;
if (!isActiveATask) return; // If not dragging a Task, exit
// Reorder logic for Tasks within the same column
if (isActiveATask && isOverATask) {
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
const overIndex = tasks.findIndex((t) => t.id === overId);
// If moving to a different column, update columnId
if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
tasks[activeIndex].columnId = tasks[overIndex].columnId;
return arrayMove(tasks, activeIndex, overIndex - 1);
@ -291,6 +291,7 @@ export function KanbanBoard() {
const isOverAColumn = over.data.current?.type === "Column";
// Move the Task to a different column and update columnId
if (isActiveATask && isOverAColumn) {
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);