Merge pull request #38 from Yacobolo/feature/jobmodule

working on job module and dependency module

frontend/src/components/data-tables/dependency/dependencyDetails.tsx

@@ -4,6 +4,8 @@ import { Badge } from "@mantine/core";
 import { DataGrid, GridToolbar, GridColDef } from "@mui/x-data-grid";
 
 import { useNavigate } from "react-router-dom";
+import { getString } from "@/helpers";
+import { useAppSelector } from "@/app/hooks";
 
 type BadgeType = {
   [key in string]: string;
@@ -12,35 +14,59 @@ type BadgeType = {
 const DependencyDetails = ({ data }: any) => {
   const navigate = useNavigate();
 
+  const dependenciesSelector = useAppSelector(
+    (state) => state.dependency.dependencies
+  );
+
+  const dependenciesStatusSelector = useAppSelector(
+    (state) => state.dependency.dependencyStatus
+  );
+
   const columns: GridColDef<any>[] = [
-    { field: "id", headerName: "Id" },
+    { field: "id", headerName: "ID" }, // Adjust the width as needed
     {
-      field: "dependency_name",
-      headerName: "Dependency Name",
+      field: "external_id",
+      headerName: "external_id",
       flex: 1,
-      headerAlign: "center",
-      align: "center",
     },
     {
-      field: "dependency_type",
-      headerName: "Dependency Type",
+      field: "name",
+      headerName: "name",
       flex: 1,
-      headerAlign: "center",
-      align: "center",
     },
+
     {
-      field: "expected_close",
+      field: "expected_close_datetime",
       headerName: "Expected Close",
-      flex: 1,
-      headerAlign: "center",
-      align: "center",
+      flex: 1, // Adjust the width as needed
+      renderCell: (row) => {
+        return (
+          <span>
+            {row.row.expected_close_datetime
+              ? row.row.expected_close_datetime?.slice(0, 10)
+              : ""}
+          </span>
+        );
+      },
     },
     {
-      field: "actual_close",
+      field: "actual_close_datetime",
       headerName: "Actual Close",
+      flex: 1, // Adjust the width as needed
+      renderCell: (row) => {
+        return (
+          <span>
+            {row.row.actual_close_datetime
+              ? row.row.actual_close_datetime?.slice(0, 10)
+              : ""}
+          </span>
+        );
+      },
+    },
+    {
+      field: "notes",
+      headerName: "Notes",
       flex: 1,
-      headerAlign: "center",
-      align: "center",
     },
     {
       field: "status",
@@ -49,20 +75,30 @@ const DependencyDetails = ({ data }: any) => {
       headerAlign: "center",
       align: "center",
       renderCell: (row) => {
-        // console.log("🚀 ~ file: index.tsx:78 ~ Jobs ~ param:", row);
+        const filterjobstatus = dependenciesStatusSelector.filter(
+          (dependency: any) => dependency.id === row.row.dependency_status
+        );
 
         const badgeColor: BadgeType = {
-          Completed: "green",
-          "in-progress": "yellow",
+          completed: "green",
+          "not-planned": "red",
+          planned: "violet",
+          progress: "yellow",
         };
 
         return (
           <Badge
             variant="light"
-            color={badgeColor[row.value]}
-            sx={{ textTransform: "unset" }}
+            color={badgeColor[filterjobstatus[0]?.name]}
+            sx={{
+              textTransform: "unset",
+              borderRadius: "5px",
+              fontSize: "10px",
+              padding: "10px",
+              height: "35px",
+            }}
           >
-            {row.value}
+            {getString(filterjobstatus[0]?.name)}
           </Badge>
         );
       },
@@ -125,7 +161,7 @@ const DependencyDetails = ({ data }: any) => {
               <DataGrid
                 className="dataGrid"
                 autoHeight={true}
-                rows={data ?? []}
+                rows={dependenciesSelector ?? []}
                 columns={columns}
                 initialState={{
                   pagination: {

frontend/src/components/slider/Sidenav.tsx

@@ -29,7 +29,7 @@ import SupportIcon from "@/assets/sidebar/support_agent.svg";
 import ResourceIcon from "@/assets/sidebar/resource.svg";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Dote from "@/assets/images/Dote.svg";
-import FactoryFlowIcon from "@/assets/images/factryflow .svg";
+import FactoryFlowIcon from "@/assets/images/FactryFlow.svg";
 import FFLogo from "@/assets/images/FFlogo.svg";
 const drawerWidth = 240;
 

frontend/src/pages/Jobs/Form.tsx

@@ -40,6 +40,8 @@ import {
   FormInputDropdown,
 } from "@/components/form-components/FormInputText";
 import { setJobStatus, setJobType } from "@/redux/features/jobSlice";
+import { useGetAllDependencyQuery } from "@/redux/api/dependencyApi";
+import { setDependencies } from "@/redux/features/dependencySlice";
 
 const validationSchema = yup.object().shape({
   name: yup.string().required("Name is required"),
@@ -96,6 +98,13 @@ const MyForm = () => {
     undefined,
     {}
   );
+
+  const {
+    data: getDependencyData,
+    isLoading: dependencyIsLoading,
+    error,
+  } = useGetAllDependencyQuery(undefined);
+
   const Defaultvalues = {
     name: "",
     priority: "",
@@ -144,6 +153,12 @@ const MyForm = () => {
     }
   }, [updateJobData, updateError, updateIsLoading]);
 
+  useEffect(() => {
+    if (!dependencyIsLoading && getDependencyData && isEdit) {
+      dispatch(setDependencies(getDependencyData));
+    }
+  }, [dependencyIsLoading, getDependencyData, isEdit]);
+
   useEffect(() => {
     const planned_start_datetime = ["planned_start_datetime"];
     const planned_end_datetime = ["planned_end_datetime"];

frontend/src/pages/Jobs/index.tsx

@@ -162,7 +162,13 @@ const Jobs = () => {
           <Badge
             variant="light"
             color={badgeColor[filterjobstatus[0].name]}
-            sx={{ textTransform: "unset" }}
+            sx={{
+              textTransform: "unset",
+              borderRadius: "5px",
+              fontSize: "10px",
+              padding: "10px",
+              height: "35px",
+            }}
           >
             {getString(filterjobstatus[0].name)}
           </Badge>
@@ -174,23 +180,11 @@ const Jobs = () => {
       headerName: "Action",
       width: 180,
       sortable: false,
-
       renderCell: (params: any) => {
         const handleDeleteAction = (e: React.SyntheticEvent<any>) => {
           const currentRowId = params.row.id;
           setDeleteModel(true);
           setDeleteId(currentRowId);
-
-          // if (window.confirm("Are you sure you want to remove this Job?")) {
-          //   // return alert(JSON.stringify(currentRow, null, 4));
-          //   deleteJobs(currentRow?.id);
-          //   const newJobiesData = jobsSelector.filter(
-          //     (item: any) => item.id !== currentRow?.id
-          //   );
-          //   dispatch(setJobies(newJobiesData));
-          //   toast.success("Job Delete Successfully");
-          // }
-          // return;
         };
 
         const handleEditAction = (e: React.SyntheticEvent<any>) => {
@@ -200,22 +194,21 @@ const Jobs = () => {
 
         return (
           <Stack direction="row" spacing={2}>
-            <img src={viewicon} alt="view_Icon" height={30} width={24} />
+            <img src={viewicon} alt="view_Icon" height={17} width={17} />
             <img
               src={editicon}
               alt="edit_Icon"
-              height={30}
-              width={24}
+              height={17}
+              width={17}
               onClick={handleEditAction}
             />
             <img
               src={deleteicon}
               alt="delete_Icon"
-              height={30}
-              width={24}
+              height={17}
+              width={17}
               onClick={handleDeleteAction}
             />
-            {/*<DeleteIcon onClick={handleDeleteAction} /> */}
           </Stack>
         );
       },