modified request for manage role.

src/components/Employee/ManageRole.jsx

@@ -70,39 +70,55 @@ const ManageRole = ( {employeeId, onClosed} ) =>
     }
   }, [initialRoles, reset]);
 
-  const onSubmit = ( formdata ) =>
+  const onSubmit = (formdata) => {
-  {
     setIsLoading(true);
     const result = [];
-    for ( const [ roleId, isEnabled ] of Object.entries( formdata.selectedRole ) )
+  
-    {
+    const selectedRoles = formdata.selectedRole;
-      if ( isEnabled )
+  
-      {
+    for (const [roleId, isChecked] of Object.entries(selectedRoles)) {
-        const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
+      const existingRole = employeeRoles?.find((role) => role.roleId === roleId);
-        result.push( {
+      const wasChecked = !!existingRole?.isEnabled;
-          id: existingRole?.id || null,
+  
-          employeeId: employeeId,
+      if (isChecked) {
+        result.push({
+          id: existingRole?.id || "00000000-0000-0000-0000-000000000000",
+          employeeId,
+          roleId,
           isEnabled: true,
-          roleId: roleId,
+        });
+      } else if (wasChecked && !isChecked) {
+        result.push({
+          id: existingRole?.id,
+          employeeId,
+          roleId,
+          isEnabled: false,
         });
       }
     }
+  
+    if (result.length === 0) {
+      showToast("No changes made", "info");
+      setIsLoading(false);
+      return;
+    }
+    console.log(result)
+  
     RolesRepository.createEmployeeRoles(result)
-      .then((resp) => {
+      .then(() => {
-        showToast("Role assigned successfully", "success");
+        showToast("Roles updated successfully", "success");
-        setIsLoading( false );
+        setIsLoading(false);
-        reset()
+        reset();
         onClosed();
       })
       .catch((err) => {
-        console.log(err);
+        console.error(err);
-        setIsLoading(false);
-
         showToast(err.message, "error");
+        setIsLoading(false);
       });
-    setIsLoading(false);
   };
   
+
   return (
     <div
       className={`modal fade `}
@@ -128,7 +144,8 @@ const ManageRole = ( {employeeId, onClosed} ) =>
                 className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
                 style={{ maxHeight: "70vh", overflowY: "scroll" }}
               >
-                {(loading || roleLoading) && <p>Loading...</p>}
+                {roleLoading && <p>Loading...</p>}
+                {loading && <p>Loading...</p>}
                 {data &&
                   data.map((item) => (
                     <div className="col-md-6 col-lg-4 mb-4" key={item.id}>