Enhancement implemented in the Attendance component to include search functionality.
This commit is contained in:
parent
f68f589a5e
commit
ae973bf1a1
@ -36,7 +36,7 @@ const usePagination = (data, itemsPerPage) => {
|
||||
totalPages: maxPage,
|
||||
currentItems,
|
||||
paginate,
|
||||
resetPage,
|
||||
resetPage, // Ensure resetPage is returned here
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -49,6 +49,7 @@ const Regularization = ({ handleRequest, searchQuery }) => {
|
||||
[regularizes]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
eventBus.on("regularization", handler);
|
||||
return () => eventBus.off("regularization", handler);
|
||||
@ -182,3 +183,4 @@ const Regularization = ({ handleRequest, searchQuery }) => {
|
||||
|
||||
export default Regularization;
|
||||
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ 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 Regularization from "../../components/Activities/Regularization";
|
||||
import { useAttendance } from "../../hooks/useAttendance";
|
||||
@ -18,26 +18,25 @@ import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"
|
||||
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 { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [showPending, setShowPending] = useState(false); // Renamed for consistency
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [showPending, setShowPending] = useState(false); // Renamed for consistency
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const loginUser = getCachedProfileData();
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const dispatch = useDispatch();
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
attendance,
|
||||
loading: attLoading,
|
||||
recall: attrecall,
|
||||
} = useAttendace(selectedProject);
|
||||
} = useAttendance(selectedProject); // Corrected typo: useAttendace to useAttendance
|
||||
const [attendances, setAttendances] = useState();
|
||||
const [empRoles, setEmpRoles] = useState(null);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
@ -46,6 +45,7 @@ const AttendancePage = () => {
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
markTime: "",
|
||||
description: "",
|
||||
@ -94,6 +94,7 @@ const AttendancePage = () => {
|
||||
if (!empRoles) return "Unassigned";
|
||||
if (!roleId) return "Unassigned";
|
||||
const role = empRoles.find((b) => b.id === roleId);
|
||||
const role = empRoles.find((b) => b.id === roleId);
|
||||
return role ? role.role : "Unassigned";
|
||||
};
|
||||
|
||||
@ -117,6 +118,10 @@ const AttendancePage = () => {
|
||||
if (modalBackdrop) {
|
||||
modalBackdrop.remove();
|
||||
}
|
||||
const modalBackdrop = document.querySelector(".modal-backdrop");
|
||||
if (modalBackdrop) {
|
||||
modalBackdrop.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -150,13 +155,21 @@ const AttendancePage = () => {
|
||||
|
||||
const handleToggle = (event) => {
|
||||
setShowPending(event.target.checked);
|
||||
setShowPending(event.target.checked);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedProject === null && projectNames.length > 0) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}, [selectedProject, projectNames, dispatch]);
|
||||
|
||||
// Open modal when modelConfig is set
|
||||
if (selectedProject === null && projectNames.length > 0) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}, [selectedProject, projectNames, dispatch]);
|
||||
|
||||
// Open modal when modelConfig is set
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
@ -168,10 +181,15 @@ const AttendancePage = () => {
|
||||
setAttendances(attendance);
|
||||
}, [attendance]);
|
||||
|
||||
// Filter and search logic for the 'Today's' tab (Attendance component)
|
||||
const filteredAndSearchedTodayAttendance = useCallback(() => {
|
||||
let currentData = attendances;
|
||||
// Filter and search logic for the 'Today's' tab (Attendance component)
|
||||
const filteredAndSearchedTodayAttendance = useCallback(() => {
|
||||
let currentData = attendances;
|
||||
|
||||
if (showPending) {
|
||||
currentData = currentData?.filter(
|
||||
if (showPending) {
|
||||
currentData = currentData?.filter(
|
||||
(att) => att?.checkInTime !== null && att?.checkOutTime === null
|
||||
@ -198,23 +216,47 @@ const AttendancePage = () => {
|
||||
}, [attendances, showPending, searchQuery]);
|
||||
|
||||
|
||||
// Event bus listeners
|
||||
);
|
||||
}
|
||||
|
||||
if (searchQuery) {
|
||||
const lowerCaseSearchQuery = searchQuery.toLowerCase();
|
||||
currentData = currentData?.filter((att) => {
|
||||
// Combine first, middle, and last names for a comprehensive search
|
||||
const fullName = [att.firstName, att.middleName, att.lastName]
|
||||
.filter(Boolean) // Remove null or undefined parts
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
|
||||
return (
|
||||
att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
||||
att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
|
||||
fullName.includes(lowerCaseSearchQuery)
|
||||
);
|
||||
});
|
||||
}
|
||||
return currentData;
|
||||
}, [attendances, showPending, searchQuery]);
|
||||
|
||||
|
||||
// Event bus listeners
|
||||
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 && (
|
||||
{isCreateModalOpen && modelConfig && (
|
||||
<div
|
||||
className="modal fade show"
|
||||
style={{ display: "block" }}
|
||||
id="check-Out-modalg"
|
||||
id="check-Out-modal"
|
||||
tabIndex="-1"
|
||||
aria-hidden="true"
|
||||
>
|
||||
@ -224,29 +266,6 @@ const AttendancePage = () => {
|
||||
handleSubmitForm={handleSubmit}
|
||||
/>
|
||||
</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} />
|
||||
)}
|
||||
{modelConfig?.action === 7 && (
|
||||
<Confirmation closeModal={closeModal} />
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="container-fluid">
|
||||
@ -306,9 +325,60 @@ const AttendancePage = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul className="nav nav-tabs d-flex justify-content-between align-items-center" role="tablist">
|
||||
<div className="d-flex">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
|
||||
onClick={() => setActiveTab("all")}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-home"
|
||||
>
|
||||
Today's
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
|
||||
onClick={() => setActiveTab("logs")}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-profile"
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
</li>
|
||||
<li className={`nav-item ${!DoRegularized && "d-none"}`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-link ${activeTab === "regularization" ? "active" : ""
|
||||
} fs-6`}
|
||||
onClick={() => setActiveTab("regularization")}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-top-messages"
|
||||
>
|
||||
Regularization
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
{/* Search Box remains here */}
|
||||
<div className="p-2">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm" // Bootstrap small size input
|
||||
placeholder="Search employee..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
// style={{ width: "200px", height: "30px" }} // Optional: further reduce width/height
|
||||
/>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<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={filteredAndSearchedTodayAttendance()}
|
||||
@ -322,12 +392,13 @@ const AttendancePage = () => {
|
||||
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
|
||||
<p>
|
||||
{" "}
|
||||
{showPending
|
||||
{showPending
|
||||
? "No Pending Available"
|
||||
: "No Employee assigned yet."}{" "}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
{activeTab === "logs" && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
@ -337,6 +408,8 @@ const AttendancePage = () => {
|
||||
setshowOnlyCheckout={setShowPending}
|
||||
showOnlyCheckout={showPending}
|
||||
searchQuery={searchQuery} // Pass search query to AttendanceLog
|
||||
showOnlyCheckout={showPending}
|
||||
searchQuery={searchQuery} // Pass search query to AttendanceLog
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -346,6 +419,10 @@ const AttendancePage = () => {
|
||||
handleRequest={handleSubmit}
|
||||
searchQuery={searchQuery} // ✅ Pass it here
|
||||
/>
|
||||
<Regularization
|
||||
handleRequest={handleSubmit}
|
||||
searchQuery={searchQuery} // ✅ Pass it here
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user