admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Handle role deselection and employee switching

Browse Source 
- Reset checkboxes when employee changes
- Allow submission when no roles are selected
- Fixed zod validation to support empty selections
This commit is contained in:
Pramod Mahajan 2025-04-29 23:56:36 +05:30
parent fec6de8a54
commit 75507707c0
1 changed files with 79 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/Employee/ManageRole.jsx
View File

@ -10,14 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
import showToast from "../../services/toastService";
const formSchema = z.object({
selectedRole: z.record(z.boolean()).refine(
(data) => {
return Object.values(data).some((value) => value === true);
},
{
message: "At least one checkbox must be selected.",
}
),
selectedRole: z.record(z.boolean()),
});
const ManageRole = ( {employeeId, onClosed} ) =>
@ -45,10 +38,18 @@ const ManageRole = ( {employeeId, onClosed} ) =>
useEffect(() => {
if (employeeRoles && data) {
const updatedRoles = buildDefaultRoles();
setInitialRoles(updatedRoles);
if (employeeRoles.length > 0) {
const updatedRoles = buildDefaultRoles();
setInitialRoles(updatedRoles);
} else {
setInitialRoles({});
}
} else {
setInitialRoles({});
}
}, [employeeRoles, data]);
const {
register,
@ -57,42 +58,86 @@ const ManageRole = ( {employeeId, onClosed} ) =>
reset,
} = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
selectedRole: initialRoles,
},
});
useEffect(() => {
if (Object.keys(initialRoles).length > 0) {
reset({
selectedRole: initialRoles,
});
}
}, [initialRoles, reset]);
if (!data) return;
const updatedRoles = {};
data.forEach((role) => {
const isRoleEnabled = employeeRoles?.some(
(empRole) => empRole.roleId === role.id && empRole.isEnabled
);
updatedRoles[role.id] = isRoleEnabled || false;
});
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,
});
} else if (wasChecked && !isChecked) {
result.push({
id: existingRole?.id,
employeeId,
roleId,
isEnabled: false,
isEnabled: isChecked,
});
}
}
@ -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}`, {
value: initialRoles[item.id] || false,
})}
{...register(`selectedRole.${item.id}`)}
/>
<label
className="form-check-label text-bold"