Merge pull request 'Added a toggle switch in the Employee List module to view active and inactive employees separately.' (#76) from Ashutosh_Enhancement#172_Show_InactiveEmployees into Issue_May_2W

Reviewed-on: #76

src/hooks/useEmployees.js

@@ -16,7 +16,7 @@ export const useAllEmployees = () => {
         setLoading(true);
         const response = await EmployeeRepository.getAllEmployeeList();
         cacheData("AllEmployees", response.data);
-        setEmployeeList( response.data );
+        setEmployeeList(response.data);
         setLoading(false);
       } else {
         setEmployeeList(EmployeeList_cached);
@@ -137,15 +137,14 @@ export const useEmployeesByProject = (projectId) => {
   return { employees, loading, error, recallProjectEmplloyee: fetchData };
 };
 
-export const useEmployeesAllOrByProjectId = (projectId) => {
+export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
   const [employees, setEmployees] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const fetchData = async () => {
+  const fetchData = async (showInactive) => {
     if (projectId) {
       const Employees_cache = getCachedData("employeeListByProject");
-
       if (!Employees_cache || Employees_cache.projectId !== projectId) {
         setLoading(true);
         setError(null);
@@ -168,30 +167,35 @@ export const useEmployeesAllOrByProjectId = (projectId) => {
         setLoading(false);
       }
     } else {
-      const employeesCache = getCachedData("allEmployeeList");
+      const cacheKey = showInactive
+        ? "allInactiveEmployeeList"
+        : "allEmployeeList";
+      const employeesCache = getCachedData(cacheKey);
 
-      if (!employeesCache) {
+      if (employeesCache) {
+        setEmployees(employeesCache.data);
+        setLoading(false);
+      } else {
         setLoading(true);
         setError(null);
 
         try {
-          const response = await EmployeeRepository.getAllEmployeeList();
+          const response = await EmployeeRepository.getAllEmployeeList(
+            showInactive
+          );
           setEmployees(response.data);
-          cacheData("allEmployeeList", { data: response.data });
+          cacheData(cacheKey, { data: response.data });
           setLoading(false);
         } catch (err) {
           setError("Failed to fetch data.");
           setLoading(false);
         }
-      } else {
-        setEmployees(employeesCache.data);
-        setLoading(false);
       }
     }
   };
 
   useEffect(() => {
-    fetchData(); // Fetch data when the component mounts or projectId changes
+    fetchData(showInactive); // Fetch data when the component mounts or projectId changes
   }, [projectId]); // Re-fetch when projectId changes
 
   return {

src/pages/employee/EmployeeList.jsx

@@ -25,10 +25,11 @@ const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
   const [selectedProject, setSelectedProject] = useState("");
   const { projects, loading: projectLoading } = useProjects();
+  const [showInactive, setShowInactive] = useState(false);
   const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES);
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
-    useEmployeesAllOrByProjectId(selectedProject);
+    useEmployeesAllOrByProjectId(selectedProject,showInactive);
   const [projectsList, setProjectsList] = useState(projects || []);
 
   const [employeeList, setEmployeeList] = useState([]);
@@ -109,9 +110,10 @@ const EmployeeList = () => {
         showToast("Employee deleted successfully.", "success");
         clearCacheKey("employeeListByProject");
         clearCacheKey("allEmployeeList");
+        clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         setEmployeeList([]);
-        recallEmployeeData();
+        recallEmployeeData(showInactive);
       })
       .catch((error) => {
         const message =
@@ -154,6 +156,12 @@ const EmployeeList = () => {
     }
   };
 
+  const handleToggle = (e) => {
+    setShowInactive(e.target.checked);
+    recallEmployeeData(e.target.checked);
+  };
+
+
   return (
     <>
       {isCreateModalOpen && (
@@ -317,6 +325,25 @@ const EmployeeList = () => {
                     </div>
                   </div>
                 </div>
+                <div className="text-end mb-2">
+                  <label class="switch switch-primary">
+                    <input
+                      type="checkbox"
+                      class="switch-input"
+                      checked={showInactive}
+                      onChange={handleToggle}
+                    />
+                    <span class="switch-toggle-slider">
+                      <span class="switch-on">
+                        <i class="icon-base bx bx-check"></i>
+                      </span>
+                      <span class="switch-off">
+                        <i class="icon-base bx bx-x"></i>
+                      </span>
+                    </span>
+                    <span class="switch-label">Show Inactive Employees</span>
+                  </label>
+                </div>
                 <table
                   className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
                   id="DataTables_Table_0"
@@ -448,7 +475,9 @@ const EmployeeList = () => {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                    navigate(`/employee/${item.id}?for=attendance`)
+                                    navigate(
+                                      `/employee/${item.id}?for=attendance`
+                                    )
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -490,12 +519,19 @@ const EmployeeList = () => {
                             {moment(item.joiningDate).format("DD-MMM-YYYY")}
                           </td>
                           <td>
+                            {showInactive ? <span
+                              className="badge bg-label-danger"
+                              text-capitalized=""
+                            >
+                              Inactive
+                            </span>
+                            :
                             <span
                               className="badge bg-label-success"
                               text-capitalized=""
                             >
                               Active
-                            </span>
+                            </span>}
                           </td>
                           {ManageEmployee && (
                             <td className="text-end">

src/repositories/EmployeeRepository.jsx

@@ -1,7 +1,7 @@
 import { api } from "../utils/axiosClient";
 
 const EmployeeRepository = {
-  getAllEmployeeList:()=>api.get(`api/employee/list`),
+  getAllEmployeeList:(showInactive)=>api.get(`api/employee/list?showInactive=${showInactive}`),
   getEmployeeListByproject: (projectid) =>
     api.get(`/api/employee/list/${projectid}`),
   searchEmployees: (query) =>