show delete spinner only for the employee being removed

This commit is contained in:
Pramod Mahajan 2025-05-04 18:50:53 +05:30
parent b3906f460e
commit 294c13878d

View File

@ -18,9 +18,10 @@ const Teams = ({ project }) => {
const [isModalOpen, setIsModelOpen] = useState(false); const [isModalOpen, setIsModelOpen] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [empJobRoles, setEmpJobRoles] = useState(null); const [empJobRoles, setEmpJobRoles] = useState(null);
const [clearFormTrigger, setClearFormTrigger] = useState(false);
const [employees, setEmployees] = useState([]); const [employees, setEmployees] = useState([]);
const [filteredEmployees, setFilteredEmployees] = useState([]); const [filteredEmployees, setFilteredEmployees] = useState([]);
const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
const [assignedLoading,setAssignedLoading]= useState(false)
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT); const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
@ -45,8 +46,9 @@ const Teams = ({ project }) => {
ProjectRepository.manageProjectAllocation(items) ProjectRepository.manageProjectAllocation(items)
.then((response) => { .then((response) => {
showToast("Details updated successfully.", "success"); showToast("Details updated successfully.", "success");
setClearFormTrigger(true);
fetchEmployees(); fetchEmployees();
setRemovingEmployeeId( null );
setAssignedLoading(false)
}) })
.catch((error) => { .catch((error) => {
showToast(error.message, "error"); showToast(error.message, "error");
@ -54,6 +56,7 @@ const Teams = ({ project }) => {
}; };
const removeAllocation = (item) => { const removeAllocation = (item) => {
setRemovingEmployeeId(item.id);
submitAllocations([ submitAllocations([
{ {
empID: item.employeeId, empID: item.employeeId,
@ -134,13 +137,13 @@ const Teams = ({ project }) => {
aria-hidden="true" aria-hidden="true"
> >
<MapUsers <MapUsers
projectId={project.id} projectId={project?.id}
onClose={onModelClose} onClose={onModelClose}
empJobRoles={empJobRoles} empJobRoles={empJobRoles}
onSubmit={handleEmpAlicationFormSubmit} onSubmit={handleEmpAlicationFormSubmit}
allocation={employees} allocation={employees}
clearTrigger={clearFormTrigger} assignedLoading={assignedLoading}
onClearComplete={() => setClearFormTrigger(false)} setAssignedLoading={setAssignedLoading}
></MapUsers> ></MapUsers>
</div> </div>
@ -247,7 +250,13 @@ const Teams = ({ project }) => {
onClick={() => removeAllocation(item)} onClick={() => removeAllocation(item)}
> >
{" "} {" "}
<i className="bx bx-trash me-1 text-danger"></i>{" "} {removingEmployeeId === item.id ? <div
class="spinner-border spinner-border-sm text-primary"
role="status"
>
<span class="visually-hidden">Loading...</span>
</div>:<i className="bx bx-trash me-1 text-danger"></i>}
</button> </button>
)} )}
{!item.isActive && <span>Not in project</span>} {!item.isActive && <span>Not in project</span>}
@ -267,4 +276,3 @@ const Teams = ({ project }) => {
}; };
export default Teams; export default Teams;