added loading indicator for project employee list during API call

This commit is contained in:
Pramod Mahajan 2025-05-04 19:38:32 +05:30
parent 8607dbb49b
commit 148f4b79e7

View File

@ -21,21 +21,27 @@ const Teams = ({ project }) => {
const [employees, setEmployees] = useState([]);
const [filteredEmployees, setFilteredEmployees] = useState([]);
const [ removingEmployeeId, setRemovingEmployeeId ] = useState( null );
const [assignedLoading,setAssignedLoading]= useState(false)
const [ assignedLoading, setAssignedLoading ] = useState( false )
const [employeeLodaing,setEmployeeLoading] = useState(false)
const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
const fetchEmployees = async () => {
try {
try
{
setEmployeeLoading(true)
// if (!empRoles) {
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) => {
console.error(error);
setError("Failed to fetch data.");
setError( "Failed to fetch data." );
setEmployeeLoading(false)
});
} catch (err) {
setError("Failed to fetch activities.");
@ -184,7 +190,8 @@ const Teams = ({ project }) => {
</div>
</div>
<div className="table-responsive text-nowrap">
{employees && employees.length > 0 ? (
{employeeLodaing && (<p>Loading..</p>)}
{!employeeLodaing && employees && employees.length > 0 && (
<table className="table ">
<thead>
<tr>
@ -197,7 +204,7 @@ const Teams = ({ project }) => {
</thead>
<tbody className="table-border-bottom-0">
{filteredEmployees &&
filteredEmployees.map((item) => (
filteredEmployees.map( ( item ) => (
<tr key={item.id}>
<td>
<div className="d-flex justify-content-start align-items-center">
@ -208,7 +215,8 @@ const Teams = ({ project }) => {
<div className="d-flex flex-column">
<a
href="#"
onClick={(e) => {
onClick={( e ) =>
{
e.preventDefault(); // Prevent default link behavior
window.location.href =
"/employee/" + item.employee.id;
@ -224,20 +232,20 @@ const Teams = ({ project }) => {
</td>
<td>
{" "}
{moment(item.allocationDate).format(
{moment( item.allocationDate ).format(
"DD-MMM-YYYY"
)}{" "}
</td>
<td>
{item.reAllocationDate
? moment(item.reAllocationDate).format(
"DD-MMM-YYYY"
)
? moment( item.reAllocationDate ).format(
"DD-MMM-YYYY"
)
: "Present"}
</td>
<td>
<span className="badge bg-label-primary me-1">
{getRole(item.jobRoleId)}
{getRole( item.jobRoleId )}
</span>
</td>
<td>
@ -247,7 +255,7 @@ const Teams = ({ project }) => {
type="button"
title="Remove from project"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => removeAllocation(item)}
onClick={() => removeAllocation( item )}
>
{" "}
{removingEmployeeId === item.id ? <div
@ -255,17 +263,18 @@ const Teams = ({ project }) => {
role="status"
>
<span class="visually-hidden">Loading...</span>
</div>:<i className="bx bx-trash me-1 text-danger"></i>}
</div> : <i className="bx bx-trash me-1 text-danger"></i>}
</button>
)}
{!item.isActive && <span>Not in project</span>}
</td>
</tr>
))}
) )}
</tbody>
</table>
) : (
)}
{(!employeeLodaing && employees.length == 0 ) && (
<span>No employees assigned to the project</span>
)}
</div>