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 }))
+ }
/>
+