Merge pull request 'pramod_Bug#126ManageRole - Role selection UI bugs, empty state handling, and async refactor' (#53) from pramod_Bug#126ManageRole into Issues_April_5W

Reviewed-on: #53

public/assets/js/dashboards-analytics.js

@@ -7,7 +7,7 @@
 function projectCardChart(project) {
   // Order Statistics Chart
   // --------------------------------------------------------------------
-  console.log(project);
+  
   let cardColor, headingColor, axisColor, shadeColor, borderColor;
 
   cardColor = config.colors.cardColor;

public/js/helpers.js

@@ -523,7 +523,6 @@ var Helpers = {
   // ---
   // Toggle layout
   toggleCollapsed(animate = true) {
-    console.log('a');
     this.setCollapsed(!this.isCollapsed(), animate)
   },
 

src/components/Activities/ReportTaskComments.jsx

@@ -73,7 +73,6 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
       // closeModal();
     } catch (error) {
       setloading(false);
-      console.log(error);
       showToast(error.response.data?.message || "Something wrong", "error");
     }
   };

src/components/Directory/ManageDirectory.jsx

@@ -65,7 +65,7 @@ const ManageDirectory = () => {
   }, [emailFields.length, phoneFields.length]);
 
   const onSubmit = (data) => {
-    console.log("Submitted:\n" + JSON.stringify(data, null, 2));
+    // console.log("Submitted:\n" + JSON.stringify(data, null, 2));
   };
 
   const handleAddEmail = async () => {

src/components/Employee/EmpProfile.jsx

@@ -74,7 +74,6 @@ function EmpProfile({ addOrEdit }) {
         alert("Form submitted successfully!");
       }
     } catch (error) {
-      console.error("Error submitting form:", error);
       alert("Failed to submit form.");
     }
   };

src/components/Employee/ManageRole.jsx

@@ -10,14 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import showToast from "../../services/toastService";
 
 const formSchema = z.object({
-  selectedRole: z.record(z.boolean()).refine(
+  selectedRole: z.record(z.boolean()),
-    (data) => {
-      return Object.values(data).some((value) => value === true);
-    },
-    {
-      message: "At least one checkbox must be selected.",
-    }
-  ),
 });
 
 const ManageRole = ( {employeeId, onClosed} ) =>
@@ -45,11 +38,19 @@ const ManageRole = ( {employeeId, onClosed} ) =>
 
   useEffect(() => {
     if (employeeRoles && data) {
-      const updatedRoles = buildDefaultRoles();
+      if (employeeRoles.length > 0) {
-      setInitialRoles(updatedRoles);
+        const updatedRoles = buildDefaultRoles();
+        setInitialRoles(updatedRoles);
+      } else {
+        setInitialRoles({});
+      }
+    } else {
+      setInitialRoles({});
     }
   }, [employeeRoles, data]);
   
