The search functionality in the Employees section does not work correctly after applying a filter.
This commit is contained in:
parent
8e3ac744c0
commit
33c3bb1282
@ -29,21 +29,18 @@ const EmployeeList = () => {
|
||||
const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const [showInactive, setShowInactive] = useState(false);
|
||||
const [showAllEmployees, setShowAllEmployees] = 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 [searchText, setSearchText] = useState("");
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = 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);
|
||||
}
|
||||
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,150 +506,137 @@ 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) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
{/* 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">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<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={() =>
|
||||
navigate(
|
||||
`/employee/${item.id}?for=attendance`
|
||||
)
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
<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>
|
||||
<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>
|
||||
{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>
|
||||
))}
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -684,7 +686,6 @@ const EmployeeList = () => {
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -694,4 +695,4 @@ const EmployeeList = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeList;
|
||||
export default EmployeeList;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user