admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Implementing a search functionality within the Attendance component to enable search across all tabs.

Browse Source
This commit is contained in:
Kartik Sharma 2025-08-20 15:18:53 +05:30
parent 4349f19c30
commit d02ec73b33
4 changed files with 172 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/Activities/Attendance.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from "react";
import React, { useState, useEffect, useCallback, useMemo } from "react";
import moment from "moment";
import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
@ -11,7 +11,7 @@ import { useSelector } from "react-redux";
import { useQueryClient } from "@tanstack/react-query";
import eventBus from "../../services/eventBus";
const Attendance = ({ getRole, handleModalData }) => {
const Attendance = ({ getRole, handleModalData, searchTerm }) => {
const queryClient = useQueryClient();
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
@ -28,8 +28,8 @@ const Attendance = ({ getRole, handleModalData }) => {
} = useAttendance(selectedProject);
const filteredAttendance = ShowPending
? attendance?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
)
(att) => att?.checkInTime !== null && att?.checkOutTime === null
)
: attendance;
const attendanceList = Array.isArray(filteredAttendance)
@ -48,18 +48,40 @@ const Attendance = ({ getRole, handleModalData }) => {
.filter((d) => d.activity === 0)
.sort(sortByName);
const filteredData = [...group1, ...group2];
const finalFilteredData = useMemo(() => {
const combinedData = [...group1, ...group2];
if (!searchTerm) {
return combinedData;
}
const lowercasedSearchTerm = searchTerm.toLowerCase();
return combinedData.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
const role = item.jobRoleName?.toLowerCase() || "";
return (
fullName.includes(lowercasedSearchTerm) ||
role.includes(lowercasedSearchTerm) // ✅ also search by role
);
});
}, [group1, group2, searchTerm]);
const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData,
finalFilteredData,
ITEMS_PER_PAGE
);
// Reset pagination when the filter or search term changes
useEffect(() => {
}, [finalFilteredData]);
const handler = useCallback(
(msg) => {
if (selectedProject == msg.projectId) {
queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
if (!oldData) {
queryClient.invalidateQueries({queryKey:["attendance"]})
queryClient.invalidateQueries({ queryKey: ["attendance"] })
};
return oldData.map((record) =>
record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
@ -72,7 +94,7 @@ const Attendance = ({ getRole, handleModalData }) => {
const employeeHandler = useCallback(
(msg) => {
if (attendances.some((item) => item.employeeId == msg.employeeId)) {
if (attendance.some((item) => item.employeeId == msg.employeeId)) {
attrecall();
}
},
@ -106,7 +128,9 @@ const Attendance = ({ getRole, handleModalData }) => {
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
{Array.isArray(attendance) && attendance.length > 0 ? (
{attLoading ? (
<div>Loading...</div>
) : currentItems?.length > 0 ? (
<>
<table className="table ">
<thead>
@ -188,13 +212,12 @@ const Attendance = ({ getRole, handleModalData }) => {
</tbody>
</table>
{!loading && filteredData.length > 20 && (
{!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${
currentPage === 1 ? "disabled" : ""
}`}
className={`page-item ${currentPage === 1 ? "disabled" : ""
}`}
>
<button
className="page-link btn-xs"
@ -206,9 +229,8 @@ const Attendance = ({ getRole, handleModalData }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link "
@ -219,9 +241,8 @@ const Attendance = ({ getRole, handleModalData }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link "
@ -234,19 +255,15 @@ const Attendance = ({ getRole, handleModalData }) => {
</nav>
)}
</>
) : attLoading ? (
<div>Loading...</div>
) : (
<div className="text-muted">
{Array.isArray(attendance)
? "No employees assigned to the project"
: "Attendance data unavailable"}
<div className="text-muted my-4">
{searchTerm
? "No results found for your search."
: attendanceList.length === 0
? "No employees assigned to the project."
: "No pending records available."}
</div>
)}
{currentItems?.length == 0 && attendance.length > 0 && (
<div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
)}
</div>
</>
);

61
src/components/Activities/AttendcesLogs.jsx
View File

@ -33,9 +33,7 @@ const usePagination = (data, itemsPerPage) => {
};
};
const AttendanceLog = ({
handleModalData,
}) => {
const AttendanceLog = ({ handleModalData, searchTerm }) => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
@ -139,17 +137,29 @@ const AttendanceLog = ({
filtering(data);
}, [data, showPending]);
// New useEffect to handle search filtering
const filteredSearchData = useMemo(() => {
if (!searchTerm) {
return processedData;
}
const lowercasedSearchTerm = searchTerm.toLowerCase();
return processedData.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
return fullName.includes(lowercasedSearchTerm);
});
}, [processedData, searchTerm]);
const {
currentPage,
totalPages,
currentItems: paginatedAttendances,
paginate,
resetPage,
} = usePagination(processedData, 20);
} = usePagination(filteredSearchData, 20);
useEffect(() => {
resetPage();
}, [processedData, resetPage]);
}, [filteredSearchData, resetPage]);
const handler = useCallback(
(msg) => {
@ -160,20 +170,23 @@ const AttendanceLog = ({
startDate <= checkIn &&
checkIn <= endDate
) {
queryClient.setQueriesData(["attendanceLogs"],(oldData)=>{
if(!oldData) {
queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
if (!oldData) {
queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
return;
}
return oldData.map((record) =>
record.id === msg.response.id ? { ...record, ...msg.response } : record
);
})
filtering(updatedAttendance);
const updatedAttendance = oldData.map((record) =>
record.id === msg.response.id
? { ...record, ...msg.response }
: record
);
filtering(updatedAttendance);
return updatedAttendance;
});
resetPage();
}
},
[selectedProject, dateRange, data, filtering, resetPage]
[selectedProject, dateRange, filtering, resetPage]
);
useEffect(() => {
@ -196,7 +209,7 @@ const AttendanceLog = ({
refetch()
}
},
[selectedProject, dateRange, data]
[selectedProject, dateRange, data, refetch]
);
useEffect(() => {
@ -240,8 +253,10 @@ const AttendanceLog = ({
</div>
<div className="table-responsive text-nowrap">
{isLoading ? (
<div><p className="text-secondary">Loading...</p></div>
) : data?.length > 0 ? (
<div>
<p className="text-secondary">Loading...</p>
</div>
) : filteredSearchData?.length > 0 ? (
<table className="table mb-0">
<thead>
<tr>
@ -332,10 +347,12 @@ const AttendanceLog = ({
<div className="my-4"><span className="text-secondary">No Record Available !</span></div>
)}
</div>
{paginatedAttendances?.length == 0 && data?.length > 0 && (
<div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
)}
{processedData.length > 10 && (
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
<div className="my-4">
<span className="text-secondary">No Pending Record Available !</span>
</div>
)}
{filteredSearchData.length > 10 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>

36
src/components/Activities/Regularization.jsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useState, useMemo } from "react";
import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
import RegularizationActions from "./RegularizationActions";
@ -10,7 +10,7 @@ import eventBus from "../../services/eventBus";
import { cacheData, clearCacheKey } from "../../slices/apiDataManager";
import { useQueryClient } from "@tanstack/react-query";
const Regularization = ({ handleRequest }) => {
const Regularization = ({ handleRequest, searchTerm }) => {
const queryClient = useQueryClient();
var selectedProject = useSelector((store) => store.localVariables.projectId);
const [regularizesList, setregularizedList] = useState([]);
@ -30,8 +30,6 @@ const Regularization = ({ handleRequest }) => {
const handler = useCallback(
(msg) => {
if (selectedProject == msg.projectId) {
queryClient.setQueryData(
["regularizedList", selectedProject],
(oldData) => {
@ -47,12 +45,27 @@ const Regularization = ({ handleRequest }) => {
[selectedProject, regularizes]
);
const filteredData = [...regularizesList]?.sort(sortByName);
// Filter the data based on the search term and sort it
const filteredSearchData = useMemo(() => {
const sortedList = [...regularizesList].sort(sortByName);
if (!searchTerm) {
return sortedList;
}
const lowercasedSearchTerm = searchTerm.toLowerCase();
return sortedList.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
return fullName.includes(lowercasedSearchTerm);
});
}, [regularizesList, searchTerm]);
const { currentPage, totalPages, currentItems, paginate } =
usePagination(filteredSearchData, 20);
// Reset pagination when the search term or data changes
useEffect(() => {
}, [filteredSearchData]);
const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData,
20
);
useEffect(() => {
eventBus.on("regularization", handler);
return () => eventBus.off("regularization", handler);
@ -130,8 +143,9 @@ const Regularization = ({ handleRequest }) => {
</table>
) : (
<div className="my-4">
{" "}
<span className="text-secondary">No Requests Found !</span>
<span className="text-secondary">
{searchTerm ? "No results found for your search." : "No Requests Found !"}
</span>
</div>
)}
{!loading && totalPages > 1 && (

102
src/pages/Activities/AttendancePage.jsx
View File

@ -25,6 +25,7 @@ import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all");
const [ShowPending, setShowPending] = useState(false);
const [searchTerm, setSearchTerm] = useState(""); // 🔹 New state for search
const queryClient = useQueryClient();
const loginUser = getCachedProfileData();
const selectedProject = useSelector((store) => store.localVariables.projectId);
@ -69,17 +70,18 @@ const AttendancePage = () => {
setIsCreateModalOpen(false);
};
const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked);
};
useEffect(() => {
if (modelConfig !== null) {
openModel();
}
}, [modelConfig, isCreateModalOpen]);
// Handler to change tab and reset search term
const handleTabChange = (tabName) => {
setActiveTab(tabName);
setSearchTerm(""); // Reset search term when tab changes
};
return (
<>
{isCreateModalOpen && modelConfig && (
@ -91,11 +93,11 @@ const AttendancePage = () => {
{(modelConfig?.action === 0 ||
modelConfig?.action === 1 ||
modelConfig?.action === 2) && (
<CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
<CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
{/* For view logs */}
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
@ -120,8 +122,8 @@ const AttendancePage = () => {
type="button"
className={`nav-link ${
activeTab === "all" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("all")}
} fs-6`}
onClick={() => handleTabChange("all")}
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
>
@ -133,8 +135,8 @@ const AttendancePage = () => {
type="button"
className={`nav-link ${
activeTab === "logs" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("logs")}
} fs-6`}
onClick={() => handleTabChange("logs")}
data-bs-toggle="tab"
data-bs-target="#navs-top-profile"
>
@ -146,40 +148,60 @@ const AttendancePage = () => {
type="button"
className={`nav-link ${
activeTab === "regularization" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("regularization")}
} fs-6`}
onClick={() => handleTabChange("regularization")}
data-bs-toggle="tab"
data-bs-target="#navs-top-messages"
>
Regularization
</button>
</li>
{/* 🔹 Search box placed after Regularization tab */}
<li className="nav-item ms-auto me-3">
<input
type="text"
className="form-control form-control-sm mt-1"
placeholder="Search Employee..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ minWidth: "200px" }}
/>
</li>
</ul>
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
{selectedProject ? (
<>
{activeTab === "all" && (
<div className="tab-pane fade show active py-0">
<Attendance handleModalData={handleModalData} getRole={getRole} />
</div>
)}
{activeTab === "logs" && (
<div className="tab-pane fade show active py-0">
<AttendanceLog handleModalData={handleModalData} />
</div>
)}
{activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade show active py-0">
<Regularization />
</div>
)}
</>
) : (
<div className="py-2">
<small className="py-2">Please Select Project!</small>
</div>
)}
</div>
{selectedProject ? (
<>
{activeTab === "all" && (
<div className="tab-pane fade show active py-0">
<Attendance
handleModalData={handleModalData}
getRole={getRole}
searchTerm={searchTerm}
/>
</div>
)}
{activeTab === "logs" && (
<div className="tab-pane fade show active py-0">
<AttendanceLog
handleModalData={handleModalData}
searchTerm={searchTerm}
/>
</div>
)}
{activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade show active py-0">
<Regularization searchTerm={searchTerm} />
</div>
)}
</>
) : (
<div className="py-2">
<small>Please Select Project!</small>
</div>
)}
</div>
</div>
</div>