The search functionality in the Employees section does not work correctly after applying a filter.
This commit is contained in:
parent
8e3ac744c0
commit
33c3bb1282
@ -31,17 +31,14 @@ const EmployeeList = () => {
|
||||
const [showInactive, setShowInactive] = useState(false);
|
||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
|
||||
const [projectsList, setProjectsList] = useState(projects || []);
|
||||
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
@ -52,48 +49,57 @@ const EmployeeList = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSearch = (e) => {
|
||||
const value = e.target.value.toLowerCase();
|
||||
setSearchText(value);
|
||||
|
||||
if (!employeeList.length) return;
|
||||
|
||||
const results = employeeList.filter((item) => {
|
||||
/**
|
||||
* Applies the search filter to a given array of employee data.
|
||||
* @param {Array} data - The array of employee objects to filter.
|
||||
* @param {string} text - The search text.
|
||||
* @returns {Array} The filtered array.
|
||||
*/
|
||||
const applySearchFilter = (data, text) => {
|
||||
if (!text) {
|
||||
return data;
|
||||
}
|
||||
const lowercasedText = text.toLowerCase();
|
||||
return data.filter((item) => {
|
||||
const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||
const email = item.email ? item.email.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 (
|
||||
fullName.includes(value) ||
|
||||
email.includes(value) ||
|
||||
phoneNumber.includes(value) ||
|
||||
jobRole.includes(value) // Include jobRole in the search
|
||||
fullName.includes(lowercasedText) ||
|
||||
email.includes(lowercasedText) ||
|
||||
phoneNumber.includes(lowercasedText) ||
|
||||
jobRole.includes(lowercasedText)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
setFilteredData(results);
|
||||
const handleSearch = (e) => {
|
||||
const value = e.target.value;
|
||||
setSearchText(value);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
|
||||
if (!loading && Array.isArray(employees)) {
|
||||
// Sort by full name (firstName + lastName)
|
||||
const sorted = [...employees].sort((a, b) => {
|
||||
const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || ""
|
||||
}`.toLowerCase();
|
||||
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
|
||||
}`.toLowerCase();
|
||||
const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase();
|
||||
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
});
|
||||
|
||||
setEmployeeList(sorted);
|
||||
setFilteredData(sorted);
|
||||
}
|
||||
}, [loading, employees, selectedProject, showAllEmployees]); // Add showAllEmployees to dependencies
|
||||
const results = applySearchFilter(sorted, searchText);
|
||||
setFilteredData(results);
|
||||
|
||||
const displayData = searchText ? filteredData : employeeList;
|
||||
} else if (!loading && !employees) {
|
||||
setEmployeeList([]);
|
||||
setFilteredData([]);
|
||||
}
|
||||
}, [loading, employees, showAllEmployees, searchText, selectedProject]);
|
||||
const displayData = filteredData;
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
const currentItems = Array.isArray(displayData)
|
||||
@ -117,11 +123,11 @@ const EmployeeList = () => {
|
||||
modalElement.classList.remove("show");
|
||||
modalElement.style.display = "none";
|
||||
document.body.classList.remove("modal-open");
|
||||
document.querySelector(".modal-backdrop").remove();
|
||||
document.querySelector(".modal-backdrop")?.remove(); // Use optional chaining for safety
|
||||
}
|
||||
setShowModal(false);
|
||||
clearCacheKey("employeeProfile");
|
||||
recallEmployeeData(showInactive);
|
||||
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
|
||||
};
|
||||
const handleShow = () => setShowModal(true);
|
||||
const handleClose = () => setShowModal(false);
|
||||
@ -135,8 +141,8 @@ const EmployeeList = () => {
|
||||
clearCacheKey("allEmployeeList");
|
||||
clearCacheKey("allInactiveEmployeeList");
|
||||
clearCacheKey("employeeProfile");
|
||||
setEmployeeList([]);
|
||||
recallEmployeeData(showInactive);
|
||||
// Recall data based on current filter states after deletion to refresh the table
|
||||
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProject);
|
||||
setemployeeLodaing(false);
|
||||
setIsDeleteModalOpen(false);
|
||||
})
|
||||
@ -185,15 +191,15 @@ const EmployeeList = () => {
|
||||
|
||||
const handleToggle = (e) => {
|
||||
setShowInactive(e.target.checked);
|
||||
recallEmployeeData(e.target.checked);
|
||||
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProject);
|
||||
};
|
||||
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false)
|
||||
setShowAllEmployees( isChecked );
|
||||
setShowInactive(false);
|
||||
setShowAllEmployees(isChecked);
|
||||
|
||||
recallEmployeeData(showInactive, isChecked ? null : selectedProject);
|
||||
recallEmployeeData(false, isChecked ? null : selectedProject);
|
||||
};
|
||||
|
||||
const handleEmployeeModel = (id) => {
|
||||
@ -202,7 +208,6 @@ const EmployeeList = () => {
|
||||
};
|
||||
|
||||
const handleOpenDelete = (employee) => {
|
||||
console.log(employee);
|
||||
setSelectedEmpFordelete(employee);
|
||||
setIsDeleteModalOpen(true);
|
||||
};
|
||||
@ -210,10 +215,9 @@ const EmployeeList = () => {
|
||||
const handleProjectSelection = (e) => {
|
||||
const newProjectId = e.target.value;
|
||||
setSelectedProject(newProjectId);
|
||||
if (newProjectId) {
|
||||
setShowAllEmployees(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedProject(selectedProjectId || "");
|
||||
}, [selectedProjectId]);
|
||||
@ -324,7 +328,7 @@ const EmployeeList = () => {
|
||||
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<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">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
@ -334,6 +338,8 @@ const EmployeeList = () => {
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search User"
|
||||
aria-controls="DataTables_Table_0"
|
||||
// The 'disabled' attribute is intentionally removed here
|
||||
// to keep the search box always active as requested.
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@ -373,7 +379,7 @@ const EmployeeList = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Add Employee */}
|
||||
{/* Add Employee Button */}
|
||||
{Manage_Employee && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
@ -387,7 +393,6 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
@ -482,7 +487,17 @@ const EmployeeList = () => {
|
||||
</td>
|
||||
</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>
|
||||
<td
|
||||
colSpan={8}
|
||||
@ -491,23 +506,10 @@ const EmployeeList = () => {
|
||||
No Data Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!loading &&
|
||||
employeeList &&
|
||||
currentItems.length === 0 &&
|
||||
employeeList.length !== 0 && (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{currentItems &&
|
||||
!loading &&
|
||||
currentItems.map((item) => (
|
||||
{/* Render current items */}
|
||||
{currentItems && !loading && currentItems.map((item) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
@ -536,7 +538,6 @@ const EmployeeList = () => {
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
@ -562,20 +563,21 @@ const EmployeeList = () => {
|
||||
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
{/* 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 && (
|
||||
@ -684,7 +686,6 @@ const EmployeeList = () => {
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user