From 4055a4532cc128eca1c8e2a31635bdd16a499540 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Sun, 4 May 2025 19:03:55 +0530
Subject: [PATCH] updated message when no employees are available ,hide search
 and "Assign to Project" button while loading, show loader

---
 src/components/Project/MapUsers.jsx | 61 ++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/Project/MapUsers.jsx b/src/components/Project/MapUsers.jsx
index 7d31b626..39624dfc 100644
--- a/src/components/Project/MapUsers.jsx
+++ b/src/components/Project/MapUsers.jsx
@@ -11,10 +11,12 @@ const MapUsers = ({
   empJobRoles,
   onSubmit,
   allocation,
+  assignedLoading,
+  setAssignedLoading,
 }) => {
-  const { employeesList, loading:employeeLoading, error } = useAllEmployees();
+  const { employeesList, loading: employeeLoading, error } = useAllEmployees();
   const [selectedEmployees, setSelectedEmployees] = useState([]);
-  const [searchText, setSearchText] = useState("");
+  const [ searchText, setSearchText ] = useState( "" );
 
   const handleAllocationData = Array.isArray(allocation) ? allocation : [];
 
@@ -94,17 +96,19 @@ const MapUsers = ({
     });
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = () =>
+  {
+    setAssignedLoading(true)
     const selected = selectedEmployees
       .filter((emp) => emp.isSelected)
       .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
     if (selected.length > 0) {
-      console.log(selected);
       onSubmit(selected);
       setSelectedEmployees([]);
     } else {
       showToast("Please select Employee", "error");
     }
+
   };
   return (
     <>
@@ -112,14 +116,17 @@ const MapUsers = ({
         <div className="modal-content">
           <div className="modal-header">
             <div className="md-2 mb-1">
-              <div className="input-group">
-                <input
-                  type="search"
-                  className="form-control form-control-sm"
-                  placeholder="Search employees.."
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                />
-              </div>
+              {(filteredData.length > 0 ||
+                  allocationEmployeesData.length > 0)&& (
+                  <div className="input-group">
+                    <input
+                      type="search"
+                      className="form-control form-control-sm"
+                      placeholder="Search employees..."
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+                  </div>
+                )}
             </div>
           </div>
           <div className="modal-body p-sm-4 p-0">
@@ -131,19 +138,22 @@ const MapUsers = ({
             >
               <thead></thead>
               <tbody>
-                {(employeeLoading && allocationEmployeesData.length === 0 ) && <p>Loading...</p>}
+                {employeeLoading && allocationEmployeesData.length === 0 && (
+                  <p>Loading...</p>
+                )}
 
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
-                  filteredData.length === 0 && <p>No employees available.</p>}
-
-                {!employeeLoading &&
-                  allocationEmployeesData.length > 0 &&
                   filteredData.length === 0 && (
-                    <p>No matching employees found.</p>
+                    <p>All employee assigned to Project.</p>
                   )}
 
-                {filteredData.length > 0 &&
+                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
+                  <p>No matching employees found.</p>
+                )}
+
+                {(filteredData.length > 0 ||
+                  allocationEmployeesData.length > 0) &&
                   filteredData.map((emp) => (
                     <AssignEmployeeTable
                       key={emp.id}
@@ -158,9 +168,16 @@ const MapUsers = ({
             </table>
           </div>
           <div className="modal-footer">
-            <button className="btn btn-sm btn-success" onClick={handleSubmit}>
-              Assign to Project
-            </button>
+            {(filteredData.length > 0 ||
+                  allocationEmployeesData.length > 0) && (
+                <button
+                  className="btn btn-sm btn-success"
+                  onClick={handleSubmit}
+                >
+                  {assignedLoading ? "Please Wait...":"Assign to Project"}
+                </button>
+              )}
+
             <button
               type="button"
               className="btn btn-sm btn-secondary"