From 75d4ca176df693f143c8d7a65fe98aed84879e20 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Fri, 25 Jul 2025 11:52:30 +0530 Subject: [PATCH] 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. --- src/components/Project/AssignTask.jsx | 328 ++++++++++++++++++++------ 1 file changed, 251 insertions(+), 77 deletions(-) diff --git a/src/components/Project/AssignTask.jsx b/src/components/Project/AssignTask.jsx index 949e4354..ad3baf7c 100644 --- a/src/components/Project/AssignTask.jsx +++ b/src/components/Project/AssignTask.jsx @@ -51,6 +51,9 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { // State for search term const [searchTerm, setSearchTerm] = useState(""); + // State for search term + const [searchTerm, setSearchTerm] = useState(""); + useEffect(() => { if (typeof bootstrap !== "undefined") { if (infoRef.current) { @@ -86,6 +89,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { const { loading } = useMaster(); const { data: jobRoleData } = useMaster(); + // Changed to an array to hold multiple selected roles + const [selectedRoles, setSelectedRoles] = useState(["all"]); // Changed to an array to hold multiple selected roles const [selectedRoles, setSelectedRoles] = useState(["all"]); const [displayedSelection, setDisplayedSelection] = useState(""); @@ -127,12 +132,46 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { dispatch(changeMaster("Job Role")); // Initial state should reflect "All Roles" selected setSelectedRoles(["all"]); + // Initial state should reflect "All Roles" selected + setSelectedRoles(["all"]); }, [dispatch]); - const handleRoleChange = (event) => { - setSelectedRole(event.target.value); + // Modified handleRoleChange to handle multiple selections + 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) => { setSearchTerm(event.target.value); }; @@ -140,19 +179,33 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { // 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; - + selectedRoles.includes("all") || selectedRoles.includes(String(emp.jobRoleId)); // 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(); + 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; }); + // 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 selectedEmployeeIds = data.selectedEmployees; @@ -177,6 +230,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { onClose(); }; + return (

Assign Task

@@ -209,17 +263,81 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
- Select Team -
{displayedSelection}
- + Select Team +
+ -
    + {/* Badge */} + {selectedRolesCount > 0 && ( + + {selectedRolesCount} + + )} + + {/* Dropdown Menu */} +
      +
    • +
      + handleRoleChange(e, e.target.value)} + /> + +
      +
      • + + {jobRolesForDropdown?.map((role) => ( +
    • +
      + handleRoleChange(e, e.target.value)} + /> + +
      +
      • + ))} +
    +
+
  • { All Roles
    +
    + + handleRoleChange(e, e.target.value) + } + /> + +
    • + {jobRolesForDropdown?.map((role) => ( +
  • +
    + + handleRoleChange(e, e.target.value) + } + /> + +
    {jobRolesForDropdown?.map((role) => (
  • @@ -263,19 +419,33 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
    • ))}
- {/* Search Field for Employees - Moved inline and pushed to the right */}
+
+ {selectedRoles?.length > 0 && ( +
+ {employeeLoading ? ( +
+

Loading employees...

+
+ ) : filteredEmployees?.length > 0 ? ( + filteredEmployees.map((emp) => { + const jobRole = jobRoleData?.find( + (role) => role?.id === emp?.jobRoleId + );
{ (role) => role?.id === emp?.jobRoleId ); - return ( -
-
- ( - { - handleCheckboxChange(e, emp); - }} - /> + return ( +
+
+ ( + { + handleCheckboxChange(e, emp); + }} + /> + )} + /> +
+

+ {emp.firstName} {emp.lastName} +

+ + {loading ? ( + + + + ) : ( + jobRole?.name || "Unknown Role" )} - /> -
-

- {emp.firstName} {emp.lastName} -

- - {loading ? ( - - - - ) : ( - jobRole?.name || "Unknown Role" - )} - -
+
- ); - }) - ) : ( -
-

- No employees found for the selected role or search term. -

-
- )} -
- )} -
+
+ ); + }) + ) : ( +
+

+ No employees found for the selected role(s). +

+
+ )} +
+ )}
{ className="bi bi-info-circle" viewBox="0 0 16 16" > - +
@@ -477,11 +646,15 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { id="defaultFormControlInput" aria-describedby="defaultFormControlHelp" /> + + { + assignData?.workItem?.activityMaster { assignData?.workItem?.activityMaster ?.unitOfMeasurement } + }
{ @@ -550,6 +724,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { {...field} className="form-control" id="descriptionTextarea" + id="descriptionTextarea" rows="2" /> )} @@ -584,5 +759,4 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
); }; - -export default AssignTask; +export default AssignTask; \ No newline at end of file