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

Adding Search functionality in Assign Task popup when user can search employee by its name and jobroles.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-23 15:45:02 +05:30 committed by pramod mahajan
parent 9f1b8f7090
commit 55625246ce
1 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Project/AssignTask.jsx
View File

@ -48,6 +48,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const infoRef = useRef(null);
const infoRef1 = useRef(null);
// State for search term
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
if (typeof bootstrap !== "undefined") {
if (infoRef.current) {
@ -129,12 +132,25 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
setSelectedRole(event.target.value);
};
const filteredEmployees =
selectedRole === "all"
? employees
: employees?.filter(
(emp) => String(emp.jobRoleId || "") === selectedRole
);
const handleSearchChange = (event) => {
setSearchTerm(event.target.value);
};
// Filter employees first by role, then by search term AND job role name
const filteredEmployees = employees?.filter((emp) => {
const matchesRole =
selectedRole === "all" || String(emp.jobRoleId || "") === selectedRole;
// Convert both first and last names and job role name to lowercase for case-insensitive matching
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
const searchLower = searchTerm.toLowerCase();
// Check if the full name OR job role name includes the search term
const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
return matchesRole && matchesSearch;
});
const onSubmit = (data) => {
const selectedEmployeeIds = data.selectedEmployees;
@ -159,6 +175,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
reset();
onClose();
};
return (
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
@ -191,7 +208,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<div className="col-12">
<div className="form-text text-start">
<div className="d-flex align-items-center form-text fs-7">
<span className="text-dark">Select Team</span>
<span className="text-dark me-2">Select Team</span>
<div className="me-2">{displayedSelection}</div>
<a
className="dropdown-toggle hide-arrow cursor-pointer"
@ -228,6 +245,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</li>
))}
</ul>
{/* Search Field for Employees - Moved inline and pushed to the right */}
<input
type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2" // Changed ms-3 to ms-auto
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
style={{ maxWidth: '200px' }} // Optional: Limit search input width
/>
</div>
</div>
</div>
@ -297,7 +323,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
) : (
<div className="col-12">
<p className="text-center">
No employees found for the selected role.
No employees found for the selected role or search term.
</p>
</div>
)}
@ -432,11 +458,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
/>
<span style={{ paddingLeft: "6px" }}>
{
assignData?.workItem?.workItem?.activityMaster
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
<u> {
assignData?.workItem?.activityMaster
?.unitOfMeasurement
}
}</u>
</span>
<div
style={{
@ -542,4 +568,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
);
};
export default AssignTask;
export default AssignTask;