Nahiyan_Added a "Edit Tasks" button to reduce the number of requests

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([]);
   });
 });
 

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
       </Link>
       <div className="projects__active--input">
         {member.active ? (
-          <tasks className="isActive">
+          <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
-          </tasks>
+          </div>
         ) : (
           <div className="isNotActive">
             <i className="fa fa-circle-o" aria-hidden="true"></i>
@@ -69,9 +73,9 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
       </Link>
       <div className="projects__active--input">
         {member.active ? (
-          <tasks className="isActive">
+          <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
-          </tasks>
+          </div>
         ) : (
           <div className="isNotActive">
             <i className="fa fa-circle-o" aria-hidden="true"></i>
@@ -89,6 +93,11 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
         <div className="filter-members-mobile"
           onChange={e => {
             setMemberFilter(e.target.value);
+            if (e.target.value === 'all-time') {
+              handleMemberCount(allMemberList.length);
+            } else {
+              handleMemberCount(activeMemberList.length);
+            }
           }}
         >
           <input type="radio" name="memberFilter" value="active" id="active" defaultChecked />
@@ -99,9 +108,6 @@ export const ProjectMemberTable = ({ projectMembers, skip, take, handleMemberCou
           <label htmlFor="all-time" id="project-all-member-count" className="project-member-count">
             ALL-TIME: {members.length}
           </label>
-          {memberFilter == 'all-time'
-            ? handleMemberCount(allMemberList.length)
-            : handleMemberCount(activeMemberList.length)}
         </div>
       </div>
       <div className="reports-table-head-members">

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';
@@ -39,6 +40,14 @@ export function ProjectReport({ match }) {
     }
   }, []);
 
+  useEffect(() => {
+  if(wbs.fetching === false){
+    wbs.WBSItems.forEach(wbs => {
+      dispatch(fetchAllTasks(wbs._id));
+    });
+  }
+}, [wbs]);
+
   useEffect(() => {
     if (projectMembers.members) {
       dispatch(getProjectActiveUser());

src/components/Reports/TasksDetail/TasksDetail.jsx

@@ -16,7 +16,7 @@ const ShowCollapse = props => {
       <div>{props.resources[0].name}</div>
 
       {props.resources.slice(1).map(resource => (
-        <Collapse in={open}>
+        <Collapse in={open} key={resource._id}>
           <div key={resource._id} className="new-line">
             {resource.name}
           </div>
@@ -30,7 +30,6 @@ 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) => {
@@ -57,7 +56,7 @@ export const TasksDetail = props => {
   tasksList = tasks.map((task, index) => (
     <div key={task._id} className="tasks-detail-table-row">
       <div>
-        <EditTaskModal
+        {props.toggleEditTasks && <EditTaskModal
           key={`updateTask_${task._id}`}
           parentNum={task.num}
           taskId={task._id}
@@ -67,7 +66,7 @@ export const TasksDetail = props => {
           parentId3={task.parentId3}
           mother={task.mother}
           level={task.level}
-        />
+        />}
       </div>
       <div>
         <div>{index + 1}</div>
@@ -85,9 +84,9 @@ export const TasksDetail = props => {
 
       <div className="tasks-detail-center-cells">
         {task.isActive ? (
-          <tasks className="isActive">
+          <div className="isActive">
             <i className="fa fa-circle" aria-hidden="true"></i>
-          </tasks>
+          </div>
         ) : (
           <div className="isNotActive">
             <i className="fa fa-circle-o" aria-hidden="true"></i>

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;
+}

src/components/Reports/TasksTable/TasksTable.jsx

@@ -11,10 +11,11 @@ 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);
+  const [toggleEditTasks, setToggleEditTasks] = useState(false);
   const [filters, setFilters] = useState({
     status: '',
     priority: '',
@@ -101,19 +102,31 @@ export const TasksTable = ({ WbsTasksID }) => {
           />
         </div>
 
-        <button
-          className="tasks-table-clear-filter-button"
-          onClick={() => resetAllFilters()}
-          style={boxStyle}
-        >
-          Clear filters
-        </button>
+        <div className='d-flex'>
+          <button
+            className="tasks-table-edit-tasks-button"
+            onClick={() => setToggleEditTasks(!toggleEditTasks)}
+            style={boxStyle}
+          >
+            Edit Tasks
+          </button>
+
+          <button
+            className="tasks-table-clear-filter-button"
+            onClick={() => resetAllFilters()}
+            style={boxStyle}
+          >
+            Clear filters
+          </button>
+        </div>
+
       </div>
 
       <TasksDetail
         tasks_filter={get_tasks}
         isAssigned={isAssigned}
         isActive={isActive}
+        toggleEditTasks={toggleEditTasks}
         priority={filters.priority}
         status={filters.status}
         classification={filters.classification}

src/components/Reports/TasksTable/selectors.js

@@ -4,14 +4,14 @@ 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[1];
+  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) || [],
 });

src/components/Reports/WbsTable/WbsTable.jsx

@@ -22,9 +22,9 @@ export function WbsTable({ wbs, skip, take, match, canViewWBS }) {
         </div>
         <div className="projects__active--input">
           {item.isActive ? (
-            <tasks className="isActive">
+            <div className="isActive">
               <i className="fa fa-circle" aria-hidden="true"></i>
-            </tasks>
+            </div>
           ) : (
             <div className="isNotActive">
               <i className="fa fa-circle-o" aria-hidden="true" />

src/components/common/Paging/Paging.jsx

@@ -12,6 +12,7 @@ export const Paging = ({ maxElemPerPage = 6, totalElementsCount, children }) =>
     <div
       onClick={() => setCurrentPage(pageNumber)}
       className={classnames('page-index-button', { 'active-button': pageNumber === currentPage })}
+      key={pageNumber}
     >
       {pageNumber}
     </div>