diff --git a/client/src/Pages/Maintenance/create/index.tsx b/client/src/Pages/Maintenance/create/index.tsx index a15338436..7190adf32 100644 --- a/client/src/Pages/Maintenance/create/index.tsx +++ b/client/src/Pages/Maintenance/create/index.tsx @@ -1,6 +1,7 @@ import Stack from "@mui/material/Stack"; import MenuItem from "@mui/material/MenuItem"; import Typography from "@mui/material/Typography"; +import IconButton from "@mui/material/IconButton"; import { BasePage, ConfigBox } from "@/Components/v2/design-elements"; import { TextField, @@ -8,6 +9,7 @@ import { DatePicker, TimePicker, Button, + Autocomplete, } from "@/Components/v2/inputs"; import { useTheme } from "@mui/material"; @@ -22,6 +24,7 @@ import { useParams } from "react-router-dom"; import type { Monitor } from "@/Types/Monitor"; import { useForm, Controller } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js"; +import { Trash2 } from "lucide-react"; const CreateMaintenanceWindowPage = () => { const theme = useTheme(); @@ -206,6 +209,85 @@ const CreateMaintenanceWindowPage = () => { } /> + { + const monitorsList = monitors ?? []; + const selectedMonitors = field.value + .map((id: string) => monitorsList.find((m) => m.id === id)) + .filter((m): m is Monitor => m !== undefined); + + return ( + + option.name} + value={selectedMonitors} + onChange={(_, newValue) => { + field.onChange(newValue.map((m: Monitor) => m.id)); + }} + fieldLabel={t( + "pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label" + )} + renderInput={(params) => ( + + )} + /> + {selectedMonitors.length > 0 && ( + + {selectedMonitors.map((monitor) => ( + + {monitor.name} + { + field.onChange( + field.value.filter( + (id: string) => id !== monitor.id + ) + ); + }} + aria-label="Remove monitor" + > + + + + ))} + + )} + + ); + }} + /> + } + />