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

Add absolute import part and move AxiosInstance

Browse Source
This commit is contained in:
sosokker 2023-11-22 17:32:01 +07:00
parent f88aa1a1ab
commit 8ba74d846d
13 changed files with 225 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"]
}
}
}

28
frontend/src/api/AuthenticationApi.jsx
View File

@ -1,15 +1,15 @@
import axios from "axios"; import axios from "axios";
import axiosInstance from "./configs/AxiosConfig"; import axiosInstance from "./AxiosConfig";
// Function for user login // Function for user login
const apiUserLogin = data => { const apiUserLogin = (data) => {
return axiosInstance return axiosInstance
.post("token/obtain/", data) .post("token/obtain/", data)
.then(response => { .then((response) => {
console.log(response.statusText); console.log(response.statusText);
return response; return response;
}) })
.catch(error => { .catch((error) => {
console.log("apiUserLogin error: ", error); console.log("apiUserLogin error: ", error);
return error; return error;
}); });
@ -23,7 +23,7 @@ const apiUserLogout = () => {
}; };
// Function for Google login // Function for Google login
const googleLogin = async token => { const googleLogin = async (token) => {
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
let res = await axios.post("http://localhost:8000/api/auth/google/", { let res = await axios.post("http://localhost:8000/api/auth/google/", {
code: token, code: token,
@ -36,29 +36,23 @@ const googleLogin = async token => {
const getGreeting = () => { const getGreeting = () => {
return axiosInstance return axiosInstance
.get("hello") .get("hello")
.then(response => { .then((response) => {
return response; return response;
}) })
.catch(error => { .catch((error) => {
return error; return error;
}); });
}; };
const config = {
headers: {
"Content-Type": "application/json",
},
};
// Function to register // Function to register
const createUser = async formData => { const createUser = async (formData) => {
try { try {
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
const resposne = axios.post("http://localhost:8000/api/user/create/", formData); const response = axios.post("http://localhost:8000/api/user/create/", formData);
// const response = await axiosInstance.post('/user/create/', formData); // const response = await axiosInstance.post('/user/create/', formData);
return response.data; return response.data;
} catch (error) { } catch (e) {
throw error; console.log(e);
} }
}; };

9
frontend/src/api/configs/AxiosConfig.jsx → frontend/src/api/AxiosConfig.jsx
View File

@ -1,5 +1,4 @@
import axios from "axios"; import axios from "axios";
import { redirect } from "react-router-dom";
const axiosInstance = axios.create({ const axiosInstance = axios.create({
baseURL: "http://127.0.0.1:8000/api/", baseURL: "http://127.0.0.1:8000/api/",
@ -13,8 +12,8 @@ const axiosInstance = axios.create({
// handling token refresh on 401 Unauthorized errors // handling token refresh on 401 Unauthorized errors
axiosInstance.interceptors.response.use( axiosInstance.interceptors.response.use(
response => response, (response) => response,
error => { (error) => {
const originalRequest = error.config; const originalRequest = error.config;
const refresh_token = localStorage.getItem("refresh_token"); const refresh_token = localStorage.getItem("refresh_token");
@ -26,7 +25,7 @@ axiosInstance.interceptors.response.use(
) { ) {
return axiosInstance return axiosInstance
.post("/token/refresh/", { refresh: refresh_token }) .post("/token/refresh/", { refresh: refresh_token })
.then(response => { .then((response) => {
localStorage.setItem("access_token", response.data.access); localStorage.setItem("access_token", response.data.access);
axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access; axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
@ -34,7 +33,7 @@ axiosInstance.interceptors.response.use(
return axiosInstance(originalRequest); return axiosInstance(originalRequest);
}) })
.catch(err => { .catch((err) => {
console.log("Interceptors error: ", err); console.log("Interceptors error: ", err);
}); });
} }

42
frontend/src/api/TaskApi.jsx
View File

@ -1,21 +1,21 @@
import axiosInstance from "./configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const baseURL = ""; const baseURL = "";
export const createTask = (endpoint, data) => { export const createTask = (endpoint, data) => {
return axiosInstance return axiosInstance
.post(`${baseURL}${endpoint}/`, data) .post(`${baseURL}${endpoint}/`, data)
.then(response => response.data) .then((response) => response.data)
.catch(error => { .catch((error) => {
throw error; throw error;
}); });
}; };
export const readTasks = endpoint => { export const readTasks = (endpoint) => {
return axiosInstance return axiosInstance
.get(`${baseURL}${endpoint}/`) .get(`${baseURL}${endpoint}/`)
.then(response => response.data) .then((response) => response.data)
.catch(error => { .catch((error) => {
throw error; throw error;
}); });
}; };
@ -23,8 +23,8 @@ export const readTasks = endpoint => {
export const readTaskByID = (endpoint, id) => { export const readTaskByID = (endpoint, id) => {
return axiosInstance return axiosInstance
.get(`${baseURL}${endpoint}/${id}/`) .get(`${baseURL}${endpoint}/${id}/`)
.then(response => response.data) .then((response) => response.data)
.catch(error => { .catch((error) => {
throw error; throw error;
}); });
}; };
@ -32,8 +32,8 @@ export const readTaskByID = (endpoint, id) => {
export const updateTask = (endpoint, id, data) => { export const updateTask = (endpoint, id, data) => {
return axiosInstance return axiosInstance
.put(`${baseURL}${endpoint}/${id}/`, data) .put(`${baseURL}${endpoint}/${id}/`, data)
.then(response => response.data) .then((response) => response.data)
.catch(error => { .catch((error) => {
throw error; throw error;
}); });
}; };
@ -41,16 +41,16 @@ export const updateTask = (endpoint, id, data) => {
export const deleteTask = (endpoint, id) => { export const deleteTask = (endpoint, id) => {
return axiosInstance return axiosInstance
.delete(`${baseURL}${endpoint}/${id}/`) .delete(`${baseURL}${endpoint}/${id}/`)
.then(response => response.data) .then((response) => response.data)
.catch(error => { .catch((error) => {
throw error; throw error;
}); });
}; };
// Create // Create
export const createTodoTask = data => createTask("todo", data); export const createTodoTask = (data) => createTask("todo", data);
export const createRecurrenceTask = data => createTask("daily", data); export const createRecurrenceTask = (data) => createTask("daily", data);
export const createHabitTask = data => createTask("habit", data); export const createHabitTask = (data) => createTask("habit", data);
// Read // Read
export const readTodoTasks = () => readTasks("todo"); export const readTodoTasks = () => readTasks("todo");
@ -58,9 +58,9 @@ export const readRecurrenceTasks = () => readTasks("daily");
export const readHabitTasks = () => readTasks("habit"); export const readHabitTasks = () => readTasks("habit");
// Read by ID // Read by ID
export const readTodoTaskByID = id => readTaskByID("todo", id); export const readTodoTaskByID = (id) => readTaskByID("todo", id);
export const readRecurrenceTaskByID = id => readTaskByID("daily", id); export const readRecurrenceTaskByID = (id) => readTaskByID("daily", id);
export const readHabitTaskByID = id => readTaskByID("habit", id); export const readHabitTaskByID = (id) => readTaskByID("habit", id);
// Update // Update
export const updateTodoTask = (id, data) => updateTask("todo", id, data); export const updateTodoTask = (id, data) => updateTask("todo", id, data);
@ -68,6 +68,6 @@ export const updateRecurrenceTask = (id, data) => updateTask("daily", id, data);
export const updateHabitTask = (id, data) => updateTask("habit", id, data); export const updateHabitTask = (id, data) => updateTask("habit", id, data);
// Delete // Delete
export const deleteTodoTask = id => deleteTask("todo", id); export const deleteTodoTask = (id) => deleteTask("todo", id);
export const deleteRecurrenceTask = id => deleteTask("daily", id); export const deleteRecurrenceTask = (id) => deleteTask("daily", id);
export const deleteHabitTask = id => deleteTask("habit", id); export const deleteHabitTask = (id) => deleteTask("habit", id);

18
frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
View File

@ -1,14 +1,14 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi"; import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
import { readTodoTasks } from "../../api/TaskApi"; import { readTodoTasks } from "../../api/TaskApi";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
function EachBlog({ name, colorCode, contentList, icon }) { function EachBlog({ name, colorCode, contentList, icon }) {
const [tasks, setTasks] = useState(contentList); const [tasks, setTasks] = useState(contentList);
const handleCheckboxChange = async index => { const handleCheckboxChange = async (index) => {
try { try {
setTasks(contentList) setTasks(contentList);
const updatedTasks = [...tasks]; const updatedTasks = [...tasks];
const taskId = updatedTasks[index].id; const taskId = updatedTasks[index].id;
@ -60,12 +60,12 @@ function Eisenhower() {
useEffect(() => { useEffect(() => {
readTodoTasks() readTodoTasks()
.then(data => { .then((data) => {
console.log(data); console.log(data);
const contentList_ui = data.filter(task => task.priority === 1); const contentList_ui = data.filter((task) => task.priority === 1);
const contentList_uni = data.filter(task => task.priority === 2); const contentList_uni = data.filter((task) => task.priority === 2);
const contentList_nui = data.filter(task => task.priority === 3); const contentList_nui = data.filter((task) => task.priority === 3);
const contentList_nuni = data.filter(task => task.priority === 4); const contentList_nuni = data.filter((task) => task.priority === 4);
setTasks({ setTasks({
contentList_ui, contentList_ui,
@ -74,7 +74,7 @@ function Eisenhower() {
contentList_nuni, contentList_nuni,
}); });
}) })
.catch(error => console.error("Error fetching tasks:", error)); .catch((error) => console.error("Error fetching tasks:", error));
}, []); }, []);
return ( return (

14
frontend/src/components/calendar/calendar.jsx
View File

@ -1,11 +1,11 @@
import React, { useState } from "react"; import React from "react";
import { formatDate } from "@fullcalendar/core"; import { formatDate } from "@fullcalendar/core";
import FullCalendar from "@fullcalendar/react"; import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid"; import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid"; import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import { getEvents, createEventId } from "./TaskDataHandler"; import { getEvents, createEventId } from "./TaskDataHandler";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
export default class Calendar extends React.Component { export default class Calendar extends React.Component {
state = { state = {
@ -83,7 +83,7 @@ export default class Calendar extends React.Component {
}); });
}; };
handleDateSelect = selectInfo => { handleDateSelect = (selectInfo) => {
let title = prompt("Please enter a new title for your event"); let title = prompt("Please enter a new title for your event");
let calendarApi = selectInfo.view.calendar; let calendarApi = selectInfo.view.calendar;
@ -100,20 +100,20 @@ export default class Calendar extends React.Component {
} }
}; };
handleEventClick = clickInfo => { handleEventClick = (clickInfo) => {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) { if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
axiosInstance axiosInstance
.delete(`todo/${clickInfo.event.id}/`) .delete(`todo/${clickInfo.event.id}/`)
.then(response => { .then((response) => {
clickInfo.event.remove(); clickInfo.event.remove();
}) })
.catch(error => { .catch((error) => {
console.error("Error deleting Task:", error); console.error("Error deleting Task:", error);
}); });
} }
}; };
handleEvents = events => { handleEvents = (events) => {
this.setState({ this.setState({
currentEvents: events, currentEvents: events,
}); });

4
frontend/src/components/dashboard/Areachart.jsx
View File

@ -1,6 +1,6 @@
import { AreaChart, Title } from "@tremor/react"; import { AreaChart, Title } from "@tremor/react";
import React from "react"; import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const fetchAreaChartData = async () => { const fetchAreaChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/"); let res = await axiosInstance.get("/dashboard/weekly/");
@ -80,7 +80,7 @@ const fetchAreaChartData = async () => {
}, },
]; ];
return areaChartData; return areaChartData;
} };
const areaChartDataArray = await fetchAreaChartData(); const areaChartDataArray = await fetchAreaChartData();
export const AreaChartGraph = () => { export const AreaChartGraph = () => {

2
frontend/src/components/dashboard/Barchart.jsx
View File

@ -1,6 +1,6 @@
import { BarChart, Title } from "@tremor/react"; import { BarChart, Title } from "@tremor/react";
import React from "react"; import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const fetchBarChartData = async () => { const fetchBarChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/"); let res = await axiosInstance.get("/dashboard/weekly/");

2
frontend/src/components/dashboard/DonutChart.jsx
View File

@ -1,5 +1,5 @@
import { DonutChart } from "@tremor/react"; import { DonutChart } from "@tremor/react";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const fetchDonutData = async () => { const fetchDonutData = async () => {
try { try {

13
frontend/src/components/dashboard/KpiCard.jsx
View File

@ -1,7 +1,6 @@
import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react"; import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
import React from "react"; import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const fetchKpiCardData = async () => { const fetchKpiCardData = async () => {
let res = await axiosInstance.get("/dashboard/stats/"); let res = await axiosInstance.get("/dashboard/stats/");
@ -9,7 +8,7 @@ const fetchKpiCardData = async () => {
// let completedLastWeek = res.data["completed_last_week"]; // let completedLastWeek = res.data["completed_last_week"];
let completedThisWeek = 4; let completedThisWeek = 4;
let completedLastWeek = 23; let completedLastWeek = 23;
let percentage = (completedThisWeek / completedLastWeek)*100; let percentage = (completedThisWeek / completedLastWeek) * 100;
let incOrdec = undefined; let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) { if (completedThisWeek <= completedLastWeek) {
incOrdec = "moderateDecrease"; incOrdec = "moderateDecrease";
@ -17,15 +16,13 @@ const fetchKpiCardData = async () => {
if (completedThisWeek > completedLastWeek) { if (completedThisWeek > completedLastWeek) {
incOrdec = "moderateIncrease"; incOrdec = "moderateIncrease";
} }
return {completedThisWeek, completedLastWeek, incOrdec, percentage}; return { completedThisWeek, completedLastWeek, incOrdec, percentage };
} };
const {kpiCardDataArray, completedThisWeek ,completedLastWeek, incOrdec, percentage} = await fetchKpiCardData();
const { kpiCardDataArray, completedThisWeek, completedLastWeek, incOrdec, percentage } = await fetchKpiCardData();
export default function KpiCard() { export default function KpiCard() {
return ( return (
<Card className="max-w-lg mx-auto"> <Card className="max-w-lg mx-auto">
<Flex alignItems="start"> <Flex alignItems="start">
<div> <div>

11
frontend/src/components/dashboard/ProgressCircle.jsx
View File

@ -1,6 +1,6 @@
import { Card, Flex, ProgressCircle, Text, } from "@tremor/react"; import { Card, Flex, ProgressCircle, Text } from "@tremor/react";
import React from "react"; import React from "react";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
const fetchProgressData = async () => { const fetchProgressData = async () => {
try { try {
@ -27,12 +27,7 @@ export default function ProgressCircleChart() {
return ( return (
<Card className="max-w-lg mx-auto"> <Card className="max-w-lg mx-auto">
<Flex className="flex-col items-center"> <Flex className="flex-col items-center">
<ProgressCircle <ProgressCircle className="mt-6" value={progressData} size={200} strokeWidth={10} radius={60} color="indigo">
className="mt-6" value={progressData}
size={200}
strokeWidth={10}
radius={60}
color="indigo">
<span className="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-sm text-indigo-500 font-medium"> <span className="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-sm text-indigo-500 font-medium">
{progressData.toFixed(0)} % {progressData.toFixed(0)} %
</span> </span>

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

@ -5,11 +5,11 @@ import { SortableContext, arrayMove } from "@dnd-kit/sortable";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import TaskCard from "./taskCard"; import TaskCard from "./taskCard";
import { AiOutlinePlusCircle } from "react-icons/ai"; import { AiOutlinePlusCircle } from "react-icons/ai";
import axiosInstance from "../../api/configs/AxiosConfig"; import axiosInstance from "src/api/AxiosConfig";
function KanbanBoard() { function KanbanBoard() {
const [columns, setColumns] = useState([]); const [columns, setColumns] = useState([]);
const columnsId = useMemo(() => columns.map(col => col.id), [columns]); const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
const [boardId, setBoardData] = useState(); const [boardId, setBoardData] = useState();
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
@ -66,7 +66,7 @@ function KanbanBoard() {
const tasksResponse = await axiosInstance.get("/todo"); const tasksResponse = await axiosInstance.get("/todo");
// Transform // Transform
const transformedTasks = tasksResponse.data.map(task => ({ const transformedTasks = tasksResponse.data.map((task) => ({
id: task.id, id: task.id,
columnId: task.list_board, columnId: task.list_board,
content: task.title, content: task.title,
@ -95,7 +95,7 @@ function KanbanBoard() {
const columnsResponse = await axiosInstance.get("/lists"); const columnsResponse = await axiosInstance.get("/lists");
// Transform // Transform
const transformedColumns = columnsResponse.data.map(column => ({ const transformedColumns = columnsResponse.data.map((column) => ({
id: column.id, id: column.id,
title: column.name, title: column.name,
})); }));
@ -135,7 +135,7 @@ function KanbanBoard() {
<div className="ml-2 flex gap-4"> <div className="ml-2 flex gap-4">
<div className="flex gap-4"> <div className="flex gap-4">
<SortableContext items={columnsId}> <SortableContext items={columnsId}>
{columns.map(col => ( {columns.map((col) => (
<ColumnContainerCard <ColumnContainerCard
key={col.id} key={col.id}
column={col} column={col}
@ -144,7 +144,7 @@ function KanbanBoard() {
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>
@ -186,7 +186,7 @@ function KanbanBoard() {
createTask={createTask} createTask={createTask}
deleteTask={deleteTask} deleteTask={deleteTask}
updateTask={updateTask} updateTask={updateTask}
tasks={tasks.filter(task => task.columnId === activeColumn.id)} tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
/> />
)} )}
{activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />} {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
@ -213,35 +213,34 @@ function KanbanBoard() {
axiosInstance axiosInstance
.post("todo/", newTaskData) .post("todo/", newTaskData)
.then(response => { .then((response) => {
const newTask = { const newTask = {
id: response.data.id, id: response.data.id,
columnId, columnId,
content: response.data.title, content: response.data.title,
}; };
}) })
.catch(error => { .catch((error) => {
console.error("Error creating task:", error); console.error("Error creating task:", error);
}); });
setTasks(tasks => [...tasks, newTask]); setTasks((tasks) => [...tasks, newTask]);
} }
function deleteTask(id) { function deleteTask(id) {
const newTasks = tasks.filter(task => task.id !== id); const newTasks = tasks.filter((task) => task.id !== id);
axiosInstance axiosInstance
.delete(`todo/${id}/`) .delete(`todo/${id}/`)
.then(response => { .then((response) => {
setTasks(newTasks); setTasks(newTasks);
}) })
.catch(error => { .catch((error) => {
console.error("Error deleting Task:", error); console.error("Error deleting Task:", error);
}); });
setTasks(newTasks); setTasks(newTasks);
} }
function updateTask(id, content) { function updateTask(id, content) {
const newTasks = tasks.map(task => { const newTasks = tasks.map((task) => {
if (task.id !== id) return task; if (task.id !== id) return task;
return { ...task, content }; return { ...task, content };
}); });
@ -252,15 +251,15 @@ function KanbanBoard() {
function createNewColumn() { function createNewColumn() {
axiosInstance axiosInstance
.post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id }) .post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
.then(response => { .then((response) => {
const newColumn = { const newColumn = {
id: response.data.id, id: response.data.id,
title: response.data.name, title: response.data.name,
}; };
setColumns(prevColumns => [...prevColumns, newColumn]); setColumns((prevColumns) => [...prevColumns, newColumn]);
}) })
.catch(error => { .catch((error) => {
console.error("Error creating ListBoard:", error); console.error("Error creating ListBoard:", error);
}); });
} }
@ -268,22 +267,22 @@ function KanbanBoard() {
function deleteColumn(id) { function deleteColumn(id) {
axiosInstance axiosInstance
.delete(`lists/${id}/`) .delete(`lists/${id}/`)
.then(response => { .then((response) => {
setColumns(prevColumns => prevColumns.filter(col => col.id !== id)); setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
}) })
.catch(error => { .catch((error) => {
console.error("Error deleting ListBoard:", error); console.error("Error deleting ListBoard:", error);
}); });
const tasksToDelete = tasks.filter(t => t.columnId === id); const tasksToDelete = tasks.filter((t) => t.columnId === id);
tasksToDelete.forEach(task => { tasksToDelete.forEach((task) => {
axiosInstance axiosInstance
.delete(`todo/${task.id}/`) .delete(`todo/${task.id}/`)
.then(response => { .then((response) => {
setTasks(prevTasks => prevTasks.filter(t => t.id !== task.id)); setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
}) })
.catch(error => { .catch((error) => {
console.error("Error deleting Task:", error); console.error("Error deleting Task:", error);
}); });
}); });
@ -293,10 +292,10 @@ function KanbanBoard() {
// Update the column // Update the column
axiosInstance axiosInstance
.patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements .patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements
.then(response => { .then((response) => {
setColumns(prevColumns => prevColumns.map(col => (col.id === id ? { ...col, title } : col))); setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
}) })
.catch(error => { .catch((error) => {
console.error("Error updating ListBoard:", error); console.error("Error updating ListBoard:", error);
}); });
} }
@ -330,9 +329,9 @@ function KanbanBoard() {
// Reorder columns if the dragged item is a column // Reorder columns if the dragged item is a column
if (isActiveAColumn && isOverAColumn) { if (isActiveAColumn && isOverAColumn) {
setColumns(columns => { setColumns((columns) => {
const activeColumnIndex = columns.findIndex(col => col.id === activeId); const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
const overColumnIndex = columns.findIndex(col => col.id === overId); const overColumnIndex = columns.findIndex((col) => col.id === overId);
const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex); const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
@ -342,9 +341,9 @@ function KanbanBoard() {
// Reorder tasks within the same column // Reorder tasks within the same column
if (isActiveATask && isOverATask) { if (isActiveATask && isOverATask) {
setTasks(tasks => { setTasks((tasks) => {
const activeIndex = tasks.findIndex(t => t.id === activeId); const activeIndex = tasks.findIndex((t) => t.id === activeId);
const overIndex = tasks.findIndex(t => t.id === overId); const overIndex = tasks.findIndex((t) => t.id === overId);
const reorderedTasks = arrayMove(tasks, activeIndex, overIndex); const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
@ -354,15 +353,15 @@ function KanbanBoard() {
// Move tasks between columns and update columnId // Move tasks between columns and update columnId
if (isActiveATask && isOverAColumn) { if (isActiveATask && isOverAColumn) {
setTasks(tasks => { setTasks((tasks) => {
const activeIndex = tasks.findIndex(t => t.id === activeId); const activeIndex = tasks.findIndex((t) => t.id === activeId);
tasks[activeIndex].columnId = overId; tasks[activeIndex].columnId = overId;
axiosInstance 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: overId, new_index: 0 })
.then(response => {}) .then((response) => {})
.catch(error => { .catch((error) => {
console.error("Error updating task columnId:", error); console.error("Error updating task columnId:", error);
}); });
@ -386,9 +385,9 @@ function KanbanBoard() {
if (!isActiveATask) return; if (!isActiveATask) return;
if (isActiveATask && isOverATask) { if (isActiveATask && isOverATask) {
setTasks(tasks => { setTasks((tasks) => {
const activeIndex = tasks.findIndex(t => t.id === activeId); const activeIndex = tasks.findIndex((t) => t.id === activeId);
const overIndex = tasks.findIndex(t => t.id === overId); const overIndex = tasks.findIndex((t) => t.id === overId);
if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) { if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
tasks[activeIndex].columnId = tasks[overIndex].columnId; tasks[activeIndex].columnId = tasks[overIndex].columnId;
@ -402,8 +401,8 @@ function KanbanBoard() {
const isOverAColumn = over.data.current?.type === "Column"; const isOverAColumn = over.data.current?.type === "Column";
if (isActiveATask && isOverAColumn) { if (isActiveATask && isOverAColumn) {
setTasks(tasks => { setTasks((tasks) => {
const activeIndex = tasks.findIndex(t => t.id === activeId); const activeIndex = tasks.findIndex((t) => t.id === activeId);
tasks[activeIndex].columnId = overId; tasks[activeIndex].columnId = overId;
return arrayMove(tasks, activeIndex, activeIndex); return arrayMove(tasks, activeIndex, activeIndex);

11
frontend/vite.config.js
View File

@ -1,7 +1,12 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) resolve: {
alias: {
src: "/src",
},
},
});