diff --git a/src/components/AddManagerModal/addManagerModal.tsx b/src/components/AddManagerModal/addManagerModal.tsx index aac1da3..4cca560 100644 --- a/src/components/AddManagerModal/addManagerModal.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -8,7 +8,6 @@ import { InputAdornment, Select, MenuItem, - InputLabel, FormControl, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; @@ -21,12 +20,7 @@ import { RootState } from "../../redux/reducers.ts"; import { stationList } from "../../redux/slices/stationSlice.ts"; import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx"; -export default function AddManagerModal({ - open, - handleClose, - handleAddManager, - // Assume the stations prop contains a list of station objects with 'id' and 'name' -}) { +export default function AddManagerModal({ open, handleClose }) { const dispatch = useDispatch(); const { control, @@ -34,7 +28,10 @@ export default function AddManagerModal({ handleSubmit, formState: { errors }, reset, - } = useForm(); + clearErrors, + } = useForm({ + mode: "onChange", // Trigger validation on change for real-time feedback + }); const [showPassword, setShowPassword] = useState(false); const stations = useSelector( (state: RootState) => state?.stationReducer.stations @@ -46,7 +43,6 @@ export default function AddManagerModal({ // Handle form submission const onSubmit = async (data: any) => { - // Retrieve the stationId based on the stationName selected const selectedStation = stations.find( (station) => station.name === data.stationName ); @@ -55,22 +51,29 @@ export default function AddManagerModal({ email: data.email, phone: data.phone, password: data.password, - stationId: selectedStation?.id, // Send stationId here + stationId: selectedStation?.id, }; try { - // Dispatch the addManager action await dispatch(addManager(managerData)); dispatch(managerList()); - handleClose(); // Close modal after successful addition - reset(); // Reset form fields + clearErrors(); // Clear errors on successful submission + reset(); // Reset form fields on successful submission + handleClose(); // Close modal } catch (error) { console.error("Error adding manager:", error); } }; + // Handle modal close, clearing errors and resetting form + const handleModalClose = () => { + clearErrors(); // Clear errors when closing via close icon + reset(); // Reset form fields when closing via close icon + handleClose(); // Close modal + }; + const togglePasswordVisibility = (e: React.MouseEvent) => { - e.preventDefault(); // Prevent focus loss + e.preventDefault(); setShowPassword((prev) => !prev); }; @@ -79,9 +82,9 @@ export default function AddManagerModal({ open={open} onClose={(e, reason) => { if (reason === "backdropClick") { - return; + return; // Prevent closing on backdrop click } - handleClose(); // Close modal when clicking cross or cancel + handleModalClose(); }} aria-labelledby="add-manager-modal" > @@ -92,7 +95,7 @@ export default function AddManagerModal({ left: "50%", transform: "translate(-50%, -50%)", width: 400, - bgcolor: "background.paper", + bgcolor: "#000000", boxShadow: 24, p: 3, borderRadius: 2, @@ -106,10 +109,15 @@ export default function AddManagerModal({ alignItems: "center", }} > - + Add Manager - + @@ -122,7 +130,11 @@ export default function AddManagerModal({ {/* Manager Name */} - + Manager Name - + Select Station - + field.onChange(e.target.value) + } // Update form state + value={field.value || ""} // Ensure controlled value + sx={{ marginTop: 1 }} + displayEmpty + renderValue={(selected) => { + if (!selected) { + return ( + + Choose Station + + ); + } + return selected; + }} + MenuProps={{ + PaperProps: { + style: { + maxHeight: 224, + }, + }, + }} + > + {Array.isArray(stations) && + stations.length > 0 ? ( + stations.map((station) => ( + + {station.name} + + )) + ) : ( + + No stations available + + )} + )} - + /> {errors.stationName && ( {/* Email */} - + Email @@ -251,7 +281,11 @@ export default function AddManagerModal({ {/* Password */} - + Password - + Phone Number 14) { return "Phone number must be at most 14 digits"; } - return true; // No errors + return true; }, })} /> @@ -361,12 +399,12 @@ export default function AddManagerModal({ - )} - - {/* Modals */} {deleteModal && ( handleDeleteButton(selectedRow?.id)} diff --git a/src/components/EditManagerModal/editManagerModal.tsx b/src/components/EditManagerModal/editManagerModal.tsx index c7b5d7a..1c28b13 100644 --- a/src/components/EditManagerModal/editManagerModal.tsx +++ b/src/components/EditManagerModal/editManagerModal.tsx @@ -10,7 +10,7 @@ import CloseIcon from "@mui/icons-material/Close"; import { useForm, Controller } from "react-hook-form"; import { useDispatch } from "react-redux"; import { managerList, updateManager } from "../../redux/slices/managerSlice.ts"; // Import the updateManager action -import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";// Custom styled components +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Custom styled components import { AppDispatch } from "../../redux/store/store.ts"; interface EditManagerModalProps { @@ -114,7 +114,7 @@ const EditManagerModal: React.FC = ({ left: "50%", transform: "translate(-50%, -50%)", width: 400, - bgcolor: "background.paper", + bgcolor: "#000000", boxShadow: 24, p: 3, borderRadius: 2, @@ -128,7 +128,7 @@ const EditManagerModal: React.FC = ({ alignItems: "center", }} > - + Edit Manager @@ -143,7 +143,12 @@ const EditManagerModal: React.FC = ({ {/* Manager Name */} - + Manager Name = ({ placeholder="Enter Manager Name" size="small" sx={{ marginTop: 1 }} - error={!!errors.name} helperText={errors.name?.message} /> @@ -182,13 +186,25 @@ const EditManagerModal: React.FC = ({ {/* Email */} - + Email ( = ({ placeholder="Enter Email" size="small" sx={{ marginTop: 1 }} - error={!!errors.email} helperText={errors.email?.message} /> @@ -206,7 +221,12 @@ const EditManagerModal: React.FC = ({ {/* Phone Number */} - + Phone Number = ({ placeholder="Enter Phone Number" size="small" sx={{ marginTop: 1 }} - error={!!errors.phone} helperText={errors.phone?.message} /> @@ -250,11 +269,11 @@ const EditManagerModal: React.FC = ({