+  
+
   const {
     register,
     handleSubmit,
@@ -57,42 +58,86 @@ const ManageRole = ( {employeeId, onClosed} ) =>
     reset,
   } = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: {
+  
-      selectedRole: initialRoles,
-    },
   });
 
   useEffect(() => {
-    if (Object.keys(initialRoles).length > 0) {
+    if (!data) return;
-      reset({
+  
-        selectedRole: initialRoles,
+    const updatedRoles = {};
-      });
+    data.forEach((role) => {
-    }
+      const isRoleEnabled = employeeRoles?.some(
-  }, [initialRoles, reset]);
+        (empRole) => empRole.roleId === role.id && empRole.isEnabled
+      );
+      updatedRoles[role.id] = isRoleEnabled || false;
+    });
+  
+    setInitialRoles(updatedRoles);
+  
+    reset({
+      selectedRole: updatedRoles,
+    });
+  }, [employeeRoles, data, reset]);
+  
+  // const onSubmit = (formdata) => {
+  //   setIsLoading(true);
+  //   const result = [];
+  
+  //   const selectedRoles = formdata.selectedRole;
+  
+  //   for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
+  //     const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
+  //     const wasChecked = !!existingRole?.isEnabled;
+  
+  //     // Only push if the checked status has changed
+  //     if (isChecked !== wasChecked) {
+  //       result.push({
+  //         id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
+  //         employeeId,
+  //         roleId,
+  //         isEnabled: isChecked,
+  //       });
+  //     }
+  //   }
+  
+  //   if (result.length === 0) {
+  //     showToast("No changes made", "info");
+  //     setIsLoading(false);
+  //     return;
+  //   }
+  
+  //   console.log(result);
+  
+  //   RolesRepository.createEmployeeRoles(result)
+  //     .then(() => {
+  //       showToast("Roles updated successfully", "success");
+  //       setIsLoading(false);
+  //       reset();
+  //       onClosed();
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //       showToast(err.message, "error");
+  //       setIsLoading(false);
+  //     });
+  // };
   
   const onSubmit = (formdata) => {
     setIsLoading(true);
     const result = [];
-  
     const selectedRoles = formdata.selectedRole;
   
     for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
       const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
       const wasChecked = !!existingRole?.isEnabled;
   
-      if (isChecked) {
+      // Only push if the checked status has changed
+      if (isChecked !== wasChecked) {
         result.push({
           id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
           employeeId,
           roleId,
-          isEnabled: true,
+          isEnabled: isChecked,
-        });
-      } else if (wasChecked && !isChecked) {
-        result.push({
-          id: existingRole?.id,
-          employeeId,
-          roleId,
-          isEnabled: false,
         });
       }
     }
@@ -102,7 +147,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
       setIsLoading(false);
       return;
     }
-    console.log(result)
+  
+    console.log(result);
   
     RolesRepository.createEmployeeRoles(result)
       .then(() => {
@@ -118,7 +164,6 @@ const ManageRole = ( {employeeId, onClosed} ) =>
       });
   };
   
