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,8 +32,9 @@ 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();
 
@@ -129,10 +130,10 @@ const {
 
 
   useEffect(() => {
-    if ( projectEmployees )
-    {
+    if (projectEmployees) {
       setEmployees(projectEmployees);
-       setFilteredEmployees( projectEmployees?.filter( ( emp ) => emp.isActive ) );
+      const filtered = projectEmployees.filter((emp) => emp.isActive);
+      setFilteredEmployees(filtered);
     }
   }, [projectEmployees, employeeLodaing]);
 
@@ -142,20 +143,46 @@ 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)
   }
@@ -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">