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

Search input works for both name and job role filtering. Dropdown correctly shows checkboxes and supports multi-selection. Updated icon appears, and filtering updates the employee list as expected.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-25 11:52:30 +05:30 committed by pramod mahajan
parent 32434da93f
commit 52ef65cce0
1 changed files with 242 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,7 +86,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const { loading } = useMaster(); const { loading } = useMaster();
const { data: jobRoleData } = useMaster(); const { data: jobRoleData } = useMaster();
const [selectedRole, setSelectedRole] = useState("all"); // Changed to an array to hold multiple selected roles
const [selectedRoles, setSelectedRoles] = useState(["all"]);
const [displayedSelection, setDisplayedSelection] = useState(""); const [displayedSelection, setDisplayedSelection] = useState("");
const { const {
handleSubmit, handleSubmit,
@ -124,14 +125,46 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
useEffect(() => { useEffect(() => {
dispatch(changeMaster("Job Role")); dispatch(changeMaster("Job Role"));
// Initial state should reflect "All Roles" selected
return () => setSelectedRole("all"); setSelectedRoles(["all"]);
}, [dispatch]); }, [dispatch]);
const handleRoleChange = (event) => { // Modified handleRoleChange to handle multiple selections
setSelectedRole(event.target.value); const handleRoleChange = (event, roleId) => {
// 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);
}; };
@ -139,19 +172,33 @@ 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 =
selectedRole === "all" || String(emp.jobRoleId || "") === selectedRole; selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId));
// 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 searchLower = searchTerm.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 // 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;
@ -208,128 +255,208 @@ 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 me-2">Select Team</span> <span className="text-dark">Select Team</span>
<div className="me-2">{displayedSelection}</div> <div className="dropdown position-relative d-inline-block">
<a <a
className="dropdown-toggle hide-arrow cursor-pointer" className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
data-bs-toggle="dropdown" ? "text-secondary"
aria-expanded="false" : "text-primary"
> }`}
<i className="bx bx-filter bx-lg text-primary"></i> data-bs-toggle="dropdown"
</a> role="button"
aria-expanded="false"
>
<i className="bx bx-slider-alt ms-2"></i>
</a>
<ul className="dropdown-menu p-2 text-capitalize"> {/* Badge */}
<li key="all"> {selectedRolesCount > 0 && (
<button <span
type="button" className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white"
className="dropdown-item py-1" style={{
onClick={() => fontSize: "0.65rem",
handleRoleChange({ minWidth: "18px",
target: { value: "all" }, height: "18px",
}) padding: "0",
} lineHeight: "18px",
textAlign: "center",
zIndex: 10,
}}
> >
All Roles {selectedRolesCount}
</button> </span>
</li> )}
{jobRoleData?.map((user) => (
<li key={user.id}> {/* Dropdown Menu */}
<button <ul
type="button" className="dropdown-menu p-2 text-capitalize "
className="dropdown-item py-1" >
value={user.id} <li key="all">
onClick={handleRoleChange} <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" }}
>
<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"
> >
{user.name} All Roles
</button> </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> </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" // Changed ms-3 to ms-auto className="form-control form-control-sm ms-auto mb-2 mt-2"
placeholder="Search employees or roles..." placeholder="Search employees or roles..."
value={searchTerm} value={searchTerm}
onChange={handleSearchChange} onChange={handleSearchChange}
style={{ maxWidth: '200px' }} // Optional: Limit search input width style={{ maxWidth: '200px' }}
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div
className="col-12 mt-2"
style={{ maxHeight: "280px", overflowY: "auto", overflowX: "hidden" }}
>
{selectedRoles?.length > 0 && (
<div className="row">
{employeeLoading ? (
<div className="col-12">
<p className="text-center">Loading employees...</p>
</div>
) : filteredEmployees?.length > 0 ? (
filteredEmployees.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
<div className="row"> return (
<div className="col-12 h-sm-25 overflow-auto mt-2"> <div
{selectedRole !== "" && ( key={emp.id}
<div className="row"> className="col-6 col-md-4 col-lg-3 mb-3"
{employeeLoading ? ( >
<div className="col-12"> <div className="form-check d-flex align-items-start">
<p className="text-center">Loading employees...</p> <Controller
</div> name="selectedEmployees"
) : filteredEmployees?.length > 0 ? ( control={control}
filteredEmployees.map((emp) => { render={({ field }) => (
const jobRole = jobRoleData?.find( <input
(role) => role?.id === emp?.jobRoleId {...field}
); className="form-check-input me-1 mt-1"
type="checkbox"
return ( id={`employee-${emp?.id}`}
<div value={emp.id}
key={emp.id} checked={field.value?.includes(emp.id)}
className="col-6 col-md-4 col-lg-3 mb-3" onChange={(e) => {
> handleCheckboxChange(e, emp);
<div className="form-check d-flex align-items-start"> }}
<Controller />
name="selectedEmployees" )}
control={control} />
render={({ field }) => ( <div className="flex-grow-1">
<input <p
{...field} className="mb-0"
className="form-check-input me-1 mt-1" style={{ fontSize: "13px" }}
type="checkbox" >
id={`employee-${emp?.id}`} {emp.firstName} {emp.lastName}
value={emp.id} </p>
checked={field.value?.includes(emp.id)} <small
onChange={(e) => { className="text-muted"
handleCheckboxChange(e, emp); 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"> ) : (
<p className="text-center"> <div className="col-12">
No employees found for the selected role or search term. <p className="text-center">
</p> No employees found for the selected role(s).
</div> </p>
)} </div>
</div> )}
)} </div>
</div> )}
</div> </div>
<div <div
@ -510,7 +637,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
className="position-absolute bg-white border p-2 rounded shadow" className="position-absolute bg-white border p-2 rounded shadow"
style={{ zIndex: 10, marginLeft: "10px" }} style={{ zIndex: 10, marginLeft: "10px" }}
> >
{/* Add your help content here */}
<p className="mb-0"> <p className="mb-0">
Enter the target value for today's task. Enter the target value for today's task.
</p> </p>
@ -520,7 +646,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<label <label
className="form-text fs-7 m-1 text-lg text-dark" className="form-text fs-7 m-1 text-lg text-dark"
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility htmlFor="descriptionTextarea"
> >
Description Description
</label> </label>
@ -531,7 +657,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<textarea <textarea
{...field} {...field}
className="form-control" className="form-control"
id="descriptionTextarea" // Changed id for better accessibility id="descriptionTextarea"
rows="2" rows="2"
/> />
)} )}
@ -541,7 +667,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
)} )}
</div> </div>
{/* Submit and Cancel buttons */}
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1"> <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
<button <button
type="submit" type="submit"
@ -568,4 +693,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
); );
}; };
export default AssignTask; export default AssignTask;