From dc4fce2228c3b0463522135b76f342ec4dfea314 Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Tue, 27 Feb 2024 16:32:52 -0500 Subject: [PATCH 1/9] Added a "Edit Tasks" button Added this button because before on page initialization, the app would have to make too many unnecessary requests to the backend. Now when the users wants to edit tasks, they may click the new button which will then make all the requests to the backend needed. --- .../Reports/TasksDetail/TasksDetail.jsx | 6 ++--- .../Reports/TasksTable/TasksTable.css | 23 +++++++++++++++- .../Reports/TasksTable/TasksTable.jsx | 27 ++++++++++++++----- 3 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx index 06985a48dc..ba831db20f 100644 --- a/src/components/Reports/TasksDetail/TasksDetail.jsx +++ b/src/components/Reports/TasksDetail/TasksDetail.jsx @@ -30,7 +30,7 @@ export const TasksDetail = props => { let tasksList = []; let tasks = []; tasks = props.tasks_filter; - + console.log(props) if (props.tasks_filter.length > 0) { tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( (filteredTask, filter) => { @@ -57,7 +57,7 @@ export const TasksDetail = props => { tasksList = tasks.map((task, index) => (
- { parentId3={task.parentId3} mother={task.mother} level={task.level} - /> + />}
{index + 1}
diff --git a/src/components/Reports/TasksTable/TasksTable.css b/src/components/Reports/TasksTable/TasksTable.css index 6f5f8de1c6..b5047bf793 100644 --- a/src/components/Reports/TasksTable/TasksTable.css +++ b/src/components/Reports/TasksTable/TasksTable.css @@ -36,7 +36,21 @@ outline-color: #e7b1ef; color: #ca50db; border-radius: 4px; - margin-left: 40px; + margin-left: 20px; + width: 100px; + min-width: 100px; + height: 30px; + cursor: pointer; +} + +.tasks-table-edit-tasks-button{ + display: block; + background-color: white; + border: 2px solid #007bff; + outline-color: #007bff; + color: #5750db; + border-radius: 4px; + margin-left: 0px; width: 100px; min-width: 100px; height: 30px; @@ -49,3 +63,10 @@ border-color: #ca50db; outline-color: #ca50db; } + +.tasks-table-edit-tasks-button:hover, +.tasks-table-edit-tasks-button:focus, +.tasks-table-edit-tasks-button:active { + border-color: #5750db; + outline-color: #5750db; +} \ No newline at end of file diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx index 076f515c1b..48d4f69955 100644 --- a/src/components/Reports/TasksTable/TasksTable.jsx +++ b/src/components/Reports/TasksTable/TasksTable.jsx @@ -15,6 +15,7 @@ export const TasksTable = ({ WbsTasksID }) => { const [isActive, setActive] = useState(true); const [isAssigned, setAssigned] = useState(true); + const [toggleEditTasks, setToggleEditTasks] = useState(false); const [filters, setFilters] = useState({ status: '', priority: '', @@ -101,19 +102,31 @@ export const TasksTable = ({ WbsTasksID }) => { />
- +
+ + + +
+
Date: Fri, 1 Mar 2024 18:20:03 -0500 Subject: [PATCH 2/9] tasks table not loading fix --- src/components/Reports/TasksTable/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Reports/TasksTable/selectors.js b/src/components/Reports/TasksTable/selectors.js index 54fea0099e..91a43a7811 100644 --- a/src/components/Reports/TasksTable/selectors.js +++ b/src/components/Reports/TasksTable/selectors.js @@ -9,7 +9,7 @@ export const get_task_by_wbsId = (WbsTasksID, tasks) => { } } - return get_tasks[1]; + return get_tasks[0]; }; export const getTasksTableData = (state, { WbsTasksID }) => ({ From 959d39e9d88af86564bb28a3ec2f59b880189c5d Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Fri, 1 Mar 2024 18:53:07 -0500 Subject: [PATCH 3/9] Fixed unit test --- src/__tests__/TaskTable/Selectors.test.js | 20 +++++++++++++++++-- .../Reports/TasksTable/selectors.js | 4 ++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/__tests__/TaskTable/Selectors.test.js b/src/__tests__/TaskTable/Selectors.test.js index ef80bd975b..6bc8b99970 100644 --- a/src/__tests__/TaskTable/Selectors.test.js +++ b/src/__tests__/TaskTable/Selectors.test.js @@ -12,7 +12,7 @@ describe('get_task_by_wbsId', () => { }; const WbsTasksID = ['A','B']; const result = get_task_by_wbsId(WbsTasksID, mockTasks); - expect(result).toEqual([{ id: 2, wbsId: 'B' }]); + expect(result).toEqual([ { id: 1, wbsId: 'A' }, { id: 3, wbsId: 'A' }, { id: 2, wbsId: 'B' } ]); }); it('returns the correct tasks based on WbsTasksID', () => { @@ -26,7 +26,23 @@ describe('get_task_by_wbsId', () => { }; const WbsTasksID = ['A']; const result = get_task_by_wbsId(WbsTasksID, mockTasks); - expect(result).toEqual(undefined); + console.log("RESULT: "); + console.log(result) + expect(result).toEqual([{"id": 1, "wbsId": "A"}, {"id": 3, "wbsId": "A"}]); + }); + + it('returns an empty array when WbsTasksID is not found', () => { + const mockTasks = { + fetched: true, + taskItems: [ + { id: 1, wbsId: 'A' }, + { id: 2, wbsId: 'B' }, + { id: 3, wbsId: 'A' } + ] + }; + const WbsTasksID = ['C']; // WbsTasksID not found + const result = get_task_by_wbsId(WbsTasksID, mockTasks); + expect(result).toEqual([]); }); }); diff --git a/src/components/Reports/TasksTable/selectors.js b/src/components/Reports/TasksTable/selectors.js index 91a43a7811..630d3302bd 100644 --- a/src/components/Reports/TasksTable/selectors.js +++ b/src/components/Reports/TasksTable/selectors.js @@ -4,12 +4,12 @@ export const get_task_by_wbsId = (WbsTasksID, tasks) => { let i = 0; while (i < WbsTasksID.length && tasks.fetched) { const result = tasks.taskItems.filter(task => task.wbsId === WbsTasksID[i]); - get_tasks.push(result); + get_tasks.push(...result); i += 1; } } - return get_tasks[0]; + return get_tasks; }; export const getTasksTableData = (state, { WbsTasksID }) => ({ From 59845efecbedd7c1aa8e4ba1883b928f7e123752 Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Mon, 4 Mar 2024 12:32:25 -0500 Subject: [PATCH 4/9] Fixed all the console errors --- .../ProjectMemberTable/ProjectMemberTable.jsx | 20 ++++++++++++------- .../Reports/TasksDetail/TasksDetail.jsx | 7 +++---- src/components/Reports/WbsTable/WbsTable.jsx | 4 ++-- src/components/common/Paging/Paging.jsx | 1 + 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx index 6656606976..25262697e3 100644 --- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx +++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx @@ -9,6 +9,10 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou const [memberFilter, setMemberFilter] = useState('active'); const { fetched, foundUsers, members } = projectMembers; + useEffect(() => { + handleMemberCount(activeMemberList.length); + }) + useEffect(() => { if (fetched) { const memberList = []; @@ -44,9 +48,9 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
{member.active ? ( - +
- +
) : (
@@ -69,9 +73,9 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
{member.active ? ( - +
- +
) : (
@@ -89,6 +93,11 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
{ setMemberFilter(e.target.value); + if (e.target.value === 'all-time') { + handleMemberCount(allMemberList.length); + } else { + handleMemberCount(activeMemberList.length); + } }} > @@ -99,9 +108,6 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou - {memberFilter == 'all-time' - ? handleMemberCount(allMemberList.length) - : handleMemberCount(activeMemberList.length)}
diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx index ba831db20f..d27f585804 100644 --- a/src/components/Reports/TasksDetail/TasksDetail.jsx +++ b/src/components/Reports/TasksDetail/TasksDetail.jsx @@ -16,7 +16,7 @@ const ShowCollapse = props => {
{props.resources[0].name}
{props.resources.slice(1).map(resource => ( - +
{resource.name}
@@ -30,7 +30,6 @@ export const TasksDetail = props => { let tasksList = []; let tasks = []; tasks = props.tasks_filter; - console.log(props) if (props.tasks_filter.length > 0) { tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( (filteredTask, filter) => { @@ -85,9 +84,9 @@ export const TasksDetail = props => {
{task.isActive ? ( - +
- +
) : (
diff --git a/src/components/Reports/WbsTable/WbsTable.jsx b/src/components/Reports/WbsTable/WbsTable.jsx index 3deb8fa107..21fe3ae627 100644 --- a/src/components/Reports/WbsTable/WbsTable.jsx +++ b/src/components/Reports/WbsTable/WbsTable.jsx @@ -12,9 +12,9 @@ export const WbsTable = ({ wbs, skip, take }) => {
{item.wbsName}
{item.isActive ? ( - +
- +
) : (
diff --git a/src/components/common/Paging/Paging.jsx b/src/components/common/Paging/Paging.jsx index a79dcf5a88..6386408b33 100644 --- a/src/components/common/Paging/Paging.jsx +++ b/src/components/common/Paging/Paging.jsx @@ -12,6 +12,7 @@ export const Paging = ({ maxElemPerPage = 6, totalElementsCount, children }) =>
setCurrentPage(pageNumber)} className={classnames('page-index-button', { 'active-button': pageNumber === currentPage })} + key={pageNumber} > {pageNumber}
From 7d30886b72af747cb977a7281057e9bb9445505b Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Wed, 13 Mar 2024 12:56:22 -0400 Subject: [PATCH 5/9] Fixed tasks not appearing in the table --- src/components/Reports/ProjectReport/ProjectReport.jsx | 9 +++++++++ src/components/Reports/TasksTable/TasksTable.jsx | 2 +- src/components/Reports/TasksTable/selectors.js | 4 ++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx index 14cde33fa8..dae8f0e816 100644 --- a/src/components/Reports/ProjectReport/ProjectReport.jsx +++ b/src/components/Reports/ProjectReport/ProjectReport.jsx @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { FiBox } from 'react-icons/fi'; import { getProjectDetail } from '../../../actions/project'; import { fetchAllMembers, getProjectActiveUser } from '../../../actions/projectMembers'; +import { fetchAllTasks } from 'actions/task'; import { fetchAllWBS } from '../../../actions/wbs'; import { ProjectMemberTable } from '../ProjectMemberTable'; import { ReportPage } from '../sharedComponents/ReportPage'; @@ -29,6 +30,14 @@ export const ProjectReport = ({ match }) => { } }, []); + useEffect(() => { + if(wbs.fetching === false){ + wbs.WBSItems.forEach(wbs => { + dispatch(fetchAllTasks(wbs._id)); + }); + } +}, [wbs]); + useEffect(() => { if (projectMembers.members) { dispatch(getProjectActiveUser()); diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx index 48d4f69955..b26ebe5646 100644 --- a/src/components/Reports/TasksTable/TasksTable.jsx +++ b/src/components/Reports/TasksTable/TasksTable.jsx @@ -11,7 +11,7 @@ import TextSearchBox from 'components/UserManagement/TextSearchBox'; import { boxStyle } from 'styles'; export const TasksTable = ({ WbsTasksID }) => { - const { get_tasks } = useSelector(state => getTasksTableData(state, { WbsTasksID })); + const { get_tasks } = useSelector(state => getTasksTableData(state.tasks, { WbsTasksID })); const [isActive, setActive] = useState(true); const [isAssigned, setAssigned] = useState(true); diff --git a/src/components/Reports/TasksTable/selectors.js b/src/components/Reports/TasksTable/selectors.js index 630d3302bd..446214777d 100644 --- a/src/components/Reports/TasksTable/selectors.js +++ b/src/components/Reports/TasksTable/selectors.js @@ -12,6 +12,6 @@ export const get_task_by_wbsId = (WbsTasksID, tasks) => { return get_tasks; }; -export const getTasksTableData = (state, { WbsTasksID }) => ({ - get_tasks: get_task_by_wbsId(WbsTasksID, state.tasks) || [], +export const getTasksTableData = (tasks, { WbsTasksID }) => ({ + get_tasks: get_task_by_wbsId(WbsTasksID, tasks) || [], }); From 48c7558e9404c5f73d131165121658829caf0f50 Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Fri, 31 May 2024 12:40:07 -0400 Subject: [PATCH 6/9] Tasks now appear in Tasks table --- src/__tests__/TaskTable/TasksTable.test.js | 2 +- src/components/Header/DarkMode.css | 4 ++ .../WBS/WBSDetail/EditTask/EditTaskModal.jsx | 1 + .../ProjectMemberTable/ProjectMemberTable.jsx | 6 +-- .../Reports/ProjectReport/ProjectReport.jsx | 35 ++++++++------- .../Reports/TasksDetail/TasksDetail.jsx | 43 ++++++++++--------- .../Reports/TasksTable/TasksTable.jsx | 10 ++--- 7 files changed, 55 insertions(+), 46 deletions(-) diff --git a/src/__tests__/TaskTable/TasksTable.test.js b/src/__tests__/TaskTable/TasksTable.test.js index 505115a596..e86f124f35 100644 --- a/src/__tests__/TaskTable/TasksTable.test.js +++ b/src/__tests__/TaskTable/TasksTable.test.js @@ -16,7 +16,7 @@ describe('TasksTable component', () => { const renderComponent = () => render( - + ); diff --git a/src/components/Header/DarkMode.css b/src/components/Header/DarkMode.css index 5b547ee0b5..8de1ec674b 100644 --- a/src/components/Header/DarkMode.css +++ b/src/components/Header/DarkMode.css @@ -18,4 +18,8 @@ .dark-mode .close:hover { color: #f0f0f0; opacity: 1; +} + +.dark-mode tr:hover{ + background-color: #1C2541; } \ No newline at end of file diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx index 63d372bf39..a5cffb0945 100644 --- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx @@ -305,6 +305,7 @@ function EditTaskModal(props) { id="priority" onChange={e => setPriority(e.target.value)} value={priority} + className='mt-2 ml-3' > diff --git a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx index 481edeedfd..c197a156e3 100644 --- a/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx +++ b/src/components/Reports/ProjectMemberTable/ProjectMemberTable.jsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import './ProjectMemberTable.css'; import { Link } from 'react-router-dom'; -export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCount, darkMode }) => { +export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCount, darkMode, counts }) => { const [allMemberList, setAllMemberList] = useState([]); const [activeMemberList, setActiveMemberList] = useState([]); const [memberFilter, setMemberFilter] = useState('active'); @@ -102,11 +102,11 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou >
diff --git a/src/components/Reports/ProjectReport/ProjectReport.jsx b/src/components/Reports/ProjectReport/ProjectReport.jsx index 38b46da637..32f8a883f0 100644 --- a/src/components/Reports/ProjectReport/ProjectReport.jsx +++ b/src/components/Reports/ProjectReport/ProjectReport.jsx @@ -20,11 +20,11 @@ import { boxStyle, boxStyleDark } from 'styles'; // eslint-disable-next-line import/prefer-default-export export function ProjectReport({ match }) { - const darkMode = useSelector(state => state.theme.darkMode); const [memberCount, setMemberCount] = useState(0); const [activeMemberCount, setActiveMemberCount] = useState(0); const [nonActiveMemberCount, setNonActiveMemberCount] = useState(0); const [hoursCommitted, setHoursCommitted] = useState(0); + const [tasks, setTasks] = useState([]); const dispatch = useDispatch(); const isAdmin = useSelector(state => state.auth.user.role) === 'Administrator'; @@ -36,29 +36,33 @@ export function ProjectReport({ match }) { const { wbs, projectMembers, isActive, projectName, wbsTasksID } = useSelector( projectReportViewData, ); - const tasks = useSelector(state => state.tasks); + const darkMode = useSelector(state => state.theme.darkMode); + const tasksState = useSelector(state => state.tasks); useEffect(() => { if (match) { - dispatch(getProjectDetail(match.params.projectId)); - dispatch(fetchAllWBS(match.params.projectId)); - dispatch(fetchAllMembers(match.params.projectId)); + const { projectId } = match.params; + dispatch(getProjectDetail(projectId)); + dispatch(fetchAllWBS(projectId)); + dispatch(fetchAllMembers(projectId)); + setTasks([]); } - }, []); + }, [dispatch, match]); useEffect(() => { if (wbs.fetching === false) { - wbs.WBSItems.forEach(wbs => { - dispatch(fetchAllTasks(wbs._id)); + wbs.WBSItems.forEach(wbsItem => { + dispatch(fetchAllTasks(wbsItem._id)); }); } - }, [wbs]); + }, [dispatch, wbs]); useEffect(() => { - if (tasks.taskItems.length > 0) { - setHoursCommitted(tasks.taskItems.reduce((total, task) => total + task.estimatedHours, 0)); + if (tasksState.taskItems.length > 0) { + setTasks(tasksState.taskItems); + setHoursCommitted(tasksState.taskItems.reduce((total, task) => total + task.estimatedHours, 0)); } - }, [tasks]); + }, [tasksState]); useEffect(() => { if (projectMembers.members) { @@ -71,7 +75,7 @@ export function ProjectReport({ match }) { setActiveMemberCount(activeCount); setNonActiveMemberCount(nonActiveCount); } - }, [projectMembers.members]); + }, [dispatch, projectMembers.members]); const handleMemberCount = elementCount => { setMemberCount(elementCount); @@ -105,16 +109,17 @@ export function ProjectReport({ match }) { projectMembers={projectMembers} handleMemberCount={handleMemberCount} darkMode={darkMode} + counts={{ activeMemberCount: activeMemberCount, memberCount: nonActiveMemberCount + activeMemberCount }} />
- +
); -} +} \ No newline at end of file diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx index 40c7a22e17..22d424ab22 100644 --- a/src/components/Reports/TasksDetail/TasksDetail.jsx +++ b/src/components/Reports/TasksDetail/TasksDetail.jsx @@ -31,28 +31,29 @@ export const TasksDetail = props => { let tasksList = []; let tasks = []; tasks = props.tasks_filter; - if (props.tasks_filter.length > 0) { - tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( - (filteredTask, filter) => { - return props[filter] - ? filteredTask.filter(item => item[filter] === props[filter]) - : filteredTask; - }, - tasks, - ); - if (props.users) { - let test = []; - for (var i = 0; i < tasks.length; i++) { - for (var j = 0; j < tasks[i].resources.length; j++) { - if (tasks[i].resources[j].name === props.users) { - test.push(tasks[i]); - } - } - } - tasks = test; - } - } + // if (tasks.length > 0) { + // tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( + // (filteredTask, filter) => { + // return props[filter] + // ? filteredTask.filter(item => item[filter] === props[filter]) + // : filteredTask; + // }, + // tasks, + // ); + + // if (props.users) { + // let test = []; + // for (var i = 0; i < tasks.length; i++) { + // for (var j = 0; j < tasks[i].resources.length; j++) { + // if (tasks[i].resources[j].name === props.users) { + // test.push(tasks[i]); + // } + // } + // } + // tasks = test; + // } + // } tasksList = tasks.map((task, index) => (
diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx index 2142422f9c..3efeb52e31 100644 --- a/src/components/Reports/TasksTable/TasksTable.jsx +++ b/src/components/Reports/TasksTable/TasksTable.jsx @@ -15,9 +15,7 @@ import TextSearchBox from 'components/UserManagement/TextSearchBox'; import { boxStyle, boxStyleDark } from 'styles'; import { TasksDetail } from '../TasksDetail'; -export function TasksTable({ WbsTasksID, darkMode }) { - const { get_tasks } = useSelector(state => getTasksTableData(state, { WbsTasksID })); - +export function TasksTable({ darkMode, tasks }) { const [isActive, setActive] = useState(true); const [isAssigned, setAssigned] = useState(true); const [toggleEditTasks, setToggleEditTasks] = useState(false); @@ -44,7 +42,7 @@ export function TasksTable({ WbsTasksID, darkMode }) { }; function FilterOptions({ filterName, width }) { - const filtersOptions = [...Array.from(new Set(get_tasks.map(item => item[filterName]))).sort()]; + const filtersOptions = [...Array.from(new Set(tasks.map(item => item[filterName]))).sort()]; return (
- + @@ -128,7 +126,7 @@ export function TasksTable({ WbsTasksID, darkMode }) {
Date: Fri, 7 Jun 2024 16:36:53 -0400 Subject: [PATCH 7/9] Complete redesign of tasks table --- src/components/Header/DarkMode.css | 2 +- src/components/LeaderBoard/Leaderboard.css | 2 - .../WBS/WBSDetail/EditTask/EditTaskModal.jsx | 11 +- .../Reports/ProjectReport/ProjectReport.css | 25 --- .../Reports/TasksDetail/TasksDetail.css | 97 ++++++--- .../Reports/TasksDetail/TasksDetail.jsx | 184 +++++++++--------- .../Reports/TasksTable/TasksTable.jsx | 4 +- 7 files changed, 177 insertions(+), 148 deletions(-) diff --git a/src/components/Header/DarkMode.css b/src/components/Header/DarkMode.css index 8de1ec674b..804544c735 100644 --- a/src/components/Header/DarkMode.css +++ b/src/components/Header/DarkMode.css @@ -21,5 +21,5 @@ } .dark-mode tr:hover{ - background-color: #1C2541; + background-color: #2f4157; } \ No newline at end of file diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css index eb1442b7bd..1455fff065 100644 --- a/src/components/LeaderBoard/Leaderboard.css +++ b/src/components/LeaderBoard/Leaderboard.css @@ -15,9 +15,7 @@ } thead th { - position: sticky; top: 0; - background-color: aliceblue; border-top: 1px solid #dee2e6; border-top-width: 1px; border-top-style: solid; diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx index a5cffb0945..8f67aa35f5 100644 --- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx @@ -264,7 +264,7 @@ function EditTaskModal(props) { }, [links]); return ( -
+
@@ -650,7 +650,7 @@ function EditTaskModal(props) { Start Date {ReadOnlySectionWrapper( -
+
changeDateStart(input.state.value)} value={startedDate} /> -
+
{dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
, @@ -669,14 +669,15 @@ function EditTaskModal(props) { End Date {ReadOnlySectionWrapper( -
+
changeDateEnd(input.state.value)} + /> -
+
{dateWarning ? DUE_DATE_MUST_GREATER_THAN_START_DATE : ''}
, diff --git a/src/components/Reports/ProjectReport/ProjectReport.css b/src/components/Reports/ProjectReport/ProjectReport.css index 28cea1dc3c..57e9f36922 100644 --- a/src/components/Reports/ProjectReport/ProjectReport.css +++ b/src/components/Reports/ProjectReport/ProjectReport.css @@ -16,31 +16,6 @@ } } -@media (max-width: 321px) { - .tasks-block { - width: 50rem; - margin-left: 30rem; - } -} -@media (min-width: 322px) and ( max-width: 366px) { - .tasks-block { - width: 50rem; - margin-left: 26rem; - } -} -@media (min-width: 367px) and ( max-width: 426px) { - .tasks-block { - width: 50rem; - margin-left: 25rem; - } -} -@media (min-width: 427px) and ( max-width: 769px) { - .tasks-block { - width: 50rem; - margin-left: 23rem; - } -} - .container-project-wrapper { min-height: 100%; background-color: #faf7fc; diff --git a/src/components/Reports/TasksDetail/TasksDetail.css b/src/components/Reports/TasksDetail/TasksDetail.css index 6e40af817f..881c70709a 100644 --- a/src/components/Reports/TasksDetail/TasksDetail.css +++ b/src/components/Reports/TasksDetail/TasksDetail.css @@ -1,40 +1,87 @@ -.tasks-detail-table-row { - display: grid; - grid-auto-flow: column; - grid-template-columns: repeat(2, minmax(0, 1fr)) 3fr repeat(9, minmax(0, 2fr)); - column-gap: 4px; - min-height: 42px; - align-items: center; - justify-items: start; - padding: 0 16px; - border-bottom: 3px solid #f8f7f8; +/* TasksTable.css */ +.tasks-block { + width: 100%; + overflow-x: auto; +} + +.tasks-detail-total{ + float: left; +} + +.tasks-detail-table { + width: 100%; + border-collapse: collapse; + min-width: 800px; /* Minimum width to maintain table layout on smaller screens */ +} + +.tasks-detail-table th, .tasks-detail-table td { + padding: 5px; + border: 1px solid #ddd; + text-align: left; } .tasks-detail-table-head { - background-color: #eee7f8; - margin-bottom: 16px; - border-radius: 4px; - min-height: 32px; - padding: 8px 16px; + background-color: #f8f9fa; + font-weight: bold; } .tasks-detail-center-cells { - justify-self: center; + text-align: center; } .tasks-detail-task-name { - word-break: break-all; + flex: 2; } -.tasks-detail-total { - text-align: left; - margin-bottom: 12px; - font-size: 18px; - color: #acacac; +.isActive i { + color: green; +} + +.isNotActive i { + color: red; +} + +.dark-mode-row { + background-color: #3A506B ; + color: #fff; +} +/* Responsive design */ +@media screen and (max-width: 1100px) { + .collapse-column { + display: none; + } } -@media (max-width: 1100px) { - .tasks-detail-table-row { - grid-template-columns: repeat(1, minmax(0, 1fr)) 2fr repeat(9, minmax(0, 2fr)); +@media screen and (max-width: 1100px) { + .tasks-detail-table { + min-width: 600px; + } + + .tasks-detail-table th, .tasks-detail-table td { + padding: 5px; + font-size: 12px; + } + + .tasks-detail-total { + font-size: 14px; + } +} + +@media screen and (max-width: 645px) { + .tasks-detail-table { + min-width: 400px; + } + + .tasks-detail-table th, .tasks-detail-table td { + padding: 2px; + font-size: 10px; + } + + .tasks-detail-total { + font-size: 12px; + } + + .tasks-detail-center-cells { + font-size: 10px; } } \ No newline at end of file diff --git a/src/components/Reports/TasksDetail/TasksDetail.jsx b/src/components/Reports/TasksDetail/TasksDetail.jsx index 22d424ab22..f649fa54d5 100644 --- a/src/components/Reports/TasksDetail/TasksDetail.jsx +++ b/src/components/Reports/TasksDetail/TasksDetail.jsx @@ -1,90 +1,79 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Button } from 'react-bootstrap'; import EditTaskModal from '../../Projects/WBS/WBSDetail/EditTask/EditTaskModal'; import 'react-table/react-table.css'; import Collapse from 'react-bootstrap/Collapse'; import './TasksDetail.css'; -const ShowCollapse = props => { +const ShowCollapse = (props) => { const [open, setOpen] = useState(false); return ( -
- - + <>
{props.resources[0].name}
- - {props.resources.slice(1).map(resource => ( + {props.resources.slice(1).map((resource) => ( -
- {resource.name} -
+
{resource.name}
 ))} -
+ + ); }; -export const TasksDetail = props => { +const formatDate = (datetime) => { + if(datetime){ + const options = { year: 'numeric', month: 'short', day: 'numeric' }; + return new Date(datetime).toLocaleDateString(undefined, options); + } + return 'N/A' +}; + +const truncate = (str, n) => { + return str.length > n ? str.substring(0, n - 1) + '...' : str; +}; + +export const TasksDetail = (props) => { + const [filteredTasks, setFilteredTasks] = useState(props.tasks_filter); const darkMode = props.darkMode; - let tasksList = []; - let tasks = []; - tasks = props.tasks_filter; - // if (tasks.length > 0) { - // tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( - // (filteredTask, filter) => { - // return props[filter] - // ? filteredTask.filter(item => item[filter] === props[filter]) - // : filteredTask; - // }, - // tasks, - // ); + useEffect(() => { + let tasks = props.tasks_filter; + + if (tasks.length > 0) { + tasks = ['priority', 'status', 'classification', 'isActive', 'isAssigned'].reduce( + (filteredTask, filter) => { + return props[filter] + ? filteredTask.filter(item => item[filter] === props[filter]) + : filteredTask; + }, + tasks + ); + + if (props.users) { + tasks = tasks.filter(task => task.resources.some(resource => resource.name === props.users)); + } + } - // if (props.users) { - // let test = []; - // for (var i = 0; i < tasks.length; i++) { - // for (var j = 0; j < tasks[i].resources.length; j++) { - // if (tasks[i].resources[j].name === props.users) { - // test.push(tasks[i]); - // } - // } - // } - // tasks = test; - // } - // } + setFilteredTasks(tasks); + }, [props.tasks_filter, props.priority, props.status, props.classification, props.isActive, props.isAssigned, props.users]); - tasksList = tasks.map((task, index) => ( -
-
- {props.toggleEditTasks && } -
-
-
{index + 1}
-
-
{task.taskName}
-
{task.priority}
-
{task.status}
-
+ + const tasksList = filteredTasks.map((task, index) => ( + + {index + 1} + {truncate(task.taskName, 20)} + {task.priority} + {task.status} + {task.resources.length <= 2 ? ( - task.resources.map(resource =>
{resource.name}
) + task.resources.map((resource) =>
{resource.name}
) ) : ( )} -
- -
+ + {task.isActive ? (
@@ -94,35 +83,54 @@ export const TasksDetail = props => {
)} -
- -
+ + {task.isAssigned ?
Assign
:
Not Assign
} -
-
{task.classification}
-
{task.estimatedHours.toFixed(2)}
-
{task.startedDatetime}
-
{task.dueDatetime}
-
+ + {task.classification} + {task.estimatedHours.toFixed(2)} + {formatDate(task.startedDatetime)} + {formatDate(task.dueDatetime)} + + {props.toggleEditTasks && ( + + )} + + )); return (
-
Total: {tasksList.length}
-
-
#
-
Task
-
Priority
-
Status
-
Resources
-
Active
-
Assign
-
Class
-
Estimated Hours
-
Start Date
-
End Date
-
-
{tasksList}
+
Total: {tasksList.length}
+ + + + + + + + + + + + + + + + + + {tasksList} +
#TaskPriorityStatusResourcesActiveAssignClassEstimated HoursStart DateEnd DateActions
); }; diff --git a/src/components/Reports/TasksTable/TasksTable.jsx b/src/components/Reports/TasksTable/TasksTable.jsx index 3efeb52e31..770779ba2a 100644 --- a/src/components/Reports/TasksTable/TasksTable.jsx +++ b/src/components/Reports/TasksTable/TasksTable.jsx @@ -127,14 +127,14 @@ export function TasksTable({ darkMode, tasks }) {
); From b53f9f4d1206860ffa7b9f268e3d0e90e2b5c838 Mon Sep 17 00:00:00 2001 From: Nahiyan16 Date: Mon, 10 Jun 2024 15:14:49 -0400 Subject: [PATCH 8/9] Update EditTaskModal.jsx --- .../WBS/WBSDetail/EditTask/EditTaskModal.jsx | 311 +++++++++--------- 1 file changed, 162 insertions(+), 149 deletions(-) diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx index 8f67aa35f5..9654a43e94 100644 --- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx @@ -285,35 +285,38 @@ function EditTaskModal(props) { Task Name - {ReadOnlySectionWrapper( -