Skip to content

Commit 311401c

Browse files
SosokkerSosokker
authored
Merge pull request #89 from TurTaskProject/feature/kanban-board
Feature/kanban board
2 parents 601b3d0 + 6322a08 commit 311401c

8 files changed

Lines changed: 414 additions & 114 deletions

File tree

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@
6464
"eslint-plugin-react-hooks": "^4.6.0",
6565
"eslint-plugin-react-refresh": "^0.4.4",
6666
"postcss": "^8.4.31",
67+
"prettier": "^3.1.0",
68+
"prettier-plugin-tailwindcss": "^0.5.7",
6769
"tailwindcss": "^3.3.5",
6870
"vite": "^4.5.0"
6971
}

‎frontend/pnpm-lock.yaml‎

Lines changed: 67 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/calendar/TaskDataHandler.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { readTodoTasks } from "src/api/TaskApi";
2+
import { axiosInstance } from "src/api/AxiosConfig";
23

34
let eventGuid = 0;
45

‎frontend/src/components/calendar/calendar.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ export class Calendar extends React.Component {
1313
currentEvents: [],
1414
};
1515

16+
async handleGoogleClick() {
17+
try {
18+
const response = await axiosInstance.get("calendar-events/");
19+
} catch (error) {
20+
console.error("Error fetching data from Google:", error);
21+
}
22+
}
23+
1624
render() {
1725
return (
1826
<div className="flex font-sans w-full h-screen">
@@ -47,10 +55,7 @@ export class Calendar extends React.Component {
4755
<div className="w-72 bg-blue-100 border-r border-blue-200 p-8 flex flex-col">
4856
{/* Description Zone */}
4957
<div className="mb-8">
50-
<h2 className="text-xl font-bold">Instructions</h2>
5158
<ul className="list-disc pl-4">
52-
<li>Select dates and you will be prompted to create a new event</li>
53-
<li>Drag, drop, and resize events</li>
5459
<li>Click an event to delete it</li>
5560
</ul>
5661
</div>
@@ -66,7 +71,7 @@ export class Calendar extends React.Component {
6671
/>
6772
Toggle weekends
6873
</label>
69-
<button className="btn btn-info" onClick={() => alert("Commit soon🥺")}>
74+
<button className="btn btn-info" onClick={() => this.handleGoogleClick()}>
7075
Load Data from Google
7176
</button>
7277
</div>

‎frontend/src/components/kanbanBoard/kanbanPage.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { KanbanBoard } from "./kanbanBoard";
22
import { useState } from "react";
3+
import { TableBoard } from "./tableBoard";
34

45
export const KanbanPage = () => {
56
const [activeTab, setActiveTab] = useState("kanban");
@@ -16,19 +17,21 @@ export const KanbanPage = () => {
1617
<a
1718
id="kanban"
1819
className={`tab ${activeTab === "kanban" ? "tab-active" : ""}`}
19-
onClick={() => handleTabClick("kanban")}>
20+
onClick={() => handleTabClick("kanban")}
21+
>
2022
Kanban
2123
</a>
22-
{/* <a
24+
<a
2325
id="table"
2426
className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
25-
onClick={() => handleTabClick("table")}>
27+
onClick={() => handleTabClick("table")}
28+
>
2629
Table
27-
</a> */}
30+
</a>
2831
</div>
2932
</div>
3033
</div>
31-
<KanbanBoard />
34+
{activeTab === "kanban" ? <KanbanBoard /> : <TableBoard />}
3235
</div>
3336
);
3437
};

‎frontend/src/components/kanbanBoard/tableBoard.jsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { useState, useEffect } from "react";
2+
import { axiosInstance } from "src/api/AxiosConfig";
3+
4+
export function TableBoard() {
5+
const [tasks, setTasks] = useState([]);
6+
7+
// ---------------- Fetch Data ----------------
8+
useEffect(() => {
9+
const fetchData = async () => {
10+
try {
11+
const tasksResponse = await axiosInstance.get("/todo");
12+
13+
// Transform
14+
const transformedTasks = tasksResponse.data.map((task) => ({
15+
id: task.id,
16+
columnId: task.list_board,
17+
content: task.title,
18+
difficulty: task.difficulty,
19+
notes: task.notes,
20+
importance: task.importance,
21+
challenge: task.challenge,
22+
fromSystem: task.fromSystem,
23+
creation_date: task.creation_date,
24+
last_update: task.last_update,
25+
is_active: task.is_active,
26+
is_full_day_event: task.is_full_day_event,
27+
start_event: task.start_event,
28+
end_event: task.end_event,
29+
google_calendar_id: task.google_calendar_id,
30+
completed: task.completed,
31+
completion_date: task.completion_date,
32+
priority: task.priority,
33+
user: task.user,
34+
list_board: task.list_board,
35+
tags: task.tags,
36+
subtaskCount: task.sub_task_count,
37+
}));
38+
setTasks(transformedTasks);
39+
} catch (error) {
40+
console.error("Error fetching data from API:", error);
41+
}
42+
};
43+
fetchData();
44+
}, []);
45+
46+
// ---------------- END Fetch Data ----------------
47+
48+
return (
49+
<div className="overflow-x-auto">
50+
<table className="table">
51+
{/* head */}
52+
<thead>
53+
<tr>
54+
<th></th>
55+
<th>Title</th>
56+
<th>Description</th>
57+
<th>Priority</th>
58+
<th>Due Date</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
{/* BODY */}
63+
{tasks.map((task, index) => (
64+
<tr key={index}>
65+
<th>
66+
<label></label>
67+
</th>
68+
<td>
69+
<div className="flex items-center gap-3">
70+
<div>
71+
<div className="font-bold">{task.content}</div>
72+
<div className="text-sm opacity-50">{task.content}</div>
73+
</div>
74+
</div>
75+
</td>
76+
<td>
77+
{task.notes}
78+
<br />
79+
<span className="badge badge-ghost badge-sm">Description</span>
80+
</td>
81+
<td>{task.priority}</td>
82+
<th>
83+
<button className="btn btn-ghost btn-xs">{task.end_event}</button>
84+
</th>
85+
</tr>
86+
))}
87+
{/* END BODY */}
88+
</tbody>
89+
{/* foot */}
90+
<tfoot>
91+
<tr>
92+
<th></th>
93+
<th>Title</th>
94+
<th>Description</th>
95+
<th>Priority</th>
96+
<th>Due Date</th>
97+
</tr>
98+
</tfoot>
99+
</table>
100+
</div>
101+
);
102+
}

‎frontend/src/components/kanbanBoard/taskCard.jsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@ export function TaskCard({ task, deleteTask, updateTask }) {
5050
task.difficulty === 1
5151
? "bg-blue-200 text-blue-700"
5252
: task.difficulty === 2
53-
? "bg-green-200 text-green-700"
54-
: task.difficulty === 3
55-
? "bg-yellow-200 text-yellow-700"
56-
: task.difficulty === 4
57-
? "bg-red-200 text-red-700"
58-
: "bg-purple-200 text-purple-700"
53+
? "bg-green-200 text-green-700"
54+
: task.difficulty === 3
55+
? "bg-yellow-200 text-yellow-700"
56+
: task.difficulty === 4
57+
? "bg-red-200 text-red-700"
58+
: "bg-purple-200 text-purple-700"
5959
}`}>
6060
difficulty
6161
</span>
@@ -71,12 +71,12 @@ export function TaskCard({ task, deleteTask, updateTask }) {
7171
daysUntilDue >= 365
7272
? "gray-200"
7373
: daysUntilDue >= 30
74-
? "blue-200"
75-
: daysUntilDue >= 7
76-
? "green-200"
77-
: daysUntilDue > 0
78-
? "yellow-200"
79-
: "red-200";
74+
? "blue-200"
75+
: daysUntilDue >= 7
76+
? "green-200"
77+
: daysUntilDue > 0
78+
? "yellow-200"
79+
: "red-200";
8080

8181
const formattedDueDate =
8282
daysUntilDue >= 365
@@ -85,7 +85,10 @@ export function TaskCard({ task, deleteTask, updateTask }) {
8585
month: "short",
8686
year: "numeric",
8787
})
88-
: new Date(task.end_event).toLocaleDateString("en-US", { day: "numeric", month: "short" });
88+
: new Date(task.end_event).toLocaleDateString("en-US", {
89+
day: "numeric",
90+
month: "short",
91+
});
8992

9093
return (
9194
<span className={`bg-${colorClass} text-[10px] font-xl font-bold px-2 py-1 rounded-full`}>
@@ -122,13 +125,15 @@ export function TaskCard({ task, deleteTask, updateTask }) {
122125
<TaskDetailModal
123126
taskId={task.id}
124127
title={task.content}
125-
description={task.description}
128+
description={task.notes}
126129
tags={task.tags}
127130
difficulty={task.difficulty}
128131
challenge={task.challenge}
129132
importance={task.importance}
130133
updateTask={updateTask}
131134
completed={task.completed}
135+
start_event={task.start_event}
136+
end_event={task.end_event}
132137
/>
133138

134139
{/* -------- Task Card -------- */}

0 commit comments

Comments
 (0)