admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added loading indicator for project employee list during API call

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-04 19:38:32 +05:30
parent 8607dbb49b
commit 148f4b79e7
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Project/Teams.jsx
View File

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