diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 0e5b2aa8..ab321cc8 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -4,100 +4,93 @@ import { Link, NavLink, useNavigate } from "react-router-dom"; import Avatar from "../../components/common/Avatar"; import Breadcrumb from "../../components/common/Breadcrumb"; import ManageEmp from "../../components/Employee/ManageRole"; -import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees"; -import { useProjects } from "../../hooks/useProjects"; +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 {useHasUserPermission} from "../../hooks/useHasUserPermission"; +import { hasUserPermission } from "../../utils/authUtils"; +import { MANAGE_EMPLOYEES } from "../../utils/constants"; +import { useHasUserPermission } from "../../hooks/useHasUserPermission"; -const EmployeeList = () => -{ - const {profile:loginUser}= useProfile() - const [selectedProject, setSelectedProject] = useState(""); - const {projects, loading: projectLoading} = useProjects() - const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES) +const EmployeeList = () => { + const { profile: loginUser } = useProfile(); + const [selectedProject, setSelectedProject] = useState(""); + const { projects, loading: projectLoading } = useProjects(); + const ManageEmployee = useHasUserPermission(MANAGE_EMPLOYEES); - const {employees, loading,setLoading, error} = useEmployeesAllOrByProjectId( selectedProject ); - const [ projectsList, setProjectsList ] = useState(projects || [] ); - - const [employeeList,setEmployeeList] = useState([]) + const { employees, loading, setLoading, error } = + useEmployeesAllOrByProjectId(selectedProject); + const [projectsList, setProjectsList] = useState(projects || []); + + const [employeeList, setEmployeeList] = useState([]); const [modelConfig, setModelConfig] = useState(); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage] = useState(5); - const [isCreateModalOpen, setIsCreateModalOpen ] = useState( false ); - const [searchText,setSearchText] = useState("") + const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); + const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]); - const navigate = useNavigate() - + const navigate = useNavigate(); const handleSearch = (e) => { const value = e.target.value.toLowerCase(); setSearchText(value); - + if (!employeeList.length) return; - + const results = employeeList.filter((item) => - Object.values(item).some((field) => - field && field.toString().toLowerCase().includes(value) + Object.values(item).some( + (field) => field && field.toString().toLowerCase().includes(value) ) ); - + setFilteredData(results); }; - useEffect(() => { - setCurrentPage( 1 ) - + setCurrentPage(1); + if (!loading && Array.isArray(employees)) { setEmployeeList(employees); - setFilteredData( employees ); + setFilteredData(employees); } - }, [loading, employees, selectedProject]); - - const displayData = searchText ? filteredData : employeeList + const displayData = searchText ? filteredData : employeeList; const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; - const currentItems = Array.isArray(displayData) - ? displayData.slice(indexOfFirstItem, indexOfLastItem) + const currentItems = Array.isArray(displayData) + ? displayData.slice(indexOfFirstItem, indexOfLastItem) : []; - + const paginate = (pageNumber) => setCurrentPage(pageNumber); const totalPages = Array.isArray(displayData) ? Math.ceil(displayData.length / itemsPerPage) : 0; - - - const openModal = () => { - setIsCreateModalOpen(true); - }; + const openModal = () => { + setIsCreateModalOpen(true); + }; - const closeModal = () => { - setIsCreateModalOpen(false); - - const modalElement = document.getElementById("managerole-modal"); - if (modalElement) { - modalElement.classList.remove("show"); - modalElement.style.display = "none"; - document.body.classList.remove("modal-open"); - document.querySelector(".modal-backdrop").remove(); - } - }; - - const handleConfigData = (config) => { - setModelConfig(config); - }; - - useEffect(() => { - if (modelConfig !== null) { - openModal(); - } - }, [ modelConfig, isCreateModalOpen ] ); - + const closeModal = () => { + setIsCreateModalOpen(false); + + const modalElement = document.getElementById("managerole-modal"); + if (modalElement) { + modalElement.classList.remove("show"); + modalElement.style.display = "none"; + document.body.classList.remove("modal-open"); + document.querySelector(".modal-backdrop").remove(); + } + }; + + const handleConfigData = (config) => { + setModelConfig(config); + }; + + useEffect(() => { + if (modelConfig !== null) { + openModal(); + } + }, [modelConfig, isCreateModalOpen]); return ( <> @@ -126,32 +119,30 @@ const EmployeeList = () => className="dataTables_length text-start" id="DataTables_Table_0_length" > - @@ -224,8 +215,9 @@ const EmployeeList = () => -
- - - Edit - - - -
- - - )} - ) )} - + )} + {!loading && employeeList?.length === 0 && ( + + No Data Found + + )} + {!loading && + employeeList && + currentItems.length === 0 && + employeeList.length !== 0 && ( + + + '{searchText}' employee not found + {" "} + + )} + + {currentItems && + !loading && + currentItems + .sort((a, b) => b.id - a.id) + .map((item) => ( + + +
+ +
+ + navigate( + `/employee/${item.id}?for=account` + ) + } + className="text-heading text-truncate cursor-pointer" + > + + {item.firstName} {item.lastName} + + +
+
+ + + {item.email ? ( + + + + {item.email} + + ) : ( + + NA + + )} + + + + + {item.phoneNumber} + + + + + + {item.jobRole || "Not Assign Yet"} + + + + + {moment(item.joiningDate).format("DD-MMM-YYYY")} + + + + Active + + + {ManageEmployee && ( + +
+ +
+ + + Edit + + + +
+
+ + )} + + ))}