Adding Switch button in attendence component. #129
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, useMemo, useCallback } from "react";
|
||||
import moment from "moment";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
@ -7,13 +7,28 @@ import { useSelector, useDispatch } from "react-redux";
|
||||
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return data.slice(startIndex, endIndex);
|
||||
}, [data, currentPage, itemsPerPage]);
|
||||
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
|
||||
};
|
||||
|
||||
const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
const [isRefreshing, setIsRefreshing] = useState(true);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
|
||||
const today = new Date();
|
||||
@ -44,33 +59,36 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
|
||||
useEffect(() => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (startDate && endDate) {
|
||||
dispatch(
|
||||
fetchAttendanceData({
|
||||
projectId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [dateRange, projectId, isRefreshing]);
|
||||
dispatch(
|
||||
fetchAttendanceData({
|
||||
projectId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
);
|
||||
setIsRefreshing(false);
|
||||
}, [dateRange, projectId, dispatch, isRefreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
const group1 = data
|
||||
const filteredData = showOnlyCheckout
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
: data;
|
||||
|
||||
const group1 = filteredData
|
||||
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group2 = data
|
||||
const group2 = filteredData
|
||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group3 = data
|
||||
const group3 = filteredData
|
||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||
.sort(sortByName);
|
||||
const group4 = data
|
||||
const group4 = filteredData
|
||||
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
|
||||
const group5 = data
|
||||
const group5 = filteredData
|
||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||
.sort(sortByName);
|
||||
const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
|
||||
const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
@ -90,13 +108,18 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
// Create the final sorted array
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}, [data]);
|
||||
}, [data, showOnlyCheckout]);
|
||||
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate } = usePagination(
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
|
||||
processedData,
|
||||
10
|
||||
);
|
||||
|
||||
// Reset to the first page whenever processedData changes (due to switch on/off)
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [processedData, resetPage]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -108,10 +131,10 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,8 +157,12 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <td colSpan={5}>Loading...</td>}
|
||||
{paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
{(loading || isRefreshing) && (
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
|
||||
const previousAttendance = arr[index - 1];
|
||||
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
|
||||
@ -191,10 +218,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && <td colSpan={6}>{error}</td>}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
{!loading && processedData.length > 10 && (
|
||||
{!loading && !isRefreshing && processedData.length > 10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
|
||||
@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
@ -86,6 +86,10 @@ const AttendancePage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleToggle = (event) => {
|
||||
setShowOnlyCheckout(event.target.checked);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModel();
|
||||
@ -100,6 +104,17 @@ const AttendancePage = () => {
|
||||
dispatch(setProjectId(loginUser?.projects[0]));
|
||||
}
|
||||
}, [selectedProject, loginUser?.projects]);
|
||||
|
||||
// Filter attendance data based on the toggle
|
||||
// const filteredAttendance = showOnlyCheckout
|
||||
// ? attendances?.filter(
|
||||
// (att) => att?.checkOutTime !== null && att?.checkInTime !== null
|
||||
// )
|
||||
// : attendances;
|
||||
const filteredAttendance = showOnlyCheckout
|
||||
? attendances?.filter((att) => att?.checkOutTime === null)
|
||||
: attendances;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
@ -161,7 +176,7 @@ const AttendancePage = () => {
|
||||
)}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
@ -198,6 +213,26 @@ const AttendancePage = () => {
|
||||
Regularization
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={`nav-item ms-auto ${
|
||||
activeTab === "regularization" ? "d-none" : ""
|
||||
}`}
|
||||
>
|
||||
<label className="switch switch-primary">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="switch-input"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={handleToggle}
|
||||
/>
|
||||
<span className="switch-toggle-slider">
|
||||
<span className="switch-on"></span>
|
||||
<span className="switch-off"></span>
|
||||
</span>
|
||||
<span className="switch-label m-2">Pending Actions</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content attedanceTabs py-2">
|
||||
{projectLoading && <span>Loading..</span>}
|
||||
@ -205,25 +240,25 @@ const AttendancePage = () => {
|
||||
|
||||
{activeTab === "all" && (
|
||||
<>
|
||||
{!projectLoading && attendances.length === 0 && (
|
||||
{!projectLoading && filteredAttendance?.length === 0 && (
|
||||
<p>No Employee assigned yet.</p>
|
||||
)}
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<Attendance
|
||||
attendance={attendances}
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === "logs" && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<AttendanceLog
|
||||
handleModalData={handleModalData}
|
||||
projectId={selectedProject}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user