From 265c74f07992f881803db4afe5c6031d70db51cf Mon Sep 17 00:00:00 2001 From: "pramod.mahajan" Date: Sat, 27 Sep 2025 10:12:34 +0530 Subject: [PATCH] added filter and sorted employee list - Team --- src/components/Project/Team/Teams.jsx | 313 ++++++++++++++------------ 1 file changed, 174 insertions(+), 139 deletions(-) diff --git a/src/components/Project/Team/Teams.jsx b/src/components/Project/Team/Teams.jsx index 0d5d501d..e9802765 100644 --- a/src/components/Project/Team/Teams.jsx +++ b/src/components/Project/Team/Teams.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect, useCallback, useMemo } from "react"; import MapUsers from "../MapUsers"; import { Link, NavLink, useNavigate, useParams } from "react-router-dom"; @@ -28,16 +28,15 @@ const Teams = () => { const dispatch = useDispatch(); const [AssigTeam, setAssignTeam] = useState(false); const [employees, setEmployees] = useState([]); - const [filteredEmployees, setFilteredEmployees] = useState([]); const [selectedEmployee, setSelectedEmployee] = useState(null); const [deleteEmployee, setDeleteEmplyee] = useState(null); const [searchTerm, setSearchTerm] = useState(""); // State for search term const [selectedService, setSelectedService] = useState(null); - const [activeEmployee,setActiveEmployee] = useState(false) + const [activeEmployee, setActiveEmployee] = useState(false); const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(selectedProject); - const {data:empJobRoles,loading} = useMaster() + const { data: empJobRoles, loading } = useMaster(); const handleToggleActive = (e) => setActiveEmployee(e.target.checked); const handleServiceChange = (e) => { @@ -52,7 +51,12 @@ const Teams = () => { projectEmployees, loading: employeeLodaing, refetch, - } = useEmployeesByProjectAllocated(selectedProject, selectedService,null,activeEmployee); + } = useEmployeesByProjectAllocated( + selectedProject, + selectedService, + null, + activeEmployee + ); const { mutate: submitAllocations, isPending, @@ -80,9 +84,9 @@ const Teams = () => { }, ]; - submitAllocations({payload:payload}); + submitAllocations({ payload: payload }); }; - const getJobRole = (jobRoleId) => { + const getJobRole = (jobRoleId) => { if (loading) return "Loading..."; if (!Array.isArray(empJobRoles)) return "Unassigned"; if (!jobRoleId) return "Unassigned"; @@ -90,19 +94,36 @@ const Teams = () => { const role = empJobRoles.find((b) => b.id == jobRoleId); return role ? role.name : "Unassigned"; }; - // const employeeHandler = useCallback( - // (msg) => { - // if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) { - // refetch(); - // } - // }, - // [filteredEmployees, refetch] - // ); - // useEffect(() => { - // eventBus.on("employee", employeeHandler); - // return () => eventBus.off("employee", employeeHandler); - // }, [employeeHandler]); + const filteredEmployees = useMemo(() => { + if (!projectEmployees || !searchTerm?.trim()) return projectEmployees; + + const lower = searchTerm.toLowerCase(); + + return projectEmployees?.filter((emp) => { + const fullName = `${emp.firstName ?? ""} ${ + emp.lastName ?? "" + }`.toLowerCase(); + + const joberole = getJobRole(emp?.jobRoleId)?.toLowerCase(); + + return fullName?.includes(lower) || joberole?.includes(lower); + }); + }, [projectEmployees, searchTerm]); + const handleSearch = (e) => setSearchTerm(e.target.value); + const employeeHandler = useCallback( + (msg) => { + if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) { + refetch(); + } + }, + [filteredEmployees, refetch] + ); + + useEffect(() => { + eventBus.on("employee", employeeHandler); + return () => eventBus.off("employee", employeeHandler); + }, [employeeHandler]); return ( <> @@ -112,7 +133,7 @@ const Teams = () => { isOpen={AssigTeam} closeModal={() => setAssignTeam(false)} > - setAssignTeam(false)} /> + setAssignTeam(false)} /> )} @@ -128,79 +149,85 @@ const Teams = () => {
-
-
- {/*
- {!servicesLoading && - assignedServices?.length > 0 && - (assignedServices.length > 1 ? ( - - ) : ( -
{assignedServices[0].name}
- ))} -
*/} +
+
+
+
+ {!servicesLoading && ( + <> + {(!assignedServices || assignedServices.length === 0) && ( + + Not Service Assigned + + )} + + {assignedServices?.length === 1 && ( + + {assignedServices[0].name} + + )} + + {assignedServices?.length > 1 && ( + + )} + + )} +
+ +
+ + +
+
-
-
- - -
-
- -
+ +
+ + {HasAssignUserPermission && ( )}
+
{employeeLodaing &&

Loading..

} {projectEmployees && projectEmployees.length > 0 && ( @@ -213,72 +240,80 @@ const Teams = () => { Services Organization Assigned Date - Release Date + {activeEmployee && Release Date} Project Role Actions - {projectEmployees && - projectEmployees.map((emp) => ( - - -
- - - + - {emp.serviceName || "N/A"} - {emp.organizationName || "N/A"} + {emp.serviceName || "N/A"} + {emp.organizationName || "N/A"} - - {moment(emp.allocationDate).format("DD-MMM-YYYY")} - - - {emp.reAllocationDate - ? moment(emp.reAllocationDate).format("DD-MMM-YYYY") - : "Present"} - - - - {getJobRole(emp.jobRoleId)} - - - - {emp.isActive ? ( - - ) : ( - Not in project + + {moment(emp.allocationDate).format("DD-MMM-YYYY")} + + {activeEmployee && ( + + {emp.reAllocationDate + ? moment(emp.reAllocationDate).format( + "DD-MMM-YYYY" + ) + : "Present"} + )} - - - ))} + + + {getJobRole(emp.jobRoleId)} + + + + {emp.isActive ? ( + + ) : ( + Not in project + )} + + + ))} )}