Implemented signalR in Employee module
This commit is contained in:
parent
6f247fb0e9
commit
200ef5ae0a
@ -6,8 +6,9 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
|
||||
import DateRangePicker from "../common/DateRangePicker";
|
||||
import { getCachedData } from "../../slices/apiDataManager";
|
||||
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import AttendanceRepository from "../../repositories/AttendanceRepository";
|
||||
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -177,6 +178,27 @@ const AttendanceLog = ({
|
||||
return () => eventBus.off("attendance_log", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
if (data.some((item) => item.employeeId == msg.employeeId)) {
|
||||
dispatch(
|
||||
fetchAttendanceData({
|
||||
projectId,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
})
|
||||
)
|
||||
}
|
||||
},
|
||||
[projectId, dateRange,data]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
@ -51,6 +51,20 @@ const Regularization = ({ handleRequest }) => {
|
||||
return () => eventBus.off("regularization", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (regularizes.some((item) => item.employeeId == msg.employeeId)) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[regularizes]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
}, [employeeHandler]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="table-responsive text-nowrap"
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster from "../../hooks/masterHook/useMaster";
|
||||
@ -10,6 +10,7 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { TasksRepository } from "../../repositories/ProjectRepository";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useProjectDetails } from "../../hooks/useProjects";
|
||||
import eventBus from "../../services/eventBus";
|
||||
|
||||
const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
|
||||
// Calculate maxPlanned based on assignData
|
||||
@ -77,7 +78,7 @@ const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
|
||||
const { employees, loading: employeeLoading,recallEmployeeData } = useEmployeesAllOrByProjectId(
|
||||
selectedProject,
|
||||
false
|
||||
);
|
||||
@ -188,6 +189,25 @@ const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if(employees.some((item) => item.id == msg.employeeId)){
|
||||
console.log("handller function start")
|
||||
clearCacheKey("employeeListByProject");
|
||||
clearCacheKey("allEmployeeList");
|
||||
clearCacheKey("allInactiveEmployeeList");
|
||||
clearCacheKey("employeeProfile");
|
||||
recallEmployeeData(false);
|
||||
console.log("handller function end")
|
||||
}
|
||||
},[employees]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee",handler);
|
||||
return () => eventBus.off("employee",handler)
|
||||
},[handler])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
|
||||
|
@ -188,6 +188,19 @@ const Teams = ({ project }) => {
|
||||
return () => eventBus.off("assign_project_all", handler);
|
||||
}, [handler]);
|
||||
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if(filteredEmployees.some((item) => item.employeeId == msg.employeeId)){
|
||||
fetchEmployees();
|
||||
}
|
||||
},[filteredEmployees]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee",employeeHandler);
|
||||
return () => eventBus.off("employee",employeeHandler)
|
||||
},[employeeHandler])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
cacheData,
|
||||
clearCacheKey,
|
||||
getCachedData,
|
||||
getCachedProfileData,
|
||||
} from "../../slices/apiDataManager";
|
||||
@ -19,13 +20,14 @@ 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";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [ShowPending, setShowPending] = useState(false);
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
// const { projects, loading: projectLoading } = useProjects();
|
||||
const {
|
||||
attendance,
|
||||
loading: attLoading,
|
||||
@ -62,6 +64,22 @@ const AttendancePage = () => {
|
||||
[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);
|
||||
});
|
||||
}
|
||||
},
|
||||
[selectedProject, attendances]
|
||||
);
|
||||
|
||||
const getRole = (roleId) => {
|
||||
if (!empRoles) return "Unassigned";
|
||||
if (!roleId) return "Unassigned";
|
||||
@ -135,13 +153,20 @@ const AttendancePage = () => {
|
||||
// )
|
||||
// : attendances;
|
||||
const filteredAttendance = ShowPending
|
||||
? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
|
||||
? 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]);
|
||||
return (
|
||||
<>
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
@ -242,11 +267,8 @@ const AttendancePage = () => {
|
||||
</li>
|
||||
</ul>
|
||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
||||
|
||||
|
||||
{activeTab === "all" && (
|
||||
<>
|
||||
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<Attendance
|
||||
attendance={filteredAttendance}
|
||||
@ -256,8 +278,13 @@ const AttendancePage = () => {
|
||||
showOnlyCheckout={ShowPending}
|
||||
/>
|
||||
</div>
|
||||
{!attLoading && filteredAttendance?.length === 0 && (
|
||||
<p> {ShowPending ? "No Pending Available" : "No Employee assigned yet."} </p>
|
||||
{!attLoading && filteredAttendance?.length === 0 && (
|
||||
<p>
|
||||
{" "}
|
||||
{ShowPending
|
||||
? "No Pending Available"
|
||||
: "No Employee assigned yet."}{" "}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@ -279,7 +306,7 @@ const AttendancePage = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{attLoading && <span>Loading..</span>}
|
||||
{attLoading && <span>Loading..</span>}
|
||||
{!attLoading && !attendances && <span>Not Found</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import moment from "moment";
|
||||
import showToast from "../../services/toastService";
|
||||
import { Link, NavLink, useNavigate } from "react-router-dom";
|
||||
@ -23,6 +23,8 @@ import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import { useSelector } from "react-redux";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { newlineChars } from "pdf-lib";
|
||||
|
||||
const EmployeeList = () => {
|
||||
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
|
||||
@ -202,7 +204,6 @@ const EmployeeList = () => {
|
||||
};
|
||||
|
||||
const handleOpenDelete = (employee) => {
|
||||
console.log(employee);
|
||||
setSelectedEmpFordelete(employee);
|
||||
setIsDeleteModalOpen(true);
|
||||
};
|
||||
@ -218,6 +219,20 @@ const EmployeeList = () => {
|
||||
setSelectedProject(selectedProjectId || "");
|
||||
}, [selectedProjectId]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if(employees.some((item) => item.id == msg.employeeId)){
|
||||
setEmployeeList([]);
|
||||
recallEmployeeData(showInactive);
|
||||
}
|
||||
},[employees]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee",handler);
|
||||
return () => eventBus.off("employee",handler)
|
||||
},[handler])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -77,9 +77,20 @@ export function startSignalR(loggedUser) {
|
||||
}
|
||||
// if created or updated infra
|
||||
if (data.keyword == "Infra") {
|
||||
console.log("Infra")
|
||||
eventBus.emit("infra", data);
|
||||
}
|
||||
|
||||
// if created or updated Employee
|
||||
if (data.keyword == "Employee") {
|
||||
clearCacheKey("employeeListByProject");
|
||||
clearCacheKey("allEmployeeList");
|
||||
clearCacheKey("allInactiveEmployeeList");
|
||||
clearCacheKey("employeeProfile");
|
||||
clearCacheKey("Attendance");
|
||||
clearCacheKey("regularizedList")
|
||||
clearCacheKey("AttendanceLogs")
|
||||
eventBus.emit("employee", data);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user