updated message when no employees are available

,hide search and "Assign to Project" button while loading, show loader
This commit is contained in:
Pramod Mahajan 2025-05-04 19:03:55 +05:30
parent 4b9f5d737a
commit 4055a4532c

View File

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