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