Merge pull request 'add required validation for plannedTask using Zod schema' (#55) from pramod_bug138 into Issues_April_5W

Reviewed-on: #55

src/components/Project/AssignRole.jsx

@@ -5,6 +5,7 @@ import useMaster from "../../hooks/masterHook/useMaster";
 import { employee } from "../../data/masters";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { getCachedData } from "../../slices/apiDataManager";
 import { useModal } from "../../ModalContext";
 import { useProjects } from "../../hooks/useProjects";
@@ -12,14 +13,30 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
 
-const schema = z.object({
+const AssignRoleModel = ({ assignData, onClose }) => {
+  const maxPlanned =
+    assignData?.workItem?.workItem?.plannedWork -
+    assignData?.workItem?.workItem?.completedWork;
+
+  const schema = z.object({
     selectedEmployees: z
       .array(z.number())
       .min(1, { message: "At least one employee must be selected" }),
-  description: z.string().min(1, { message: "description required" }),
+    description: z.string().min(1, { message: "Description is required" }),
-});
+    plannedTask: z.preprocess(
-
+      (val) => parseInt(val, 10),
-const AssignRoleModel = ({ assignData, onClose }) => {
+      z
+        .number({
+          required_error: "Planned task is required",
+          invalid_type_error: "Planned task must be a number",
+        })
+        .int()
+        .positive({ message: "Planned task must be a positive number" })
+        .max(maxPlanned, {
+          message: `Planned task cannot exceed ${maxPlanned}`,
+        })
+    ),
+  });
   const [plannedTask, setPlannedTask] = useState();
   const { openModal, closeModal } = useModal();
   const selectedProject = useSelector(
@@ -45,28 +62,21 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     defaultValues: {
       selectedEmployees: [],
       description: "",
+      plannedTask: "",
     },
-    resolver: (data) => {
+    resolver: zodResolver(schema),
-      const validation = schema.safeParse(data);
-      if (validation.success) return { values: data, errors: {} };
-      return { values: {}, errors: validation.error.formErrors.fieldErrors };
-    },
   });
 
-  const handleRoleChange = ( event ) =>
+  const handleRoleChange = (event) => {
-  {
+    reset();
-    reset()
+    setSelectedEmployees([]);
-    setSelectedEmployees( [] )
     setSelectedRole(event.target.value);
   };
 
   const filteredEmployees =
     selectedRole === "all"
       ? employees
-      : employees.filter((emp) =>
+      : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
-        String(emp.jobRoleId || "") === selectedRole
-    );
-    
 
   const handleEmployeeSelection = (employeeId, field) => {
     setSelectedEmployees((prevSelected) => {
@@ -92,15 +102,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   const onSubmit = async (data) => {
     const formattedData = {
       taskTeam: data.selectedEmployees,
-      plannedTask: parseInt(plannedTask, 10),
+      plannedTask: data.plannedTask,
       description: data.description,
       assignmentDate: new Date().toISOString(),
       workItemId: assignData?.workItem?.workItem.id,
     };
     try {
       let response = await TasksRepository.assignTask(formattedData);
-      showToast( "Task Successfully Assigend", "success" );
+      showToast("Task Successfully Assigend", "success");
-      setSelectedEmployees([])
+      setSelectedEmployees([]);
       reset();
       onClose();
     } catch (error) {
@@ -112,6 +122,10 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     return () => setSelectedRole("all");
   }, [dispatch]);
 
+  const closedModel = () => {
+    reset();
+    onClose();
+  };
   return (
     <div
       className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
@@ -176,7 +190,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                 <div className="divider text-start">
                   <div className="divider-text">Employee</div>
                 </div>
-            {( filteredEmployees?.length === 0 && employees ) && <div>No employees found</div>}
+                {filteredEmployees?.length === 0 && employees && (
+                  <div>No employees found</div>
+                )}
 
                 <div className="row">
                   <div className="col-12 col-md-8 h-sm-25 overflow-auto">
@@ -206,9 +222,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                             type="checkbox"
                                             id={`employee-${emp?.id}`}
                                             value={emp.id}
-                                    checked={field.value.includes(emp.id)} 
+                                            checked={field.value.includes(
+                                              emp.id
+                                            )}
                                             onChange={() => {
-                                      handleEmployeeSelection(emp.id, field);
+                                              handleEmployeeSelection(
+                                                emp.id,
+                                                field
+                                              );
                                             }}
                                           />
                                         )}
@@ -235,7 +256,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                           )}
                                           {data &&
                                             !loading &&
-                                    (jobRole ? jobRole.name : "Unknown Role")}
+                                            (jobRole
+                                              ? jobRole.name
+                                              : "Unknown Role")}
                                         </small>
                                       </div>
                                     </div>
@@ -248,13 +271,17 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                       </div>
                     )}
                   </div>
