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

The search functionality in the Employees section does not work correctly after applying a filter.

Browse Source
This commit is contained in:
Kartik sharma 2025-06-17 14:46:18 +05:30 committed by Vikas Nale
parent 8e3ac744c0
commit 33c3bb1282
1 changed files with 185 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

369
src/pages/employee/EmployeeList.jsx
View File

@ -29,21 +29,18 @@ const EmployeeList = () => {
const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || ""); const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
const { projects, loading: projectLoading } = useProjects(); const { projects, loading: projectLoading } = useProjects();
const [showInactive, setShowInactive] = useState(false); const [showInactive, setShowInactive] = useState(false);
const [showAllEmployees, setShowAllEmployees] = useState(false); const [showAllEmployees, setShowAllEmployees] = useState(false);
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES); const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
const { employees, loading, setLoading, error, recallEmployeeData } = const { employees, loading, setLoading, error, recallEmployeeData } =
useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive); useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
const [projectsList, setProjectsList] = useState(projects || []);
const [employeeList, setEmployeeList] = useState([]); const [employeeList, setEmployeeList] = useState([]);
const [modelConfig, setModelConfig] = useState(); const [modelConfig, setModelConfig] = useState();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(ITEMS_PER_PAGE); const [itemsPerPage] = useState(ITEMS_PER_PAGE);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false); const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState(""); const [filteredData, setFilteredData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null); const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@ -52,48 +49,57 @@ const EmployeeList = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const handleSearch = (e) => { /**
const value = e.target.value.toLowerCase(); * Applies the search filter to a given array of employee data.
setSearchText(value); * @param {Array} data - The array of employee objects to filter.
* @param {string} text - The search text.
if (!employeeList.length) return; * @returns {Array} The filtered array.
*/
const results = employeeList.filter((item) => { const applySearchFilter = (data, text) => {
if (!text) {
return data;
}
const lowercasedText = text.toLowerCase();
return data.filter((item) => {
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
const email = item.email ? item.email.toLowerCase() : ""; const email = item.email ? item.email.toLowerCase() : "";
const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : ""; const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; // Get jobRole and convert to lowercase const jobRole = item.jobRole ? item.jobRole.toLowerCase() : "";
return ( return (
fullName.includes(value) || fullName.includes(lowercasedText) ||
email.includes(value) || email.includes(lowercasedText) ||
phoneNumber.includes(value) || phoneNumber.includes(lowercasedText) ||
jobRole.includes(value) // Include jobRole in the search jobRole.includes(lowercasedText)
); );
}); });
};
setFilteredData(results); const handleSearch = (e) => {
const value = e.target.value;
setSearchText(value);
setCurrentPage(1);
}; };
useEffect(() => { useEffect(() => {
setCurrentPage(1); setCurrentPage(1);
if (!loading && Array.isArray(employees)) { if (!loading && Array.isArray(employees)) {
// Sort by full name (firstName + lastName)
const sorted = [...employees].sort((a, b) => { const sorted = [...employees].sort((a, b) => {
const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || "" const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase();
}`.toLowerCase(); const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase();
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
}`.toLowerCase();
return nameA?.localeCompare(nameB); return nameA?.localeCompare(nameB);
}); });
setEmployeeList(sorted); setEmployeeList(sorted);
setFilteredData(sorted); const results = applySearchFilter(sorted, searchText);
} setFilteredData(results);
}, [loading, employees, selectedProject, showAllEmployees]); // Add showAllEmployees to dependencies
const displayData = searchText ? filteredData : employeeList; } else if (!loading && !employees) {
setEmployeeList([]);
setFilteredData([]);
}
}, [loading, employees, showAllEmployees, searchText, selectedProject]);
const displayData = filteredData;
const indexOfLastItem = currentPage * itemsPerPage; const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = Array.isArray(displayData) const currentItems = Array.isArray(displayData)
@ -117,11 +123,11 @@ const EmployeeList = () => {
modalElement.classList.remove("show"); modalElement.classList.remove("show");
modalElement.style.display = "none"; modalElement.style.display = "none";
document.body.classList.remove("modal-open"); document.body.classList.remove("modal-open");
document.querySelector(".modal-backdrop").remove(); document.querySelector(".modal-backdrop")?.remove(); // Use optional chaining for safety
} }
setShowModal(false); setShowModal(false);
clearCacheKey("employeeProfile"); clearCacheKey("employeeProfile");
recallEmployeeData(showInactive); recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
}; };
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
@ -135,8 +141,8 @@ const EmployeeList = () => {
clearCacheKey("allEmployeeList"); clearCacheKey("allEmployeeList");
clearCacheKey("allInactiveEmployeeList"); clearCacheKey("allInactiveEmployeeList");
clearCacheKey("employeeProfile"); clearCacheKey("employeeProfile");
setEmployeeList([]); // Recall data based on current filter states after deletion to refresh the table
recallEmployeeData(showInactive); recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
setemployeeLodaing(false); setemployeeLodaing(false);
setIsDeleteModalOpen(false); setIsDeleteModalOpen(false);
}) })
@ -185,15 +191,15 @@ const EmployeeList = () => {
const handleToggle = (e) => { const handleToggle = (e) => {
setShowInactive(e.target.checked); setShowInactive(e.target.checked);
recallEmployeeData(e.target.checked); recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
}; };
const handleAllEmployeesToggle = (e) => { const handleAllEmployeesToggle = (e) => {
const isChecked = e.target.checked; const isChecked = e.target.checked;
setShowInactive(false) setShowInactive(false);
setShowAllEmployees( isChecked ); setShowAllEmployees(isChecked);
recallEmployeeData(showInactive, isChecked ? null : selectedProject); recallEmployeeData(false, isChecked ? null : selectedProject);
}; };
const handleEmployeeModel = (id) => { const handleEmployeeModel = (id) => {
@ -202,7 +208,6 @@ const EmployeeList = () => {
}; };
const handleOpenDelete = (employee) => { const handleOpenDelete = (employee) => {
console.log(employee);
setSelectedEmpFordelete(employee); setSelectedEmpFordelete(employee);
setIsDeleteModalOpen(true); setIsDeleteModalOpen(true);
}; };
@ -210,10 +215,9 @@ const EmployeeList = () => {
const handleProjectSelection = (e) => { const handleProjectSelection = (e) => {
const newProjectId = e.target.value; const newProjectId = e.target.value;
setSelectedProject(newProjectId); setSelectedProject(newProjectId);
if (newProjectId) { setShowAllEmployees(false);
setShowAllEmployees(false);
}
}; };
useEffect(() => { useEffect(() => {
setSelectedProject(selectedProjectId || ""); setSelectedProject(selectedProjectId || "");
}, [selectedProjectId]); }, [selectedProjectId]);
@ -324,7 +328,7 @@ const EmployeeList = () => {
{/* Right side: Search + Export + Add Employee */} {/* Right side: Search + Export + Add Employee */}
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1"> <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
{/* Search */} {/* Search Input - ALWAYS ENABLED */}
<div className="dataTables_filter"> <div className="dataTables_filter">
<label className="mb-0"> <label className="mb-0">
<input <input
@ -334,6 +338,8 @@ const EmployeeList = () => {
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Search User" placeholder="Search User"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
// The 'disabled' attribute is intentionally removed here
// to keep the search box always active as requested.
/> />
</label> </label>
</div> </div>
@ -373,7 +379,7 @@ const EmployeeList = () => {
</ul> </ul>
</div> </div>
{/* Add Employee */} {/* Add Employee Button */}
{Manage_Employee && ( {Manage_Employee && (
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
@ -387,7 +393,6 @@ const EmployeeList = () => {
</div> </div>
</div> </div>
<table <table
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap" className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
id="DataTables_Table_0" id="DataTables_Table_0"
@ -482,7 +487,17 @@ const EmployeeList = () => {
</td> </td>
</tr> </tr>
)} )}
{!loading && employeeList?.length === 0 && ( {/* Conditional messages for no data or no search results */}
{!loading && displayData?.length === 0 && searchText && !showAllEmployees ? (
<tr>
<td colSpan={8}>
<small className="muted">
'{searchText}' employee not found
</small>{" "}
</td>
</tr>
) : null}
{!loading && displayData?.length === 0 && (!searchText || showAllEmployees) ? (
<tr> <tr>
<td <td
colSpan={8} colSpan={8}
@ -491,150 +506,137 @@ const EmployeeList = () => {
No Data Found No Data Found
</td> </td>
</tr> </tr>
)} ) : null}
{!loading &&
employeeList &&
currentItems.length === 0 &&
employeeList.length !== 0 && (
<tr>
<td colSpan={8}>
<small className="muted">
'{searchText}' employee not found
</small>{" "}
</td>
</tr>
)}
{currentItems && {/* Render current items */}
!loading && {currentItems && !loading && currentItems.map((item) => (
currentItems.map((item) => ( <tr className="odd" key={item.id}>
<tr className="odd" key={item.id}> <td className="sorting_1" colSpan={2}>
<td className="sorting_1" colSpan={2}> <div className="d-flex justify-content-start align-items-center user-name">
<div className="d-flex justify-content-start align-items-center user-name"> <Avatar
<Avatar firstName={item.firstName}
firstName={item.firstName} lastName={item.lastName}
lastName={item.lastName} ></Avatar>
></Avatar> <div className="d-flex flex-column">
<div className="d-flex flex-column"> <a
<a onClick={() =>
navigate(
`/employee/${item.id}?for=attendance`
)
}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{item.firstName} {item.middleName}{" "}
{item.lastName}
</span>
</a>
</div>
</div>
</td>
<td className="text-start d-none d-sm-table-cell">
{item.email ? (
<span className="text-truncate">
<i className="bx bxs-envelope text-primary me-2"></i>
{item.email}
</span>
) : (
<span className="text-truncate text-italic">
NA
</span>
)}
</td>
<td className="text-start d-none d-sm-table-cell">
<span className="text-truncate">
<i className="bx bxs-phone-call text-primary me-2"></i>
{item.phoneNumber}
</span>
</td>
<td className=" d-none d-sm-table-cell text-start">
<span className="text-truncate">
<i className="bx bxs-wrench text-success me-2"></i>
{item.jobRole || "Not Assign Yet"}
</span>
</td>
<td className=" d-none d-md-table-cell">
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
</td>
<td>
{/* Assuming 'isActive' property exists to determine status */}
{item.isActive ? (
<span
className="badge bg-label-success"
text-capitalized=""
>
Active
</span>
) : (
<span
className="badge bg-label-danger"
text-capitalized=""
>
Inactive
</span>
)}
</td>
{Manage_Employee && (
<td className="text-end">
<div className="dropdown">
<button
className="btn btn-icon dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded bx-md"></i>
</button>
<div className="dropdown-menu dropdown-menu-end">
<button
onClick={() => onClick={() =>
navigate( navigate(`/employee/${item.id}`)
`/employee/${item.id}?for=attendance`
)
} }
className="text-heading text-truncate cursor-pointer" className="dropdown-item py-1"
> >
<span className="fw-normal"> <i className="bx bx-detail bx-sm"></i> View
{item.firstName} {item.middleName}{" "} </button>
{item.lastName} <button
</span> className="dropdown-item py-1"
</a> onClick={() => {
handleEmployeeModel(item.id);
}}
>
<i className="bx bx-edit bx-sm"></i> Edit
</button>
{!item.isSystem && (
<>
<button
className="dropdown-item py-1"
onClick={() =>
handleOpenDelete(item.id)
}
>
<i className="bx bx-task-x bx-sm"></i>{" "}
Suspend
</button>
<button
className="dropdown-item py-1"
type="button"
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() =>
handleConfigData(item.id)
}
>
<i className="bx bx-cog bx-sm"></i>{" "}
Manage Role
</button>
</>
)}
</div> </div>
</div> </div>
</td> </td>
<td className="text-start d-none d-sm-table-cell"> )}
{item.email ? ( </tr>
<span className="text-truncate"> ))}
<i className="bx bxs-envelope text-primary me-2"></i>
{item.email}
</span>
) : (
<span className="text-truncate text-italic">
NA
</span>
)}
</td>
<td className="text-start d-none d-sm-table-cell">
<span className="text-truncate">
<i className="bx bxs-phone-call text-primary me-2"></i>
{item.phoneNumber}
</span>
</td>
<td className=" d-none d-sm-table-cell text-start">
<span className="text-truncate">
<i className="bx bxs-wrench text-success me-2"></i>
{item.jobRole || "Not Assign Yet"}
</span>
</td>
<td className=" d-none d-md-table-cell">
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
</td>
<td>
{showInactive ? (
<span
className="badge bg-label-danger"
text-capitalized=""
>
Inactive
</span>
) : (
<span
className="badge bg-label-success"
text-capitalized=""
>
Active
</span>
)}
</td>
{Manage_Employee && (
<td className="text-end">
<div className="dropdown">
<button
className="btn btn-icon dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded bx-md"></i>
</button>
<div className="dropdown-menu dropdown-menu-end">
<button
onClick={() =>
navigate(`/employee/${item.id}`)
}
className="dropdown-item py-1"
>
<i className="bx bx-detail bx-sm"></i> View
</button>
<button
className="dropdown-item py-1"
onClick={() => {
handleEmployeeModel(item.id);
}}
>
<i className="bx bx-edit bx-sm"></i> Edit
</button>
{!item.isSystem && (
<>
<button
className="dropdown-item py-1"
onClick={() =>
handleOpenDelete(item.id)
}
>
<i className="bx bx-task-x bx-sm"></i>{" "}
Suspend
</button>
<button
className="dropdown-item py-1"
type="button"
data-bs-toggle="modal"
data-bs-target="#managerole-modal"
onClick={() =>
handleConfigData(item.id)
}
>
<i className="bx bx-cog bx-sm"></i>{" "}
Manage Role
</button>
</>
)}
</div>
</div>
</td>
)}
</tr>
))}
</tbody> </tbody>
</table> </table>
@ -684,7 +686,6 @@ const EmployeeList = () => {
</ul> </ul>
</nav> </nav>
)} )}
</div> </div>
</div> </div>
</div> </div>
@ -694,4 +695,4 @@ const EmployeeList = () => {
); );
}; };
export default EmployeeList; export default EmployeeList;