diff --git a/Client/package-lock.json b/Client/package-lock.json index 44e276f63..2f1543bba 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -18,7 +18,7 @@ "@mui/x-data-grid": "7.3.2", "@mui/x-date-pickers": "7.3.2", "@reduxjs/toolkit": "2.2.5", - "axios": "1.7.4", + "axios": "^1.7.4", "chart.js": "^4.4.3", "dayjs": "1.11.11", "joi": "17.13.1", diff --git a/Client/package.json b/Client/package.json index 769e1f4a6..22f15f7f9 100644 --- a/Client/package.json +++ b/Client/package.json @@ -20,7 +20,7 @@ "@mui/x-data-grid": "7.3.2", "@mui/x-date-pickers": "7.3.2", "@reduxjs/toolkit": "2.2.5", - "axios": "1.7.4", + "axios": "^1.7.4", "chart.js": "^4.4.3", "dayjs": "1.11.11", "joi": "17.13.1", diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx index 335ed178f..850598d3e 100644 --- a/Client/src/Components/Inputs/Field/index.jsx +++ b/Client/src/Components/Inputs/Field/index.jsx @@ -181,7 +181,14 @@ const Field = forwardRef( Field.displayName = "Field"; Field.propTypes = { - type: PropTypes.oneOf(["text", "password", "url", "email", "description"]), + type: PropTypes.oneOf([ + "text", + "password", + "url", + "email", + "description", + "number", + ]), id: PropTypes.string.isRequired, label: PropTypes.string, https: PropTypes.bool, diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css index e0311d4e7..4ee17db72 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css @@ -23,7 +23,7 @@ } .duration-config .field-text .MuiTextField-root, -.duration-config .field { +.maintenance-options .duration-config .field { width: 70px; min-width: 70px; max-width: 70px; diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx index d207bfc98..9110b7a96 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx @@ -10,6 +10,9 @@ import dayjs from "dayjs"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker"; import Field from "../../../Components/Inputs/Field"; +import { maintenanceWindowValidation } from "../../../Validation/validation"; +import { logger } from "../../../Utils/Logger"; +import { createToast } from "../../../Utils/toastUtils"; const directory = { title: "Create a maintenance window", @@ -62,6 +65,7 @@ const CreateNewMaintenanceWindow = () => { friendlyName: "", AddMonitors: "", }); + const [errors, setErrors] = useState({}); const handleChange = (event, name) => { const { value } = event.target; @@ -71,6 +75,41 @@ const CreateNewMaintenanceWindow = () => { })); }; + const handleSubmit = async () => { + const data = { + repeat: values.repeat, + date: values.date.format("YYYY-MM-DD"), + startTime: values.startTime.format("HH:mm"), + duration: values.duration, + unit: values.unit, + friendlyName: values.friendlyName, + addMonitors: values.AddMonitors, + }; + + const { error } = maintenanceWindowValidation.validate(data, { + abortEarly: false, + }); + logger.log("error: ", error); + if (!error || error.details.length === 0) { + setErrors({}); + } else { + const newErrors = {}; + error.details.forEach((err) => { + newErrors[err.path[0]] = err.message; + }); + setErrors(newErrors); + createToast({ + body: + error.details && error.details.length > 0 + ? error.details[0].message + : "Error validating data", + }); + logger.error("Validation errors:", error.details); + } + + logger.log("Submitting data: ", data); + }; + const configOptions = [ { title: "Repeat", @@ -126,6 +165,8 @@ const CreateNewMaintenanceWindow = () => { placeholder="60" onChange={(e) => handleChange(e, "duration")} value={values.duration} + error={errors.duration} + type="number" />