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

import React, { useState, useEffect } from "react";
import EmployeeRepository from "../../repositories/EmployeeRepository";
import { useAllEmployees } from "../../hooks/useEmployees";
import useSearch from "../../hooks/useSearch";
import AssignEmployeeTable from "./AssignEmployeeTable";
import showToast from "../../services/toastService";
import "./MapUser.css";

const MapUsers = ({
  projectId,
  onClose,
  empJobRoles,
  onSubmit,
  allocation,
  assignedLoading,
  setAssignedLoading,
}) => {
  const {
    employeesList,
    loading: employeeLoading,
    error,
  } = useAllEmployees(false);
  const [selectedEmployees, setSelectedEmployees] = useState([]);
  const [searchText, setSearchText] = useState("");

  const handleAllocationData = Array.isArray(allocation) ? allocation : [];

  const allocationEmployees = employeesList.map((employee) => {
    const allocationItem = handleAllocationData.find(
      (alloc) => alloc.employeeId === employee.id
    );
    return {
      ...employee,
      isActive: allocationItem ? allocationItem.isActive : false,
      jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
    };
  });

  function parseDate(dateStr) {
    return new Date(dateStr.split(".")[0]);
  }

  const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
    const existingAlloc = acc[alloc.employeeId];

    if (!existingAlloc) {
      acc[alloc.employeeId] = alloc;
    } else {
      const existingDate = parseDate(
        existingAlloc.reAllocationDate || existingAlloc.allocationDate
      );
      const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);

      if (newDate > existingDate) {
        acc[alloc.employeeId] = alloc;
      }
    }
    return acc;
  }, {});

  const allocationEmployeesData = employeesList
    .map((employee) => {
      const allocationItem = latestAllocations[employee.id];
      return {
        ...employee,
        isActive: allocationItem ? allocationItem.isActive : false,
      };
    })
    .filter((employee) => employee.isActive === false);

  const { filteredData, setSearchQuery } = useSearch(
    allocationEmployeesData,
    searchText
  );

  const handleRoleChange = (employeeId, newRoleId) => {
    setSelectedEmployees((prevSelectedEmployees) =>
      prevSelectedEmployees.map((emp) =>
        emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
      )
    );
  };

  const handleCheckboxChange = (employeeId) => {
    setSelectedEmployees((prevSelectedEmployees) => {
      const updatedEmployees = [...prevSelectedEmployees];
      const employeeIndex = updatedEmployees.findIndex(
        (emp) => emp.id === employeeId
      );

      if (employeeIndex !== -1) {
        const isSelected = !updatedEmployees[employeeIndex].isSelected;
        updatedEmployees[employeeIndex].isSelected = isSelected;
      } else {
        updatedEmployees.push({
          id: employeeId,
          isSelected: true,
        });
      }
      return updatedEmployees;
    });
  };

  const handleSubmit = () => {
    setAssignedLoading(true);
    const selected = selectedEmployees
      .filter((emp) => emp.isSelected)
      .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
    if (selected.length > 0) {
      onSubmit(selected);
      setSelectedEmployees([]);
    } else {
      showToast("Please select Employee", "error");
    }
  };
  return (
    <>
      <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
        <div className="modal-content">
          <div className="modal-header text-center">
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
            </button>
          </div>
          <p className="m-0 fw-semibold fs-5">Add Employee To Project</p>

          <div className="px-4 mt-4 col-md-4 text-start">
            {(filteredData.length > 0 ||
              allocationEmployeesData.length > 0) && (
                <div className="input-group input-group-sm mb-2">
                  <input
                    type="search"
                    className="form-control"
                    placeholder="Search employees..."
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
              )}

            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
          </div>

          <div className="modal-body p-sm-4 p-0">
            <table
              className="datatables-users table border-top dataTable no-footer dtr-column "
              id="DataTables_Table_0"
              aria-describedby="DataTables_Table_0_info"
              style={{ width: "100%" }}
            >
              <tbody>
                {employeeLoading && allocationEmployeesData.length === 0 && (
                  <tr>
                    <td>Loading..</td>
                  </tr>
                )}

                {!employeeLoading &&
                  allocationEmployeesData.length === 0 &&
                  filteredData.length === 0 && (
                    <tr>
                      <td>All employee assigned to Project.</td>
                    </tr>
                  )}

                {!employeeLoading &&
                  allocationEmployeesData.length > 0 &&
                  filteredData.length === 0 && (
                    <tr>
                      <td>No matching employees found.</td>
                    </tr>
                  )}

                {(filteredData.length > 0 ||
                  allocationEmployeesData.length > 0) &&
                  filteredData.map((emp) => (
                    <AssignEmployeeTable
                      key={emp.id}
                      employee={emp}
                      jobRoles={empJobRoles}
                      isChecked={emp.isSelected}
                      onRoleChange={handleRoleChange}
                      onCheckboxChange={handleCheckboxChange}
                    />
                  ))}
              </tbody>
            </table>
          </div>
          <div className="modal-footer mt-5 d-flex justify-content-end gap-0">
            <button
              type="button"
              className="btn btn-sm btn-label-secondary"
              data-dismiss="modal"
              aria-label="Close"
              onClick={onClose}
            >
              Cancel
            </button>

            {(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
              <button className="btn btn-sm btn-primary" onClick={handleSubmit}>
                {assignedLoading ? "Please Wait..." : "Assign to Project"}
              </button>
            )}
          </div>

        </div>
      </div>
    </>
  );
};

export default MapUsers;