model open on single click.

src/components/Project/AssignEmployeeTable.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from "react";
+import Avatar from "../common/Avatar";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+
+
+
+
+
+export const roleSchema = z.object({
+  jobRole: z.string().min(1, "Job Role is required"),
+  isChecked: z.literal(true, {
+    errorMap: () => ({ message: "You must check the box first" }),
+  }),
+} );
+
+
+const AssignEmployeeTable = ({
+  employee,
+  jobRoles,
+  isChecked,
+  onRoleChange,
+  onCheckboxChange,
+}) => {
+  const [currentJobRole, setCurrentJobRole] = useState(employee.jobRoleId?.toString() || "");
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    trigger,
+    getValues,
+  } = useForm({
+    resolver: zodResolver(roleSchema),
+    defaultValues: {
+      jobRole: currentJobRole,
+      isChecked: isChecked || false,
+    },
+  });
+
+  useEffect(() => {
+    const jobRoleStr = employee.jobRoleId?.toString() || "";
+    setCurrentJobRole(jobRoleStr);
+    setValue("jobRole", jobRoleStr);
+    setValue("isChecked", isChecked);
+  }, [employee.jobRoleId, isChecked, setValue]);
+
+  const onSubmit = (data) => {
+    setCurrentJobRole(data.jobRole);
+    onRoleChange(employee.id, data.jobRole);
+  };
+
+  const handleRoleSelect = async (e) => {
+    const value = e.target.value;
+    setValue("jobRole", value);
+    const isValid = await trigger(); // Validate the form
+    if (isValid) {
+      const values = getValues();
+      onRoleChange(employee.id, values.jobRole);
+    }
+  };
+
+  const handleCheckboxChange = async () => {
+    if (!employee.isActive) {
+      setValue("isChecked", !isChecked);
+      const isValid = await trigger(); // Validate after setting value
+      if (isValid) {
+        const values = getValues();
+        onCheckboxChange(employee.id);
+        onRoleChange(employee.id, values.jobRole); // Update role if it changed
+      }
+    }
+  };
+
+  return (
+    <tr className="odd py-0">
+      <td className="sorting_1 py-0" colSpan={2}>
+        <div className="d-flex justify-content-start align-items-center user-name py-0">
+          <Avatar firstName={employee.firstName} lastName={employee.lastName} />
+          <div className="d-flex flex-column">
+            <span className="text-heading text-truncate cursor-pointer fw-normal">
+              {employee.firstName} {employee.lastName}
+            </span>
+          </div>
+        </div>
+      </td>
+
+      <td className="text-end justify-content-end d-none d-sm-table-cell">
+      <div className="d-flex justify-content-end">
+        <select
+          className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${errors.jobRole ? "is-invalid" : ""}`}
+          {...register("jobRole")}
+          onChange={handleRoleSelect}
+        >
+          <option value="">Select a Job Role</option>
+          {jobRoles.map((role) => (
+            <option key={role.id} value={role.id}>
+              {role.name}
+            </option>
+          ))}
+        </select>
+      
+        </div>
+        {errors.jobRole && (
+          <div className="invalid-feedback">{errors.jobRole.message}</div>
+        )}
+        {errors.isChecked && (
+          <div className="invalid-feedback d-block">
+            {errors.isChecked.message}
+          </div>
+          )}
+      </td>
+
+      <td className="text-start d-none d-sm-table-cell">
+        <input
+          className="form-check-input ms-3"
+          type="checkbox"
+          checked={isChecked}
+          disabled={employee.isActive}
+          onChange={handleCheckboxChange}
+        />
+      </td>
+    </tr>
+  );
+};
+
+export default AssignEmployeeTable;
+