created component for assign and unassign projects for employee

src/pages/employee/AssignToProject.jsx

@@ -0,0 +1,165 @@
+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 } = useProjectsByEmployee(employee?.id);
+
+  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({
+          empID: employee.id,
+          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,
+    }));
+
+    setSelectedEmployees((prev) => {
+      const index = prev.findIndex((emp) => emp.projectId === projectId && emp.empID === employee.id);
+      const newEntry = {
+        empID: employee.id,
+        jobRoleId: employee.jobRoleId,
+        projectId,
+        status: isChecked,
+      };
+
+      if (index === -1) {
+        return [...prev, newEntry];
+      } else {
+        const updated = [...prev];
+        updated[index].status = isChecked;
+        return updated;
+      }
+    });
+  };
+
+  const handleSubmit = async () =>
+  {
+    console.log(selectedEmployees)
+    try
+    {
+      const resp = await ProjectRepository.updatesAssignProject( employee.id, selectedEmployees )
+      console.group(resp.data)
+       
+     }catch(error)
+    {
+      const msg = error.response.data.message || error.message || "Error occured during API calling.";
+      showToast( msg, "error" );
+}  };
+
+  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)}
+                        />
+                        <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">
+              Submit
+            </button>
+            <button onClick={handleClosedModal} className="btn btn-secondary btn-sm">
+              Cancel
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AssignToProject;