From 41ec2fca6fde05db2e150a2aa015076d396a5737 Mon Sep 17 00:00:00 2001
From: Umesh Desai <umesh@marcoaiot.com>
Date: Wed, 11 Jun 2025 18:08:38 +0530
Subject: [PATCH]  "Action" Buttons Should Not Be Visible to Users Without
 Required Rights in Teams Pages

---
 src/components/Project/Teams.jsx | 103 +++++++++++++++----------------
 1 file changed, 49 insertions(+), 54 deletions(-)

diff --git a/src/components/Project/Teams.jsx b/src/components/Project/Teams.jsx
index 2dede227..49a32ee7 100644
--- a/src/components/Project/Teams.jsx
+++ b/src/components/Project/Teams.jsx
@@ -25,14 +25,14 @@ const Teams = ({ project }) => {
   const [filteredEmployees, setFilteredEmployees] = useState([]);
   const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
   const [assignedLoading, setAssignedLoading] = useState(false);
-  const [ employeeLodaing, setEmployeeLoading ] = useState( false );
-  const [ activeEmployee, setActiveEmployee ] = useState( true )
-  const [deleteEmployee,setDeleteEmplyee] = useState(null)
+  const [employeeLodaing, setEmployeeLoading] = useState(false);
+  const [activeEmployee, setActiveEmployee] = useState(true)
+  const [deleteEmployee, setDeleteEmplyee] = useState(null)
 
   const navigate = useNavigate();
 
-  const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT );
-  const[IsDeleteModal,setIsDeleteModal] = useState(false)
+  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
+  const [IsDeleteModal, setIsDeleteModal] = useState(false)
 
   const fetchEmployees = async () => {
     try {
@@ -42,7 +42,7 @@ const Teams = ({ project }) => {
       ProjectRepository.getProjectAllocation(project.id)
         .then((response) => {
           setEmployees(response.data);
-          setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
+          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
           setEmployeeLoading(false);
         })
         .catch((error) => {
@@ -54,24 +54,23 @@ const Teams = ({ project }) => {
     }
   };
 
-  const submitAllocations = (items,added) => {
+  const submitAllocations = (items, added) => {
     ProjectRepository.manageProjectAllocation(items)
       .then((response) => {
         fetchEmployees();
-        if ( added )
-        {
+        if (added) {
           showToast("Employee Assigned Successfully", "success");
-        }else{
-          showToast("Removed Employee Successfully", "success"); 
+        } else {
+          showToast("Removed Employee Successfully", "success");
         }
         setRemovingEmployeeId(null);
-        setAssignedLoading( false );
-        setDeleteEmplyee( null )
+        setAssignedLoading(false);
+        setDeleteEmplyee(null)
         closeDeleteModal()
       })
       .catch((error) => {
         const message = error.response.data.message || error.message || "Error Occured during Api Call";
-        showToast( message, "error" );
+        showToast(message, "error");
         closeDeleteModal()
       });
   };
@@ -85,30 +84,30 @@ const Teams = ({ project }) => {
         projectId: project.id,
         status: false,
       },
-    ] ,false);
+    ], false);
 
   };
 
   const handleEmpAlicationFormSubmit = (allocaionObj) => {
-  let items = allocaionObj.map((item) => {
-    return {
-      empID: item.empID,
-      jobRoleId: item.jobRoleId,
-      projectId: project.id,
-      status: true,
-    };
-  });
+    let items = allocaionObj.map((item) => {
+      return {
+        empID: item.empID,
+        jobRoleId: item.jobRoleId,
+        projectId: project.id,
+        status: true,
+      };
+    });
 
-  submitAllocations(items, true);
+    submitAllocations(items, true);
 
-  // Force switch to active view after assignment
-  setActiveEmployee(true);
-  setFilteredEmployees(employees.filter((emp) => emp.isActive));
+    // Force switch to active view after assignment
+    setActiveEmployee(true);
+    setFilteredEmployees(employees.filter((emp) => emp.isActive));
 
-  // Also update dropdown select if needed
-  const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
-  if (dropdown) dropdown.value = "true";
-};
+    // Also update dropdown select if needed
+    const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
+    if (dropdown) dropdown.value = "true";
+  };
 
 
   const getRole = (jobRoleId) => {
@@ -140,8 +139,8 @@ const Teams = ({ project }) => {
   };
 
   useEffect(() => {
-  dispatch(changeMaster("Job Role"));
-}, [dispatch]);
+    dispatch(changeMaster("Job Role"));
+  }, [dispatch]);
 
 
   useEffect(() => {
@@ -156,22 +155,20 @@ const Teams = ({ project }) => {
 
   const handleFilterEmployee = (e) => {
     const filterValue = e.target.value;
-    if ( filterValue === "true" )
-    {
+    if (filterValue === "true") {
       setActiveEmployee(true)
       setFilteredEmployees(employees.filter((emp) => emp.isActive));
     } else {
-      setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) );
+      setFilteredEmployees(employees.filter((emp) => !emp.isActive));
       setActiveEmployee(false)
     }
   };
 
-  const deleteModalOpen = (item) =>
-  {
+  const deleteModalOpen = (item) => {
     setDeleteEmplyee(item)
     setIsDeleteModal(true)
   }
-  const closeDeleteModal = ()=> setIsDeleteModal(false)
+  const closeDeleteModal = () => setIsDeleteModal(false)
 
   return (
     <>
@@ -194,7 +191,7 @@ const Teams = ({ project }) => {
       </div>
 
 
-       {IsDeleteModal && (
+      {IsDeleteModal && (
         <div
           className={`modal fade  ${IsDeleteModal ? "show" : ""}`}
           tabIndex="-1"
@@ -205,7 +202,7 @@ const Teams = ({ project }) => {
           }}
           aria-hidden="false"
         >
- 
+
           <ConfirmModal
             type={"delete"}
             header={"Removed Employee"}
@@ -243,9 +240,8 @@ const Teams = ({ project }) => {
               </div>
               <button
                 type="button"
-                className={`link-button btn-sm m-1 ${
-                  HasAssignUserPermission ? "" : "d-none"
-                }`}
+                className={`link-button btn-sm m-1 ${HasAssignUserPermission ? "" : "d-none"
+                  }`}
                 data-bs-toggle="modal"
                 data-bs-target="#user-model"
               >
@@ -262,9 +258,10 @@ const Teams = ({ project }) => {
                   <tr>
                     <th>Name</th>
                     <th>Assigned Date</th>
-               {!activeEmployee && <th>Release Date</th>}
+                    {!activeEmployee && <th>Release Date</th>}
                     <th>Project Role</th>
-                    <th>Actions</th>
+                    {/* <th>Actions</th> */}
+                    {HasAssignUserPermission && <th>Actions</th>}
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
@@ -301,8 +298,8 @@ const Teams = ({ project }) => {
                         {!activeEmployee && <td>
                           {item.reAllocationDate
                             ? moment(item.reAllocationDate).format(
-                                "DD-MMM-YYYY"
-                              )
+                              "DD-MMM-YYYY"
+                            )
                             : "Present"}
                         </td>}
                         <td>
@@ -311,7 +308,7 @@ const Teams = ({ project }) => {
                           </span>
                         </td>
                         <td>
-                          {item.isActive && (
+                          {item.isActive && HasAssignUserPermission && (
                             <button
                               aria-label="Delete"
                               type="button"
@@ -319,15 +316,12 @@ const Teams = ({ project }) => {
                               className="btn p-0 dropdown-toggle hide-arrow"
                               onClick={() => deleteModalOpen(item)}
                             >
-                              {" "}
                               {removingEmployeeId === item.id ? (
                                 <div
-                                  class="spinner-border spinner-border-sm text-primary"
+                                  className="spinner-border spinner-border-sm text-primary"
                                   role="status"
                                 >
-                                  <span class="visually-hidden">
-                                    Loading...
-                                  </span>
+                                  <span className="visually-hidden">Loading...</span>
                                 </div>
                               ) : (
                                 <i className="bx bx-trash me-1 text-danger"></i>
@@ -336,6 +330,7 @@ const Teams = ({ project }) => {
                           )}
                           {!item.isActive && <span>Not in project</span>}
                         </td>
+
                       </tr>
                     ))}
                 </tbody>
-- 
2.43.0