feature/IO-3291-Tasks-Notifications: Checkpoint

client/src/components/task-center/task-center.component.jsx

@@ -1,4 +1,3 @@
-// client/src/components/task-center/task-center.component.jsx
 import { Virtuoso } from "react-virtuoso";
 import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
@@ -6,12 +5,12 @@ import { useTranslation } from "react-i18next";
 import { forwardRef, useEffect, useRef } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 import day from "../../utils/day.js";
-import "./task-center.styles.scss"; // You can clone this from notification styles for now
+import "./task-center.styles.scss";
 
 const { Text, Title } = Typography;
 
 const TaskCenterComponent = forwardRef(
-  ({ visible, onClose, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
+  ({ visible, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
     const { t } = useTranslation();
     const virtuosoRef = useRef(null);
 
@@ -21,9 +20,12 @@ const TaskCenterComponent = forwardRef(
       }
     }, [showIncompleteOnly]);
 
+    // Filter tasks based on showIncompleteOnly
+    const filteredTasks = showIncompleteOnly ? tasks.filter((task) => !task.completed) : tasks;
+
     const renderTask = (index, task) => {
       const handleClick = () => {
-        onTaskClick(task.id);
+        onTaskClick(task.id); // Use the prop handler
       };
 
       return (
@@ -80,8 +82,8 @@ const TaskCenterComponent = forwardRef(
         <Virtuoso
           ref={virtuosoRef}
           style={{ height: "400px", width: "100%" }}
-          data={tasks}
+          data={filteredTasks}
-          totalCount={tasks.length}
+          totalCount={filteredTasks.length}
           itemContent={renderTask}
         />
       </div>

client/src/components/task-center/task-center.container.jsx

@@ -1,4 +1,3 @@
-// client/src/components/task-center/task-center.container.jsx
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery } from "@apollo/client";
 import { connect } from "react-redux";
@@ -10,6 +9,7 @@ import { useNotification } from "../../contexts/Notifications/notificationContex
 import { MUTATION_TOGGLE_TASK_COMPLETED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries";
 import TaskCenterComponent from "./task-center.component";
 import dayjs from "../../utils/day";
+import { setModalContext } from "../../redux/modals/modals.actions"; // Import setModalContext
 
 const POLL_INTERVAL = 60; // seconds
 
@@ -18,7 +18,11 @@ const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
 });
 
-const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
+const mapDispatchToProps = (dispatch) => ({
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
+});
+
+const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskUpsertContext }) => {
   const [tasks, setTasks] = useState([]);
   const [showIncompleteOnly, setShowIncompleteOnly] = useState(true);
   const [loading, setLoading] = useState(false);
@@ -93,10 +97,15 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
     (id) => {
       const task = tasks.find((t) => t.id === id);
       if (task) {
-        window.location.href = `/manage/jobs/${task.jobid}`;
+        setTaskUpsertContext({
+          context: {
+            taskId: task.id,
+            view: true
+          }
+        });
       }
     },
-    [tasks]
+    [tasks, setModalContext]
   );
 
   return (
@@ -108,9 +117,9 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
       showIncompleteOnly={showIncompleteOnly}
       toggleIncomplete={handleToggleIncomplete}
       markAllComplete={handleMarkAllComplete}
-      onTaskClick={handleTaskClick}
+      onTaskClick={handleTaskClick} // Pass the updated handler
     />
   );
 };
 
-export default connect(mapStateToProps)(TaskCenterContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(TaskCenterContainer);

client/src/components/task-list/task-list.component.jsx

@@ -4,13 +4,12 @@ import {
   DeleteFilled,
   DeleteOutlined,
   EditFilled,
-  ExclamationCircleFilled,
   PlusCircleFilled,
   SyncOutlined
 } from "@ant-design/icons";
 import { Button, Card, Space, Switch, Table } from "antd";
 import queryString from "query-string";
-import React, { useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -19,6 +18,7 @@ import { pageLimit } from "../../utils/config";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter.jsx";
 import dayjs from "../../utils/day";
 import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
+import PriorityLabel from "../../utils/tasksPriorityLabel.jsx";
 
 /**
  * Task List Component
@@ -54,47 +54,12 @@ const RemindAtRecord = ({ remindAt }) => {
   );
 };
 
-/**
- * Priority Label Component
- * @param priority
- * @returns {Element}
- * @constructor
- */
-const PriorityLabel = ({ priority }) => {
-  switch (priority) {
-    case 1:
-      return (
-        <div>
-          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
-        </div>
-      );
-    case 2:
-      return (
-        <div>
-          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
-        </div>
-      );
-    case 3:
-      return (
-        <div>
-          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
-        </div>
-      );
-    default:
-      return (
-        <div>
-          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
-        </div>
-      );
-  }
-};
-
 const mapDispatchToProps = (dispatch) => ({
   // Existing dispatch props...
   setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = () => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(TaskListComponent);
 

client/src/components/task-upsert-modal/task-upsert-modal.component.jsx

@@ -1,5 +1,4 @@
 import { Col, Form, Input, Row, Select, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";

client/src/pages/tasks/allTasksPageContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import TasksPageComponent from "./tasks.page.component";
 import queryString from "query-string";

client/src/utils/tasksPriorityLabel.jsx

@@ -0,0 +1,38 @@
+import { ExclamationCircleFilled } from "@ant-design/icons";
+
+/**
+ * Priority Label Component
+ * @param priority
+ * @returns {Element}
+ * @constructor
+ */
+const PriorityLabel = ({ priority }) => {
+  switch (priority) {
+    case 1:
+      return (
+        <div>
+          High <ExclamationCircleFilled style={{ marginLeft: "5px", color: "red" }} />
+        </div>
+      );
+    case 2:
+      return (
+        <div>
+          Medium <ExclamationCircleFilled style={{ marginLeft: "5px", color: "yellow" }} />
+        </div>
+      );
+    case 3:
+      return (
+        <div>
+          Low <ExclamationCircleFilled style={{ marginLeft: "5px", color: "green" }} />
+        </div>
+      );
+    default:
+      return (
+        <div>
+          None <ExclamationCircleFilled style={{ marginLeft: "5px" }} />
+        </div>
+      );
+  }
+};
+
+export default PriorityLabel;