diff --git a/client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx b/client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx new file mode 100644 index 000000000..c3a4681a1 --- /dev/null +++ b/client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx @@ -0,0 +1,69 @@ +// Components +import { Stack, Typography } from "@mui/material"; +import DeleteIcon from "@mui/icons-material/Delete"; +import { useTheme } from "@emotion/react"; +import PropTypes from "prop-types"; + +const MonitorListItem = ({ monitor, onDelete }) => { + const theme = useTheme(); + return ( + + {monitor.name} + onDelete(monitor)} + /> + + ); +}; + +MonitorListItem.propTypes = { + monitor: PropTypes.shape({ + _id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + }).isRequired, + onDelete: PropTypes.func.isRequired, +}; + +const MonitorList = ({ selectedMonitors, setSelectedMonitors }) => { + const onDelete = (monitorToDelete) => { + const newMonitors = selectedMonitors.filter( + (monitor) => monitor._id !== monitorToDelete._id + ); + setSelectedMonitors(newMonitors); + }; + + const theme = useTheme(); + + return ( + + {selectedMonitors?.map((monitor) => ( + + ))} + + ); +}; + +MonitorList.propTypes = { + selectedMonitors: PropTypes.arrayOf( + PropTypes.shape({ + _id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + }) + ).isRequired, + setSelectedMonitors: PropTypes.func.isRequired, +}; + +export default MonitorList; diff --git a/client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/client/src/Pages/Maintenance/CreateMaintenance/index.jsx index e71c7112c..9d1b060c2 100644 --- a/client/src/Pages/Maintenance/CreateMaintenance/index.jsx +++ b/client/src/Pages/Maintenance/CreateMaintenance/index.jsx @@ -9,6 +9,8 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker"; import { maintenanceWindowValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; +import MonitorList from "./Components/MonitorList"; +import Checkbox from "../../../Components/Inputs/Checkbox"; import dayjs from "dayjs"; import Select from "../../../Components/Inputs/Select"; @@ -212,6 +214,17 @@ const CreateMaintenance = () => { }); }; + const handleMonitorsChange = (selected) => { + setForm((prev) => ({ ...prev, monitors: selected })); + const { error } = maintenanceWindowValidation.validate( + { monitors: selected }, + { abortEarly: false } + ); + setErrors((prev) => { + return buildErrors(prev, "monitors", error); + }); + }; + const handleSubmit = async () => { if (hasValidationErrors(form, maintenanceWindowValidation, setErrors)) return; // Build timestamp for maintenance window from startDate and startTime @@ -525,19 +538,25 @@ const CreateMaintenance = () => { id={"monitors"} label={t("addMonitors")} multiple={true} - isAdorned={false} - options={monitors ? monitors : []} + isAdorned={true} + options={monitors} filteredBy="name" secondaryLabel={"type"} inputValue={search} value={form.monitors} - handleInputChange={handleSearch} - handleChange={handleSelectMonitors} + handleInputChange={setSearch} + handleChange={handleMonitorsChange} error={errors["monitors"]} - disabled={maintenanceWindowId !== undefined} + /> + + setForm((prev) => ({ ...prev, monitors })) + } /> +