admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 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
parent f040528821
commit ac101e1e81
1 changed files with 73 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,9 +51,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
// State for search term // State for search term
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
// State for search term
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => { useEffect(() => {
if (typeof bootstrap !== "undefined") { if (typeof bootstrap !== "undefined") {
if (infoRef.current) { if (infoRef.current) {
@ -132,42 +129,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
setSelectedRoles(["all"]); setSelectedRoles(["all"]);
}, [dispatch]); }, [dispatch]);
// Modified handleRoleChange to handle multiple selections const handleRoleChange = (event) => {
const handleRoleChange = (event, roleId) => { setSelectedRole(event.target.value);
// If 'all' is selected, clear other selections
if (roleId === "all") {
setSelectedRoles(["all"]);
} else {
setSelectedRoles((prevSelectedRoles) => {
// If "all" was previously selected, remove it
const newRoles = prevSelectedRoles.filter((role) => role !== "all");
if (newRoles.includes(roleId)) {
// If role is already selected, unselect it
return newRoles.filter((id) => id !== roleId);
} else {
// If role is not selected, add it
return [...newRoles, roleId];
}
});
}
}; };
useEffect(() => {
// Update displayedSelection based on selectedRoles
if (selectedRoles.includes("all")) {
setDisplayedSelection("All Roles");
} else if (selectedRoles.length > 0) {
const selectedRoleNames = selectedRoles.map(roleId => {
const role = jobRoleData?.find(r => String(r.id) === roleId);
return role ? role.name : '';
}).filter(Boolean); // Filter out empty strings for roles not found
setDisplayedSelection(selectedRoleNames.join(', '));
} else {
setDisplayedSelection("Select Roles");
}
}, [selectedRoles, jobRoleData]);
const handleSearchChange = (event) => { const handleSearchChange = (event) => {
setSearchTerm(event.target.value); setSearchTerm(event.target.value);
}; };
@ -175,33 +140,19 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
// Filter employees first by role, then by search term AND job role name // Filter employees first by role, then by search term AND job role name
const filteredEmployees = employees?.filter((emp) => { const filteredEmployees = employees?.filter((emp) => {
const matchesRole = const matchesRole =
selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId)); selectedRole === "all" || String(emp.jobRoleId || "") === selectedRole;
// Convert both first and last names and job role name to lowercase for case-insensitive matching // Convert both first and last names and job role name to lowercase for case-insensitive matching
const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase(); const fullName = `${emp.firstName} ${emp.lastName}`.toLowerCase();
const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || ""; const jobRoleName = jobRoleData?.find((role) => role.id === emp.jobRoleId)?.name?.toLowerCase() || "";
const searchLower = searchTerm.toLowerCase(); const searchLower = searchTerm.toLowerCase();
// Check if the full name OR job role name includes the search term // Check if the full name OR job role name includes the search term
const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower); const matchesSearch = fullName.includes(searchLower) || jobRoleName.includes(searchLower);
return matchesRole && matchesSearch; return matchesRole && matchesSearch;
}); });
// Determine unique job role IDs from the filtered employees (for dropdown options)
const uniqueJobRoleIdsInFilteredEmployees = new Set(
employees?.map(emp => emp.jobRoleId).filter(Boolean)
);
// Filter jobRoleData to only include roles present in the uniqueJobRoleIdsInFilteredEmployees
const jobRolesForDropdown = jobRoleData?.filter(role =>
uniqueJobRoleIdsInFilteredEmployees.has(role.id)
);
// Calculate the count of selected roles for display
const selectedRolesCount = selectedRoles.includes("all")
? 0 // "All Roles" doesn't contribute to a specific count
: selectedRoles.length;
const onSubmit = (data) => { const onSubmit = (data) => {
const selectedEmployeeIds = data.selectedEmployees; const selectedEmployeeIds = data.selectedEmployees;
@ -226,7 +177,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
onClose(); onClose();
}; };
return ( return (
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap"> <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> <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
@ -259,81 +209,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<div className="col-12"> <div className="col-12">
<div className="form-text text-start"> <div className="form-text text-start">
<div className="d-flex align-items-center form-text fs-7"> <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="dropdown position-relative d-inline-block"> <div className="me-2">{displayedSelection}</div>
<a <a
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0 className="dropdown-toggle hide-arrow cursor-pointer"
? "text-secondary" data-bs-toggle="dropdown"
: "text-primary" aria-expanded="false"
}`}
data-bs-toggle="dropdown"
role="button"
aria-expanded="false"
>
<i className="bx bx-slider-alt ms-2"></i>
</a>
{/* Badge */}
{selectedRolesCount > 0 && (
<span
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
style={{
fontSize: "0.65rem",
minWidth: "18px",
height: "18px",
padding: "0",
lineHeight: "18px",
textAlign: "center",
zIndex: 10,
}}
>
{selectedRolesCount}
</span>
)}
{/* Dropdown Menu */}
<ul
className="dropdown-menu p-2 text-capitalize "
>
<li key="all">
<div className="form-check dropdown-item py-0">
<input
className="form-check-input"
type="checkbox"
id="checkboxAllRoles"
value="all"
checked={selectedRoles.includes("all")}
onChange={(e) => handleRoleChange(e, e.target.value)}
/>
<label className="form-check-label ms-2" htmlFor="checkboxAllRoles">
All Roles
</label>
</div>
</li>
{jobRolesForDropdown?.map((role) => (
<li key={role.id}>
<div className="form-check dropdown-item py-0">
<input
className="form-check-input"
type="checkbox"
id={`checkboxRole-${role.id}`}
value={role.id}
checked={selectedRoles.includes(String(role.id))}
onChange={(e) => handleRoleChange(e, e.target.value)}
/>
<label className="form-check-label ms-2" htmlFor={`checkboxRole-${role.id}`}>
{role.name}
</label>
</div>
</li>
))}
</ul>
</div>
<ul
className="dropdown-menu p-2 text-capitalize"
style={{ maxHeight: "300px", overflowY: "auto" }}
> >
<i className="bx bx-filter bx-lg text-primary"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize">
<li key="all"> <li key="all">
<div className="form-check dropdown-item py-0"> <div className="form-check dropdown-item py-0">
<input <input
@ -377,13 +263,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</li> </li>
))} ))}
</ul> </ul>
{/* Search Field for Employees - Moved inline and pushed to the right */}
<input <input
type="text" type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2" className="form-control form-control-sm ms-auto mb-2 mt-2" // Changed ms-3 to ms-auto
placeholder="Search employees or roles..." placeholder="Search employees or roles..."
value={searchTerm} value={searchTerm}
onChange={handleSearchChange} onChange={handleSearchChange}
style={{ maxWidth: '200px' }} style={{ maxWidth: '200px' }} // Optional: Limit search input width
/> />
</div> </div>
</div> </div>
@ -405,62 +292,63 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
(role) => role?.id === emp?.jobRoleId (role) => role?.id === emp?.jobRoleId
); );
return ( return (
<div <div
key={emp.id} key={emp.id}
className="col-6 col-md-4 col-lg-3 mb-3" className="col-6 col-md-4 col-lg-3 mb-3"
> >
<div className="form-check d-flex align-items-start"> <div className="form-check d-flex align-items-start">
<Controller <Controller
name="selectedEmployees" name="selectedEmployees"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<input <input
{...field} {...field}
className="form-check-input me-1 mt-1" className="form-check-input me-1 mt-1"
type="checkbox" type="checkbox"
id={`employee-${emp?.id}`} id={`employee-${emp?.id}`}
value={emp.id} value={emp.id}
checked={field.value?.includes(emp.id)} checked={field.value?.includes(emp.id)}
onChange={(e) => { onChange={(e) => {
handleCheckboxChange(e, emp); handleCheckboxChange(e, emp);
}} }}
/> />
)}
/>
<div className="flex-grow-1">
<p
className="mb-0"
style={{ fontSize: "13px" }}
>
{emp.firstName} {emp.lastName}
</p>
<small
className="text-muted"
style={{ fontSize: "11px" }}
>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
</span>
) : (
jobRole?.name || "Unknown Role"
)} )}
</small> />
<div className="flex-grow-1">
<p
className="mb-0"
style={{ fontSize: "13px" }}
>
{emp.firstName} {emp.lastName}
</p>
<small
className="text-muted"
style={{ fontSize: "11px" }}
>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
</span>
) : (
jobRole?.name || "Unknown Role"
)}
</small>
</div>
</div> </div>
</div> </div>
</div> );
); })
}) ) : (
) : ( <div className="col-12">
<div className="col-12"> <p className="text-center">
<p className="text-center"> No employees found for the selected role or search term.
No employees found for the selected role(s). </p>
</p> </div>
</div> )}
)} </div>
</div> )}
)} </div>
</div> </div>
<div <div
@ -589,15 +477,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
id="defaultFormControlInput" id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp" aria-describedby="defaultFormControlHelp"
/> />
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
<u> {
assignData?.workItem?.activityMaster
<span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}> <span style={{ paddingLeft: "6px", whiteSpace: "nowrap" }}>
<u> { <u> {
assignData?.workItem?.activityMaster assignData?.workItem?.activityMaster
?.unitOfMeasurement ?.unitOfMeasurement
}</u> }</u>
}</u>
</span> </span>
<div <div
style={{ style={{