admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 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 { 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";
@ -27,8 +27,12 @@ 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) => {
@ -201,13 +205,13 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
setSelectedProject(selectedProjectId || "");
}, [selectedProjectId]);
return (
<>
{isCreateModalOpen && (
<ManageEmp employeeId={modelConfig} onClosed={closeModal} />
)}
{showModal && (<div
{showModal && (
<div
className={`modal fade ${showModal ? "show" : ""} `}
tabIndex="-1"
role="dialog"
@ -225,8 +229,8 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
/>
</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
@ -303,7 +315,6 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
)}
</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,15 +669,12 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
</button>
<button
className="dropdown-item py-1"
onClick={() =>
{
onClick={() => {
setSelectEmployee(item),
setOpenAssignModal(true)
}
}
setOpenAssignModal(true);
}}
>
<i className='bx bx-select-multiple'></i>{" "}
<i className="bx bx-select-multiple"></i>{" "}
Assign Project
</button>
</>
@ -681,8 +691,10 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
<div style={{ width: "1%" }}></div>
{/* Pagination */}
{!loading && (
<nav aria-label="Page ">
{!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
className={`page-item ${
@ -696,7 +708,8 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
&laquo;
</button>
</li>
{[...Array(totalPages)]?.map((_, index) => (
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
@ -711,6 +724,7 @@ const selectedProjectId = useSelector((store) => store.localVariables.projectId)
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""