-              <div className="col-12 col-md-4 h-25 overflow-auto" style={{maxHeight:"200px"}}>
+                  <div
-                
+                    className="col-12 col-md-4 h-25 overflow-auto"
+                    style={{ maxHeight: "200px" }}
+                  >
                     {selectedEmployees.length > 0 && (
                       <div className="mt-1">
                         <div className="text-start px-2">
                           {selectedEmployees.map((empId) => {
-                    const emp = employees.find((emp) => emp.id === empId);
+                            const emp = employees.find(
+                              (emp) => emp.id === empId
+                            );
                             return (
                               <span
                                 key={empId}
@@ -269,7 +296,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                     removeEmployee(empId);
                                     setValue(
                                       "selectedEmployees",
-                              selectedEmployees.filter((id) => id !== empId)
+                                      selectedEmployees.filter(
+                                        (id) => id !== empId
+                                      )
                                     );
                                   }}
                                 >
@@ -284,14 +313,15 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                   </div>
                 </div>
 
-
-
                 <div className="col-md text-start mx-0 px-0">
                   <div className="form-check form-check-inline mt-4 px-1">
                     <label className="form-text fs-6" for="inlineCheckbox1">
                       Pending Work
                     </label>
-                <label className="form-check-label ms-2" for="inlineCheckbox1">
+                    <label
+                      className="form-check-label ms-2"
+                      for="inlineCheckbox1"
+                    >
                       {assignData?.workItem?.workItem?.plannedWork -
                         assignData?.workItem?.workItem?.completedWork}
                     </label>
@@ -300,19 +330,29 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                     <label for="defaultFormControlInput" className="form-label">
                       Target
                     </label>
+                    <Controller
+                      name="plannedTask"
+                      control={control}
+                      render={({ field }) => (
                         <input
                           type="text"
                           className="form-control form-control-xs"
-                  value={plannedTask}
+                          {...field}
-                  onChange={(e) => setPlannedTask(e.target.value)}
                           id="defaultFormControlInput"
                           aria-describedby="defaultFormControlHelp"
                         />
+                      )}
+                    />
                   </div>
+                  {errors.plannedTask && (
+                    <div className="danger-text mt-1">
+                      {errors.plannedTask.message}
+                    </div>
+                  )}
                 </div>
                 {errors.selectedEmployees && (
                   <div className="danger-text mt-1">
-                <p>{errors.selectedEmployees[0]}</p>
+                    <p>{errors.selectedEmployees.message}</p>
                   </div>
                 )}
 
@@ -331,7 +371,11 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                     />
                   )}
                 />
-            {errors.description && <div>{errors.description.message}</div>}
+                {errors.description && (
+                  <div className="danger-text">
+                    {errors.description.message}
+                  </div>
+                )}
 
                 <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
                   <button type="submit" className="btn btn-sm btn-primary ">
@@ -342,7 +386,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                     className="btn btn-sm btn-label-secondary"
                     data-bs-dismiss="modal"
                     aria-label="Close"
-                onClick={onClose}
+                    onClick={closedModel}
                   >
                     Cancel
                   </button>