From 95fbac4760bf7fb67ab3e113792130962b8a487e Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 17 Sep 2025 12:41:00 +0530
Subject: [PATCH] fixed prevent removed existen permission whenever add new one

---
 src/components/Project/ProjectPermission.jsx | 137 +++++++++++--------
 1 file changed, 80 insertions(+), 57 deletions(-)

diff --git a/src/components/Project/ProjectPermission.jsx b/src/components/Project/ProjectPermission.jsx
index 4a6a5504..b7d30adb 100644
--- a/src/components/Project/ProjectPermission.jsx
+++ b/src/components/Project/ProjectPermission.jsx
@@ -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>