TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix task can't move to other column

Browse Source
This commit is contained in:
sosokker 2023-11-27 22:14:57 +07:00
parent 53ce5c22fb
commit b331fd97c3
2 changed files with 20 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,17 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
return tasks.map((task) => task.id);
}, [tasks]);
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
id: column.id,
data: {
type: "Column",
column,
},
});
return (
<div
ref={setNodeRef}
className="
bg-[#f1f2f4]
w-[280px]
@ -21,6 +30,8 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
">
{/* Column title */}
<div
{...attributes}
{...listeners}
className="
ml-3
text-md

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

@ -1,12 +1,6 @@
import { useMemo, useState, useEffect } from "react";
import { ColumnContainerCard } from "./columnContainerWrapper";
import {
DndContext,
DragOverlay,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import { createPortal } from "react-dom";
import { TaskCard } from "./taskCard";
@ -32,9 +26,7 @@ export function KanbanBoard() {
// ---------------- Task Handlers ----------------
const handleTaskUpdate = (tasks, updatedTask) => {
const updatedTasks = tasks.map((task) =>
task.id === updatedTask.id ? updatedTask : task
);
const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
setTasks(updatedTasks);
};
@ -176,14 +168,8 @@ export function KanbanBoard() {
justify-center
overflow-x-auto
overflow-y-hidden
"
>
<DndContext
sensors={sensors}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
onDragOver={onDragOver}
>
">
<DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
<div className="flex gap-4">
<div className="flex gap-4">
{!isLoading ? (
@ -195,9 +181,7 @@ export function KanbanBoard() {
createTask={createTask}
deleteTask={deleteTask}
updateTask={updateTask}
tasks={(tasks || []).filter(
(task) => task.columnId === col.id
)}
tasks={(tasks || []).filter((task) => task.columnId === col.id)}
/>
))}{" "}
</SortableContext>
@ -210,11 +194,7 @@ export function KanbanBoard() {
{createPortal(
<DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
{/* Render the active task as a draggable overlay */}
<TaskCard
task={activeTask}
deleteTask={deleteTask}
updateTask={updateTask}
/>
<TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />
</DragOverlay>,
document.body
)}
@ -240,8 +220,6 @@ export function KanbanBoard() {
if (!over) return; // If not dropped over anything, exit
const activeId = active.id;
const overId = over.id;
const isActiveATask = active.data.current?.type === "Task";
const isOverAColumn = over.data.current?.type === "Column";
@ -250,8 +228,7 @@ export function KanbanBoard() {
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
// Extract the column ID from overId
const columnId = extractColumnId(overId);
const columnId = over.data.current.column.id;
tasks[activeIndex].columnId = columnId;
@ -259,7 +236,7 @@ export function KanbanBoard() {
axiosInstance
.put(`todo/change_task_list_board/`, {
todo_id: activeId,
new_list_board_id: over.data.current.task.columnId,
new_list_board_id: columnId,
new_index: 0,
})
.then((response) => {})
@ -271,15 +248,6 @@ export function KanbanBoard() {
});
}
}
// Helper function to extract the column ID from the element ID
function extractColumnId(elementId) {
// Implement logic to extract the column ID from elementId
// For example, if elementId is in the format "column-123", you can do:
const parts = elementId.split("-");
return parts.length === 2 ? parseInt(parts[1], 10) : null;
}
// Handle the drag-over event
function onDragOver(event) {
const { active, over } = event;
@ -306,39 +274,15 @@ export function KanbanBoard() {
tasks[activeIndex].columnId = tasks[overIndex].columnId;
return arrayMove(tasks, activeIndex, overIndex - 1);
}
axiosInstance
.put(`todo/change_task_list_board/`, {
todo_id: activeId,
new_list_board_id: over.data.current.task.columnId,
new_index: 0,
})
.then((response) => {})
.catch((error) => {
console.error("Error updating task columnId:", error);
});
return arrayMove(tasks, activeIndex, overIndex);
});
}
const isOverAColumn = over.data.current?.type === "Column";
// Move the Task to a different column and update columnId
if (
isActiveATask &&
isOverAColumn &&
tasks.some((task) => task.columnId !== overId)
) {
if (isActiveATask && isOverAColumn && tasks.some((task) => task.columnId !== overId)) {
setTasks((tasks) => {
const activeIndex = tasks.findIndex((t) => t.id === activeId);
axiosInstance
.put(`todo/change_task_list_board/`, {
todo_id: activeId,
new_list_board_id: over.data.current.task.columnId,
new_index: 0,
})
.then((response) => {})
.catch((error) => {
console.error("Error updating task columnId:", error);
});
tasks[activeIndex].columnId = overId;
return arrayMove(tasks, activeIndex, activeIndex);
});