From 573d7828ae14bc223c26854e4426a94d5278412a Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Wed, 11 Jun 2025 19:02:20 +0530
Subject: [PATCH] handle pagination - hide if record have less than 20

---
 src/pages/employee/EmployeeList.jsx | 220 +++++++++++++++-------------
 1 file changed, 117 insertions(+), 103 deletions(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 08c16658..bab53a46 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -9,7 +9,7 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
-import { MANAGE_EMPLOYEES } from "../../utils/constants";
+import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp";
@@ -22,13 +22,17 @@ import {
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
 import ConfirmModal from "../../components/common/ConfirmModal";
-import {useSelector} from "react-redux";
+import { useSelector } from "react-redux";
 import GlobalModel from "../../components/common/GlobalModel";
 import AssignToProject from "./AssignToProject";
 
 const EmployeeList = () => {
-const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-  const [ selectedProject, setSelectedProject ] = useState( () => selectedProjectId || "" );
+  const selectedProjectId = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const [selectedProject, setSelectedProject] = useState(
+    () => selectedProjectId || ""
+  );
   const { projects, loading: projectLoading } = useProjects();
   const [showInactive, setShowInactive] = useState(false);
   const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
@@ -40,7 +44,7 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(15);
+  const [itemsPerPage] = useState(ITEMS_PER_PAGE);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
@@ -50,8 +54,8 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
-  const [ selectedEmployee, setSelectEmployee ] = useState( null )
-  const [IsOpenAsssingModal,setOpenAssignModal] = useState(false)
+  const [selectedEmployee, setSelectEmployee] = useState(null);
+  const [IsOpenAsssingModal, setOpenAssignModal] = useState(false);
   const navigate = useNavigate();
 
   const handleSearch = (e) => {
@@ -195,38 +199,38 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
   };
 
   const handleProjectSelection = (e) => {
-  setSelectedProject(e.target.value);
+    setSelectedProject(e.target.value);
   };
   useEffect(() => {
-  setSelectedProject(selectedProjectId || "");
-}, [selectedProjectId]);
-
+    setSelectedProject(selectedProjectId || "");
+  }, [selectedProjectId]);
 
   return (
     <>
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
-      {showModal && (<div
-        className={`modal fade ${showModal ? "show" : ""} `}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: showModal ? "block" : "none" }}
-        aria-hidden={!showModal}
-      >
-        <div className="modal-dialog modal-xl modal-dialog-centered ">
-          <div
-            className="modal-content overflow-y-auto overflow-x-hidden"
-            style={{ maxHeight: "90vh" }}
-          >
-            <ManageEmployee
-              employeeId={selectedEmployeeId}
-              onClosed={closeModal}
-            />
+      {showModal && (
+        <div
+          className={`modal fade ${showModal ? "show" : ""} `}
+          tabIndex="-1"
+          role="dialog"
+          style={{ display: showModal ? "block" : "none" }}
+          aria-hidden={!showModal}
+        >
+          <div className="modal-dialog modal-xl modal-dialog-centered ">
+            <div
+              className="modal-content overflow-y-auto overflow-x-hidden"
+              style={{ maxHeight: "90vh" }}
+            >
+              <ManageEmployee
+                employeeId={selectedEmployeeId}
+                onClosed={closeModal}
+              />
+            </div>
           </div>
         </div>
-      </div> )}
-    
+      )}
 
       {IsDeleteModalOpen && (
         <div
@@ -253,9 +257,17 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
         </div>
       )}
 
-      {IsOpenAsssingModal && ( <GlobalModel isOpen={IsOpenAsssingModal} closeModal={()=>setOpenAssignModal(false)}>
-        <AssignToProject employee={selectedEmployee} onClose={() => setOpenAssignModal( false )} />
-      </GlobalModel>)}
+      {IsOpenAsssingModal && (
+        <GlobalModel
+          isOpen={IsOpenAsssingModal}
+          closeModal={() => setOpenAssignModal(false)}
+        >
+          <AssignToProject
+            employee={selectedEmployee}
+            onClose={() => setOpenAssignModal(false)}
+          />
+        </GlobalModel>
+      )}
 
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
@@ -279,31 +291,30 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
                         className="dataTables_length text-start"
                         id="DataTables_Table_0_length"
                       >
