handle pagination - hide if record have less than 20
This commit is contained in:
Pramod Mahajan
parent
7932f847f6
commit
573d7828ae
@ -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)}
|
||||
>
|
||||
«
|
||||
</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}
|
||||
«
|
||||
</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" : ""
|
||||
}`}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user