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

manageRole - application role display properly.

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-17 10:08:08 +05:30
parent 6698187133
commit 15b1979485
1 changed files with 155 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,36 +1,38 @@
import React,{useEffect, useState} from 'react' import React, { useEffect, useState } from "react";
import useMaster from '../../hooks/masterHook/useMaster' import useMaster from "../../hooks/masterHook/useMaster";
import { useForm } from 'react-hook-form'; import { useForm } from "react-hook-form";
import { z } from 'zod'; import { z } from "zod";
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from "@hookform/resolvers/zod";
import { RolesRepository } from '../../repositories/MastersRepository'; import { RolesRepository } from "../../repositories/MastersRepository";
import { useEmployeeRoles } from '../../hooks/useEmployees'; import { useEmployeeRoles } from "../../hooks/useEmployees";
import {useDispatch} from 'react-redux'; import { useDispatch } from "react-redux";
import {changeMaster} from '../../slices/localVariablesSlice'; import { changeMaster } from "../../slices/localVariablesSlice";
import showToast from '../../services/toastService'; import showToast from "../../services/toastService";
const formSchema = z.object({ const formSchema = z.object({
selectedRole: z.record(z.boolean()).refine((data) => { selectedRole: z.record(z.boolean()).refine(
return Object.values(data).some(value => value === true); (data) => {
}, { return Object.values(data).some((value) => value === true);
},
{
message: "At least one checkbox must be selected.", message: "At least one checkbox must be selected.",
}), }
),
}); });
const ManageRole = ({ employeeId, onClosed }) => {
const ManageRole = ({employeeId,onClosed}) => { const disptach = useDispatch();
disptach(changeMaster("Application Role"));
const disptach = useDispatch()
disptach(changeMaster("Role"))
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const { employeeRoles,loading } = useEmployeeRoles(employeeId); const { employeeRoles, loading } = useEmployeeRoles(employeeId);
const {data,loading:roleLoading} = useMaster(); const { data, loading: roleLoading } = useMaster();
const buildDefaultRoles = () => { const buildDefaultRoles = () => {
const defaults = {}; const defaults = {};
data.forEach((role) => { data.forEach((role) => {
const isRoleEnabled = employeeRoles?.data?.some((empRole) => empRole.roleId === role.id); const isRoleEnabled = employeeRoles?.data?.some(
(empRole) => empRole.roleId === role.id
);
defaults[role.id] = isRoleEnabled; defaults[role.id] = isRoleEnabled;
}); });
@ -46,16 +48,19 @@ const ManageRole = ({employeeId,onClosed}) => {
} }
}, [employeeRoles, data]); }, [employeeRoles, data]);
const { register, handleSubmit, formState: { errors }, reset } = useForm({ const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
selectedRole: initialRoles, selectedRole: initialRoles,
}, },
}); });
useEffect(() => {
useEffect( () =>
{
if (Object.keys(initialRoles).length > 0) { if (Object.keys(initialRoles).length > 0) {
reset({ reset({
selectedRole: initialRoles, selectedRole: initialRoles,
@ -64,7 +69,7 @@ const ManageRole = ({employeeId,onClosed}) => {
}, [initialRoles, reset]); }, [initialRoles, reset]);
const onSubmit = (formdata) => { const onSubmit = (formdata) => {
setIsLoading(true) setIsLoading(true);
const result = []; const result = [];
for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) { for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) {
if (isEnabled) { if (isEnabled) {
@ -75,45 +80,50 @@ const ManageRole = ({employeeId,onClosed}) => {
}); });
} }
} }
RolesRepository.createEmployeeRoles( result ).then( ( resp ) => RolesRepository.createEmployeeRoles(result)
{ .then((resp) => {
showToast( "Role assigned successfully", "success" ) showToast("Role assigned successfully", "success");
setIsLoading(false) setIsLoading(false);
onClosed() onClosed();
}).catch((err)=>{
console.log( err )
setIsLoading(false)
showToast(err.message,"error")
}) })
setIsLoading(false) .catch((err) => {
console.log(err);
setIsLoading(false);
showToast(err.message, "error");
});
setIsLoading(false);
}; };
console.log(data)
return ( return (
<div
<div className={`modal fade `} id="managerole-modal" tabIndex="-1" aria-hidden="true" > className={`modal fade `}
<div className="modal-dialog modal-simple modal-md d-flex align-items-center justify-content-center" > id="managerole-modal"
<div className="modal-content " > tabIndex="-1"
<div className="modal-body" > aria-hidden="true"
>
<div className="modal-dialog modal-simple modal-md d-flex align-items-center justify-content-center">
<div className="modal-content ">
<div className="modal-body">
<button <button
type="button" type="button"
className="btn-close" className="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
></button> ></button>
<form onSubmit={handleSubmit(onSubmit)} > <form onSubmit={handleSubmit(onSubmit)}>
<div className='text-start my-0'> <div className="text-start my-0">
<p className='lead'>Select Roles</p> <p className="lead">Select Roles</p>
</div> </div>
<div
<div className='d-flex flex-wrap justify-content-between align-items-center pb-5 ' style={{maxHeight: "70vh", overflowY: "scroll"}} > className="d-flex flex-wrap justify-content-between align-items-center pb-5 "
style={{ maxHeight: "70vh", overflowY: "scroll" }}
>
{(loading || roleLoading) && <p>Loading...</p>} {(loading || roleLoading) && <p>Loading...</p>}
{data && data.map((item) => ( {data &&
data.map((item) => (
<div className="col-md-6 col-lg-4 mb-4" key={item.id}> <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
<div className="form-check ms-2 text-start"> <div className="form-check ms-2 text-start">
<input <input
@ -121,28 +131,30 @@ const ManageRole = ({employeeId,onClosed}) => {
type="checkbox" type="checkbox"
id={item.id} id={item.id}
{...register(`selectedRole.${item.id}`, { {...register(`selectedRole.${item.id}`, {
value: initialRoles[item.id] || false value: initialRoles[item.id] || false,
})} })}
/> />
<label className="form-check-label text-bold" htmlFor={item.id}><small>{item.role || "--"}</small></label> <label
className="form-check-label text-bold"
htmlFor={item.id}
>
<small>{item.role || "--"}</small>
</label>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{errors.selected && <div className="text-center">{errors.selected.message}</div>} {errors.selected && (
<div className="text-center">{errors.selected.message}</div>
)}
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{ isLoading ? "Please Wait":"Submit"} {isLoading ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="reset" type="reset"
className="btn btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
> >
@ -154,9 +166,7 @@ const ManageRole = ({employeeId,onClosed}) => {
</div> </div>
</div> </div>
</div> </div>
) );
} };
export default ManageRole; export default ManageRole;