updated message when no employees are available
,hide search and "Assign to Project" button while loading, show loader
This commit is contained in:
parent
4b9f5d737a
commit
4055a4532c
@ -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"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user