added loading indicator for project employee list during API call
This commit is contained in:
parent
8607dbb49b
commit
148f4b79e7
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user