admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

handle pagination - hide if record have less than 20

Browse Source
This commit is contained in:
Pramod Mahajan 2025-06-11 19:02:20 +05:30
parent 7932f847f6
commit 573d7828ae
1 changed files with 117 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
src/pages/employee/EmployeeList.jsx
View File

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