diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx index 10618458..cb725e30 100644 --- a/src/components/Project/Teams.jsx +++ b/src/components/Project/Teams.jsx @@ -14,11 +14,13 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { ASSIGN_TO_PROJECT } from "../../utils/constants"; import ConfirmModal from "../common/ConfirmModal"; import eventBus from "../../services/eventBus"; -import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../hooks/useProjects"; +import { + useEmployeesByProjectAllocated, + useManageProjectAllocation, +} from "../../hooks/useProjects"; import { useSelectedproject } from "../../slices/apiDataManager"; -const Teams = () => -{ +const Teams = () => { // const {projectId} = useParams() // const projectId = useSelector((store)=>store.localVariables.projectId) const projectId = useSelectedproject(); @@ -32,68 +34,72 @@ const Teams = () => const [filteredEmployees, setFilteredEmployees] = useState([]); const [removingEmployeeId, setRemovingEmployeeId] = useState(null); const [assignedLoading, setAssignedLoading] = useState(false); - const [ activeEmployee, setActiveEmployee ] = useState( true ) - const [deleteEmployee,setDeleteEmplyee] = useState(null) + const [activeEmployee, setActiveEmployee] = useState(true); + const [deleteEmployee, setDeleteEmplyee] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); // State for search term const navigate = useNavigate(); - const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT ); - const [ IsDeleteModal, setIsDeleteModal ] = useState( false ) - const {projectEmployees, loading:employeeLodaing, refetch} = useEmployeesByProjectAllocated( projectId ) -const { - mutate: submitAllocations, - isPending, - isSuccess, - isError, -} = useManageProjectAllocation({ - onSuccessCallback: () => { - setRemovingEmployeeId(null); - setAssignedLoading(false); - setDeleteEmplyee(null); - closeDeleteModal(); - }, - onErrorCallback: () => { - closeDeleteModal(); - }, -}); - - - - const removeAllocation = (item) => { - setRemovingEmployeeId(item.id); - - submitAllocations({ - items: [ - { - empID: item.employeeId, - jobRoleId: item.jobRoleId, - projectId: projectId, - status: false, - }, - ], - added: false, + const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT); + const [IsDeleteModal, setIsDeleteModal] = useState(false); + const { + projectEmployees, + loading: employeeLodaing, + refetch, + } = useEmployeesByProjectAllocated(projectId); + const { + mutate: submitAllocations, + isPending, + isSuccess, + isError, + } = useManageProjectAllocation({ + onSuccessCallback: () => { + setRemovingEmployeeId(null); + setAssignedLoading(false); + setDeleteEmplyee(null); + closeDeleteModal(); + }, + onErrorCallback: () => { + closeDeleteModal(); + }, }); -}; + + const removeAllocation = (item) => { + setRemovingEmployeeId(item.id); + + submitAllocations({ + items: [ + { + empID: item.employeeId, + jobRoleId: item.jobRoleId, + projectId: projectId, + status: false, + }, + ], + added: false, + }); + }; const handleEmpAlicationFormSubmit = (allocaionObj) => { - let items = allocaionObj.map((item) => { - return { - empID: item.empID, - jobRoleId: item.jobRoleId, - projectId: projectId, - status: true, - }; - }); + let items = allocaionObj.map((item) => { + return { + empID: item.empID, + jobRoleId: item.jobRoleId, + projectId: projectId, + status: true, + }; + }); submitAllocations({ items, added: true }); - setActiveEmployee(true); - setFilteredEmployees(employees.filter((emp) => emp.isActive)); - - const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]'); - if (dropdown) dropdown.value = "true"; -}; + setActiveEmployee(true); + setFilteredEmployees(employees.filter((emp) => emp.isActive)); + const dropdown = document.querySelector( + 'select[name="DataTables_Table_0_length"]' + ); + if (dropdown) dropdown.value = "true"; + }; const getRole = (jobRoleId) => { if (loading) return "Loading..."; @@ -124,17 +130,17 @@ const { }; useEffect(() => { - dispatch(changeMaster("Job Role")); -}, [dispatch]); - + dispatch(changeMaster("Job Role")); + }, [dispatch]); useEffect(() => { - if ( projectEmployees ) - { + if (projectEmployees) { setEmployees(projectEmployees); - setFilteredEmployees( projectEmployees?.filter( ( emp ) => emp.isActive ) ); + //setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive)); + const filtered = projectEmployees.filter((emp) => emp.isActive); + setFilteredEmployees(filtered); } - }, [projectEmployees,employeeLodaing]); + }, [projectEmployees, employeeLodaing]); useEffect(() => { if (data) { @@ -142,24 +148,57 @@ const { } }, [data]); + const filterAndSearchEmployees = useCallback(() => { + const statusFiltered = employees.filter((emp) => + activeEmployee ? emp.isActive : !emp.isActive + ); + + if (searchTerm === "") { + setFilteredEmployees(statusFiltered); + return; + } + + const lowercasedSearchTerm = searchTerm.toLowerCase(); + const searchedAndFiltered = statusFiltered.filter((item) => { + const fullName = + `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase(); + const roleName = getRole(item.jobRoleId).toLowerCase(); + + return ( + fullName.includes(lowercasedSearchTerm) || + roleName.includes(lowercasedSearchTerm) + ); + }); + + setFilteredEmployees(searchedAndFiltered); + }, [employees, activeEmployee, searchTerm, getRole]); + + useEffect(() => { + filterAndSearchEmployees(); + }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]); + const handleFilterEmployee = (e) => { const filterValue = e.target.value; - if ( filterValue === "true" ) - { - setActiveEmployee(true) - setFilteredEmployees(employees.filter((emp) => emp.isActive)); - } else { - setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) ); - setActiveEmployee(false) - } + // if (filterValue === "true") { + // setActiveEmployee(true); + // setFilteredEmployees(employees.filter((emp) => emp.isActive)); + // } else { + // setFilteredEmployees(employees.filter((emp) => !emp.isActive)); + // setActiveEmployee(false); + // } + setActiveEmployee(filterValue === "true"); + setSearchTerm(""); }; - const deleteModalOpen = (item) => - { - setDeleteEmplyee(item) - setIsDeleteModal(true) - } - const closeDeleteModal = ()=> setIsDeleteModal(false) + const handleSearch = (e) => { + setSearchTerm(e.target.value); + }; + + const deleteModalOpen = (item) => { + setDeleteEmplyee(item); + setIsDeleteModal(true); + }; + const closeDeleteModal = () => setIsDeleteModal(false); const handler = useCallback( (msg) => { @@ -167,7 +206,7 @@ const { refetch(); } }, - [projectId, refetch] + [projectId, refetch] ); useEffect(() => { @@ -175,18 +214,19 @@ const { return () => eventBus.off("assign_project_all", handler); }, [handler]); - const employeeHandler = useCallback( + const employeeHandler = useCallback( (msg) => { - if(filteredEmployees.some((item) => item.employeeId == msg.employeeId)){ + if (filteredEmployees.some((item) => item.employeeId == msg.employeeId)) { refetch(); } - },[filteredEmployees, refetch] + }, + [filteredEmployees, refetch] ); useEffect(() => { - eventBus.on("employee",employeeHandler); - return () => eventBus.off("employee",employeeHandler) - },[employeeHandler]) + eventBus.on("employee", employeeHandler); + return () => eventBus.off("employee", employeeHandler); + }, [employeeHandler]); return ( <> @@ -208,8 +248,7 @@ const { > - - {IsDeleteModal && ( + {IsDeleteModal && (
-
-
-
+
+
+
+ +
+
+