Handle role deselection and employee switching

- Reset checkboxes when employee changes
- Allow submission when no roles are selected
- Fixed zod validation to support empty selections

src/components/Employee/ManageRole.jsx

@@ -10,14 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import showToast from "../../services/toastService";
 
 const formSchema = z.object({
-  selectedRole: z.record(z.boolean()).refine(
+  selectedRole: z.record(z.boolean()),
-    (data) => {
-      return Object.values(data).some((value) => value === true);
-    },
-    {
-      message: "At least one checkbox must be selected.",
-    }
-  ),
 });
 
 const ManageRole = ( {employeeId, onClosed} ) =>
@@ -45,11 +38,19 @@ const ManageRole = ( {employeeId, onClosed} ) =>
 
   useEffect(() => {
     if (employeeRoles && data) {
+      if (employeeRoles.length > 0) {
         const updatedRoles = buildDefaultRoles();
         setInitialRoles(updatedRoles);
+      } else {
+        setInitialRoles({});
+      }
+    } else {
+      setInitialRoles({});
     }
   }, [employeeRoles, data]);
   
+  
+
   const {
     register,
     handleSubmit,
@@ -57,42 +58,86 @@ const ManageRole = ( {employeeId, onClosed} ) =>
     reset,
   } = useForm({
     resolver: zodResolver(formSchema),
-    defaultValues: {
+  
-      selectedRole: initialRoles,
-    },
   });
 
   useEffect(() => {
-    if (Object.keys(initialRoles).length > 0) {
+    if (!data) return;
-      reset({
+  
-        selectedRole: initialRoles,
+    const updatedRoles = {};
+    data.forEach((role) => {
+      const isRoleEnabled = employeeRoles?.some(
+        (empRole) => empRole.roleId === role.id && empRole.isEnabled
+      );
+      updatedRoles[role.id] = isRoleEnabled || false;
     });
-    }
+  
-  }, [initialRoles, reset]);
+    setInitialRoles(updatedRoles);
+  
+    reset({
+      selectedRole: updatedRoles,
+    });
+  }, [employeeRoles, data, reset]);
+  
+  // const onSubmit = (formdata) => {
+  //   setIsLoading(true);
+  //   const result = [];
+  
+  //   const selectedRoles = formdata.selectedRole;
+  
+  //   for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
+  //     const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
+  //     const wasChecked = !!existingRole?.isEnabled;
+  
+  //     // Only push if the checked status has changed
+  //     if (isChecked !== wasChecked) {
+  //       result.push({
+  //         id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
+  //         employeeId,
+  //         roleId,
+  //         isEnabled: isChecked,
+  //       });
+  //     }
+  //   }
+  
+  //   if (result.length === 0) {
+  //     showToast("No changes made", "info");
+  //     setIsLoading(false);
+  //     return;
+  //   }
+  
+  //   console.log(result);
+  
+  //   RolesRepository.createEmployeeRoles(result)
+  //     .then(() => {
+  //       showToast("Roles updated successfully", "success");
+  //       setIsLoading(false);
+  //       reset();
+  //       onClosed();
+  //     })
+  //     .catch((err) => {
+  //       console.error(err);
+  //       showToast(err.message, "error");
+  //       setIsLoading(false);
+  //     });
+  // };
   
   const onSubmit = (formdata) => {
     setIsLoading(true);
     const result = [];
-  
     const selectedRoles = formdata.selectedRole;
   
     for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
       const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
       const wasChecked = !!existingRole?.isEnabled;
   
-      if (isChecked) {
+      // Only push if the checked status has changed
+      if (isChecked !== wasChecked) {
         result.push({
           id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
           employeeId,
           roleId,
-          isEnabled: true,
+          isEnabled: isChecked,
-        });
-      } else if (wasChecked && !isChecked) {
-        result.push({
-          id: existingRole?.id,
-          employeeId,
-          roleId,
-          isEnabled: false,
         });
       }
     }
@@ -102,7 +147,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
       setIsLoading(false);
       return;
     }
-    console.log(result)
+  
+    console.log(result);
   
     RolesRepository.createEmployeeRoles(result)
       .then(() => {
@@ -118,7 +164,6 @@ const ManageRole = ( {employeeId, onClosed} ) =>
       });
   };
   
-
   return (
     <div
       className={`modal fade `}
@@ -154,9 +199,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
                           className="form-check-input"
                           type="checkbox"
                           id={item.id}
-                          {...register(`selectedRole.${item.id}`, {
+                          {...register(`selectedRole.${item.id}`)}
-                            value: initialRoles[item.id] || false,
+
-                          })}
                         />
                         <label
                           className="form-check-label text-bold"