Implemented date-wise grouping of the Attendance Log based on the selected date range. #71
@ -16,39 +16,54 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
const [isRefreshing, setIsRefreshing] = useState(true);
|
||||
const [dates, setDates] = useState([]);
|
||||
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0); // Strip time to compare dates only
|
||||
|
||||
|
||||
const isSameDay = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() === today.getTime();
|
||||
};
|
||||
|
||||
|
||||
const isBeforeToday = (dateStr) => {
|
||||
if (!dateStr) return false;
|
||||
const d = new Date(dateStr);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime() < today.getTime();
|
||||
};
|
||||
|
||||
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data.filter(d => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
|
||||
const group2 = data.filter(d => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
|
||||
const group3 = data.filter(d => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
|
||||
const group4 = data.filter(d => d.activity === 4 && isBeforeToday(d.checkOutTime)).sort(sortByName);
|
||||
const group5 = data.filter(d => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedFinalList = [...group1, ...group2, ...group3, ...group4, ...group5];
|
||||
|
||||
const currentDate = new Date().toLocaleDateString( "en-CA" );
|
||||
const group1 = data
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedFinalList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
];
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
5
|
||||
@ -65,9 +80,17 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [ dateRange, projectId, isRefreshing ] );
|
||||
|
||||
|
||||
}, [dateRange, projectId, isRefreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
const attendanceDate = [
|
||||
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
|
||||
].sort((a, b) => new Date(b) - new Date(a));
|
||||
if(attendanceDate != dates){
|
||||
setDates(attendanceDate);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -80,16 +103,15 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading ? "spin":""
|
||||
loading ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing( !isRefreshing )}
|
||||
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{(data && data.length > 0 ) && (
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -109,95 +131,107 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{currentItems?.map( ( attendance, index ) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
|
||||
</td>
|
||||
<td>{convertShortTime( attendance.checkInTime )}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime( attendance.checkOutTime )
|
||||
: "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={attendance}
|
||||
handleModalData={handleModalData}
|
||||
Tab={2}
|
||||
currentDate={currentDate}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
) )}
|
||||
{dates.map((date, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
{currentItems.some(item => item.checkInTime.split("T")[0] === date) && <tr className="table-row-header">
|
||||
<td colSpan={7} className="text-start">
|
||||
<strong>{date}</strong>
|
||||
</td>
|
||||
</tr>}
|
||||
{currentItems
|
||||
?.filter((item) => item.checkInTime.includes(date))
|
||||
.map((attendance, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
href="#"
|
||||
className="text-heading text-truncate"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment(attendance.checkInTime).format(
|
||||
"DD-MMM-YYYY"
|
||||
)}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime(attendance.checkOutTime)
|
||||
: "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={attendance}
|
||||
handleModalData={handleModalData}
|
||||
Tab={2}
|
||||
currentDate={currentDate}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
) }
|
||||
{(!loading && data.length === 0) &&
|
||||
<span>No employee logs</span>
|
||||
}
|
||||
{error && <td colSpan={5}>{error}</td>}
|
||||
)}
|
||||
{!loading && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && <td colSpan={5}>{error}</td>}
|
||||
</div>
|
||||
{!loading && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@ -87,7 +87,6 @@ const DailyTask = () => {
|
||||
|
||||
useEffect(() => {
|
||||
popoverRefs.current.forEach((el) => {
|
||||
console.log(el);
|
||||
if (el) {
|
||||
new bootstrap.Popover(el, {
|
||||
trigger: "focus",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user