marco.pms.web/src/pages/employee/AssignToProject.jsx

import React, { useState, useEffect } from "react";
import { useProjects, useProjectsByEmployee } from "../../hooks/useProjects";
import EmployeeList from "./EmployeeList";
import showToast from "../../services/toastService";
import ProjectRepository from "../../repositories/ProjectRepository";

const AssignToProject = ({ employee, onClose }) => {
  const { projects, loading } = useProjects();
  const { projectList,loading:selectedProjectLoding ,refetch} = useProjectsByEmployee(employee?.id);
  const [isSubmitting,setSubmitting] = useState(false)
  const [searchTerm, setSearchTerm] = useState("");
  const [checkedProjects, setCheckedProjects] = useState({});
  const [selectedEmployees, setSelectedEmployees] = useState([]);

  useEffect(() => {
    if (projectList && projectList.length > 0) {
      const initialChecked = {};
      const initialSelected = [];

      projectList.forEach((project) => {
        initialChecked[project.id] = true;
        initialSelected.push({
          jobRoleId: employee.jobRoleId,
          projectId: project.id,
          status: true,
        });
      });

      setCheckedProjects(initialChecked);
      setSelectedEmployees(initialSelected);
    } else {
      setCheckedProjects({});
      setSelectedEmployees([]);
    }
  }, [projectList, employee?.id]);

  const handleSearchChange = (e) => {
    setSearchTerm(e.target.value.toLowerCase());
  };

const handleCheckboxChange = (projectId) => {
  const isChecked = !checkedProjects[projectId];

  setCheckedProjects((prev) => ({
    ...prev,
    [projectId]: isChecked,
  }));
};


const handleSubmit = async () => {
  const initiallyAssigned = new Set(projectList.map((p) => p.id.toString()));
  const changes = [];

  Object.entries(checkedProjects).forEach(([projectId, isChecked]) => {
    const wasAssigned = initiallyAssigned.has(projectId);

    if (wasAssigned && !isChecked) {
      changes.push({
        projectId: projectId,
        jobRoleId: employee.jobRoleId,
        status: false,
      });
    }

    if (!wasAssigned && isChecked) {
      changes.push({
        projectId: projectId,
        jobRoleId: employee.jobRoleId,
        status: true,
      });
    }

  });

  if (changes.length === 0) {
    showToast("Make change before.", "info");
    return;
  }

  try {
    setSubmitting(true)
    await ProjectRepository.updateProjectsByEmployee(employee.id, changes)
    showToast( "Project assignments updated.", "success" );
    setSubmitting(false)
    onClose();
    refetch(employee.id)
  } catch (error) {
    const msg = error.response?.data?.message || error.message || "Error during API call.";
    showToast( msg, "error" );
    setSubmitting(false)
  }
};




  const handleClosedModal = () => {
    onClose();
  };

  const filteredProjects = projects.filter((project) =>
    project.name.toLowerCase().includes(searchTerm)
  );

  return (
    <div className="p-2 p-md-0">
      <p className="fw-semibold fs-6 m-0">Assign to Project</p>

      <div className="row my-1">
        <div className="col-12 col-sm-6 col-md-6 mt-2">
          <input
            type="text"
            className="form-control form-control-sm"
            placeholder="Search projects..."
            value={searchTerm}
            onChange={handleSearchChange}
          />
        </div>
      </div>

      {loading ? (
        <div className="text-center py-4">
          <div className="spinner-border text-primary" role="status" />
          <p className="mt-2">Loading projects...</p>
        </div>
      ) : (
        <>
          <table className="table mt-2 mb-2">
            <thead>
              <tr className="text-start">
                <th>Select Project</th>
              </tr>
            </thead>
            <tbody>
              {filteredProjects.length > 0 ? (
                filteredProjects.map((project) => (
                  <tr key={project.id}>
                    <td className="d-flex align-items-center">
                      <div className="form-check d-flex justify-content-start align-items-center">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id={`project-${project.id}`}
                          checked={checkedProjects[project.id] || false}
                          onChange={() => handleCheckboxChange( project.id )}
                          disabled={selectedProjectLoding}
                          
                        />
                        <label
                          className="form-check-label ms-2"
                          htmlFor={`project-${project.id}`}
                        >
                          {project.name}
                        </label>
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td className="text-center text-muted py-3">No projects found.</td>
                </tr>
              )}
            </tbody>
          </table>

          <div className="d-flex justify-content-center gap-2 mt-2">
            <button onClick={handleSubmit} className="btn btn-primary btn-sm" disabled={selectedProjectLoding || loading || isSubmitting }>
              {isSubmitting ? "Please Wait...":"Submit"}
            </button>
            <button onClick={handleClosedModal} className="btn btn-secondary btn-sm" disabled={isSubmitting}>
              Cancel
            </button>
          </div>
        </>
      )}
    </div>
  );
};

export default AssignToProject;