From b24795c1fb1b2498772b0daf5475217220d14b53 Mon Sep 17 00:00:00 2001 From: Ivona Nicetin Date: Sun, 30 Mar 2025 01:34:14 -0700 Subject: [PATCH 1/4] added lock/unlock button in team tasks table --- .../src/components/LockUnlockTask.jsx | 32 +++++++ frontend/react-app/src/pages/TeamTasks.jsx | 90 ++++++++++++++----- 2 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 frontend/react-app/src/components/LockUnlockTask.jsx diff --git a/frontend/react-app/src/components/LockUnlockTask.jsx b/frontend/react-app/src/components/LockUnlockTask.jsx new file mode 100644 index 0000000..fe2b5be --- /dev/null +++ b/frontend/react-app/src/components/LockUnlockTask.jsx @@ -0,0 +1,32 @@ +import { useState } from 'react'; +import { lockTask, unlockTask } from '../api/adminApi'; + +function LockUnlockTask({ initialIsLocked, taskId }) { + const [isLocked, setIsLocked] = useState(initialIsLocked); + + const handleLockUnlock = async () => { + try { + if (isLocked) { + const unlock = await unlockTask(taskId); + if (unlock) { + setIsLocked(false); + } + } else { + const lock = await lockTask(taskId); + if (lock) { + setIsLocked(true); + } + } + } catch (error) { + console.log(`error`); + } + }; + + return ( + + ); +} + +export default LockUnlockTask; diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx index 64979d0..4d58960 100644 --- a/frontend/react-app/src/pages/TeamTasks.jsx +++ b/frontend/react-app/src/pages/TeamTasks.jsx @@ -3,12 +3,12 @@ import TaskList from "../components/TaskList"; import Header from "../components/Header"; import "../css/TeamTasks.css"; import TeamMember from "../components/TeamMember"; -import fakeData from "../FakeData/fakeTaskData.json" import { useCookies } from 'react-cookie'; import { useState, useEffect } from 'react'; -import { getTeamMembers } from "../api/teamApi"; import { useLocation } from 'react-router-dom'; -import { getTeamTasks } from "../api/teamApi"; +import { getTeamTasks, getTeamMembers } from "../api/teamApi"; +import {lockTask, unlockTask} from "../api/adminApi"; +import LockUnlockTask from "../components/LockUnlockTask"; function getAssigneesNames(taskItem) { return taskItem.assignedMembers.map((member) => member.userName).join(", "); @@ -31,7 +31,7 @@ function setUpData(results) { ...baseItem, status: taskItem.status, priority: taskItem.priority, - isLocked: taskItem.isLocked.toString() + isLocked: !!taskItem.isLocked }; }); @@ -48,6 +48,12 @@ function setUpDataCompleted(results) { }); } + + + + + + const commonColumns= [ { Header: "Task Name", @@ -69,21 +75,7 @@ const commonColumns= [ accessor: "dueDate", }, ] -const headerAndAccessors = [ - ...commonColumns, - { - Header: "Priority", - accessor: "priority", - }, - { - Header: "Status", - accessor: "status", - }, - { - Header: "Is Locked", - accessor: "isLocked", - } -] + const headerAndAccessorsComplete = [ ...commonColumns, @@ -119,7 +111,8 @@ function TeamTasks(){ } } - + + useEffect(()=>{ fetchData(); console.log("Tasks To Do:", tasksToDo); @@ -127,6 +120,63 @@ function TeamTasks(){ },[]); + + const [lockedTasks, setLockedTasks] = useState({}); + const handleLockUnlock = async (id, isLocked) => { + console.log("id " + id); + console.log("is locked" + isLocked); + try { + if (isLocked) { + console.log("task is locked"); + const unlock = await unlockTask(id); + if (unlock) { + console.log(`Task unlocked successfully.`); + setLockedTasks((prevLockedTasks) => ({ + ...prevLockedTasks, + [id]: false, + })); + } + } else { + console.log("task is unlocked"); + const lock = await lockTask(id); + if (lock) { + console.log(`Task locked successfully.`); + setLockedTasks((prevLockedTasks) => ({ + ...prevLockedTasks, + [id]: true, + })); + } + } + } catch (error) { + console.log(`error`); + } + }; + + const headerAndAccessors = [ + ...commonColumns, + { + Header: "Priority", + accessor: "priority", + }, + { + Header: "Status", + accessor: "status", + }, + { + + Header: "Is Locked", + accessor: "isLocked", + Cell: (original) => { + const taskId = original.row.original.id; + const isLocked = original.value; + return ; + } + + } +]; + + + useEffect(()=>{ From 1f0ad434ad8f8077ca315144bf8c05e1bdf3c922 Mon Sep 17 00:00:00 2001 From: Ivona Nicetin Date: Tue, 1 Apr 2025 20:57:52 -0700 Subject: [PATCH 2/4] check users role to give access to lock/unlock --- frontend/react-app/src/pages/TeamTasks.jsx | 102 ++++++++++----------- 1 file changed, 47 insertions(+), 55 deletions(-) diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx index 4d58960..4aa4861 100644 --- a/frontend/react-app/src/pages/TeamTasks.jsx +++ b/frontend/react-app/src/pages/TeamTasks.jsx @@ -7,8 +7,9 @@ import { useCookies } from 'react-cookie'; import { useState, useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { getTeamTasks, getTeamMembers } from "../api/teamApi"; -import {lockTask, unlockTask} from "../api/adminApi"; import LockUnlockTask from "../components/LockUnlockTask"; +import { isAdmin } from "../api/authInfoApi"; + function getAssigneesNames(taskItem) { return taskItem.assignedMembers.map((member) => member.userName).join(", "); @@ -36,6 +37,8 @@ function setUpData(results) { }); } + + function setUpDataCompleted(results) { return results .filter((taskItem) => taskItem.status === "Done") @@ -91,12 +94,14 @@ function TeamTasks(){ const [teamMembers, setTeamMembers ] = useState([]); const [loadingNames, setLoadingNames] = useState(true); const [loadingTasks, setLoadingTasks] = useState(true); + const [isUserAdmin, setIsUserAdmin] = useState(true); const location = useLocation(); const { teamId } = location.state; console.log("teamId:", teamId); const [tasksToDo, setTasksToDo ] = useState([]); + async function fetchData(){ @@ -110,47 +115,44 @@ function TeamTasks(){ setLoadingTasks(false) } } - - - - useEffect(()=>{ - fetchData(); - console.log("Tasks To Do:", tasksToDo); - - - },[]); + // useEffect(() => { + // async function checkIfUserAdmin() { + // try { + // const role = await isAdmin(); + // console.log("User Role from API:", role); + // setIsUserAdmin(role); + // } catch (error) { + // console.log("Error checking admin status:", error); + // } + // } + // checkIfUserAdmin(); + // fetchData(); + // }, []); + + useEffect(() => { + async function checkIfUserAdmin() { + try { + const response = await isAdmin(); + console.log("Raw API Response from isAdmin:", response); + + // Explicitly log the type + console.log("Type of response:", typeof response); - const [lockedTasks, setLockedTasks] = useState({}); - const handleLockUnlock = async (id, isLocked) => { - console.log("id " + id); - console.log("is locked" + isLocked); - try { - if (isLocked) { - console.log("task is locked"); - const unlock = await unlockTask(id); - if (unlock) { - console.log(`Task unlocked successfully.`); - setLockedTasks((prevLockedTasks) => ({ - ...prevLockedTasks, - [id]: false, - })); - } - } else { - console.log("task is unlocked"); - const lock = await lockTask(id); - if (lock) { - console.log(`Task locked successfully.`); - setLockedTasks((prevLockedTasks) => ({ - ...prevLockedTasks, - [id]: true, - })); + // If it's an object, check its properties + if (typeof response === "object") { + console.log("API Response Object:", JSON.stringify(response, null, 2)); } + + setIsUserAdmin(response); // Assuming it's a boolean + } catch (error) { + console.log("Error checking admin status:", error); } - } catch (error) { - console.log(`error`); } - }; + checkIfUserAdmin(); + fetchData(); + }, []); + const headerAndAccessors = [ ...commonColumns, @@ -163,23 +165,20 @@ function TeamTasks(){ accessor: "status", }, { - Header: "Is Locked", accessor: "isLocked", Cell: (original) => { - const taskId = original.row.original.id; const isLocked = original.value; - return ; - } - + return isUserAdmin ? ( + + ) : ( + isLocked ? '🔒' : '🔓' + ); + }, } ]; - - - - - useEffect(()=>{ +useEffect(()=>{ async function loadAPIInfo() { try { const data = await getTeamMembers(teamId) @@ -191,17 +190,10 @@ function TeamTasks(){ } } loadAPIInfo(); - },[]) if(loadingNames || loadingTasks){ return (
Loading...
) } - - - - //mock - const isAdmin = false; - //mock const members = [ { id: 1, name: "Adam Apple", role: "Admin" }, @@ -247,7 +239,7 @@ if(loadingNames || loadingTasks){

Team Members

{teamMembers.map((member) => ( - + ))}
From d266f8a81f94c0e1b4e450e74f177d7d2bedc2de Mon Sep 17 00:00:00 2001 From: Ivona Nicetin Date: Tue, 1 Apr 2025 23:36:17 -0700 Subject: [PATCH 3/4] checks if it is an admin or team member in team tasks page --- frontend/react-app/src/pages/TeamTasks.jsx | 58 +--------------------- 1 file changed, 2 insertions(+), 56 deletions(-) diff --git a/frontend/react-app/src/pages/TeamTasks.jsx b/frontend/react-app/src/pages/TeamTasks.jsx index d3efb5a..84b181f 100644 --- a/frontend/react-app/src/pages/TeamTasks.jsx +++ b/frontend/react-app/src/pages/TeamTasks.jsx @@ -9,8 +9,6 @@ import { getTeamMembers as getAllTeamMembers}from "../api/teamMemberAccountApi"; import { useLocation } from 'react-router-dom'; import { getTeamTasks, getTeamMembers } from "../api/teamApi"; import LockUnlockTask from "../components/LockUnlockTask"; -import { isAdmin } from "../api/authInfoApi"; - import DeleteTeamButton from "../components/DeleteTeamButton"; import { getAdmins } from "../api/adminApi"; import AddToTeam from "../components/AddToTeam"; @@ -42,7 +40,6 @@ function setUpData(results) { }); } - function setUpDataCompleted(results) { return results .filter((taskItem) => taskItem.status === "Done") @@ -55,12 +52,6 @@ function setUpDataCompleted(results) { }); } - - - - - - const commonColumns= [ { Header: "Task Name", @@ -93,12 +84,10 @@ const headerAndAccessorsComplete = [ ] function TeamTasks(){ const [cookies] = useCookies(['userInfo']); - const userId = cookies.userInfo.accountId; const [teamMembers, setTeamMembers ] = useState([]); const [loadingNames, setLoadingNames] = useState(true); const [loadingTasks, setLoadingTasks] = useState(true); - const [isUserAdmin, setIsUserAdmin] = useState(true); const [allUsersLoading, setallUsersLoading] = useState(true) const location = useLocation(); @@ -138,8 +127,6 @@ function TeamTasks(){ } } - - useEffect(()=>{ fetchData(); console.log("Tasks To Do:", tasksToDo); @@ -147,46 +134,7 @@ function TeamTasks(){ },[]); - - - // useEffect(() => { - // async function checkIfUserAdmin() { - // try { - // const role = await isAdmin(); - // console.log("User Role from API:", role); - // setIsUserAdmin(role); - // } catch (error) { - // console.log("Error checking admin status:", error); - // } - // } - // checkIfUserAdmin(); - // fetchData(); - // }, []); - - useEffect(() => { - async function checkIfUserAdmin() { - try { - const response = await isAdmin(); - console.log("Raw API Response from isAdmin:", response); - - // Explicitly log the type - console.log("Type of response:", typeof response); - - // If it's an object, check its properties - if (typeof response === "object") { - console.log("API Response Object:", JSON.stringify(response, null, 2)); - } - - setIsUserAdmin(response); // Assuming it's a boolean - } catch (error) { - console.log("Error checking admin status:", error); - } - } - checkIfUserAdmin(); - fetchData(); - }, []); - - + const isAdmin = cookies.userInfo.role ==='admin'; const headerAndAccessors = [ ...commonColumns, { @@ -202,7 +150,7 @@ function TeamTasks(){ accessor: "isLocked", Cell: (original) => { const isLocked = original.value; - return isUserAdmin ? ( + return isAdmin ? ( ) : ( isLocked ? '🔒' : '🔓' @@ -231,8 +179,6 @@ if(loadingNames || loadingTasks){ console.log(teamLead) - //mock - const isAdmin = cookies.userInfo.role ==='admin'; //mock const members = [ From 0d0ce10950f8a1419c5366c2f00d73dbec50a167 Mon Sep 17 00:00:00 2001 From: Ivona Nicetin Date: Tue, 1 Apr 2025 23:55:20 -0700 Subject: [PATCH 4/4] implemented lock/unlock on My tasks page --- frontend/react-app/src/pages/MyTasks.jsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx index c019a05..bb8e247 100644 --- a/frontend/react-app/src/pages/MyTasks.jsx +++ b/frontend/react-app/src/pages/MyTasks.jsx @@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'; import { getAssignedTasks } from "../api/teamMemberApi"; import { useCookies } from 'react-cookie'; import { useState, useEffect } from 'react'; +import LockUnlockTask from "../components/LockUnlockTask"; @@ -52,6 +53,7 @@ function mapTaskItem(taskItem) { function MyTasks(){ const [cookies] = useCookies(['userInfo']) const userId = cookies.userInfo.accountId +const isAdmin =cookies.userInfo.role ==='admin'; const [tasksToDo, setTasksToDo ] = useState([]); const [loading, setLoading] = useState(true); @@ -76,10 +78,7 @@ useEffect(()=>{ },[]); -useEffect(() => { - - console.log("Tasks To Do (after state update):", tasksToDo); -}, [tasksToDo]); + const commonColumns = [ { @@ -121,7 +120,15 @@ const headerAndAccessors = [ { Header: "Is Locked", accessor: "isLocked", - } + Cell: (original) => { + const isLocked = original.value; + return isAdmin ? ( + + ) : ( + isLocked ? '🔒' : '🔓' + ); + }, + } ] const headerAndAccessorsComplete = [ ...commonColumns,