596 lines
18 KiB
TypeScript
596 lines
18 KiB
TypeScript
// import React, { useEffect } from "react";
|
|
// import {
|
|
// Box,
|
|
// Button,
|
|
// Typography,
|
|
// TextField,
|
|
// Modal,
|
|
// IconButton,
|
|
// } from "@mui/material";
|
|
// import CloseIcon from "@mui/icons-material/Close";
|
|
// import { useForm, Controller } from "react-hook-form";
|
|
// import {
|
|
// CustomIconButton,
|
|
// CustomTextField,
|
|
// } from "../AddUserModel/styled.css.tsx";
|
|
|
|
// interface EditManagerModalProps {
|
|
// open: boolean;
|
|
// handleClose: () => void;
|
|
// handleUpdate: (
|
|
// id: number,
|
|
// name: string,
|
|
// email: string,
|
|
// stationName: string,
|
|
// registeredAddress: string,
|
|
// phone: string
|
|
// ) => void;
|
|
// editRow: any;
|
|
// }
|
|
|
|
// interface FormData {
|
|
// name: string;
|
|
// email: string;
|
|
// stationName: string;
|
|
// registeredAddress: string;
|
|
// phone: string;
|
|
// }
|
|
|
|
// const EditManagerModal: React.FC<EditManagerModalProps> = ({
|
|
// open,
|
|
// handleClose,
|
|
// handleUpdate,
|
|
// editRow,
|
|
// }) => {
|
|
// const {
|
|
// control,
|
|
// handleSubmit,
|
|
// formState: { errors },
|
|
// setValue,
|
|
// reset,
|
|
// } = useForm<FormData>({
|
|
// defaultValues: {
|
|
// name: "",
|
|
// stationName: "",
|
|
// email: "",
|
|
// registeredAddress: "",
|
|
// phone: "",
|
|
|
|
// },
|
|
// });
|
|
|
|
// // Populate form fields when `editRow` changes
|
|
// useEffect(() => {
|
|
// if (editRow) {
|
|
// setValue("name", editRow.name || "");
|
|
// setValue("stationName", editRow.stationName || "");
|
|
// setValue("email", editRow.email || "");
|
|
// setValue("registeredAddress", editRow.registeredAddress || "");
|
|
// setValue("phone", editRow.phone || "");
|
|
// } else {
|
|
// reset();
|
|
// }
|
|
// }, [editRow, setValue, reset]);
|
|
|
|
// const onSubmit = (data: FormData) => {
|
|
// if (editRow) {
|
|
// handleUpdate({
|
|
// id: editRow.id,
|
|
// name: data.name,
|
|
// stationName: data.stationName,
|
|
// email: data.email,
|
|
// registeredAddress: data.registeredAddress,
|
|
// phone: data.phone,
|
|
// });
|
|
|
|
// }
|
|
// handleClose();
|
|
// reset();
|
|
// };
|
|
|
|
|
|
// return (
|
|
// <Modal
|
|
// open={open}
|
|
// onClose={handleClose}
|
|
// aria-labelledby="edit-manager-modal"
|
|
// >
|
|
// <Box
|
|
// component="form"
|
|
// onSubmit={handleSubmit(onSubmit)}
|
|
// sx={{
|
|
// position: "absolute",
|
|
// top: "50%",
|
|
// left: "50%",
|
|
// transform: "translate(-50%, -50%)",
|
|
// width: 400,
|
|
// bgcolor: "background.paper",
|
|
// boxShadow: 24,
|
|
// p: 3,
|
|
// borderRadius: 2,
|
|
// }}
|
|
// >
|
|
// {/* Header */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
// }}
|
|
// >
|
|
// <Typography variant="h6" fontWeight={600}>
|
|
// {editRow ? "Edit Manager" : "Add Manager"}
|
|
// </Typography>
|
|
// <IconButton onClick={handleClose}>
|
|
// <CloseIcon />
|
|
// </IconButton>
|
|
// </Box>
|
|
|
|
// {/* Horizontal Line */}
|
|
// <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
|
|
|
|
// {/* Input Fields */}
|
|
// <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
// {/* First Row - Two Inputs */}
|
|
// <Box sx={{ display: "flex", gap: 2 }}>
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// flexDirection: "column",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// variant="body2"
|
|
// fontWeight={500}
|
|
// mb={0.5}
|
|
// >
|
|
// Manager Name
|
|
// </Typography>
|
|
// <Controller
|
|
// name="name"
|
|
// control={control}
|
|
// rules={{ required: "Manager Name is required" }}
|
|
// render={({ field }) => (
|
|
// <TextField
|
|
// {...field}
|
|
// fullWidth
|
|
// placeholder="Enter Manager Name"
|
|
// size="small"
|
|
// error={!!errors.name}
|
|
// helperText={errors.name?.message}
|
|
// />
|
|
// )}
|
|
// />
|
|
// </Box>
|
|
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// flexDirection: "column",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// variant="body2"
|
|
// fontWeight={500}
|
|
// mb={0.5}
|
|
// >
|
|
// Station Name
|
|
// </Typography>
|
|
// <Controller
|
|
// name="stationName"
|
|
// control={control}
|
|
// rules={{ required: "Station Name is required" }}
|
|
// render={({ field }) => (
|
|
// <TextField
|
|
// {...field}
|
|
// fullWidth
|
|
// placeholder="Enter Station Name"
|
|
// size="small"
|
|
// error={!!errors.stationName}
|
|
// helperText={errors.stationName?.message}
|
|
// />
|
|
// )}
|
|
// />
|
|
// </Box>
|
|
// </Box>
|
|
|
|
// {/* Second Row - Two Inputs */}
|
|
// <Box sx={{ display: "flex", gap: 2 }}>
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// flexDirection: "column",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// variant="body2"
|
|
// fontWeight={500}
|
|
// mb={0.5}
|
|
// >
|
|
// Registered Address
|
|
// </Typography>
|
|
// <Controller
|
|
// name="registeredAddress"
|
|
// control={control}
|
|
// rules={{ required: "Registered Address is required" }}
|
|
// render={({ field }) => (
|
|
// <TextField
|
|
// {...field}
|
|
// fullWidth
|
|
// placeholder="Enter Registered Address"
|
|
// size="small"
|
|
// error={!!errors.registeredAddress}
|
|
// helperText={errors.registeredAddress?.message}
|
|
// />
|
|
// )}
|
|
// />
|
|
// </Box>
|
|
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// flexDirection: "column",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// variant="body2"
|
|
// fontWeight={500}
|
|
// mb={0.5}
|
|
// >
|
|
// Email
|
|
// </Typography>
|
|
// <Controller
|
|
// name="email"
|
|
// control={control}
|
|
// rules={{ required: "Email is required" }}
|
|
// render={({ field }) => (
|
|
// <TextField
|
|
// {...field}
|
|
// fullWidth
|
|
// placeholder="Enter Email"
|
|
// size="small"
|
|
// error={!!errors.email}
|
|
// helperText={errors.email?.message}
|
|
// />
|
|
// )}
|
|
// />
|
|
// </Box>
|
|
// </Box>
|
|
|
|
// {/* Third Row - Phone Number */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// flexDirection: "column",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Typography variant="body2" fontWeight={500} mb={0.5}>
|
|
// Phone Number
|
|
// </Typography>
|
|
// <Controller
|
|
// name="phone"
|
|
// control={control}
|
|
// rules={{ required: "Phone number is required" }}
|
|
// render={({ field }) => (
|
|
// <TextField
|
|
// {...field}
|
|
// fullWidth
|
|
// placeholder="Enter Phone Number"
|
|
// size="small"
|
|
// error={!!errors.phone}
|
|
// helperText={errors.phone?.message}
|
|
// />
|
|
// )}
|
|
// />
|
|
// </Box>
|
|
// </Box>
|
|
|
|
// {/* Submit Button */}
|
|
// <Box
|
|
// sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
|
|
// >
|
|
// <Button
|
|
// type="submit"
|
|
// sx={{
|
|
// backgroundColor: "#52ACDF",
|
|
// color: "white",
|
|
// borderRadius: "8px",
|
|
// width: "117px",
|
|
// "&:hover": { backgroundColor: "#439BC1" },
|
|
// }}
|
|
// >
|
|
// {editRow ? "Update" : "Create"}
|
|
// </Button>
|
|
// </Box>
|
|
// </Box>
|
|
// </Modal>
|
|
// );
|
|
// };
|
|
// export default EditManagerModal;
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Typography,
|
|
Modal,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import { useForm, Controller } from "react-hook-form";
|
|
import { useDispatch } from "react-redux";
|
|
import { updateManager } from "../../redux/slices/managerSlice"; // Import the updateManager action
|
|
import {
|
|
CustomIconButton,
|
|
CustomTextField,
|
|
} from "../AddUserModel/styled.css.tsx"; // Custom styled components
|
|
|
|
interface EditManagerModalProps {
|
|
open: boolean;
|
|
handleClose: () => void;
|
|
editRow: any; // Manager data including id
|
|
}
|
|
|
|
interface FormData {
|
|
name: string;
|
|
email: string;
|
|
registeredAddress: string;
|
|
phone: string;
|
|
}
|
|
|
|
const EditManagerModal: React.FC<EditManagerModalProps> = ({
|
|
open,
|
|
handleClose,
|
|
editRow,
|
|
}) => {
|
|
const dispatch = useDispatch(); // Use dispatch to send Redux actions
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
setValue,
|
|
reset,
|
|
} = useForm<FormData>({
|
|
defaultValues: {
|
|
name: "",
|
|
email: "",
|
|
registeredAddress: "",
|
|
phone: "",
|
|
},
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// Set values if editRow is provided
|
|
useEffect(() => {
|
|
if (editRow) {
|
|
setValue("name", editRow.name);
|
|
setValue("email", editRow.email);
|
|
setValue("registeredAddress", editRow.registeredAddress);
|
|
setValue("phone", editRow.phone);
|
|
} else {
|
|
reset();
|
|
}
|
|
}, [editRow, setValue, reset]);
|
|
|
|
const onSubmit = async (data: FormData) => {
|
|
if (editRow) {
|
|
setLoading(true); // Start loading state
|
|
|
|
// Dispatch the updateManager action from Redux
|
|
try {
|
|
await dispatch(
|
|
updateManager({
|
|
id: editRow.id, // Manager ID
|
|
managerData: {
|
|
name: data.name,
|
|
email: data.email,
|
|
registeredAddress: data.registeredAddress,
|
|
phone: data.phone,
|
|
},
|
|
})
|
|
).unwrap(); // Ensure that it throws an error if the update fails
|
|
|
|
handleClose(); // Close modal on success
|
|
reset(); // Reset form fields after submit
|
|
} catch (error) {
|
|
console.error(error);
|
|
// You can handle the error here or show a toast
|
|
} finally {
|
|
setLoading(false); // Stop loading state
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={handleClose}
|
|
aria-labelledby="edit-manager-modal"
|
|
>
|
|
<Box
|
|
component="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
sx={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 400,
|
|
bgcolor: "background.paper",
|
|
boxShadow: 24,
|
|
p: 3,
|
|
borderRadius: 2,
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h6" fontWeight={600}>
|
|
Edit Manager
|
|
</Typography>
|
|
<CustomIconButton onClick={handleClose}>
|
|
<CloseIcon />
|
|
</CustomIconButton>
|
|
</Box>
|
|
|
|
{/* Horizontal Line */}
|
|
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
|
|
|
|
{/* Input Fields */}
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
{/* Manager Name */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2" fontWeight={500} mb={0.5}>
|
|
Manager Name
|
|
</Typography>
|
|
<Controller
|
|
name="name"
|
|
control={control}
|
|
rules={{ required: "Manager Name is required" }}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder="Enter Manager Name"
|
|
size="small"
|
|
error={!!errors.name}
|
|
helperText={errors.name?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Registered Address */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2" fontWeight={500} mb={0.5}>
|
|
Registered Address
|
|
</Typography>
|
|
<Controller
|
|
name="registeredAddress"
|
|
control={control}
|
|
rules={{
|
|
required: "Registered Address is required",
|
|
}}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder="Enter Registered Address"
|
|
size="small"
|
|
error={!!errors.registeredAddress}
|
|
helperText={
|
|
errors.registeredAddress?.message
|
|
}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Email */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2" fontWeight={500} mb={0.5}>
|
|
Email
|
|
</Typography>
|
|
<Controller
|
|
name="email"
|
|
control={control}
|
|
rules={{ required: "Email is required" }}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder="Enter Email"
|
|
size="small"
|
|
error={!!errors.email}
|
|
helperText={errors.email?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Phone Number */}
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Typography variant="body2" fontWeight={500} mb={0.5}>
|
|
Phone Number
|
|
</Typography>
|
|
<Controller
|
|
name="phone"
|
|
control={control}
|
|
rules={{ required: "Phone number is required" }}
|
|
render={({ field }) => (
|
|
<CustomTextField
|
|
{...field}
|
|
fullWidth
|
|
placeholder="Enter Phone Number"
|
|
size="small"
|
|
error={!!errors.phone}
|
|
helperText={errors.phone?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Submit Button */}
|
|
<Box
|
|
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
|
|
>
|
|
<Button
|
|
type="submit"
|
|
sx={{
|
|
backgroundColor: "#52ACDF",
|
|
color: "white",
|
|
borderRadius: "8px",
|
|
width: "117px",
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
}}
|
|
disabled={loading} // Disable the button during loading state
|
|
>
|
|
{loading ? (
|
|
<CircularProgress size={24} color="inherit" />
|
|
) : (
|
|
"Update Manager"
|
|
)}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EditManagerModal;
|