-                     <label>
-  <select
-    id="project-select"
-    onChange={handleProjectSelection}
-    name="DataTables_Table_0_length"
-    aria-controls="DataTables_Table_0"
-    className="form-select form-select-sm"
-    value={selectedProject}
-  >
-    {projectLoading ? (
-      <option value="Loading">Loading...</option>
-    ) : (
-      <>
-        <option value="">All Employees</option>
-        {Array.isArray(projects) &&
-          projects.map((item) => (
-            <option key={item.id} value={item.id}>
-              {item.name}
-            </option>
-          ))}
-      </>
-    )}
-  </select>
-</label>
-
+                        <label>
+                          <select
+                            id="project-select"
+                            onChange={handleProjectSelection}
+                            name="DataTables_Table_0_length"
+                            aria-controls="DataTables_Table_0"
+                            className="form-select form-select-sm"
+                            value={selectedProject}
+                          >
+                            {projectLoading ? (
+                              <option value="Loading">Loading...</option>
+                            ) : (
+                              <>
+                                <option value="">All Employees</option>
+                                {Array.isArray(projects) &&
+                                  projects.map((item) => (
+                                    <option key={item.id} value={item.id}>
+                                      {item.name}
+                                    </option>
+                                  ))}
+                              </>
+                            )}
+                          </select>
+                        </label>
                       </div>
                     </div>
                   </div>
@@ -397,7 +408,9 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
                     </div>
                   </div>
                 </div>
-                 <div className={`text-end mb-2 ${selectedProject ? 'd-none' : ''}`}>
+                <div
+                  className={`text-end mb-2 ${selectedProject ? "d-none" : ""}`}
+                >
                   <label className="switch switch-primary">
                     <input
                       type="checkbox"
@@ -656,16 +669,13 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
                                       </button>
                                       <button
                                         className="dropdown-item py-1"
-                                     
-                                        onClick={() =>
-                                        {
-                                          setSelectEmployee( item ),
-                                          setOpenAssignModal(true)
-                                        }
-                                        }
+                                        onClick={() => {
+                                          setSelectEmployee(item),
+                                            setOpenAssignModal(true);
+                                        }}
                                       >
-                                        <i className='bx bx-select-multiple'></i>{" "}
-                                       Assign Project
+                                        <i className="bx bx-select-multiple"></i>{" "}
+                                        Assign Project
                                       </button>
                                     </>
                                   )}
@@ -681,51 +691,55 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
                 <div style={{ width: "1%" }}></div>
 
                 {/* Pagination */}
-                {!loading && (
-                  <nav aria-label="Page ">
-                    <ul className="pagination pagination-sm justify-content-end py-1">
-                      <li
-                        className={`page-item  ${
-                          currentPage === 1 ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link btn-xs"
-                          onClick={() => paginate(currentPage - 1)}
-                        >
-                          &laquo;
-                        </button>
-                      </li>
-                      {[...Array(totalPages)]?.map((_, index) => (
+                {!loading &&
+                  employeeList?.length > 0 &&
+                  currentItems.length > ITEMS_PER_PAGE && (
+                    <nav aria-label="Page navigation">
+                      <ul className="pagination pagination-sm justify-content-end py-1">
                         <li
-                          key={index}
                           className={`page-item ${
-                            currentPage === index + 1 ? "active" : ""
+                            currentPage === 1 ? "disabled" : ""
                           }`}
                         >
                           <button
-                            className="page-link "
-                            onClick={() => paginate(index + 1)}
+                            className="page-link btn-xs"
+                            onClick={() => paginate(currentPage - 1)}
                           >
-                            {index + 1}
+                            &laquo;
                           </button>
                         </li>
-                      ))}
-                      <li
-                        className={`page-item ${
-                          currentPage === totalPages ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link "
-                          onClick={() => paginate(currentPage + 1)}
+
+                        {[...Array(totalPages)].map((_, index) => (
+                          <li
+                            key={index}
+                            className={`page-item ${
+                              currentPage === index + 1 ? "active" : ""
+                            }`}
+                          >
+                            <button
+                              className="page-link"
+                              onClick={() => paginate(index + 1)}
+                            >
+                              {index + 1}
+                            </button>
+                          </li>
+                        ))}
+
+                        <li
+                          className={`page-item ${
+                            currentPage === totalPages ? "disabled" : ""
+                          }`}
                         >
-                          &raquo;
-                        </button>
-                      </li>
-                    </ul>
-                  </nav>
-                )}
+                          <button
+                            className="page-link"
+                            onClick={() => paginate(currentPage + 1)}
+                          >
+                            &raquo;
+                          </button>
+                        </li>
+                      </ul>
+                    </nav>
+                  )}
               </div>
             </div>
           </div>