"Action" Buttons Should Not Be Visible to Users Without Required Rights in Teams Pages #203

Merged
vikas.nale merged 1 commits from Kartik_Bug#464 into Issue_Jun_2W 2025-06-12 05:30:59 +00:00

View File

@ -25,14 +25,14 @@ const Teams = ({ project }) => {
const [filteredEmployees, setFilteredEmployees] = useState([]); const [filteredEmployees, setFilteredEmployees] = useState([]);
const [removingEmployeeId, setRemovingEmployeeId] = useState(null); const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
const [assignedLoading, setAssignedLoading] = useState(false); const [assignedLoading, setAssignedLoading] = useState(false);
const [ employeeLodaing, setEmployeeLoading ] = useState( false ); const [employeeLodaing, setEmployeeLoading] = useState(false);
const [ activeEmployee, setActiveEmployee ] = useState( true ) const [activeEmployee, setActiveEmployee] = useState(true)
const [deleteEmployee,setDeleteEmplyee] = useState(null) const [deleteEmployee, setDeleteEmplyee] = useState(null)
const navigate = useNavigate(); const navigate = useNavigate();
const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT ); const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
const[IsDeleteModal,setIsDeleteModal] = useState(false) const [IsDeleteModal, setIsDeleteModal] = useState(false)
const fetchEmployees = async () => { const fetchEmployees = async () => {
try { try {
@ -42,7 +42,7 @@ const Teams = ({ project }) => {
ProjectRepository.getProjectAllocation(project.id) ProjectRepository.getProjectAllocation(project.id)
.then((response) => { .then((response) => {
setEmployees(response.data); setEmployees(response.data);
setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) ); setFilteredEmployees(response.data.filter((emp) => emp.isActive));
setEmployeeLoading(false); setEmployeeLoading(false);
}) })
.catch((error) => { .catch((error) => {
@ -54,24 +54,23 @@ const Teams = ({ project }) => {
} }
}; };
const submitAllocations = (items,added) => { const submitAllocations = (items, added) => {
ProjectRepository.manageProjectAllocation(items) ProjectRepository.manageProjectAllocation(items)
.then((response) => { .then((response) => {
fetchEmployees(); fetchEmployees();
if ( added ) if (added) {
{
showToast("Employee Assigned Successfully", "success"); showToast("Employee Assigned Successfully", "success");
}else{ } else {
showToast("Removed Employee Successfully", "success"); showToast("Removed Employee Successfully", "success");
} }
setRemovingEmployeeId(null); setRemovingEmployeeId(null);
setAssignedLoading( false ); setAssignedLoading(false);
setDeleteEmplyee( null ) setDeleteEmplyee(null)
closeDeleteModal() closeDeleteModal()
}) })
.catch((error) => { .catch((error) => {
const message = error.response.data.message || error.message || "Error Occured during Api Call"; const message = error.response.data.message || error.message || "Error Occured during Api Call";
showToast( message, "error" ); showToast(message, "error");
closeDeleteModal() closeDeleteModal()
}); });
}; };
@ -85,7 +84,7 @@ const Teams = ({ project }) => {
projectId: project.id, projectId: project.id,
status: false, status: false,
}, },
] ,false); ], false);
}; };
@ -108,7 +107,7 @@ const Teams = ({ project }) => {
// Also update dropdown select if needed // Also update dropdown select if needed
const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]'); const dropdown = document.querySelector('select[name="DataTables_Table_0_length"]');
if (dropdown) dropdown.value = "true"; if (dropdown) dropdown.value = "true";
}; };
const getRole = (jobRoleId) => { const getRole = (jobRoleId) => {
@ -141,7 +140,7 @@ const Teams = ({ project }) => {
useEffect(() => { useEffect(() => {
dispatch(changeMaster("Job Role")); dispatch(changeMaster("Job Role"));
}, [dispatch]); }, [dispatch]);
useEffect(() => { useEffect(() => {
@ -156,22 +155,20 @@ const Teams = ({ project }) => {
const handleFilterEmployee = (e) => { const handleFilterEmployee = (e) => {
const filterValue = e.target.value; const filterValue = e.target.value;
if ( filterValue === "true" ) if (filterValue === "true") {
{
setActiveEmployee(true) setActiveEmployee(true)
setFilteredEmployees(employees.filter((emp) => emp.isActive)); setFilteredEmployees(employees.filter((emp) => emp.isActive));
} else { } else {
setFilteredEmployees( employees.filter( ( emp ) => !emp.isActive ) ); setFilteredEmployees(employees.filter((emp) => !emp.isActive));
setActiveEmployee(false) setActiveEmployee(false)
} }
}; };
const deleteModalOpen = (item) => const deleteModalOpen = (item) => {
{
setDeleteEmplyee(item) setDeleteEmplyee(item)
setIsDeleteModal(true) setIsDeleteModal(true)
} }
const closeDeleteModal = ()=> setIsDeleteModal(false) const closeDeleteModal = () => setIsDeleteModal(false)
return ( return (
<> <>
@ -243,8 +240,7 @@ const Teams = ({ project }) => {
</div> </div>
<button <button
type="button" type="button"
className={`link-button btn-sm m-1 ${ className={`link-button btn-sm m-1 ${HasAssignUserPermission ? "" : "d-none"
HasAssignUserPermission ? "" : "d-none"
}`} }`}
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#user-model" data-bs-target="#user-model"
@ -264,7 +260,8 @@ const Teams = ({ project }) => {
<th>Assigned Date</th> <th>Assigned Date</th>
{!activeEmployee && <th>Release Date</th>} {!activeEmployee && <th>Release Date</th>}
<th>Project Role</th> <th>Project Role</th>
<th>Actions</th> {/* <th>Actions</th> */}
{HasAssignUserPermission && <th>Actions</th>}
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0"> <tbody className="table-border-bottom-0">
@ -311,7 +308,7 @@ const Teams = ({ project }) => {
</span> </span>
</td> </td>
<td> <td>
{item.isActive && ( {item.isActive && HasAssignUserPermission && (
<button <button
aria-label="Delete" aria-label="Delete"
type="button" type="button"
@ -319,15 +316,12 @@ const Teams = ({ project }) => {
className="btn p-0 dropdown-toggle hide-arrow" className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => deleteModalOpen(item)} onClick={() => deleteModalOpen(item)}
> >
{" "}
{removingEmployeeId === item.id ? ( {removingEmployeeId === item.id ? (
<div <div
class="spinner-border spinner-border-sm text-primary" className="spinner-border spinner-border-sm text-primary"
role="status" role="status"
> >
<span class="visually-hidden"> <span className="visually-hidden">Loading...</span>
Loading...
</span>
</div> </div>
) : ( ) : (
<i className="bx bx-trash me-1 text-danger"></i> <i className="bx bx-trash me-1 text-danger"></i>
@ -336,6 +330,7 @@ const Teams = ({ project }) => {
)} )}
{!item.isActive && <span>Not in project</span>} {!item.isActive && <span>Not in project</span>}
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>