mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-18 13:34:08 +01:00
Add absolute import part and move AxiosInstance
This commit is contained in:
parent
f88aa1a1ab
commit
8ba74d846d
8
frontend/jsconfig.json
Normal file
8
frontend/jsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"src/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,15 @@
|
||||
import axios from "axios";
|
||||
import axiosInstance from "./configs/AxiosConfig";
|
||||
import axiosInstance from "./AxiosConfig";
|
||||
|
||||
// Function for user login
|
||||
const apiUserLogin = data => {
|
||||
const apiUserLogin = (data) => {
|
||||
return axiosInstance
|
||||
.post("token/obtain/", data)
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
console.log(response.statusText);
|
||||
return response;
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.log("apiUserLogin error: ", error);
|
||||
return error;
|
||||
});
|
||||
@ -23,7 +23,7 @@ const apiUserLogout = () => {
|
||||
};
|
||||
|
||||
// Function for Google login
|
||||
const googleLogin = async token => {
|
||||
const googleLogin = async (token) => {
|
||||
axios.defaults.withCredentials = true;
|
||||
let res = await axios.post("http://localhost:8000/api/auth/google/", {
|
||||
code: token,
|
||||
@ -36,29 +36,23 @@ const googleLogin = async token => {
|
||||
const getGreeting = () => {
|
||||
return axiosInstance
|
||||
.get("hello")
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
return response;
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
return error;
|
||||
});
|
||||
};
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
// Function to register
|
||||
const createUser = async formData => {
|
||||
const createUser = async (formData) => {
|
||||
try {
|
||||
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);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import axios from "axios";
|
||||
import { redirect } from "react-router-dom";
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: "http://127.0.0.1:8000/api/",
|
||||
@ -13,8 +12,8 @@ const axiosInstance = axios.create({
|
||||
|
||||
// handling token refresh on 401 Unauthorized errors
|
||||
axiosInstance.interceptors.response.use(
|
||||
response => response,
|
||||
error => {
|
||||
(response) => response,
|
||||
(error) => {
|
||||
const originalRequest = error.config;
|
||||
const refresh_token = localStorage.getItem("refresh_token");
|
||||
|
||||
@ -26,7 +25,7 @@ axiosInstance.interceptors.response.use(
|
||||
) {
|
||||
return axiosInstance
|
||||
.post("/token/refresh/", { refresh: refresh_token })
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
localStorage.setItem("access_token", response.data.access);
|
||||
|
||||
axiosInstance.defaults.headers["Authorization"] = "Bearer " + response.data.access;
|
||||
@ -34,7 +33,7 @@ axiosInstance.interceptors.response.use(
|
||||
|
||||
return axiosInstance(originalRequest);
|
||||
})
|
||||
.catch(err => {
|
||||
.catch((err) => {
|
||||
console.log("Interceptors error: ", err);
|
||||
});
|
||||
}
|
||||
@ -1,21 +1,21 @@
|
||||
import axiosInstance from "./configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const baseURL = "";
|
||||
|
||||
export const createTask = (endpoint, data) => {
|
||||
return axiosInstance
|
||||
.post(`${baseURL}${endpoint}/`, data)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
export const readTasks = endpoint => {
|
||||
export const readTasks = (endpoint) => {
|
||||
return axiosInstance
|
||||
.get(`${baseURL}${endpoint}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
@ -23,8 +23,8 @@ export const readTasks = endpoint => {
|
||||
export const readTaskByID = (endpoint, id) => {
|
||||
return axiosInstance
|
||||
.get(`${baseURL}${endpoint}/${id}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
@ -32,8 +32,8 @@ export const readTaskByID = (endpoint, id) => {
|
||||
export const updateTask = (endpoint, id, data) => {
|
||||
return axiosInstance
|
||||
.put(`${baseURL}${endpoint}/${id}/`, data)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
@ -41,16 +41,16 @@ export const updateTask = (endpoint, id, data) => {
|
||||
export const deleteTask = (endpoint, id) => {
|
||||
return axiosInstance
|
||||
.delete(`${baseURL}${endpoint}/${id}/`)
|
||||
.then(response => response.data)
|
||||
.catch(error => {
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
};
|
||||
|
||||
// Create
|
||||
export const createTodoTask = data => createTask("todo", data);
|
||||
export const createRecurrenceTask = data => createTask("daily", data);
|
||||
export const createHabitTask = data => createTask("habit", data);
|
||||
export const createTodoTask = (data) => createTask("todo", data);
|
||||
export const createRecurrenceTask = (data) => createTask("daily", data);
|
||||
export const createHabitTask = (data) => createTask("habit", data);
|
||||
|
||||
// Read
|
||||
export const readTodoTasks = () => readTasks("todo");
|
||||
@ -58,9 +58,9 @@ export const readRecurrenceTasks = () => readTasks("daily");
|
||||
export const readHabitTasks = () => readTasks("habit");
|
||||
|
||||
// Read by ID
|
||||
export const readTodoTaskByID = id => readTaskByID("todo", id);
|
||||
export const readRecurrenceTaskByID = id => readTaskByID("daily", id);
|
||||
export const readHabitTaskByID = id => readTaskByID("habit", id);
|
||||
export const readTodoTaskByID = (id) => readTaskByID("todo", id);
|
||||
export const readRecurrenceTaskByID = (id) => readTaskByID("daily", id);
|
||||
export const readHabitTaskByID = (id) => readTaskByID("habit", id);
|
||||
|
||||
// Update
|
||||
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);
|
||||
|
||||
// Delete
|
||||
export const deleteTodoTask = id => deleteTask("todo", id);
|
||||
export const deleteRecurrenceTask = id => deleteTask("daily", id);
|
||||
export const deleteHabitTask = id => deleteTask("habit", id);
|
||||
export const deleteTodoTask = (id) => deleteTask("todo", id);
|
||||
export const deleteRecurrenceTask = (id) => deleteTask("daily", id);
|
||||
export const deleteHabitTask = (id) => deleteTask("habit", id);
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
|
||||
import { readTodoTasks } from "../../api/TaskApi";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
function EachBlog({ name, colorCode, contentList, icon }) {
|
||||
const [tasks, setTasks] = useState(contentList);
|
||||
|
||||
const handleCheckboxChange = async index => {
|
||||
const handleCheckboxChange = async (index) => {
|
||||
try {
|
||||
setTasks(contentList)
|
||||
setTasks(contentList);
|
||||
|
||||
const updatedTasks = [...tasks];
|
||||
const taskId = updatedTasks[index].id;
|
||||
@ -60,12 +60,12 @@ function Eisenhower() {
|
||||
|
||||
useEffect(() => {
|
||||
readTodoTasks()
|
||||
.then(data => {
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
const contentList_ui = data.filter(task => task.priority === 1);
|
||||
const contentList_uni = data.filter(task => task.priority === 2);
|
||||
const contentList_nui = data.filter(task => task.priority === 3);
|
||||
const contentList_nuni = data.filter(task => task.priority === 4);
|
||||
const contentList_ui = data.filter((task) => task.priority === 1);
|
||||
const contentList_uni = data.filter((task) => task.priority === 2);
|
||||
const contentList_nui = data.filter((task) => task.priority === 3);
|
||||
const contentList_nuni = data.filter((task) => task.priority === 4);
|
||||
|
||||
setTasks({
|
||||
contentList_ui,
|
||||
@ -74,7 +74,7 @@ function Eisenhower() {
|
||||
contentList_nuni,
|
||||
});
|
||||
})
|
||||
.catch(error => console.error("Error fetching tasks:", error));
|
||||
.catch((error) => console.error("Error fetching tasks:", error));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React, { useState } from "react";
|
||||
import React 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 "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
export default class Calendar extends React.Component {
|
||||
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 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}'`)) {
|
||||
axiosInstance
|
||||
.delete(`todo/${clickInfo.event.id}/`)
|
||||
.then(response => {
|
||||
clickInfo.event.remove();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error deleting Task:", error);
|
||||
});
|
||||
.delete(`todo/${clickInfo.event.id}/`)
|
||||
.then((response) => {
|
||||
clickInfo.event.remove();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error deleting Task:", error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleEvents = events => {
|
||||
handleEvents = (events) => {
|
||||
this.setState({
|
||||
currentEvents: events,
|
||||
});
|
||||
|
||||
@ -1,103 +1,103 @@
|
||||
import { AreaChart, Title } from "@tremor/react";
|
||||
import React from "react";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const fetchAreaChartData = async () => {
|
||||
let res = await axiosInstance.get("/dashboard/weekly/");
|
||||
console.log(res.data);
|
||||
// const areaChartData = [
|
||||
// {
|
||||
// date: "Mon",
|
||||
// "This Week": res.data[0]["This Week"],
|
||||
// "Last Week": res.data[0]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Tue",
|
||||
// "This Week": res.data[1]["This Week"],
|
||||
// "Last Week": res.data[1]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Wed",
|
||||
// "This Week": res.data[2]["This Week"],
|
||||
// "Last Week": res.data[2]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Th",
|
||||
// "This Week": res.data[3]["This Week"],
|
||||
// "Last Week": res.data[3]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Fri",
|
||||
// "This Week": res.data[4]["This Week"],
|
||||
// "Last Week": res.data[4]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Sat",
|
||||
// "This Week": res.data[5]["This Week"],
|
||||
// "Last Week": res.data[5]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Sun",
|
||||
// "This Week": res.data[6]["This Week"],
|
||||
// "Last Week": res.data[6]["Last Week"],
|
||||
// },
|
||||
// ];
|
||||
const areaChartData = [
|
||||
{
|
||||
date: "Mon",
|
||||
"This Week": 1,
|
||||
"Last Week": 2,
|
||||
},
|
||||
{
|
||||
date: "Tue",
|
||||
"This Week": 5,
|
||||
"Last Week": 2,
|
||||
},
|
||||
{
|
||||
date: "Wed",
|
||||
"This Week": 7,
|
||||
"Last Week": 9,
|
||||
},
|
||||
{
|
||||
date: "Th",
|
||||
"This Week": 10,
|
||||
"Last Week": 3,
|
||||
},
|
||||
{
|
||||
date: "Fri",
|
||||
"This Week": 5,
|
||||
"Last Week": 1,
|
||||
},
|
||||
{
|
||||
date: "Sat",
|
||||
"This Week": 7,
|
||||
"Last Week": 8,
|
||||
},
|
||||
{
|
||||
date: "Sun",
|
||||
"This Week": 3,
|
||||
"Last Week": 8,
|
||||
},
|
||||
];
|
||||
return areaChartData;
|
||||
}
|
||||
let res = await axiosInstance.get("/dashboard/weekly/");
|
||||
console.log(res.data);
|
||||
// const areaChartData = [
|
||||
// {
|
||||
// date: "Mon",
|
||||
// "This Week": res.data[0]["This Week"],
|
||||
// "Last Week": res.data[0]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Tue",
|
||||
// "This Week": res.data[1]["This Week"],
|
||||
// "Last Week": res.data[1]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Wed",
|
||||
// "This Week": res.data[2]["This Week"],
|
||||
// "Last Week": res.data[2]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Th",
|
||||
// "This Week": res.data[3]["This Week"],
|
||||
// "Last Week": res.data[3]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Fri",
|
||||
// "This Week": res.data[4]["This Week"],
|
||||
// "Last Week": res.data[4]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Sat",
|
||||
// "This Week": res.data[5]["This Week"],
|
||||
// "Last Week": res.data[5]["Last Week"],
|
||||
// },
|
||||
// {
|
||||
// date: "Sun",
|
||||
// "This Week": res.data[6]["This Week"],
|
||||
// "Last Week": res.data[6]["Last Week"],
|
||||
// },
|
||||
// ];
|
||||
const areaChartData = [
|
||||
{
|
||||
date: "Mon",
|
||||
"This Week": 1,
|
||||
"Last Week": 2,
|
||||
},
|
||||
{
|
||||
date: "Tue",
|
||||
"This Week": 5,
|
||||
"Last Week": 2,
|
||||
},
|
||||
{
|
||||
date: "Wed",
|
||||
"This Week": 7,
|
||||
"Last Week": 9,
|
||||
},
|
||||
{
|
||||
date: "Th",
|
||||
"This Week": 10,
|
||||
"Last Week": 3,
|
||||
},
|
||||
{
|
||||
date: "Fri",
|
||||
"This Week": 5,
|
||||
"Last Week": 1,
|
||||
},
|
||||
{
|
||||
date: "Sat",
|
||||
"This Week": 7,
|
||||
"Last Week": 8,
|
||||
},
|
||||
{
|
||||
date: "Sun",
|
||||
"This Week": 3,
|
||||
"Last Week": 8,
|
||||
},
|
||||
];
|
||||
return areaChartData;
|
||||
};
|
||||
|
||||
const areaChartDataArray = await fetchAreaChartData();
|
||||
export const AreaChartGraph = () => {
|
||||
const [value, setValue] = React.useState(null);
|
||||
return (
|
||||
<>
|
||||
<Title>Number of tasks statistics vs. last week</Title>
|
||||
<AreaChart
|
||||
className="mt-6"
|
||||
data={areaChartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const [value, setValue] = React.useState(null);
|
||||
return (
|
||||
<>
|
||||
<Title>Number of tasks statistics vs. last week</Title>
|
||||
<AreaChart
|
||||
className="mt-6"
|
||||
data={areaChartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { BarChart, Title } from "@tremor/react";
|
||||
import React from "react";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const fetchBarChartData = async () => {
|
||||
let res = await axiosInstance.get("/dashboard/weekly/");
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { DonutChart } from "@tremor/react";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const fetchDonutData = async () => {
|
||||
try {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
|
||||
import React from "react";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const fetchKpiCardData = async () => {
|
||||
let res = await axiosInstance.get("/dashboard/stats/");
|
||||
@ -9,7 +8,7 @@ const fetchKpiCardData = async () => {
|
||||
// let completedLastWeek = res.data["completed_last_week"];
|
||||
let completedThisWeek = 4;
|
||||
let completedLastWeek = 23;
|
||||
let percentage = (completedThisWeek / completedLastWeek)*100;
|
||||
let percentage = (completedThisWeek / completedLastWeek) * 100;
|
||||
let incOrdec = undefined;
|
||||
if (completedThisWeek <= completedLastWeek) {
|
||||
incOrdec = "moderateDecrease";
|
||||
@ -17,15 +16,13 @@ const fetchKpiCardData = async () => {
|
||||
if (completedThisWeek > completedLastWeek) {
|
||||
incOrdec = "moderateIncrease";
|
||||
}
|
||||
return {completedThisWeek, completedLastWeek, incOrdec, percentage};
|
||||
}
|
||||
|
||||
const {kpiCardDataArray, completedThisWeek ,completedLastWeek, incOrdec, percentage} = await fetchKpiCardData();
|
||||
return { completedThisWeek, completedLastWeek, incOrdec, percentage };
|
||||
};
|
||||
|
||||
const { kpiCardDataArray, completedThisWeek, completedLastWeek, incOrdec, percentage } = await fetchKpiCardData();
|
||||
|
||||
export default function KpiCard() {
|
||||
return (
|
||||
|
||||
<Card className="max-w-lg mx-auto">
|
||||
<Flex alignItems="start">
|
||||
<div>
|
||||
@ -39,4 +36,4 @@ export default function KpiCard() {
|
||||
<ProgressBar value={percentage} className="mt-2" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
const fetchProgressData = async () => {
|
||||
try {
|
||||
@ -27,12 +27,7 @@ export default function ProgressCircleChart() {
|
||||
return (
|
||||
<Card className="max-w-lg mx-auto">
|
||||
<Flex className="flex-col items-center">
|
||||
<ProgressCircle
|
||||
className="mt-6" value={progressData}
|
||||
size={200}
|
||||
strokeWidth={10}
|
||||
radius={60}
|
||||
color="indigo">
|
||||
<ProgressCircle 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">
|
||||
{progressData.toFixed(0)} %
|
||||
</span>
|
||||
|
||||
@ -5,11 +5,11 @@ import { SortableContext, arrayMove } from "@dnd-kit/sortable";
|
||||
import { createPortal } from "react-dom";
|
||||
import TaskCard from "./taskCard";
|
||||
import { AiOutlinePlusCircle } from "react-icons/ai";
|
||||
import axiosInstance from "../../api/configs/AxiosConfig";
|
||||
import axiosInstance from "src/api/AxiosConfig";
|
||||
|
||||
function KanbanBoard() {
|
||||
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 [tasks, setTasks] = useState([]);
|
||||
@ -66,7 +66,7 @@ function KanbanBoard() {
|
||||
const tasksResponse = await axiosInstance.get("/todo");
|
||||
|
||||
// Transform
|
||||
const transformedTasks = tasksResponse.data.map(task => ({
|
||||
const transformedTasks = tasksResponse.data.map((task) => ({
|
||||
id: task.id,
|
||||
columnId: task.list_board,
|
||||
content: task.title,
|
||||
@ -95,7 +95,7 @@ function KanbanBoard() {
|
||||
const columnsResponse = await axiosInstance.get("/lists");
|
||||
|
||||
// Transform
|
||||
const transformedColumns = columnsResponse.data.map(column => ({
|
||||
const transformedColumns = columnsResponse.data.map((column) => ({
|
||||
id: column.id,
|
||||
title: column.name,
|
||||
}));
|
||||
@ -135,7 +135,7 @@ function KanbanBoard() {
|
||||
<div className="ml-2 flex gap-4">
|
||||
<div className="flex gap-4">
|
||||
<SortableContext items={columnsId}>
|
||||
{columns.map(col => (
|
||||
{columns.map((col) => (
|
||||
<ColumnContainerCard
|
||||
key={col.id}
|
||||
column={col}
|
||||
@ -144,7 +144,7 @@ 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>
|
||||
@ -186,7 +186,7 @@ function KanbanBoard() {
|
||||
createTask={createTask}
|
||||
deleteTask={deleteTask}
|
||||
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} />}
|
||||
@ -213,35 +213,34 @@ function KanbanBoard() {
|
||||
|
||||
axiosInstance
|
||||
.post("todo/", newTaskData)
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
const newTask = {
|
||||
id: response.data.id,
|
||||
columnId,
|
||||
content: response.data.title,
|
||||
};
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error creating task:", error);
|
||||
});
|
||||
setTasks(tasks => [...tasks, newTask]);
|
||||
}
|
||||
setTasks((tasks) => [...tasks, newTask]);
|
||||
}
|
||||
|
||||
function deleteTask(id) {
|
||||
const newTasks = tasks.filter(task => task.id !== id);
|
||||
const newTasks = tasks.filter((task) => task.id !== id);
|
||||
axiosInstance
|
||||
.delete(`todo/${id}/`)
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
setTasks(newTasks);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error deleting Task:", error);
|
||||
});
|
||||
setTasks(newTasks);
|
||||
setTasks(newTasks);
|
||||
}
|
||||
|
||||
function updateTask(id, content) {
|
||||
const newTasks = tasks.map(task => {
|
||||
const newTasks = tasks.map((task) => {
|
||||
if (task.id !== id) return task;
|
||||
return { ...task, content };
|
||||
});
|
||||
@ -252,15 +251,15 @@ function KanbanBoard() {
|
||||
function createNewColumn() {
|
||||
axiosInstance
|
||||
.post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
|
||||
.then(response => {
|
||||
.then((response) => {
|
||||
const newColumn = {
|
||||
id: response.data.id,
|
||||
title: response.data.name,
|
||||
};
|
||||
|
||||
setColumns(prevColumns => [...prevColumns, newColumn]);
|
||||
setColumns((prevColumns) => [...prevColumns, newColumn]);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error creating ListBoard:", error);
|
||||
});
|
||||
}
|
||||
@ -268,22 +267,22 @@ function KanbanBoard() {
|
||||
function deleteColumn(id) {
|
||||
axiosInstance
|
||||
.delete(`lists/${id}/`)
|
||||
.then(response => {
|
||||
setColumns(prevColumns => prevColumns.filter(col => col.id !== id));
|
||||
.then((response) => {
|
||||
setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((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
|
||||
.delete(`todo/${task.id}/`)
|
||||
.then(response => {
|
||||
setTasks(prevTasks => prevTasks.filter(t => t.id !== task.id));
|
||||
.then((response) => {
|
||||
setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error deleting Task:", error);
|
||||
});
|
||||
});
|
||||
@ -293,10 +292,10 @@ function KanbanBoard() {
|
||||
// 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)));
|
||||
.then((response) => {
|
||||
setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error("Error updating ListBoard:", error);
|
||||
});
|
||||
}
|
||||
@ -330,9 +329,9 @@ function KanbanBoard() {
|
||||
|
||||
// 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);
|
||||
setColumns((columns) => {
|
||||
const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
|
||||
const overColumnIndex = columns.findIndex((col) => col.id === overId);
|
||||
|
||||
const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
|
||||
|
||||
@ -342,9 +341,9 @@ function KanbanBoard() {
|
||||
|
||||
// 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);
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
const overIndex = tasks.findIndex((t) => t.id === overId);
|
||||
|
||||
const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
|
||||
|
||||
@ -354,15 +353,15 @@ function KanbanBoard() {
|
||||
|
||||
// Move tasks between columns and update columnId
|
||||
if (isActiveATask && isOverAColumn) {
|
||||
setTasks(tasks => {
|
||||
const activeIndex = tasks.findIndex(t => t.id === activeId);
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
|
||||
tasks[activeIndex].columnId = overId;
|
||||
|
||||
axiosInstance
|
||||
.put(`todo/change_task_list_board/`, { todo_id: activeId, new_list_board_id: overId, new_index: 0 })
|
||||
.then(response => {})
|
||||
.catch(error => {
|
||||
.then((response) => {})
|
||||
.catch((error) => {
|
||||
console.error("Error updating task columnId:", error);
|
||||
});
|
||||
|
||||
@ -386,9 +385,9 @@ function KanbanBoard() {
|
||||
if (!isActiveATask) return;
|
||||
|
||||
if (isActiveATask && isOverATask) {
|
||||
setTasks(tasks => {
|
||||
const activeIndex = tasks.findIndex(t => t.id === activeId);
|
||||
const overIndex = tasks.findIndex(t => t.id === overId);
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
const overIndex = tasks.findIndex((t) => t.id === overId);
|
||||
|
||||
if (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";
|
||||
|
||||
if (isActiveATask && isOverAColumn) {
|
||||
setTasks(tasks => {
|
||||
const activeIndex = tasks.findIndex(t => t.id === activeId);
|
||||
setTasks((tasks) => {
|
||||
const activeIndex = tasks.findIndex((t) => t.id === activeId);
|
||||
|
||||
tasks[activeIndex].columnId = overId;
|
||||
return arrayMove(tasks, activeIndex, activeIndex);
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
resolve: {
|
||||
alias: {
|
||||
src: "/src",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user