intergrated react-query
This commit is contained in:
parent
6e5e206bc8
commit
07885d3ed4
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import moment from "moment";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { convertShortTime } from "../../utils/dateUtils";
|
||||
@ -6,29 +6,40 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { useAttendance } from "../../hooks/useAttendance";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import eventBus from "../../services/eventBus";
|
||||
|
||||
const Attendance = ({
|
||||
attendance,
|
||||
getRole,
|
||||
handleModalData,
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const Attendance = ({ getRole, handleModalData }) => {
|
||||
const queryClient = useQueryClient();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [todayDate, setTodayDate] = useState(new Date());
|
||||
const [ShowPending, setShowPending] = useState(false);
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const {
|
||||
attendance,
|
||||
loading: attLoading,
|
||||
recall: attrecall,
|
||||
} = useAttendance(selectedProject);
|
||||
const filteredAttendance = ShowPending
|
||||
? attendance?.filter(
|
||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||
)
|
||||
: attendance;
|
||||
|
||||
// Ensure attendance is an array
|
||||
const attendanceList = Array.isArray(attendance) ? attendance : [];
|
||||
const attendanceList = Array.isArray(filteredAttendance)
|
||||
? filteredAttendance
|
||||
: [];
|
||||
|
||||
// Function to sort by first and last name
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
};
|
||||
|
||||
// Filter employees based on activity
|
||||
const group1 = attendanceList
|
||||
.filter((d) => d.activity === 1 || d.activity === 4)
|
||||
.sort(sortByName);
|
||||
@ -37,30 +48,65 @@ const Attendance = ({
|
||||
.sort(sortByName);
|
||||
|
||||
const filteredData = [...group1, ...group2];
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
filteredData,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (selectedProject == msg.projectId) {
|
||||
const updatedAttendance = attendances.map((item) =>
|
||||
item.employeeId === msg.response.employeeId
|
||||
? { ...item, ...msg.response }
|
||||
: item
|
||||
);
|
||||
queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((emp) =>
|
||||
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
[selectedProject, attrecall]
|
||||
);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (attendances.some((item) => item.employeeId == msg.employeeId)) {
|
||||
attrecall();
|
||||
}
|
||||
},
|
||||
[selectedProject, attendance]
|
||||
);
|
||||
useEffect(() => {
|
||||
eventBus.on("attendance", handler);
|
||||
return () => eventBus.off("attendance", handler);
|
||||
}, [handler]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
return (
|
||||
<>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="table-responsive text-nowrap h-100" >
|
||||
<div className="d-flex text-start align-items-center py-2">
|
||||
<strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
|
||||
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
||||
checked={ShowPending}
|
||||
onChange={(e) => setShowPending(e.target.checked)}
|
||||
/>
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
{attendance && attendance.length > 0 && (
|
||||
{Array.isArray(attendance) && attendance.length > 0 ? (
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
@ -81,14 +127,13 @@ const Attendance = ({
|
||||
{currentItems &&
|
||||
currentItems
|
||||
.sort((a, b) => {
|
||||
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
|
||||
const checkInA = a?.checkInTime
|
||||
? new Date(a.checkInTime)
|
||||
: new Date(0);
|
||||
const checkInB = b?.checkInTime
|
||||
? new Date(b.checkInTime)
|
||||
: new Date(0);
|
||||
return checkInB - checkInA; // Sort in descending order of checkInTime
|
||||
return checkInB - checkInA;
|
||||
})
|
||||
.map((item) => (
|
||||
<tr key={item.employeeId}>
|
||||
@ -189,6 +234,14 @@ const Attendance = ({
|
||||
</nav>
|
||||
)}
|
||||
</>
|
||||
) : attLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<div className="text-muted">
|
||||
{Array.isArray(attendance)
|
||||
? "No employees assigned to the project"
|
||||
: "Attendance data unavailable"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -38,11 +38,12 @@ const AttendanceLog = ({
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const [loading,setLoading] = useState(false)
|
||||
// const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [processedData, setProcessedData] = useState([]);
|
||||
@ -73,18 +74,17 @@ const AttendanceLog = ({
|
||||
return nameA?.localeCompare(nameB);
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// const { startDate, endDate } = dateRange;
|
||||
// dispatch(
|
||||
// fetchAttendanceData({
|
||||
// projectId,
|
||||
// fromDate: startDate,
|
||||
// toDate: endDate,
|
||||
// })
|
||||
// );
|
||||
// setIsRefreshing(false);
|
||||
// }, [dateRange, projectId, dispatch, isRefreshing]);
|
||||
const {data= [],isLoading, error, refetch,isFetching} = useAttendancesLogs(selectedProject,dateRange.startDate, dateRange.endDate)
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
isFetching,
|
||||
} = useAttendancesLogs(
|
||||
selectedProject,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate
|
||||
);
|
||||
const filtering = (data) => {
|
||||
const filteredData = showOnlyCheckout
|
||||
? data.filter((item) => item.checkOutTime === null)
|
||||
@ -128,18 +128,16 @@ const AttendanceLog = ({
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Sort dates in descending order
|
||||
const sortedDates = Object.keys(groupedByDate).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
|
||||
// Create the final sorted array
|
||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||
setProcessedData(finalData);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
filtering(data)
|
||||
filtering(data);
|
||||
}, [data, showOnlyCheckout]);
|
||||
|
||||
const {
|
||||
@ -155,49 +153,47 @@ const AttendanceLog = ({
|
||||
}, [processedData, resetPage]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||
if (
|
||||
projectId === msg.projectId &&
|
||||
startDate <= checkIn &&
|
||||
checkIn <= endDate
|
||||
) {
|
||||
const updatedAttendance = data.map((item) =>
|
||||
item.id === msg.response.id
|
||||
? { ...item, ...msg.response }
|
||||
: item
|
||||
);
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const checkIn = msg.response.checkInTime.substring(0, 10);
|
||||
if (
|
||||
projectId === msg.projectId &&
|
||||
startDate <= checkIn &&
|
||||
checkIn <= endDate
|
||||
) {
|
||||
const updatedAttendance = data.map((item) =>
|
||||
item.id === msg.response.id ? { ...item, ...msg.response } : item
|
||||
);
|
||||
|
||||
filtering(updatedAttendance);
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
[projectId, dateRange, data, filtering, resetPage]
|
||||
);
|
||||
filtering(updatedAttendance);
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
[projectId, dateRange, data, filtering, resetPage]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
eventBus.on("attendance_log", handler);
|
||||
return () => eventBus.off("attendance_log", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
||||
dispatch(
|
||||
fetchAttendanceData({
|
||||
projectId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
)
|
||||
projectId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
[projectId, dateRange,data]
|
||||
[projectId, dateRange, data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
@ -231,15 +227,14 @@ const AttendanceLog = ({
|
||||
isFetching ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={()=>refetch()}
|
||||
onClick={() => refetch()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="table-responsive text-nowrap"
|
||||
style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
{data && data.length > 0 && (
|
||||
<div className="table-responsive text-nowrap">
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : data?.length > 0 ? (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -258,87 +253,79 @@ const AttendanceLog = ({
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(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;
|
||||
{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;
|
||||
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
acc.push(
|
||||
<tr
|
||||
key={`header-${currentDate}`}
|
||||
className="table-row-header"
|
||||
>
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>
|
||||
{moment(currentDate).format("DD-MM-YYYY")}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
if (!previousDate || currentDate !== previousDate) {
|
||||
acc.push(
|
||||
<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 || attendance.checkOutTime
|
||||
).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={today.toLocaleDateString("en-CA")}
|
||||
/>
|
||||
<tr
|
||||
key={`header-${currentDate}`}
|
||||
className="table-row-header"
|
||||
>
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>
|
||||
{moment(currentDate).format("DD-MM-YYYY")}
|
||||
</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
return acc;
|
||||
}, [])}
|
||||
}
|
||||
acc.push(
|
||||
<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 || attendance.checkOutTime
|
||||
).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={today.toLocaleDateString("en-CA")}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && !isRefreshing && data?.length === 0 && (
|
||||
<span className="text-muted">No employee logs</span>
|
||||
) : (
|
||||
<span className="text-muted">No employee logs</span>
|
||||
)}
|
||||
</div>
|
||||
{!loading && !isRefreshing && processedData.length > 10 && (
|
||||
{processedData.length > 10 && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
|
||||
@ -3,8 +3,9 @@ import { cacheData, getCachedData } from "../slices/apiDataManager";
|
||||
import AttendanceRepository from "../repositories/AttendanceRepository";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { store } from "../store/store";
|
||||
import { setDefaultDateRange } from "../slices/localVariablesSlice";
|
||||
|
||||
// export const useAttendace =(projectId)=>{
|
||||
|
||||
@ -117,6 +118,7 @@ import { store } from "../store/store";
|
||||
|
||||
|
||||
export const useAttendance = (projectId) => {
|
||||
const dispatch = useDispatch()
|
||||
const {
|
||||
data: attendance = [],
|
||||
isLoading: loading,
|
||||
@ -143,9 +145,11 @@ export const useAttendance = (projectId) => {
|
||||
};
|
||||
|
||||
export const useAttendancesLogs = (projectId, fromDate, toDate) => {
|
||||
const dispatch = useDispatch();
|
||||
const enabled = !!projectId && !!fromDate && !!toDate;
|
||||
return useQuery({
|
||||
queryKey: ["attendanceLogs", projectId, fromDate, toDate],
|
||||
|
||||
const query = useQuery({
|
||||
queryKey: ['attendanceLogs', projectId, fromDate, toDate],
|
||||
queryFn: async () => {
|
||||
const res = await AttendanceRepository.getAttendanceFilteredByDate(
|
||||
projectId,
|
||||
@ -156,6 +160,18 @@ export const useAttendancesLogs = (projectId, fromDate, toDate) => {
|
||||
},
|
||||
enabled,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (query.data && fromDate && toDate) {
|
||||
dispatch(
|
||||
setDefaultDateRange({
|
||||
startDate: fromDate,
|
||||
endDate: toDate,
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [dispatch, query.data, fromDate, toDate]);
|
||||
return query;
|
||||
};
|
||||
|
||||
|
||||
@ -231,6 +247,7 @@ export const useRegularizationRequests = (projectId) => {
|
||||
export const useMarkAttendance = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
const selectedDateRange = useSelector((store)=>store.localVariables.defaultDateRange)
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({payload,forWhichTab}) => {
|
||||
@ -247,9 +264,15 @@ export const useMarkAttendance = () => {
|
||||
);
|
||||
});
|
||||
}else{
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["attendanceLogs"],
|
||||
});
|
||||
// queryClient.invalidateQueries({
|
||||
// queryKey: ["attendanceLogs"],
|
||||
// });
|
||||
queryClient.setQueryData(["attendanceLogs",selectedProject,selectedDateRange.startDate,selectedDateRange.endDate], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((emp) =>
|
||||
emp.id === data.id ? { ...emp, ...data } : emp
|
||||
);
|
||||
});
|
||||
}
|
||||
if(variables.forWhichTab !== 3) showToast("Attendance marked successfully", "success");
|
||||
},
|
||||
|
||||
@ -8,45 +8,44 @@ import {
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import AttendanceLog from "../../components/Activities/AttendcesLogs";
|
||||
import Attendance from "../../components/Activities/Attendance";
|
||||
import AttendanceModel from "../../components/Activities/AttendanceModel";
|
||||
// import AttendanceModel from "../../components/Activities/AttendanceModel";
|
||||
import showToast from "../../services/toastService";
|
||||
// import { useProjects } from "../../hooks/useProjects";
|
||||
import Regularization from "../../components/Activities/Regularization";
|
||||
import { useAttendance } from "../../hooks/useAttendance";
|
||||
import { useAttendance } from "../../hooks/useAttendance";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
|
||||
// import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
|
||||
import { hasUserPermission } from "../../utils/authUtils";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
// import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
|
||||
import AttendLogs from "../../components/Activities/AttendLogs";
|
||||
import Confirmation from "../../components/Activities/Confirmation";
|
||||
// import Confirmation from "../../components/Activities/Confirmation";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [ShowPending, setShowPending] = useState(false);
|
||||
const queryClient = useQueryClient()
|
||||
const queryClient = useQueryClient();
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const dispatch = useDispatch()
|
||||
const {
|
||||
attendance,
|
||||
loading: attLoading,
|
||||
recall: attrecall,
|
||||
} = useAttendance(selectedProject);
|
||||
const dispatch = useDispatch();
|
||||
// const {
|
||||
// attendance,
|
||||
// loading: attLoading,
|
||||
// recall: attrecall,
|
||||
// } = useAttendance(selectedProject);
|
||||
const [attendances, setAttendances] = useState();
|
||||
const [empRoles, setEmpRoles] = useState(null);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
markTime: "",
|
||||
@ -54,47 +53,38 @@ const AttendancePage = () => {
|
||||
date: new Date().toLocaleDateString(),
|
||||
});
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (selectedProject == msg.projectId) {
|
||||
const updatedAttendance = attendances.map((item) =>
|
||||
item.employeeId === msg.response.employeeId
|
||||
? { ...item, ...msg.response }
|
||||
: item
|
||||
);
|
||||
// cacheData("Attendance", {
|
||||
// data: updatedAttendance,
|
||||
// projectId: selectedProject,
|
||||
// });
|
||||
queryClient.setQueryData(["attendance",selectedProject], (oldData) => {
|
||||
if (!oldData) return oldData;
|
||||
return oldData.map((emp) =>
|
||||
emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
|
||||
);
|
||||
});
|
||||
// setAttendances(updatedAttendance);
|
||||
}
|
||||
},
|
||||
[selectedProject, attrecall]
|
||||
);
|
||||
// const handler = useCallback(
|
||||
// (msg) => {
|
||||
// if (selectedProject == msg.projectId) {
|
||||
// const updatedAttendance = attendances.map((item) =>
|
||||
// item.employeeId === msg.response.employeeId
|
||||
// ? { ...item, ...msg.response }
|
||||
// : item
|
||||
// );
|
||||
// queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
|
||||
// if (!oldData) return oldData;
|
||||
// return oldData.map((emp) =>
|
||||
// emp.employeeId === data.employeeId ? { ...emp, ...data } : emp
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// [selectedProject, attrecall]
|
||||
// );
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (attendances.some((item) => item.employeeId == msg.employeeId)) {
|
||||
// AttendanceRepository.getAttendance(selectedProject)
|
||||
// .then((response) => {
|
||||
// cacheData("Attendance", { data: response.data, selectedProject });
|
||||
// setAttendances(response.data);
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error(error);
|
||||
// });
|
||||
|
||||
attrecall()
|
||||
}
|
||||
},
|
||||
[selectedProject, attendances]
|
||||
);
|
||||
// const employeeHandler = useCallback(
|
||||
// (msg) => {
|
||||
// if (attendances.some((item) => item.employeeId == msg.employeeId)) {
|
||||
// attrecall();
|
||||
// }
|
||||
// },
|
||||
// [selectedProject, attendances]
|
||||
// );
|
||||
useEffect(() => {
|
||||
if (selectedProject == null) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getRole = (roleId) => {
|
||||
if (!empRoles) return "Unassigned";
|
||||
@ -114,70 +104,28 @@ const AttendancePage = () => {
|
||||
const closeModal = () => {
|
||||
setModelConfig(null);
|
||||
setIsCreateModalOpen(false);
|
||||
// const modalElement = document.getElementById("check-Out-modal");
|
||||
// if (modalElement) {
|
||||
// modalElement.classList.remove("show");
|
||||
// modalElement.style.display = "none";
|
||||
// document.body.classList.remove("modal-open");
|
||||
// document.querySelector(".modal-backdrop")?.remove();
|
||||
// }
|
||||
};
|
||||
|
||||
// const handleSubmit = (formData) => {
|
||||
// dispatch(markCurrentAttendance(formData))
|
||||
// .then((action) => {
|
||||
// const updatedAttendance = attendances.map((item) =>
|
||||
// item.employeeId === action.payload.employeeId
|
||||
// ? { ...item, ...action.payload }
|
||||
// : item
|
||||
// );
|
||||
// cacheData("Attendance", {
|
||||
// data: updatedAttendance,
|
||||
// projectId: selectedProject,
|
||||
// });
|
||||
// setAttendances(updatedAttendance);
|
||||
// showToast("Attedance Marked Successfully", "success");
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// showToast(error.message, "error");
|
||||
// });
|
||||
// };
|
||||
|
||||
const handleToggle = (event) => {
|
||||
setShowOnlyCheckout(event.target.checked);
|
||||
};
|
||||
useEffect(() => {
|
||||
if(selectedProject == null){
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModel();
|
||||
}
|
||||
}, [modelConfig, isCreateModalOpen]);
|
||||
useEffect(() => {
|
||||
setAttendances(attendance);
|
||||
}, [attendance]);
|
||||
|
||||
// useEffect(() => {
|
||||
// eventBus.on("attendance", handler);
|
||||
// return () => eventBus.off("attendance", handler);
|
||||
// }, [handler]);
|
||||
|
||||
const filteredAttendance = ShowPending
|
||||
? attendances?.filter(
|
||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||
)
|
||||
: attendances;
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("attendance", handler);
|
||||
return () => eventBus.off("attendance", handler);
|
||||
}, [handler]);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
// useEffect(() => {
|
||||
// eventBus.on("employee", employeeHandler);
|
||||
// return () => eventBus.off("employee", employeeHandler);
|
||||
// }, [employeeHandler]);
|
||||
return (
|
||||
<>
|
||||
{/* {isCreateModalOpen && modelConfig && (
|
||||
@ -195,27 +143,30 @@ const AttendancePage = () => {
|
||||
/>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
<GlobalModel isOpen={isCreateModalOpen} size={modelConfig?.action === 6 && "lg"} closeModal={closeModal}>
|
||||
{(modelConfig?.action === 0 || modelConfig?.action === 1 || modelConfig?.action === 2) && (
|
||||
<CheckCheckOutmodel modeldata={modelConfig} closeModal={closeModal} />
|
||||
|
||||
)}
|
||||
{/* For view logs */}
|
||||
{modelConfig?.action === 6 && (
|
||||
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
|
||||
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
<GlobalModel
|
||||
isOpen={isCreateModalOpen}
|
||||
size={modelConfig?.action === 6 && "lg"}
|
||||
closeModal={closeModal}
|
||||
>
|
||||
{(modelConfig?.action === 0 ||
|
||||
modelConfig?.action === 1 ||
|
||||
modelConfig?.action === 2) && (
|
||||
<CheckCheckOutmodel
|
||||
modeldata={modelConfig}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
)}
|
||||
{/* For view logs */}
|
||||
{modelConfig?.action === 6 && (
|
||||
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
|
||||
)}
|
||||
{modelConfig?.action === 7 && (
|
||||
<Confirmation closeModal={closeModal} />
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
{
|
||||
modelConfig?.action === 7 &&(
|
||||
<Confirmation closeModal={closeModal} />
|
||||
)
|
||||
}
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
@ -223,14 +174,14 @@ const AttendancePage = () => {
|
||||
{ label: "Attendance", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="nav-align-top nav-tabs-shadow">
|
||||
|
||||
|
||||
<div className="nav-align-top nav-tabs-shadow" >
|
||||
<ul className="nav nav-tabs" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
|
||||
className={`nav-link ${
|
||||
activeTab === "all" ? "active" : ""
|
||||
} fs-6`}
|
||||
onClick={() => setActiveTab("all")}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-home"
|
||||
@ -241,7 +192,9 @@ const AttendancePage = () => {
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
|
||||
className={`nav-link ${
|
||||
activeTab === "logs" ? "active" : ""
|
||||
} fs-6`}
|
||||
onClick={() => setActiveTab("logs")}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-profile"
|
||||
@ -263,31 +216,15 @@ const AttendancePage = () => {
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
|
||||
{activeTab === "all" && (
|
||||
<>
|
||||
{!attLoading && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<Attendance
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
setshowOnlyCheckout={setShowPending}
|
||||
showOnlyCheckout={ShowPending}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!attLoading && filteredAttendance?.length === 0 && (
|
||||
<p>
|
||||
{" "}
|
||||
{ShowPending
|
||||
? "No Pending Available"
|
||||
: "No Employee assigned yet."}{" "}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
<Attendance
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "logs" && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<AttendanceLog
|
||||
@ -298,16 +235,11 @@ const AttendancePage = () => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "regularization" && DoRegularized && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
{/* <Regularization handleRequest={handleSubmit} /> */}
|
||||
<Regularization />
|
||||
<Regularization />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{attLoading && <span>Loading..</span>}
|
||||
{!attLoading && !attendances && <span>Not Found</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,10 @@ const localVariablesSlice = createSlice({
|
||||
initialState: {
|
||||
selectedMaster:"Application Role",
|
||||
regularizationCount:0,
|
||||
defaultDateRange: {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
},
|
||||
projectId: null,
|
||||
reload:false
|
||||
|
||||
@ -22,9 +26,12 @@ const localVariablesSlice = createSlice({
|
||||
refreshData: ( state, action ) =>
|
||||
{
|
||||
state.reload = action.payload
|
||||
}
|
||||
},
|
||||
setDefaultDateRange: (state, action) => {
|
||||
state.defaultDateRange = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData} = localVariablesSlice.actions;
|
||||
export const { changeMaster ,updateRegularizationCount,setProjectId,refreshData,setDefaultDateRange} = localVariablesSlice.actions;
|
||||
export default localVariablesSlice.reducer;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user