diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 2d40ceff..b9a6e8de 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -25,23 +25,30 @@ import ConfirmModal from "../../components/common/ConfirmModal"; import { useSelector } from "react-redux"; const EmployeeList = () => { - const selectedProjectId = useSelector((store) => store.localVariables.projectId); - const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || ""); - const { projects, loading: projectLoading } = useProjects(); + // const selectedProjectId = useSelector((store) => store.localVariables.projectId); + // const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || ""); + // const { projects, loading: projectLoading } = useProjects(); + + const selectedProjectId = useSelector( + (store) => store.localVariables.projectId + ); + const [showInactive, setShowInactive] = useState(false); - const [showAllEmployees, setShowAllEmployees] = useState(false); + const [showAllEmployees, setShowAllEmployees] = useState(false); const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES); const { employees, loading, setLoading, error, recallEmployeeData } = - useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive); - const [projectsList, setProjectsList] = useState(projects || []); + // useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive); + useEmployeesAllOrByProjectId( + showAllEmployees ? null : selectedProjectId, + showInactive + ); const [employeeList, setEmployeeList] = useState([]); const [modelConfig, setModelConfig] = useState(); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage] = useState(ITEMS_PER_PAGE); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); - const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]); const [showModal, setShowModal] = useState(false); @@ -52,48 +59,58 @@ const EmployeeList = () => { const navigate = useNavigate(); - const handleSearch = (e) => { - const value = e.target.value.toLowerCase(); - setSearchText(value); - - if (!employeeList.length) return; - - const results = employeeList.filter((item) => { + /** + * Applies the search filter to a given array of employee data. + * @param {Array} data - The array of employee objects to filter. + * @param {string} text - The search text. + * @returns {Array} The filtered array. + */ + const applySearchFilter = (data, text) => { + if (!text) { + return data; + } + const lowercasedText = text.toLowerCase(); + return data.filter((item) => { const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); const email = item.email ? item.email.toLowerCase() : ""; const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : ""; - const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; // Get jobRole and convert to lowercase + const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; return ( - fullName.includes(value) || - email.includes(value) || - phoneNumber.includes(value) || - jobRole.includes(value) // Include jobRole in the search + fullName.includes(lowercasedText) || + email.includes(lowercasedText) || + phoneNumber.includes(lowercasedText) || + jobRole.includes(lowercasedText) ); }); + }; - setFilteredData(results); + const handleSearch = (e) => { + const value = e.target.value; + setSearchText(value); + setCurrentPage(1); }; useEffect(() => { setCurrentPage(1); - if (!loading && Array.isArray(employees)) { - // Sort by full name (firstName + lastName) const sorted = [...employees].sort((a, b) => { - const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || "" - }`.toLowerCase(); - const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || "" - }`.toLowerCase(); + const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase(); + const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase(); return nameA?.localeCompare(nameB); }); setEmployeeList(sorted); - setFilteredData(sorted); - } - }, [loading, employees, selectedProject, showAllEmployees]); // Add showAllEmployees to dependencies + const results = applySearchFilter(sorted, searchText); + setFilteredData(results); - const displayData = searchText ? filteredData : employeeList; + } else if (!loading && !employees) { + setEmployeeList([]); + setFilteredData([]); + } + }, [loading, employees, showAllEmployees, searchText, selectedProjectId]); + + const displayData = filteredData; const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = Array.isArray(displayData) @@ -117,11 +134,11 @@ const EmployeeList = () => { modalElement.classList.remove("show"); modalElement.style.display = "none"; document.body.classList.remove("modal-open"); - document.querySelector(".modal-backdrop").remove(); + document.querySelector(".modal-backdrop")?.remove(); // Use optional chaining for safety } setShowModal(false); clearCacheKey("employeeProfile"); - recallEmployeeData(showInactive); + recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject); }; const handleShow = () => setShowModal(true); const handleClose = () => setShowModal(false); @@ -135,8 +152,8 @@ const EmployeeList = () => { clearCacheKey("allEmployeeList"); clearCacheKey("allInactiveEmployeeList"); clearCacheKey("employeeProfile"); - setEmployeeList([]); - recallEmployeeData(showInactive); + // Recall data based on current filter states after deletion to refresh the table + recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject); setemployeeLodaing(false); setIsDeleteModalOpen(false); }) @@ -185,15 +202,20 @@ const EmployeeList = () => { const handleToggle = (e) => { setShowInactive(e.target.checked); - recallEmployeeData(e.target.checked); + recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject); }; const handleAllEmployeesToggle = (e) => { const isChecked = e.target.checked; - setShowInactive(false) - setShowAllEmployees( isChecked ); + setShowInactive(false); + setShowAllEmployees(isChecked); + if (isChecked) { + recallEmployeeData(false, null); + } else { + recallEmployeeData(false, selectedProjectId); + } - recallEmployeeData(showInactive, isChecked ? null : selectedProject); + // recallEmployeeData(false, isChecked ? null : selectedProject); }; const handleEmployeeModel = (id) => { @@ -202,21 +224,19 @@ const EmployeeList = () => { }; const handleOpenDelete = (employee) => { - console.log(employee); setSelectedEmpFordelete(employee); setIsDeleteModalOpen(true); }; - const handleProjectSelection = (e) => { - const newProjectId = e.target.value; - setSelectedProject(newProjectId); - if (newProjectId) { - setShowAllEmployees(false); - } - }; + // useEffect(() => { + // setSelectedProject(selectedProjectId || ""); + // }, [selectedProjectId]); + useEffect(() => { - setSelectedProject(selectedProjectId || ""); - }, [selectedProjectId]); + if (!showAllEmployees) { + recallEmployeeData(showInactive, selectedProjectId); + } + }, [selectedProjectId, showInactive, showAllEmployees, recallEmployeeData]); return ( @@ -324,7 +344,7 @@ const EmployeeList = () => { {/* Right side: Search + Export + Add Employee */}
- {/* Search */} + {/* Search Input - ALWAYS ENABLED */}
@@ -373,7 +395,7 @@ const EmployeeList = () => {
- {/* Add Employee */} + {/* Add Employee Button */} {Manage_Employee && (