marco.pms.web/src/components/Project/Teams.jsx

import React, { useState, useEffect } from "react";
import MapUsers from "./MapUsers";
import showToast from "../../services/toastService";
import Avatar from "../common/Avatar";
import moment from "moment";
import { RolesRepository } from "../../repositories/MastersRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ProjectRepository from "../../repositories/ProjectRepository";

const Teams = ({ project }) => {
  const [isModalOpen, setIsModelOpen] = useState(false);
  const [error, setError] = useState("");
  const [empRoles, setEmpRoles] = useState(null);
  const [clearFormTrigger, setClearFormTrigger] = useState(false);
  const [employees, setEmployees] = useState(null);
  const [filteredEmployees, setFilteredEmployees] = useState([]);
  const fetchEmployees = async () => {
    try {
      // if (!empRoles) {
      ProjectRepository.getProjectAllocation(project.id)
        .then( ( response ) =>
        {
          debugger
          setEmployees( response.data );
          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
        })
        .catch((error) => {
          console.error(error);
          setError("Failed to fetch data.");
        });
    } catch (err) {
      setError("Failed to fetch activities.");
    }
  };

  const fetchEmpRoles = async () => {
    try {
      const roles_cache = getCachedData("employeeRolesMaster");
      if (!roles_cache) {
        RolesRepository.getRoles()
          .then((response) => {
            setEmpRoles(response.data);
            cacheData("employeeRolesMaster", response.data);
          })
          .catch((error) => {
            console.error(error);
            setError("Failed to fetch data.");
          });
      } else {
        setEmpRoles(roles_cache);
      }
    } catch (err) {
      setError("Failed to fetch activities.");
    } finally {
      // setLoading(false);
    }
  };

  const submitAllocations = (items) => {
    ProjectRepository.manageProjectAllocation(items)
      .then((response) => {
        showToast("Details updated successfully.", "success");
        setClearFormTrigger(true); // Set trigger to true
        fetchEmployees();
      })
      .catch((error) => {
        showToast(error.message, "error");
      });

    // api
    //   .post("/api/project/allocation", items)
    //   .then((data) => {
    //     showToast("Details updated successfully.", "success");
    //     setClearFormTrigger(true); // Set trigger to true
    //     fetchEmployees();
    //   })
    //   .catch((error) => {
    //     showToast(error.message, "error");
    //   });
  };
  const removeAllocation = (item) => {
    submitAllocations([
      {
        empID: item.employeeId,
        roleID: item.roleID,
        projectId: project.id,
        status: false,
      },
    ]);
  
  };
  const handleEmpAlicationFormSubmit = (allocaionObj) => {
    console.log("Form submitted:", allocaionObj); // Replace this with an API call or state update
    debugger;
    let items = allocaionObj.map((item) => {
      return {
        empID: item.id,
        roleID: item.roleId,
        projectId: project.id,
        status: true,
      };
    });

    submitAllocations(items);
  };
  const getRole = (roleId) => {
    if (!empRoles) return "Unassigned";
    if (!roleId) return "Unassigned";
    const role = empRoles.find((b) => b.id == roleId);
    return role ? role.role : "Unassigned";
  };
  const openModel = () => {
    setIsModelOpen(true);

    
  };
  const onModelClose = () => {
 
    setIsModelOpen(false);
    const modalElement = document.getElementById('user-model');
    if (modalElement) {
      modalElement.classList.remove('show'); 
      modalElement.style.display = 'none'; 
      document.body.classList.remove('modal-open'); 
      document.querySelector('.modal-backdrop').remove(); 
    }
  };

  




  useEffect(() => {
    fetchEmployees();
    fetchEmpRoles();
  }, [] );


  const handleFilterEmployee = (e) => {
    const filterValue = e.target.value;
    if (filterValue === 'true') {
        setFilteredEmployees(employees.filter((emp) => emp.isActive));
    } else {
        setFilteredEmployees(employees.filter((emp) => !emp.isActive));
    }
};

  return (
    <>   
     {
      isModalOpen && (
        <div
        className={`modal fade `}
        id="user-model"
        tabIndex="-1"
        aria-hidden="true"
      >
       <MapUsers
          onClose={onModelClose}
          empRoles={empRoles}
          projectId={1}
          onSubmit={handleEmpAlicationFormSubmit}
          clearTrigger={clearFormTrigger}
          onClearComplete={() => setClearFormTrigger(false)}
        ></MapUsers>
      </div>
      
     )}
      <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="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">InActive Employee</option>
                        </select>
                      </label>
                      </div>  
              <button
                type="button"
                className="link-button link-button-sm m-1"
                data-bs-toggle="modal"
                data-bs-target="#user-model"
                onClick={() => openModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Assign Users
              </button>
            </div>
          </div>
          <div className="table-responsive text-nowrap">
            {employees && employees.length > 0 ? (
              <table className="table ">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Assigned Date</th>
                    <th>Release Date</th>
                    <th>Role</th>

                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody className="table-border-bottom-0">
                  {filteredEmployees &&
                    filteredEmployees.map((item) => (
                      <tr key={item.id}>
                        <td>
                          <div className="d-flex justify-content-start align-items-center">
                            <Avatar
                              firstName={item.firstName}
                              lastName={item.lastName}
                            ></Avatar>
                            <div className="d-flex flex-column">
                              <a
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault(); // Prevent default link behavior
                                  window.location.href =
                                    "/employee/" + item.employee.id;
                                }}
                                className="text-heading text-truncate"
                              >
                                <span className="fw-medium">
                                  {item.firstName} {item.lastName}
                                </span>
                              </a>
                              {/* <small>{item.phoneNumber}</small> */}
                            </div>
                          </div>
                        </td>
                        <td>
                          {" "}
                          {moment(item.allocationDate).format(
                            "DD-MMM-YYYY"
                          )}{" "}
                        </td>
                        <td>
                          {item.reAllocationDate
                            ? moment(item.reAllocationDate).format(
                                "DD-MMM-YYYY"
                              )
                            : "Present"}
                        </td>
                        <td>
                          <span className="badge bg-label-primary me-1">
                            {getRole(item.roleID)}
                          </span>
                        </td>
                        <td> 
                          {item.isActive && (
                            <button
                              aria-label="Delete"
                              type="button"
                              title="Remove from project"
                              className="btn p-0 dropdown-toggle hide-arrow"
                              onClick={() => removeAllocation(item)}
                            >
                              {" "}
                              <i className="bx bx-trash me-1 text-danger"></i>{" "}
                            </button>
                          )}
                          {!item.isActive && (<span>Not in project</span>)}
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            ) : (
              <span>No employees assigned to the project</span>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Teams;