From ac101e1e81111d7a8d74c08787b235ceb9c1a87d Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Wed, 23 Jul 2025 15:45:02 +0530 Subject: [PATCH] Adding Search functionality in Assign Task popup when user can search employee by its name and jobroles. --- src/components/Project/AssignTask.jsx | 262 +++++++------------------- 1 file changed, 73 insertions(+), 189 deletions(-) diff --git a/src/components/Project/AssignTask.jsx b/src/components/Project/AssignTask.jsx index c5d42da0..bf870868 100644 --- a/src/components/Project/AssignTask.jsx +++ b/src/components/Project/AssignTask.jsx @@ -51,9 +51,6 @@ 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) { @@ -132,42 +129,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { setSelectedRoles(["all"]); }, [dispatch]); - // 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]; - } - }); - } + const handleRoleChange = (event) => { + setSelectedRole(event.target.value); }; - 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); }; @@ -175,33 +140,19 @@ 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 = - 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 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; }); - // 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; @@ -226,7 +177,6 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { onClose(); }; - return (

Assign Task

@@ -259,81 +209,17 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
- Select Team -
- - - {/* Badge */} - {selectedRolesCount > 0 && ( - - {selectedRolesCount} - - )} - - {/* Dropdown Menu */} -
    -
  • -
    - handleRoleChange(e, e.target.value)} - /> - -
    -
    • - - {jobRolesForDropdown?.map((role) => ( -
  • -
    - handleRoleChange(e, e.target.value)} - /> - -
    -
    • - ))} -
-
-
    Select Team +
    {displayedSelection}
    + + +
    • {
      • ))}
    + {/* Search Field for Employees - Moved inline and pushed to the right */}
@@ -405,62 +292,63 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => { (role) => role?.id === emp?.jobRoleId ); - return ( -
-
- ( - { - handleCheckboxChange(e, emp); - }} - /> - )} - /> -
-

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

- - {loading ? ( - - - - ) : ( - jobRole?.name || "Unknown Role" + return ( +
+
+ ( + { + handleCheckboxChange(e, emp); + }} + /> )} - + /> +
+

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

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

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

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

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

+
+ )} +
+ )} +
{ id="defaultFormControlInput" aria-describedby="defaultFormControlHelp" /> - - { - assignData?.workItem?.activityMaster { assignData?.workItem?.activityMaster ?.unitOfMeasurement } - }