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

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

@ -22,20 +22,26 @@ 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 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>
@ -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;
@ -265,7 +273,8 @@ const Teams = ({ project }) => {
) )} ) )}
</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>