diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx index 10618458..5b0e5baa 100644 --- a/src/components/Project/Teams.jsx +++ b/src/components/Project/Teams.jsx @@ -14,13 +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 {projectId} = useParams() - // const projectId = useSelector((store)=>store.localVariables.projectId) +const Teams = () => { const projectId = useSelectedproject(); const dispatch = useDispatch(); @@ -32,67 +32,68 @@ 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)); + setActiveEmployee(true); + setFilteredEmployees(employees.filter((emp) => emp.isActive)); - const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]'); - if (dropdown) dropdown.value = "true"; -}; + const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]'); + if (dropdown) dropdown.value = "true"; + }; const getRole = (jobRoleId) => { @@ -124,17 +125,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 ) ); + const filtered = projectEmployees.filter((emp) => emp.isActive); + setFilteredEmployees(filtered); } - }, [projectEmployees,employeeLodaing]); + }, [projectEmployees, employeeLodaing]); useEffect(() => { if (data) { @@ -142,24 +143,50 @@ 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) - } + setActiveEmployee(filterValue === "true"); + setSearchTerm(""); }; - const deleteModalOpen = (item) => - { + const handleSearch = (e) => { + setSearchTerm(e.target.value); + }; + + const deleteModalOpen = (item) => { setDeleteEmplyee(item) setIsDeleteModal(true) } - const closeDeleteModal = ()=> setIsDeleteModal(false) + const closeDeleteModal = () => setIsDeleteModal(false) const handler = useCallback( (msg) => { @@ -167,7 +194,7 @@ const { refetch(); } }, - [projectId, refetch] + [projectId, refetch] ); useEffect(() => { @@ -175,18 +202,18 @@ 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 ( <> @@ -209,7 +236,7 @@ const { - {IsDeleteModal && ( + {IsDeleteModal && (
- +
-
-
+
+
+ +
+
+
+ + +
{employeeLodaing &&

Loading..

} - {!employeeLodaing && employees && employees.length > 0 && ( + {!employeeLodaing && filteredEmployees && filteredEmployees.length > 0 && ( - {!activeEmployee && } + {!activeEmployee && } - {filteredEmployees && - filteredEmployees.map((item) => ( - - - - {!activeEmployee && } - - + - - ))} + + {item.firstName} {item.middleName}{" "} + {item.lastName} + + + + + + + {!activeEmployee && } + + + + ))}
Name Assigned DateRelease DateRelease DateProject Role Actions
- - - {" "} - {moment(item.allocationDate).format( - "DD-MMM-YYYY" - )}{" "} - - {item.reAllocationDate - ? moment(item.reAllocationDate).format( - "DD-MMM-YYYY" - ) - : "Present"} - - - {getRole(item.jobRoleId)} - - - {item.isActive && ( -
+
+ {" "} + {moment(item.allocationDate).format( + "DD-MMM-YYYY" + )}{" "} + + {item.reAllocationDate + ? moment(item.reAllocationDate).format( + "DD-MMM-YYYY" + ) + : "Present"} + + + {getRole(item.jobRoleId)} + + + {item.isActive && ( + + )} + {!item.isActive && Not in project} +
)}