-
   return (
     <div
       className={`modal fade `}
@@ -154,9 +199,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
                           className="form-check-input"
                           type="checkbox"
                           id={item.id}
-                          {...register(`selectedRole.${item.id}`, {
+                          {...register(`selectedRole.${item.id}`)}
-                            value: initialRoles[item.id] || false,
+
-                          })}
                         />
                         <label
                           className="form-check-label text-bold"

src/components/Layout/Sidebar.jsx

@@ -12,7 +12,6 @@ const Sidebar = () => {
   // };
 
   // const handleProfilePage = ()=>{
-  //   console.log(profile?.employeeInfo?.id)
   //   navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
   // }
   return (

src/components/Project/InfraCard.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import AccordionContainer from "../common/AccordionContainer";
 
 const InfraCard = ({ project, building }) => {
-  //console.log(building);
   const handleViewProject = (e) => {
     e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
     window.location.href = "/projects/" + project.id;

src/components/Project/Infrastructure/FloorModel.jsx

@@ -56,7 +56,6 @@ const FloorModel = ({
   // Handle building selection change
   const handleBuildigChange = (e) => {
     const buildingId = e.target.value;
-    console.log(buildingId)
     const building = buildings.find((b) => b.id === Number(buildingId));
     if (building) {
       setSelectedBuilding(building);

src/components/Project/ManageProject.jsx

@@ -18,7 +18,6 @@ const ManageProject = () => {
   // Handle form submission
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log("Project Created:", projectData); // You can replace this with an API call
     setIsProjectCreated(true);
   };
 

src/components/Project/ProjectInfra copy.jsx

@@ -4,8 +4,6 @@ import AccordionContainer from "../common/AccordionContainer";
 const ProjectInfraCopy = ({ data }) => {
   if (!data) {
     return <p>No data available yet...</p>;
-  } else {
-    console.log(data, "inside infra");
   } 
   return (
     <div>

src/components/Project/ProjectInfra.jsx

@@ -294,7 +294,6 @@ const ProjectInfra = ({
         console.error("Unsupported data type for submitData", entity);
       }
     } catch (Err) {
-      console.log(Err);
       showToast("Somthing wrong", "error");
     }
     handleClose();

src/components/common/DatePicker.jsx

@@ -8,7 +8,6 @@ const DatePicker = ({ onDateChange }) => {
       dateFormat: "Y-m-d",
       defaultDate: new Date(),
       onChange: (selectedDates, dateStr) => {
-        console.log("Selected date:", dateStr);
         if (onDateChange) {
           onDateChange(dateStr); // Pass selected date to parent
         }

src/components/master/CreateActivity.jsx

@@ -56,7 +56,6 @@ const CreateActivity = ({ onClose }) => {
 
   // Form submission handler
   const onSubmit = (data) => {
-    console.log(data);
     setIsLoading(true);
 
     MasterRespository.createActivity(data)

src/components/master/EditActivity.jsx

@@ -93,7 +93,6 @@ const UpdateActivity = ({ activityData, onClose }) => {
       setIsLoading( false )
 
       showToast("error.message", "error");
-      console.log(err)
     }
   };
 

src/hooks/useEmployees.js

@@ -4,185 +4,159 @@ import { RolesRepository } from "../repositories/MastersRepository";
 import EmployeeRepository from "../repositories/EmployeeRepository";
 import ProjectRepository from "../repositories/ProjectRepository";
 
-
+export const useAllEmployees = () => {
-export const useAllEmployees = () =>
-{
   const [employeesList, setEmployeeList] = useState([]);
-  const [ loading, setLoading ] = useState( false )
+  const [loading, setLoading] = useState(false);
-  const [ error, setError ] = useState() 
+  const [error, setError] = useState();
-  
-  const fetchData = async () =>
-  
-  {
-      try
-      {
-        let EmployeeList_cached = getCachedData( "AllEmployees" )
-        if ( ! EmployeeList_cached )
-        {
-          setLoading(true)
-          const response = await EmployeeRepository.getAllEmployeeList();
-          cacheData( "AllEmployees", response.data )
-          setEmployeeList(response.data)
-        } else
-        {
-          setEmployeeList( EmployeeList_cached )  
-          setLoading(false)
-        }   
-      } catch ( error )
-      {
-          console.error(error);
-        setError( "Failed to fetch data." ); 
-        setLoading(false)
 
+  const fetchData = async () => {
+    try {
+      let EmployeeList_cached = getCachedData("AllEmployees");
+      if (!EmployeeList_cached) {
+        setLoading(true);
+        const response = await EmployeeRepository.getAllEmployeeList();
+        cacheData("AllEmployees", response.data);
+        setEmployeeList(response.data);
+      } else {
+        setEmployeeList(EmployeeList_cached);
+        setLoading(false);
       }
-  }
+    } catch (error) {
+      setError("Failed to fetch data.");
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
+    fetchData();
+  }, []);
+  return { employeesList, loading, error };
+};
 
-  useEffect( () =>
+export const useEmployees = (selectedProject) => {
-  {
-    fetchData()
-  }, [] )
-  return {employeesList,loading,error}
-}
-
-export const useEmployees =(selectedProject)=>{
-
   const [employees, setEmployeeList] = useState([]);
-  const[loading,setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
   const [projects, setProjects] = useState([]);
 
-   const fetchData = async (projectid) => {
+  const fetchData = async (projectid) => {
-       try {
-             let EmployeeByProject_Cache = getCachedData("employeeListByProject")
-          if(!EmployeeByProject_Cache || !EmployeeByProject_Cache.projectId === projectid) {
-          
-            EmployeeRepository.getEmployeeListByproject(projectid)
-              .then((response) => {
-                setEmployeeList(response);
-                cacheData("employeeListByProject",{data:response,projectId:projectid});
-              })
-              .catch((error) => {
-                setError("Failed to fetch data.");
-              });
-            
-          }else{
-               setEmployeeList(EmployeeByProject_Cache.data)
-          
-         }
-         setLoading(false)
-       
-       } catch (err) {
-         setError("Failed to fetch data.");
-         setLoading(false)
-       }
-    };
-
-
-  useEffect(()=>{
-   if(selectedProject){
-    fetchData(selectedProject);
-   }
-  },[selectedProject])
-
-
-  return {employees,loading,projects,reCallAllEmployee}
-}
-
-export const useEmployeeRoles = (employeeId)=>{
-  const [loading,setLoading] = useState(true)
-  const[error, setError] =useState()
-  const [employeeRoles,setEmployeeRoles] = useState([])
-  const fetchData = async (employeeid) => {
-    
     try {
-      RolesRepository.getEmployeeRoles(employeeid)
+      let EmployeeByProject_Cache = getCachedData("employeeListByProject");
-        .then((response) => {
+      if (
-          setEmployeeRoles(response.data);
+        !EmployeeByProject_Cache ||
-          cacheData("employeelist", response.data);
+        !EmployeeByProject_Cache.projectId === projectid
-        })
+      ) {
-        .catch((error) => {
+        EmployeeRepository.getEmployeeListByproject(projectid)
-          setError("Failed to fetch data.");
+          .then((response) => {
-        });
+            setEmployeeList(response);
+            cacheData("employeeListByProject", {
+              data: response,
+              projectId: projectid,
+            });
+          })
+          .catch((error) => {
+            setError("Failed to fetch data.");
+          });
+      } else {
+        setEmployeeList(EmployeeByProject_Cache.data);
+      }
+      setLoading(false);
     } catch (err) {
       setError("Failed to fetch data.");
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedProject) {
+      fetchData(selectedProject);
+    }
+  }, [selectedProject]);
+
+  return { employees, loading, projects, reCallAllEmployee };
+};
+
+export const useEmployeeRoles = (employeeId) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const [employeeRoles, setEmployeeRoles] = useState([]);
+  const fetchData = async (employeeid) => {
+    try {
+      let response = await RolesRepository.getEmployeeRoles(employeeid);
+      setEmployeeRoles(response.data);
+      cacheData("employeelist", response.data);
+    } catch (err) {
+      setError("Failed to fetch data.");
+      setEmployeeRoles([]);
     } finally {
       setLoading(false);
     }
- };
+  };
 
+  useEffect(() => {
+    if (employeeId) {
+      fetchData(employeeId);
+    }
+  }, [employeeId]);
 
-  useEffect( () =>
+  return { employeeRoles, loading, error };
-  {
+};
-    if ( employeeId )
-    {
-       fetchData(employeeId);
 
-   }
+export const useEmployeesByProject = (projectId) => {
-},[employeeId])
+  const [loading, setLoading] = useState(false);
-
+  const [error, setError] = useState();
-
+  const [employees, setEmployees] = useState([]);
-return {employeeRoles,loading,error}
-}
-
-
-export const useEmployeesByProject=(projectId)=>{
-  const [loading,setLoading] = useState(false)
-  const[error, setError] =useState()
-  const [employees,setEmployees] = useState([])
 
   const fetchData = async () => {
     const Employees_cache = getCachedData("employeeListByProject");
-    if(!Employees_cache || Employees_cache.projectId !== projectId){
+    if (!Employees_cache || Employees_cache.projectId !== projectId) {
-           
+      setEmployees(true);
-        setEmployees(true)
+      ProjectRepository.getEmployeesByProject(projectId)
-        ProjectRepository.getEmployeesByProject(projectId)
+        .then((response) => {
-          .then( ( response ) =>
-          {
           setEmployees(response.data);
-          cacheData("employeeListByProject", { data: response.data, projectId })
+          cacheData("employeeListByProject", {
-          setLoading(false)
+            data: response.data,
+            projectId,
+          });
+          setLoading(false);
         })
         .catch((error) => {
           setError("Failed to fetch data.");
-          setLoading(false)
+          setLoading(false);
         });
-      
+    } else {
-      }else{
+      setEmployees(Employees_cache.data);
-        setEmployees(Employees_cache.data)
+      setLoading(false);
-        setLoading(false)
+    }
-      }
   };
 
+  useEffect(() => {
+    fetchData(projectId);
+  }, [projectId]);
 
- useEffect(()=>{
+  return { employees, loading, error, recallProjectEmplloyee: fetchData };
-  fetchData(projectId);
+};
-},[projectId])
-
-return {employees,loading,error,recallProjectEmplloyee:fetchData}
-
-}
-
-
 
 export const useEmployeesAllOrByProjectId = (projectId) => {
   const [employees, setEmployees] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const fetchData = async () =>
+  const fetchData = async () => {
-  {
-  
     if (projectId) {
-      
       const Employees_cache = getCachedData("employeeListByProject");
 
       if (!Employees_cache || Employees_cache.projectId !== projectId) {
         setLoading(true);
         setError(null);
         try {
-          const response = await ProjectRepository.getEmployeesByProject(projectId);
+          const response = await ProjectRepository.getEmployeesByProject(
+            projectId
+          );
           setEmployees(response.data);
-          cacheData("employeeListByProject", { data: response.data, projectId });
+          cacheData("employeeListByProject", {
+            data: response.data,
+            projectId,
+          });
           setLoading(false);
         } catch (err) {
           setError("Failed to fetch data.");
@@ -193,7 +167,6 @@ export const useEmployeesAllOrByProjectId = (projectId) => {
         setLoading(false);
       }
     } else {
-      
       const employeesCache = getCachedData("allEmployeeList");
 
       if (!employeesCache) {
@@ -228,42 +201,35 @@ export const useEmployeesAllOrByProjectId = (projectId) => {
   };
 };
 
-
+export const useEmployeeProfile = (employeeId) => {
-
+  const [loading, setLoading] = useState(true);
-
+  const [error, setError] = useState();
-
+  const [employee, setEmployees] = useState();
-export const useEmployeeProfile =(employeeId)=>{
-  const [loading,setLoading] = useState(true)
-  const[error, setError] =useState()
-  const [employee,setEmployees] = useState()
 
   const fetchData = async () => {
     const Employee_cache = getCachedData("employeeProfile");
-    if(!Employee_cache || Employee_cache.employeeId !== employeeId){
+    if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
-
+      EmployeeRepository.getEmployeeProfile(employeeId)
-        EmployeeRepository.getEmployeeProfile(employeeId)
         .then((response) => {
           setEmployees(response.data);
-          cacheData("employeeProfile", { data: response.data, employeeId })
+          cacheData("employeeProfile", { data: response.data, employeeId });
-          setLoading(false)
+          setLoading(false);
         })
         .catch((error) => {
           setError("Failed to fetch data.");
-          setLoading(false)
+          setLoading(false);
         });
+    } else {
+      setEmployees(Employee_cache.data);
+      setLoading(false);
+    }
+  };
 
-      }else{
+  useEffect(() => {
-        setEmployees(Employee_cache.data)
+    if (employeeId) {
-        setLoading(false)
+      fetchData(employeeId);
-      }
+    }
- };
+  }, [employeeId]);
 
- useEffect(()=>{
+  return { employee, loading, error };
-  if(employeeId){
+};
-    fetchData(employeeId);
-  }
-},[employeeId])
-
-return {employee,loading,error}
-
-}

src/hooks/usePositionTracker.js

@@ -10,7 +10,6 @@ export const usePositionTracker = () => {
         },
         (error) => {
           alert(error.message);
-          console.log(error);
         },
         { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
       );

src/hooks/useTasks.js

@@ -23,7 +23,6 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
         setLoading(false);
       } catch (err) {
         setLoading(false);
-        console.log(err);
         setError(err);
       }
     // } else {

src/pages/Activities/TaskPlannng.jsx

@@ -68,7 +68,6 @@ const TaskPlannng = () => {
         setProjectDetails(project_cache);
       }
     } catch (err) {
-      console.log(err)
       setError("Failed to fetch data.");
     } finally {
       setLoading(false);

src/pages/authentication/LoginPage.jsx

@@ -45,7 +45,6 @@ const LoginPage = () => {
       navigate("/dashboard");
     } catch (err) {
        showToast("Invalid username or password.","error")
-      console.log("Unable to proceed. Please try again.");
       setLoading(false);
     }
   };

src/pages/authentication/RegisterPage.jsx

@@ -51,7 +51,6 @@ const RegisterPage = () => {
       showToast("Your Registration SuccessFully !");
       setRegristered(true);
     } catch (error) {
-      // console.log(error);
       showToast(error.message, "error");
     }
   };

src/pages/employee/EmployeeProfile.jsx

@@ -38,7 +38,6 @@ const EmployeeProfile = () => {
       
     } catch ( err )
     {
-      console.log( "Faild to fetch employee data,", err )
       setLoading(false)
       
     }

src/pages/employee/ManageEmp.jsx

@@ -6,7 +6,7 @@ import { getCachedData } from "../../slices/apiDataManager";
 const ManageEmp = () => {
  
   const onEmployeeSubmt = () => {
-    console.log("employee submit clicked");
+    // console.log("employee submit clicked");
   };
   return (
     <div className="container-xxl flex-grow-1 container-p-y">

src/utils/axiosClient.jsx

@@ -55,7 +55,6 @@ axiosClient.interceptors.response.use(
 
         if (error.config.url.indexOf("refresh-token") != -1) {
           //showToast("Server is unreachable. Try again later!", "error");
-          console.log("1 - error fetching refresh token :", error);
         } else {
           showToast(
             "Unable to connect to the server. Please try again later.",
@@ -66,7 +65,6 @@ axiosClient.interceptors.response.use(
         console.error("Network error: Unable to reach the server.");
         if (error.config.url.indexOf("refresh-token") != -1) {
           //showToast("Server is unreachable. Try again later!", "error");
-          console.log("2 - error fetching refresh token :", error);
         }
         redirectToLogin();
       } else if (error.code === "ECONNABORTED") {
@@ -74,7 +72,6 @@ axiosClient.interceptors.response.use(
 
         if (error.config.url.indexOf("refresh-token") != -1) {
           //showToast("Server is unreachable. Try again later!", "error");
-          console.log("3 - error fetching refresh token :", error);
         } else {
           showToast(
             "The request took too long. Please try again later.",
@@ -84,7 +81,6 @@ axiosClient.interceptors.response.use(
       } else if (error.response) {
         if (error.config.url.indexOf("refresh-token") != -1) {
           //showToast("Server is unreachable. Try again later!", "error");
-          console.log("4 - error fetching refresh token :", error);
         } 
         // else {
         //   // showToast(error.response.data.message, "error");  // repeted toast
@@ -107,7 +103,7 @@ axiosClient.interceptors.response.use(
                 refreshToken,
               })
               .catch((error) => {
-                console.log("7 - error fetching refresh token :", error);
+                // console.log("7 - error fetching refresh token :", error);
               });
 
             const { token, refreshToken: newRefreshToken } = response.data.data;
@@ -120,10 +116,7 @@ axiosClient.interceptors.response.use(
             // Retry the original request
             return axiosClient(originalRequest);
           } catch (err) {
-            console.log(
+           
-              "5 - error fetching refresh token during refresh call :",
-              error
-            );
             // Redirect to login if token refresh fails
             redirectToLogin();
             return Promise.reject(err);
@@ -131,7 +124,7 @@ axiosClient.interceptors.response.use(
         } else {
           if (error.config.url.indexOf("refresh-token") != -1) {
             //showToast("Server is unreachable. Try again later!", "error");
-            console.log("6 - error fetching refresh token :", error);
+            // console.log("6 - error fetching refresh token :", error);
           }
           // showToast(
           //   error.response.data?.message ||

src/utils/errorUtil.jsx

@@ -1,6 +1,5 @@
 // utils/dateUtils.js
 export const logInfo = (message) => {
-  console.log(message);
 };
 
 export const logError = (e, message) => {