mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 05:54:07 +01:00
Merge branch 'main' into feature/dashboard
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
commit
16a10b87bb
@ -8,8 +8,10 @@ from users.models import CustomUser
|
||||
def create_default_board(sender, instance, created, **kwargs):
|
||||
"""Signal handler to automatically create a default Board for a user upon creation."""
|
||||
if created:
|
||||
board = Board.objects.create(user=instance, name="My Default Board")
|
||||
|
||||
ListBoard.objects.create(board=board, name="Todo", position=1)
|
||||
ListBoard.objects.create(board=board, name="In Progress", position=2)
|
||||
ListBoard.objects.create(board=board, name="Done", position=3)
|
||||
# Create unique board by user id
|
||||
user_id = instance.id
|
||||
board = Board.objects.create(user=instance, name=f"Board of #{user_id}")
|
||||
ListBoard.objects.create(board=board, name="Backlog", position=1)
|
||||
ListBoard.objects.create(board=board, name="Doing", position=2)
|
||||
ListBoard.objects.create(board=board, name="Review", position=3)
|
||||
ListBoard.objects.create(board=board, name="Done", position=4)
|
||||
@ -1,11 +1,13 @@
|
||||
from rest_framework import viewsets
|
||||
from rest_framework.response import Response
|
||||
from rest_framework import status
|
||||
from rest_framework.permissions import IsAuthenticated
|
||||
|
||||
from boards.models import Board, ListBoard
|
||||
from boards.serializers import BoardSerializer, ListBoardSerializer
|
||||
|
||||
class BoardViewSet(viewsets.ModelViewSet):
|
||||
permission_classes = (IsAuthenticated,)
|
||||
queryset = Board.objects.all()
|
||||
serializer_class = BoardSerializer
|
||||
http_method_names = ['get']
|
||||
@ -16,6 +18,7 @@ class BoardViewSet(viewsets.ModelViewSet):
|
||||
|
||||
|
||||
class ListBoardViewSet(viewsets.ModelViewSet):
|
||||
permission_classes = (IsAuthenticated,)
|
||||
serializer_class = ListBoardSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
|
||||
@ -27,15 +27,63 @@ def update_priority(sender, instance, **kwargs):
|
||||
instance.priority = Todo.EisenhowerMatrix.NOT_IMPORTANT_NOT_URGENT
|
||||
|
||||
|
||||
@receiver(post_save, sender=Todo)
|
||||
def assign_todo_to_listboard(sender, instance, created, **kwargs):
|
||||
"""Signal handler to automatically assign a Todo to the first ListBoard in the user's Board upon creation."""
|
||||
# @receiver(post_save, sender=Todo)
|
||||
# def assign_todo_to_listboard(sender, instance, created, **kwargs):
|
||||
# """Signal handler to automatically assign a Todo to the first ListBoard in the user's Board upon creation."""
|
||||
# if created:
|
||||
# user_board = instance.user.board_set.first()
|
||||
|
||||
# if user_board:
|
||||
# first_list_board = user_board.listboard_set.order_by('position').first()
|
||||
|
||||
# if first_list_board:
|
||||
# instance.list_board = first_list_board
|
||||
# instance.save()
|
||||
|
||||
|
||||
@receiver(post_save, sender=ListBoard)
|
||||
def create_placeholder_tasks(sender, instance, created, **kwargs):
|
||||
"""
|
||||
Signal handler to create placeholder tasks for each ListBoard.
|
||||
"""
|
||||
if created:
|
||||
user_board = instance.user.board_set.first()
|
||||
list_board_position = instance.position
|
||||
|
||||
if user_board:
|
||||
first_list_board = user_board.listboard_set.order_by('position').first()
|
||||
if list_board_position == 1:
|
||||
placeholder_tasks = [
|
||||
{"title": "Normal Task Example"},
|
||||
{"title": "Task with Extra Information Example", "description": "Description for Task 2"},
|
||||
]
|
||||
elif list_board_position == 2:
|
||||
placeholder_tasks = [
|
||||
{"title": "Time Task Example #1", "description": "Description for Task 2",
|
||||
"start_event": timezone.now(), "end_event": timezone.now() + timezone.timedelta(days=5)},
|
||||
]
|
||||
elif list_board_position == 3:
|
||||
placeholder_tasks = [
|
||||
{"title": "Time Task Example #2", "description": "Description for Task 2",
|
||||
"start_event": timezone.now(), "end_event": timezone.now() + timezone.timedelta(days=30)},
|
||||
]
|
||||
elif list_board_position == 4:
|
||||
placeholder_tasks = [
|
||||
{"title": "Completed Task Example", "description": "Description for Task 2",
|
||||
"start_event": timezone.now(), "completed": True},
|
||||
]
|
||||
else:
|
||||
placeholder_tasks = [
|
||||
{"title": "Default Task Example"},
|
||||
]
|
||||
|
||||
if first_list_board:
|
||||
instance.list_board = first_list_board
|
||||
instance.save()
|
||||
for task_data in placeholder_tasks:
|
||||
Todo.objects.create(
|
||||
list_board=instance,
|
||||
user=instance.board.user,
|
||||
title=task_data["title"],
|
||||
notes=task_data.get("description", ""),
|
||||
is_active=True,
|
||||
start_event=task_data.get("start_event"),
|
||||
end_event=task_data.get("end_event"),
|
||||
completed=task_data.get("completed", False),
|
||||
creation_date=timezone.now(),
|
||||
last_update=timezone.now(),
|
||||
)
|
||||
@ -56,6 +56,8 @@ export function SignUp() {
|
||||
const googleLoginImplicit = useGoogleLogin({
|
||||
flow: "auth-code",
|
||||
redirect_uri: "postmessage",
|
||||
scope:
|
||||
"https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/calendar.acls.readonly https://www.googleapis.com/auth/calendar.events.readonly",
|
||||
onSuccess: async (response) => {
|
||||
try {
|
||||
const loginResponse = await googleLogin(response.code);
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { formatDate } from "@fullcalendar/core";
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import { getEvents, createEventId } from "./TaskDataHandler";
|
||||
import { axiosInstance } from "src/api/AxiosConfig";
|
||||
|
||||
export class Calendar extends React.Component {
|
||||
state = {
|
||||
@ -62,10 +61,13 @@ export class Calendar extends React.Component {
|
||||
type="checkbox"
|
||||
checked={this.state.weekendsVisible}
|
||||
onChange={this.handleWeekendsToggle}
|
||||
className="mr-2"
|
||||
className="mr-2 mb-4"
|
||||
/>
|
||||
Toggle weekends
|
||||
</label>
|
||||
<button className="btn btn-info" onClick={() => alert("Commit soon🥺")}>
|
||||
Load Data from Google
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Show all task */}
|
||||
|
||||
@ -1,53 +1,16 @@
|
||||
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, useState } from "react";
|
||||
import { useMemo } from "react";
|
||||
import { TaskCard } from "./taskCard";
|
||||
|
||||
export function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
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, attributes, listeners, transform, transition, isDragging } = useSortable({
|
||||
id: column.id,
|
||||
data: {
|
||||
type: "Column",
|
||||
column,
|
||||
},
|
||||
disabled: editMode,
|
||||
});
|
||||
|
||||
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}
|
||||
style={style}
|
||||
className="
|
||||
bg-[#f1f2f4]
|
||||
w-[280px]
|
||||
@ -58,62 +21,35 @@ 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">
|
||||
{!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 className="flex gap-2">{column.title}</div>
|
||||
</div>
|
||||
|
||||
{/* 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} />
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
task={task}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
// Adjust the useSortable hook for tasks to enable dragging
|
||||
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"
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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,75 @@ export function KanbanBoard() {
|
||||
})
|
||||
);
|
||||
|
||||
// ---------------- Task Handlers ----------------
|
||||
const handleTaskUpdate = (tasks, 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) => {
|
||||
try {
|
||||
const response = await axiosInstance.post("todo/", {
|
||||
title: `New Task`,
|
||||
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((prevTasks) => [...prevTasks, newTask]);
|
||||
} catch (error) {
|
||||
handleApiError(error, "creating task");
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTask = async (id) => {
|
||||
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) => {
|
||||
try {
|
||||
if (content === "") {
|
||||
await deleteTask(id);
|
||||
} else {
|
||||
const response = await axiosInstance.put(`todo/${id}/`, { content });
|
||||
|
||||
const updatedTask = {
|
||||
id,
|
||||
columnId: response.data.list_board,
|
||||
content: response.data.title,
|
||||
};
|
||||
|
||||
handleTaskUpdate(tasks, updatedTask);
|
||||
}
|
||||
} catch (error) {
|
||||
handleApiError(error, "updating task");
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------- END Task Handlers ----------------
|
||||
|
||||
// ---------------- Fetch Data ----------------
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
@ -74,17 +142,22 @@ 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();
|
||||
}, []);
|
||||
|
||||
// ---------------- END Fetch Data ----------------
|
||||
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
@ -92,43 +165,36 @@ 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">
|
||||
{!isLoading ? (
|
||||
<SortableContext items={columnsId}>
|
||||
{columns.map((col) => (
|
||||
<ColumnContainerCard
|
||||
key={col.id}
|
||||
column={col}
|
||||
deleteColumn={deleteColumn}
|
||||
updateColumn={updateColumn}
|
||||
createTask={createTask}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
tasks={tasks.filter((task) => task.columnId === col.id)}
|
||||
tasks={(tasks || []).filter((task) => task.columnId === col.id)}
|
||||
/>
|
||||
))}
|
||||
))}{" "}
|
||||
</SortableContext>
|
||||
) : (
|
||||
<span className="loading loading-dots loading-lg"></span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{createPortal(
|
||||
<DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
|
||||
{activeColumn && (
|
||||
<ColumnContainerCard
|
||||
column={activeColumn}
|
||||
deleteColumn={deleteColumn}
|
||||
updateColumn={updateColumn}
|
||||
createTask={createTask}
|
||||
deleteTask={deleteTask}
|
||||
updateTask={updateTask}
|
||||
tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
|
||||
/>
|
||||
)}
|
||||
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
|
||||
{/* Render the active task as a draggable overlay */}
|
||||
<TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />
|
||||
</DragOverlay>,
|
||||
document.body
|
||||
)}
|
||||
@ -136,169 +202,46 @@ 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);
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
if (isActiveATask && isOverATask) {
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
const overIndex = tasks.findIndex((t) => t.id === overId);
|
||||
|
||||
const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
|
||||
|
||||
return reorderedTasks;
|
||||
});
|
||||
}
|
||||
|
||||
// Move tasks between columns and update columnId
|
||||
if (isActiveATask && isOverAColumn) {
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
|
||||
tasks[activeIndex].columnId = overId;
|
||||
// Extract the column ID from overId
|
||||
const columnId = extractColumnId(overId);
|
||||
|
||||
tasks[activeIndex].columnId = columnId;
|
||||
|
||||
// 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 })
|
||||
.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);
|
||||
@ -309,40 +252,69 @@ 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;
|
||||
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);
|
||||
}
|
||||
|
||||
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";
|
||||
|
||||
if (isActiveATask && isOverAColumn) {
|
||||
// Move the Task to a different column and update columnId
|
||||
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);
|
||||
});
|
||||
|
||||
@ -19,17 +19,16 @@ export const KanbanPage = () => {
|
||||
onClick={() => handleTabClick("kanban")}>
|
||||
Kanban
|
||||
</a>
|
||||
<a
|
||||
{/* <a
|
||||
id="table"
|
||||
className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
|
||||
onClick={() => handleTabClick("table")}>
|
||||
Table
|
||||
</a>
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<KanbanBoard />
|
||||
<div className="flex justify-center border-2 "></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,9 +9,9 @@ const menuItems = [
|
||||
{ id: 0, path: "/", icon: <AiOutlineHome /> },
|
||||
{ id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
|
||||
{ id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
|
||||
{ id: 3, path: "/settings", icon: <IoSettingsOutline /> },
|
||||
{ id: 4, path: "/priority", icon: <PiStepsDuotone /> },
|
||||
{ id: 3, path: "/priority", icon: <PiStepsDuotone /> },
|
||||
];
|
||||
// { id: 3, path: "/settings", icon: <IoSettingsOutline /> },
|
||||
|
||||
export const SideNav = () => {
|
||||
const [selected, setSelected] = useState(0);
|
||||
@ -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);
|
||||
|
||||
@ -25,14 +25,14 @@ export function NavBar() {
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex-none gap-2">
|
||||
<div className="form-control">
|
||||
<input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
|
||||
</div>
|
||||
{/* <div className="form-control">
|
||||
<button className="btn btn-success">Sync Data</button>
|
||||
</div> */}
|
||||
{isAuthenticated ? (
|
||||
<div className="dropdown dropdown-end">
|
||||
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
||||
<div className="w-10 rounded-full">
|
||||
<img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" />
|
||||
</div>
|
||||
</label>
|
||||
<ul
|
||||
|
||||
Loading…
Reference in New Issue
Block a user