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

fixed prevent removed existen permission whenever add new one

Browse Source
This commit is contained in:
pramod mahajan 2025-09-17 12:41:00 +05:30
parent a86c815ca2
commit 95fbac4760
1 changed files with 80 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/Project/ProjectPermission.jsx
View File

@ -6,7 +6,7 @@ import {
} from "../../hooks/useProjects"; } from "../../hooks/useProjects";
import { useSelectedProject } from "../../slices/apiDataManager"; import { useSelectedProject } from "../../slices/apiDataManager";
import { useEmployeesByProject } from "../../hooks/useEmployees"; import { useEmployeesByProject } from "../../hooks/useEmployees";
import { useForm } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
@ -27,6 +27,7 @@ const ProjectPermission = () => {
watch, watch,
handleSubmit, handleSubmit,
reset, reset,
control,
formState: { errors, isDirty }, formState: { errors, isDirty },
} = useForm({ } = useForm({
resolver: zodResolver(ProjectPermissionSchema), resolver: zodResolver(ProjectPermissionSchema),
@ -73,15 +74,15 @@ const ProjectPermission = () => {
const newSelectedIds = formData.selectedPermissions || []; const newSelectedIds = formData.selectedPermissions || [];
const removed = existingEnabledIds
.filter((id) => !newSelectedIds.includes(id))
.map((id) => ({ id, isEnabled: false }));
const added = newSelectedIds const added = newSelectedIds
.filter((id) => !existingEnabledIds.includes(id)) .filter((id) => !existingEnabledIds.includes(id))
.map((id) => ({ id, isEnabled: true })); .map((id) => ({ id, isEnabled: true }));
const payloadPermissions = [...removed, ...added]; const removed = existingEnabledIds
.filter((id) => !newSelectedIds.includes(id))
.map((id) => ({ id, isEnabled: false }));
const payloadPermissions = [...added, ...removed];
if (payloadPermissions.length === 0) { if (payloadPermissions.length === 0) {
showToast("No changes detected", "info"); showToast("No changes detected", "info");
@ -94,41 +95,45 @@ const ProjectPermission = () => {
permission: payloadPermissions, permission: payloadPermissions,
}; };
console.log("Final payload:", payload);
updatePermission(payload); updatePermission(payload);
}; };
const useOnClick = useCallback((event) => {}, []);
return ( return (
<div className="w-100 p py-1 "> <div className="w-100 p py-1 ">
<form className="row" onSubmit={handleSubmit(onSubmit)}> <form className="row" onSubmit={handleSubmit(onSubmit)}>
<div className="d-flex justify-content-between align-items-end gap-2 mb-3"> <div className="d-flex justify-content-between align-items-end gap-2 mb-3">
<div className="text-start d-flex align-items-center gap-2"> <div className="text-start d-flex align-items-center gap-2">
<div className="d-block"><label className="form-label">Select Employee</label></div> <div className="d-block">
<div className="d-block"> <select <label className="form-label">Select Employee</label>
className="form-select form-select-sm" </div>
{...register("employeeId")} <div className="d-block">
disabled={isPending} {" "}
dd <select
> className="form-select form-select-sm"
{loading ? ( {...register("employeeId")}
<option value="">Loading...</option> disabled={isPending}
) : ( >
<> {loading ? (
<option value="">-- Select Employee --</option> <option value="">Loading...</option>
{[...employees] ) : (
?.sort((a, b) => <>
`${a?.firstName} ${a?.firstName}`?.localeCompare( <option value="">-- Select Employee --</option>
`${b?.firstName} ${b?.lastName}` {[...employees]
?.sort((a, b) =>
`${a?.firstName} ${a?.firstName}`?.localeCompare(
`${b?.firstName} ${b?.lastName}`
)
) )
) ?.map((emp) => (
?.map((emp) => ( <option key={emp.id} value={emp.id}>
<option key={emp.id} value={emp.id}> {emp.firstName} {emp.lastName}
{emp.firstName} {emp.lastName} </option>
</option> ))}
))} </>
</> )}
)} </select>
</select></div> </div>
{errors.employeeId && ( {errors.employeeId && (
<div className="text-danger small"> <div className="text-danger small">
@ -136,17 +141,16 @@ const ProjectPermission = () => {
</div> </div>
)} )}
</div> </div>
{isDirty && (
<div className="mt-3 text-end"> <div className="mt-3 text-end">
<button <button
type="submit" type="submit"
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
disabled={isPending || loading} disabled={isPending || loading}
> >
{isPending ? "Please Wait..." : "Save Permission"} {isPending ? "Please Wait..." : "Save Permission"}
</button> </button>
</div> </div>
)}
</div> </div>
{ProjectModules.map((feature) => ( {ProjectModules.map((feature) => (
@ -157,22 +161,41 @@ const ProjectPermission = () => {
<div className="card text-start border-1 p-1"> <div className="card text-start border-1 p-1">
<p className="card-title fs-6 fw-semibold">{feature.name}</p> <p className="card-title fs-6 fw-semibold">{feature.name}</p>
<div className="px-2"> <div className="px-2">
<ul class="list-unstyled"> <ul className="list-unstyled">
{feature.featurePermissions?.map((perm) => ( {feature.featurePermissions?.map((perm) => (
<div className="d-flex my-2" key={perm.id}> <div className="d-flex my-2" key={perm.id}>
<label <Controller
className="form-check-label d-flex align-items-center" name="selectedPermissions"
htmlFor={perm.id} control={control}
> render={({ field }) => {
<input const value = field.value || [];
type="checkbox" const isChecked = value.includes(perm.id);
className="form-check-input me-2"
id={perm.id} return (
value={perm.id} <label
{...register("selectedPermissions")} className="form-check-label d-flex align-items-center"
/> htmlFor={perm.id}
{perm.name} >
</label> <input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
checked={isChecked}
onChange={(e) => {
if (e.target.checked) {
field.onChange([...value, perm.id]); // add
} else {
field.onChange(
value.filter((v) => v !== perm.id)
); // remove
}
}}
/>
{perm.name}
</label>
);
}}
/>
</div> </div>
))} ))}
</ul> </ul>