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

handled proper loading, pagination only display if record have greather than 5 and added refresh button

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-06 22:52:59 +05:30
parent 6f81b99dcd
commit 099a3bcc36
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/employee/AttendancesEmployeeRecords.jsx
View File

@ -84,7 +84,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
}) })
); );
} }
}, [dateRange, employee]); }, [dateRange, employee,isRefreshing]);
const openModal = (id) => { const openModal = (id) => {
setAttendanecId(id); setAttendanecId(id);
@ -132,14 +132,20 @@ const AttendancesEmployeeRecords = ({ employee }) => {
<i <i
className={`bx bx-refresh cursor-pointer fs-4 ${ className={`bx bx-refresh cursor-pointer fs-4 ${
loading ? "spin" : "" loading ? "spin" : ""
}`} }`}
data-toggle="tooltip"
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 ? ( {(!loading && data.length === 0) &&
<span>No employee logs</span>
}
{error && <div className="text-center">{error }</div>}
{(loading && !data ) && <div className="text-center">Loading...</div>}
{(data && data.length > 0 ) && (
<table className="table mb-0"> <table className="table mb-0">
<thead> <thead>
<tr> <tr>
@ -159,15 +165,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{loading && <td colSpan={5}>Loading...</td>} {currentItems?.map( ( attendance, index ) => (
{error && <td colSpan={5}>{error}</td>}
{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">
@ -186,12 +184,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
</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>
@ -202,20 +200,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
data-bs-toggle="modal" data-bs-toggle="modal"
onClick={() => openModal(attendance.id)} onClick={() => openModal( attendance.id )}
> >
View View
</button> </button>
</td> </td>
</tr> </tr>
))} ) )}
</tbody> </tbody>
</table> </table>
) : ( ) }
<span>No employee logs</span>
)}
</div> </div>
{!loading && ( {(!loading && currentItems < 5) && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li <li