Merge pull request 'Adding Dropdown and Organization Column in Teams' (#409) from Kartik_Task#1227 into Organization_Management

Reviewed-on: #409

src/components/Project/Teams.jsx

@@ -17,12 +17,11 @@ import eventBus from "../../services/eventBus";
 import {
   useEmployeesByProjectAllocated,
   useManageProjectAllocation,
+  useProjectAssignedServices,
 } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 
 const Teams = () => {
-  // const {projectId} = useParams()
-  // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedProject();
   const dispatch = useDispatch();
 
@@ -37,6 +36,14 @@ const Teams = () => {
   const [activeEmployee, setActiveEmployee] = useState(true);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const handleToggleActive = e => setActiveEmployee(e.target.checked);
+
+  const [selectedService, setSelectedService] = useState("");
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   const navigate = useNavigate();
 
@@ -136,7 +143,6 @@ const Teams = () => {
   useEffect(() => {
     if (projectEmployees) {
       setEmployees(projectEmployees);
-      //setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
       const filtered = projectEmployees.filter((emp) => emp.isActive);
       setFilteredEmployees(filtered);
     }
@@ -179,13 +185,6 @@ const Teams = () => {
 
   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("");
   };
@@ -264,6 +263,66 @@ const Teams = () => {
         <div className="card-body">
           <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-1 px-0 col-md-4 col-12">
+                {servicesLoading ? (
+                  <span></span>
+                ) : assignedServices?.length > 1 ? (
+                  <label>
+                    <select
+                      name="DataTables_Table_0_length"
+                      aria-controls="DataTables_Table_0"
+                      className="form-select form-select-sm"
+                      aria-label="Select Service"
+                      value={selectedService}
+                      onChange={handleServiceChange}
+                      style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                    >
+                      {assignedServices.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                ) : (
+                  <div
+                    style={{
+                          
+                    }}
+                  >
+                    {/* fier fitting */}
+                    {assignedServices?.length === 1
+                      ?<h5>{ assignedServices[0].name}</h5>
+                      : "No service available"}
+                  </div>
+                )}
+              </div>
+
+              {/* <div className="dataTables_filter d-inline-flex align-items-center ms-2">
+                <input
+                  type="search"
+                  className="form-control form-control-sm me-4"
+                  placeholder="Search by Name or Role"
+                  aria-controls="DataTables_Table_0"
+                  value={searchTerm}
+                  onChange={handleSearch}
+                />
+              </div> */}
+
+            </div>
+            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
+              <div className="form-check form-switch me-2 mt-2">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={activeEmployee}
+                  onChange={handleToggleActive}
+                  id="activeEmployeeSwitch"
+                />
+                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
+                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
+                </label>
+              </div>
               <div className="dataTables_filter d-inline-flex align-items-center ms-2">
                 <input
                   type="search"
@@ -274,32 +333,11 @@ const Teams = () => {
                   onChange={handleSearch}
                 />
               </div>
-            </div>
+
-            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
-              <div
-                className="dataTables_length text-start py-2 px-2"
-                id="DataTables_Table_0_length"
-              >
-                <label>
-                  <select
-                    name="DataTables_Table_0_length"
-                    aria-controls="DataTables_Table_0"
-                    className="form-select form-select-sm"
-                    onChange={handleFilterEmployee}
-                    // value={false}
-                    aria-label=""
-                    defaultValue="true"
-                  >
-                    <option value="true">Active Employee</option>
-                    <option value="false">In-Active Employee</option>
-                  </select>
-                </label>
-              </div>
               <button
                 type="button"
-                className={`link-button btn-primary btn-sm ${
+                className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
-                  HasAssignUserPermission ? "" : "d-none"
+                  }`}
-                }`}
                 data-bs-toggle="modal"
                 data-bs-target="#user-model"
               >
@@ -319,6 +357,7 @@ const Teams = () => {
                       <th>
                         <div className="text-start ms-5">Name</div>
                       </th>
+                      <th>Organization</th>
                       <th>Assigned Date</th>
                       {!activeEmployee && <th>Release Date</th>}
                       <th>Project Role</th>
@@ -334,7 +373,7 @@ const Teams = () => {
                               <Avatar
                                 firstName={item.firstName}
                                 lastName={item.lastName}
-                              ></Avatar>
+                              />
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
@@ -352,18 +391,16 @@ const Teams = () => {
                               </div>
                             </div>
                           </td>
+
+                          <td>{item.organizationName || "N/A"}</td>
+
                           <td>
-                            {" "}
+                            {moment(item.allocationDate).format("DD-MMM-YYYY")}
-                            {moment(item.allocationDate).format(
-                              "DD-MMM-YYYY"
-                            )}{" "}
                           </td>
                           {!activeEmployee && (
                             <td>
                               {item.reAllocationDate
-                                ? moment(item.reAllocationDate).format(
+                                ? moment(item.reAllocationDate).format("DD-MMM-YYYY")
-                                    "DD-MMM-YYYY"
-                                  )
                                 : "Present"}
                             </td>
                           )}
@@ -373,7 +410,7 @@ const Teams = () => {
                             </span>
                           </td>
                           <td>
-                            {item.isActive && (
+                            {item.isActive ? (
                               <button
                                 aria-label="Delete"
                                 type="button"
@@ -381,27 +418,26 @@ const Teams = () => {
                                 className="btn p-0 dropdown-toggle hide-arrow"
                                 onClick={() => deleteModalOpen(item)}
                               >
-                                {" "}
                                 {removingEmployeeId === item.id ? (
                                   <div
                                     className="spinner-border spinner-border-sm text-primary"
                                     role="status"
                                   >
-                                    <span className="visually-hidden">
+                                    <span className="visually-hidden">Loading...</span>
-                                      Loading...
-                                    </span>
                                   </div>
                                 ) : (
                                   <i className="bx bx-trash me-1 text-danger"></i>
                                 )}
                               </button>
+                            ) : (
+                              <span>Not in project</span>
                             )}
-                            {!item.isActive && <span>Not in project</span>}
                           </td>
                         </tr>
                       ))}
                   </tbody>
                 </table>
+
               )}
             {!employeeLodaing && filteredEmployees.length === 0 && (
               <div className="text-center text-muted py-3">