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,20 +32,21 @@ 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 {
+  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({
+  } = useManageProjectAllocation({
     onSuccessCallback: () => {
       setRemovingEmployeeId(null);
       setAssignedLoading(false);
@@ -55,7 +56,7 @@ const {
     onErrorCallback: () => {
       closeDeleteModal();
     },
-});
+  });
 
 
 
@@ -73,7 +74,7 @@ const {
       ],
       added: false,
     });
-};
+  };
 
   const handleEmpAlicationFormSubmit = (allocaionObj) => {
     let items = allocaionObj.map((item) => {
@@ -92,7 +93,7 @@ const {
 
     const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
     if (dropdown) dropdown.value = "true";
-};
+  };
 
 
   const getRole = (jobRoleId) => {
@@ -125,16 +126,16 @@ const {
 
   useEffect(() => {
     dispatch(changeMaster("Job Role"));
-}, [dispatch]);
+  }, [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) => {
@@ -177,16 +204,16 @@ const {
 
   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 (
     <>
@@ -235,8 +262,8 @@ const {
 
       <div className="card card-action mb-6">
         <div className="card-body">
-          <div className="row">
-            <div className="col-12 d-flex justify-content-between mb-1">
+          <div className="row d-flex justify-content-between mb-4">
+            <div className="col-md-6 col-12 d-flex align-items-center">
               <div
                 className="dataTables_length text-start py-2 px-2"
                 id="DataTables_Table_0_length"
@@ -256,10 +283,23 @@ const {
                   </select>
                 </label>
               </div>
+
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
+              <div className="dataTables_filter d-inline-flex align-items-center">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+
+              </div>
               <button
                 type="button"
-                className={`link-button btn-sm m-1 ${
-                  HasAssignUserPermission ? "" : "d-none"
+                className={`link-button btn-sm m-1 ${HasAssignUserPermission ? "" : "d-none"
                   }`}
                 data-bs-toggle="modal"
                 data-bs-target="#user-model"
@@ -271,7 +311,7 @@ const {
           </div>
           <div className="table-responsive text-nowrap">
             {employeeLodaing && <p>Loading..</p>}
-            {!employeeLodaing && employees && employees.length > 0 && (
+            {!employeeLodaing && filteredEmployees && filteredEmployees.length > 0 && (
               <table className="table ">
                 <thead>
                   <tr>
@@ -283,8 +323,7 @@ const {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
-                    filteredEmployees.map((item) => (
+                  {filteredEmployees.map((item) => (
                     <tr key={item.id}>
                       <td>
                         <div className="d-flex justify-content-start align-items-center">