Merge pull request #43 from TurTaskProject/feature/tasks-api

Update Task relate UI / add checkox and kanban handler

frontend/src/App.jsx

@@ -7,7 +7,7 @@ import SignUpPage from "./components/authentication/SignUpPage";
 import NavBar from "./components/navigations/Navbar";
 import Home from "./components/Home";
 import Calendar from "./components/calendar/calendar";
-import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
+import KanbanPage from "./components/kanbanBoard/kanbanPage";
 import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
@@ -22,13 +22,13 @@ const App = () => {
   return (
     <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
       {!isLoginPageOrSignUpPage && <IconSideNav />}
-      <div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px]"}>
+      <div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px] overflow-hidden"}>
         <NavBar />
-        <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
+        <div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route exact path="/tasks" element={<PrivateRoute />}>
-              <Route exact path="/tasks" element={<KanbanBoard />} />
+              <Route exact path="/tasks" element={<KanbanPage />} />
             </Route>
             <Route path="/testAuth" element={<TestAuth />} />
             <Route exact path="/profile" element={<PrivateRoute />}>

frontend/src/components/EisenhowerMatrix/Eisenhower.jsx

@@ -1,22 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
 import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
 
 function EachBlog({ name, colorCode, contentList, icon }) {
+  const [tasks, setTasks] = useState(contentList);
+
+  const handleCheckboxChange = index => {
+    const updatedTasks = [...tasks];
+    updatedTasks[index].checked = !updatedTasks[index].checked;
+    setTasks(updatedTasks);
+  };
+
   return (
-    <div
-      className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
+    <div className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
       <div className="flex" style={{ color: colorCode }}>
         <span className="mx-2 mt-1">{icon}</span>
         <span>{name}</span>
       </div>
       <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
       <div className="space-y-2">
-        {contentList.length === 0 ? (
+        {tasks.length === 0 ? (
           <p className="text-gray-500 text-center">No tasks</p>
         ) : (
-          contentList.map((item, index) => (
+          tasks.map((item, index) => (
             <div key={index} className="flex items-start">
-              <input type="checkbox" checked={item.checked} className="checkbox mt-1 mr-2" />
+              <input
+                type="checkbox"
+                checked={item.checked}
+                className="checkbox mt-1 mr-2"
+                onChange={() => handleCheckboxChange(index)}
+              />
               <label className="cursor-pointer">{item.text}</label>
             </div>
           ))

frontend/src/components/kanbanBoard/kanbanPage.jsx

@@ -0,0 +1,36 @@
+import KanbanBoard from "./kanbanBoard";
+import React, { useState } from 'react';
+
+const KanbanPage = () => {
+    const [activeTab, setActiveTab] = useState('kanban');
+
+    const handleTabClick = (tabId) => {
+      setActiveTab(tabId);
+    };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-center border-2 py-3 mb-1">
+        <div>
+          <div className="tabs tabs-boxed">
+            <a
+              id="kanban"
+              className={`tab ${activeTab === "kanban" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("kanban")}>
+              Kanban
+            </a>
+            <a
+              id="table"
+              className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("table")}>
+              Table
+            </a>
+          </div>
+        </div>
+      </div>
+      <KanbanBoard />
+    </div>
+  );
+};
+
+export default KanbanPage;

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -43,7 +43,6 @@ function TaskCard({ task, deleteTask, updateTask }) {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        onClick={() => document.getElementById("task_detail_modal").showModal()}
         style={style}
         className="justify-center items-center flex text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
         onMouseEnter={() => {

frontend/src/components/navigations/IconSideNav.jsx

@@ -24,7 +24,7 @@ const SideNav = () => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0">
+    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0 z-50">
       {menuItems.map(item => (
         <NavItem
           key={item.id}