handled loading properly
This commit is contained in:
parent
7ef148ac32
commit
9802746267
@ -65,7 +65,8 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}, [dateRange, projectId, isRefreshing]);
|
}, [ dateRange, projectId, isRefreshing ] );
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -82,12 +83,13 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
loading ? "spin":""
|
loading ? "spin":""
|
||||||
}`}
|
}`}
|
||||||
title="Refresh"
|
title="Refresh"
|
||||||
onClick={()=>setIsRefreshing(!isRefreshing)}
|
onClick={() => setIsRefreshing( !isRefreshing )}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="table-responsive text-nowrap">
|
<div className="table-responsive text-nowrap">
|
||||||
{data && data.length > 0 ? (
|
{(data && data.length > 0 ) && (
|
||||||
<table className="table mb-0">
|
<table className="table mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -107,14 +109,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{loading && <td colSpan={5}>Loading...</td>}
|
{loading && <td colSpan={5}>Loading...</td>}
|
||||||
{error && <td colSpan={5}>{error}</td>}
|
{currentItems?.map( ( attendance, index ) => (
|
||||||
{data && data.length === 0 && (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={5}>No Data Found</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentItems?.map((attendance, index) => (
|
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td colSpan={2}>
|
<td colSpan={2}>
|
||||||
<div className="d-flex justify-content-start align-items-center">
|
<div className="d-flex justify-content-start align-items-center">
|
||||||
@ -133,12 +128,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{" "}
|
{" "}
|
||||||
{moment(attendance.checkInTime).format("DD-MMM-YYYY")}
|
{moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
|
||||||
</td>
|
</td>
|
||||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
<td>{convertShortTime( attendance.checkInTime )}</td>
|
||||||
<td>
|
<td>
|
||||||
{attendance.checkOutTime
|
{attendance.checkOutTime
|
||||||
? convertShortTime(attendance.checkOutTime)
|
? convertShortTime( attendance.checkOutTime )
|
||||||
: "--"}
|
: "--"}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-center">
|
<td className="text-center">
|
||||||
@ -150,12 +145,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
) )}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
) : (
|
) }
|
||||||
|
{(!loading && data.length === 0) &&
|
||||||
<span>No employee logs</span>
|
<span>No employee logs</span>
|
||||||
)}
|
}
|
||||||
|
{error && <td colSpan={5}>{error}</td>}
|
||||||
</div>
|
</div>
|
||||||
{!loading && (
|
{!loading && (
|
||||||
<nav aria-label="Page ">
|
<nav aria-label="Page ">
|
||||||
@ -201,7 +198,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user