409 lines
9.7 KiB
TypeScript
409 lines
9.7 KiB
TypeScript
// import React, { useState } from "react";
|
|
// import {
|
|
// Dialog,
|
|
// DialogActions,
|
|
// DialogContent,
|
|
// DialogTitle,
|
|
// Button,
|
|
// TextField,
|
|
// Typography,
|
|
// Box,
|
|
// } from "@mui/material";
|
|
// import { useForm } from "react-hook-form";
|
|
|
|
// const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
|
|
// const {
|
|
// register,
|
|
// handleSubmit,
|
|
// reset,
|
|
// formState: { errors },
|
|
// } = useForm();
|
|
// const [isAvailable, setIsAvailable] = useState<boolean>(true); // Default is available
|
|
|
|
// // Get today's date in the format yyyy-mm-dd
|
|
// const today = new Date().toISOString().split("T")[0];
|
|
|
|
// const onSubmit = (data: {
|
|
// date: string;
|
|
// startHour: string;
|
|
// endHour: string;
|
|
// }) => {
|
|
// handleAddSlot({ ...data, isAvailable });
|
|
// reset();
|
|
// handleClose();
|
|
// };
|
|
|
|
// return (
|
|
// <Dialog open={open} onClose={handleClose}>
|
|
// <DialogTitle>Add EV Slot</DialogTitle>
|
|
// <DialogContent>
|
|
// <form onSubmit={handleSubmit(onSubmit)}>
|
|
// <Typography variant="body2" fontWeight={500}>
|
|
// Date
|
|
// </Typography>
|
|
// <TextField
|
|
// {...register("date", {
|
|
// required: "Date is required",
|
|
// validate: (value) =>
|
|
// value >= today || "Date cannot be in the past",
|
|
// })}
|
|
// // label="Date"
|
|
// // sx={{ marginTop: 1 }}
|
|
// type="date"
|
|
// fullWidth
|
|
// margin="normal"
|
|
// slotProps={{
|
|
// inputLabel: {
|
|
// shrink: true,
|
|
// },
|
|
// }}
|
|
// error={!!errors.date}
|
|
// helperText={errors.date?.message}
|
|
// // Set the min value to today's date
|
|
// inputProps={{ min: today }}
|
|
// />
|
|
// <Typography variant="body2" fontWeight={500}>
|
|
// Start Hour
|
|
// </Typography>
|
|
// <TextField
|
|
// {...register("startHour", {
|
|
// required: "Start hour is required",
|
|
// })}
|
|
// // label="Start Hour"
|
|
// type="time"
|
|
// // sx={{ marginTop: 1 }}
|
|
// fullWidth
|
|
// margin="normal"
|
|
// slotProps={{
|
|
// inputLabel: {
|
|
// shrink: true,
|
|
// },
|
|
// }}
|
|
// error={!!errors.startHour}
|
|
// helperText={errors.startHour?.message}
|
|
// />
|
|
// <Typography variant="body2" fontWeight={500}>
|
|
// End Hour
|
|
// </Typography>
|
|
// <TextField
|
|
// {...register("endHour", {
|
|
// required: "End hour is required",
|
|
// })}
|
|
// // label="End Hour"
|
|
// type="time"
|
|
// // sx={{ marginTop: 1 }}
|
|
// fullWidth
|
|
// margin="normal"
|
|
// InputLabelProps={{
|
|
// shrink: true,
|
|
// }}
|
|
// error={!!errors.endHour}
|
|
// helperText={errors.endHour?.message}
|
|
// />
|
|
// {/* Availability Toggle */}
|
|
// <Box
|
|
// display="flex"
|
|
// alignItems="center"
|
|
// justifyContent="space-between"
|
|
// gap={2}
|
|
// >
|
|
|
|
// <Button
|
|
// onClick={() => setIsAvailable((prev) => !prev)}
|
|
// variant={isAvailable ? "contained" : "outlined"}
|
|
// color="primary"
|
|
// sx={{ marginTop: 1 }}
|
|
|
|
// >
|
|
// Check Availability
|
|
// </Button>
|
|
// <Typography>
|
|
// {isAvailable ? "Available" : "Not Available"}
|
|
// </Typography>
|
|
// </Box>
|
|
// <DialogActions>
|
|
// <Button onClick={handleClose} color="secondary">
|
|
// Cancel
|
|
// </Button>
|
|
|
|
// <Button
|
|
// type="submit"
|
|
// sx={{
|
|
// backgroundColor: "#52ACDF",
|
|
// color: "white",
|
|
// borderRadius: "8px",
|
|
// width: "100px",
|
|
// "&:hover": { backgroundColor: "#439BC1" },
|
|
// }}
|
|
// >
|
|
// Add Booking
|
|
// </Button>
|
|
// </DialogActions>
|
|
// </form>
|
|
// </DialogContent>
|
|
// </Dialog>
|
|
// );
|
|
// };
|
|
|
|
// export default AddSlotModal;
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
Button,
|
|
TextField,
|
|
Typography,
|
|
Box,
|
|
FormControlLabel,
|
|
Switch,
|
|
MenuItem,
|
|
Select,
|
|
FormControl,
|
|
InputLabel,
|
|
} from "@mui/material";
|
|
import { useForm } from "react-hook-form";
|
|
import { useDispatch } from "react-redux"; // Import the Redux dispatch
|
|
import { createSlot } from "../../redux/slices/slotSlice.ts"; // Assuming this is your slice
|
|
|
|
const AddSlotModal = ({ open, handleClose }: any) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm();
|
|
const dispatch = useDispatch(); // Get dispatch from Redux
|
|
|
|
const [isAvailable, setIsAvailable] = useState<boolean>(true);
|
|
const [isDateRange, setIsDateRange] = useState<boolean>(false);
|
|
const [durationUnit, setDurationUnit] = useState<string>("minutes");
|
|
const [minEndTime, setMinEndTime] = useState<string>("");
|
|
|
|
// Get today's date in the format yyyy-mm-dd
|
|
const today = new Date().toISOString().split("T")[0];
|
|
|
|
// Watch the start time value
|
|
const startHour = watch("startHour");
|
|
|
|
useEffect(() => {
|
|
if (startHour) {
|
|
setMinEndTime(startHour);
|
|
}
|
|
}, [startHour]);
|
|
|
|
const onSubmit = (data: any) => {
|
|
const {
|
|
date,
|
|
startingDate,
|
|
endingDate,
|
|
startHour,
|
|
endHour,
|
|
duration,
|
|
|
|
} = data;
|
|
|
|
const payload = isDateRange
|
|
? {
|
|
startingDate,
|
|
endingDate,
|
|
startHour,
|
|
endHour,
|
|
duration: parseInt(duration, 10),
|
|
isAvailable,
|
|
|
|
}
|
|
: {
|
|
date,
|
|
startHour,
|
|
endHour,
|
|
duration: parseInt(duration, 10),
|
|
isAvailable,
|
|
|
|
};
|
|
|
|
dispatch(createSlot(payload));
|
|
reset();
|
|
handleClose();
|
|
};
|
|
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle>Add EV Slot</DialogTitle>
|
|
<DialogContent>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={isDateRange}
|
|
onChange={() => setIsDateRange(!isDateRange)}
|
|
/>
|
|
}
|
|
label="Select Date Range"
|
|
/>
|
|
{isDateRange ? (
|
|
<>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
Start Date
|
|
</Typography>
|
|
<TextField
|
|
{...register("startingDate", {
|
|
required: "Start date is required",
|
|
validate: (value) =>
|
|
value >= today ||
|
|
"Start date cannot be in the past",
|
|
})}
|
|
type="date"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.startingDate}
|
|
helperText={errors.startingDate?.message}
|
|
inputProps={{ min: today }}
|
|
/>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
End Date
|
|
</Typography>
|
|
<TextField
|
|
{...register("endingDate", {
|
|
required: "End date is required",
|
|
validate: (value) =>
|
|
value >= today ||
|
|
"End date cannot be in the past",
|
|
})}
|
|
type="date"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.endingDate}
|
|
helperText={errors.endingDate?.message}
|
|
inputProps={{ min: today }}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
Date
|
|
</Typography>
|
|
<TextField
|
|
{...register("date", {
|
|
required: "Date is required",
|
|
validate: (value) =>
|
|
value >= today ||
|
|
"Date cannot be in the past",
|
|
})}
|
|
type="date"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.date}
|
|
helperText={errors.date?.message}
|
|
inputProps={{ min: today }}
|
|
/>
|
|
</>
|
|
)}
|
|
<Typography variant="body2" fontWeight={500}>
|
|
Start Hour
|
|
</Typography>
|
|
<TextField
|
|
{...register("startHour", {
|
|
required: "Start hour is required",
|
|
})}
|
|
type="time"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.startHour}
|
|
helperText={errors.startHour?.message}
|
|
/>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
End Hour
|
|
</Typography>
|
|
<TextField
|
|
{...register("endHour", {
|
|
required: "End hour is required",
|
|
validate: (value) =>
|
|
value > startHour ||
|
|
"End hour must be after start hour",
|
|
})}
|
|
type="time"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.endHour}
|
|
helperText={errors.endHour?.message}
|
|
inputProps={{ min: minEndTime }}
|
|
/>
|
|
<Typography variant="body2" fontWeight={500}>
|
|
Slot Duration
|
|
</Typography>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<TextField
|
|
{...register("duration", {
|
|
required: "Duration is required",
|
|
pattern: {
|
|
value: /^[0-9]+$/,
|
|
message: "Duration must be a number",
|
|
},
|
|
})}
|
|
type="number"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.duration}
|
|
helperText={errors.duration?.message}
|
|
/>
|
|
<FormControl fullWidth>
|
|
|
|
<Select
|
|
value={durationUnit}
|
|
onChange={(e) =>
|
|
setDurationUnit(e.target.value)
|
|
}
|
|
|
|
>
|
|
<MenuItem value="minutes">Minutes</MenuItem>
|
|
<MenuItem value="hours">Hours</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
gap={2}
|
|
>
|
|
<Button
|
|
onClick={() => setIsAvailable((prev) => !prev)}
|
|
variant={isAvailable ? "contained" : "outlined"}
|
|
color="primary"
|
|
sx={{ marginTop: 1 }}
|
|
>
|
|
Check Availability
|
|
</Button>
|
|
<Typography>
|
|
{isAvailable ? "Available" : "Not Available"}
|
|
</Typography>
|
|
</Box>
|
|
<DialogActions>
|
|
<Button onClick={handleClose} color="secondary">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
sx={{
|
|
backgroundColor: "#52ACDF",
|
|
color: "white",
|
|
borderRadius: "8px",
|
|
width: "100px",
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
}}
|
|
>
|
|
Add Booking
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AddSlotModal;
|