marco.pms.web/src/components/Directory/AssignedBucket.jsx

72 lines
2.1 KiB
JavaScript

import { useState, useEffect } from "react";
import EmployeeList from "./EmployeeList";
import { useAllEmployees } from "../../hooks/useEmployees";
import showToast from "../../services/toastService";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { useAssignEmpToBucket } from "../../hooks/useDirectory";
const AssignedBucket = ({ selectedBucket, handleClose }) => {
const { employeesList } = useAllEmployees(false);
const [selectedEmployees, setSelectedEmployees] = useState([]);
useEffect(() => {
if (selectedBucket) {
const preselected = employeesList
.filter((emp) => selectedBucket?.employeeIds?.includes(emp.employeeId))
.map((emp) => ({ ...emp, isActive: true }));
setSelectedEmployees(preselected);
}
}, [selectedBucket, employeesList]);
const { mutate: AssignEmployee, isPending } = useAssignEmpToBucket(() =>{
setSelectedEmployees([])
handleClose()
}
);
const handleSubmit = async (e) => {
e.preventDefault();
const existingEmployeeIds = selectedBucket?.employeeIds || [];
const employeesToUpdate = selectedEmployees.filter((emp) => {
const isExisting = existingEmployeeIds.includes(emp.employeeId);
return (!isExisting && emp.isActive) || (isExisting && !emp.isActive);
});
if (employeesToUpdate.length === 0) {
showToast("No changes to update", "info");
return;
}
AssignEmployee({
bucketId: selectedBucket.id,
EmployeePayload: employeesToUpdate.map((emp) => ({
employeeId: emp.employeeId,
isActive: emp.isActive,
})),
});
};
return (
<form onSubmit={handleSubmit}>
<EmployeeList
employees={employeesList}
bucket={selectedBucket}
selectedEmployees={selectedEmployees}
onChange={setSelectedEmployees}
/>
<div className="mt-3 d-flex justify-content-end gap-3">
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending ? "Please Wait...":"Assign"}
</button>
</div>
</form>
);
};
export default AssignedBucket;