diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx index 22f864c51..bd9d2e316 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { useTheme } from "@emotion/react"; import { useNavigate } from "react-router-dom"; +import { useSelector } from "react-redux"; import { Button, IconButton, @@ -10,19 +11,39 @@ import { Stack, Typography, } from "@mui/material"; +import LoadingButton from "@mui/lab/LoadingButton"; +import { logger } from "../../../../Utils/Logger"; import Settings from "../../../../assets/icons/settings-bold.svg?react"; import PropTypes from "prop-types"; +import { networkService } from "../../../../main"; +import { createToast } from "../../../../Utils/toastUtils"; -const ActionsMenu = ({ isAdmin, maintenanceWindow }) => { +const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => { + const { authToken } = useSelector((state) => state.auth); const [anchorEl, setAnchorEl] = useState(null); const [isOpen, setIsOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const theme = useTheme(); const handleRemove = async (event) => { event.preventDefault(); event.stopPropagation(); - console.log("remove"); - setIsOpen(false); // close modal + try { + setIsLoading(true); + await networkService.deleteMaintenanceWindow({ + authToken, + maintenanceWindowId: maintenanceWindow._id, + }); + updateCallback(); + createToast({ body: "Maintenance window deleted successfully." }); + } catch (error) { + createToast({ body: "Failed to delete maintenance window." }); + logger.error("Failed to delete maintenance window", error); + } finally { + setIsLoading(false); + } + setIsOpen(false); }; const openMenu = (event) => { @@ -156,7 +177,8 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow }) => { > Cancel - + diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx index ea8418cb6..af9d15ca9 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx @@ -108,11 +108,12 @@ const MaintenanceTable = ({ setSort, maintenanceWindows, maintenanceWindowCount, + updateCallback, }) => { const { rowsPerPage } = useSelector((state) => state.ui.maintenance); - const theme = useTheme(); const dispatch = useDispatch(); + const handleChangePage = (event, newPage) => { setPage(newPage); }; @@ -264,7 +265,10 @@ const MaintenanceTable = ({ : formatDurationRounded(maintenanceWindow.repeat)} - + ); @@ -352,6 +356,7 @@ MaintenanceTable.propTypes = { setSort: PropTypes.func, maintenanceWindows: PropTypes.array, maintenanceWindowCount: PropTypes.number, + updateCallback: PropTypes.func, }; const MemoizedMaintenanceTable = memo(MaintenanceTable); diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx index 1874d07cb..3f9a9a047 100644 --- a/Client/src/Pages/Maintenance/index.jsx +++ b/Client/src/Pages/Maintenance/index.jsx @@ -19,6 +19,11 @@ const Maintenance = ({ isAdmin }) => { const [maintenanceWindowCount, setMaintenanceWindowCount] = useState(0); const [page, setPage] = useState(0); const [sort, setSort] = useState({}); + const [updateTrigger, setUpdateTrigger] = useState(false); + + const handleActionMenuDelete = () => { + setUpdateTrigger((prev) => !prev); + }; useEffect(() => { const fetchMaintenanceWindows = async () => { @@ -37,7 +42,7 @@ const Maintenance = ({ isAdmin }) => { } }; fetchMaintenanceWindows(); - }, [authToken, page, rowsPerPage]); + }, [authToken, page, rowsPerPage, updateTrigger]); return ( { setSort={setSort} maintenanceWindows={maintenanceWindows} maintenanceWindowCount={maintenanceWindowCount} + updateCallback={handleActionMenuDelete} /> )} diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js index e6ece1079..991b71ea9 100644 --- a/Client/src/Utils/NetworkService.js +++ b/Client/src/Utils/NetworkService.js @@ -754,6 +754,31 @@ class NetworkService { } ); } + /** + * ************************************ + * Get maintenance windows by teamId + * ************************************ + * + * @async + * @param {Object} config - The configuration object. + * @param {string} config.authToken - The authorization token to be used in the request header. + * @param {string} [config.maintenanceWindowId] - The id of the maintenance window to delete. + * @returns {Promise} The response from the axios POST request. + * + */ + + async deleteMaintenanceWindow(config) { + const { authToken, maintenanceWindowId } = config; + return this.axiosInstance.delete( + `/maintenance-window/${maintenanceWindowId}`, + { + headers: { + Authorization: `Bearer ${authToken}`, + "Content-Type": "application/json", + }, + } + ); + } } export default NetworkService;