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

64
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";
@ -27,8 +27,12 @@ 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) => {
@ -201,13 +205,13 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
setSelectedProject(selectedProjectId || ""); setSelectedProject(selectedProjectId || "");
}, [selectedProjectId]); }, [selectedProjectId]);
return ( return (
<> <>
{isCreateModalOpen && ( {isCreateModalOpen && (
<ManageEmp employeeId={modelConfig} onClosed={closeModal} /> <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
)} )}
{showModal && (<div {showModal && (
<div
className={`modal fade ${showModal ? "show" : ""} `} className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
@ -225,8 +229,8 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
/> />
</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
@ -303,7 +315,6 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
)} )}
</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,15 +669,12 @@ 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), setSelectEmployee(item),
setOpenAssignModal(true) setOpenAssignModal(true);
} }}
}
> >
<i className='bx bx-select-multiple'></i>{" "} <i className="bx bx-select-multiple"></i>{" "}
Assign Project Assign Project
</button> </button>
</> </>
@ -681,8 +691,10 @@ 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 &&
currentItems.length > ITEMS_PER_PAGE && (
<nav aria-label="Page navigation">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li <li
className={`page-item ${ className={`page-item ${
@ -696,7 +708,8 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
&laquo; &laquo;
</button> </button>
</li> </li>
{[...Array(totalPages)]?.map((_, index) => (
{[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${ className={`page-item ${
@ -711,6 +724,7 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
</button> </button>
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${
currentPage === totalPages ? "disabled" : "" currentPage === totalPages ? "disabled" : ""