From ad55560d6d6147afcadb831aeded5e173545f0e5 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Tue, 17 Jun 2025 14:46:18 +0530 Subject: [PATCH 1/2] The search functionality in the Employees section does not work correctly after applying a filter. --- src/pages/employee/EmployeeList.jsx | 369 ++++++++++++++-------------- 1 file changed, 185 insertions(+), 184 deletions(-) diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx index 2d40ceff..24ce0556 100644 --- a/src/pages/employee/EmployeeList.jsx +++ b/src/pages/employee/EmployeeList.jsx @@ -29,21 +29,18 @@ const EmployeeList = () => { const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || ""); const { projects, loading: projectLoading } = useProjects(); 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 || []); 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 [searchText, setSearchText] = useState(""); + const [filteredData, setFilteredData] = useState([]); const [showModal, setShowModal] = useState(false); const [selectedEmployeeId, setSelecedEmployeeId] = useState(null); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); @@ -52,48 +49,57 @@ 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, selectedProject]); + const displayData = filteredData; const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = Array.isArray(displayData) @@ -117,11 +123,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 +141,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 +191,15 @@ 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); - recallEmployeeData(showInactive, isChecked ? null : selectedProject); + recallEmployeeData(false, isChecked ? null : selectedProject); }; const handleEmployeeModel = (id) => { @@ -202,7 +208,6 @@ const EmployeeList = () => { }; const handleOpenDelete = (employee) => { - console.log(employee); setSelectedEmpFordelete(employee); setIsDeleteModalOpen(true); }; @@ -210,10 +215,9 @@ const EmployeeList = () => { const handleProjectSelection = (e) => { const newProjectId = e.target.value; setSelectedProject(newProjectId); - if (newProjectId) { - setShowAllEmployees(false); - } + setShowAllEmployees(false); }; + useEffect(() => { setSelectedProject(selectedProjectId || ""); }, [selectedProjectId]); @@ -324,7 +328,7 @@ const EmployeeList = () => { {/* Right side: Search + Export + Add Employee */}
- {/* Search */} + {/* Search Input - ALWAYS ENABLED */}
@@ -373,7 +379,7 @@ const EmployeeList = () => {
- {/* Add Employee */} + {/* Add Employee Button */} {Manage_Employee && (