diff --git a/client/src/Pages/StatusPage/Create/index.tsx b/client/src/Pages/StatusPage/Create/index.tsx index f5eff80ca..cbf470abb 100644 --- a/client/src/Pages/StatusPage/Create/index.tsx +++ b/client/src/Pages/StatusPage/Create/index.tsx @@ -145,7 +145,7 @@ const CreateStatusPage = () => { } if (result) { - navigate(`/status/uptime/${data.url}`); + navigate(`/status/${data.url}`); } }; diff --git a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx b/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx index d832751de..ecc1b14bb 100644 --- a/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx +++ b/client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable.tsx @@ -2,22 +2,78 @@ import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; import { Table, type Header, ValueLabel } from "@/Components/v2/design-elements"; +import { ActionsMenu, type ActionMenuItem } from "@/Components/v2/actions-menu"; +import { Dialog } from "@/Components/v2/inputs"; import { ExternalLink } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useTheme } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; +import { useDelete } from "@/Hooks/UseApi"; +import { useState } from "react"; +import { createToast } from "@/Utils/toastUtils"; import type { StatusPage } from "@/Types/StatusPage"; interface StatusPagesTableProps { data: StatusPage[]; + refetch: () => void; } -export const StatusPagesTable = ({ data }: StatusPagesTableProps) => { +export const StatusPagesTable = ({ data, refetch }: StatusPagesTableProps) => { const { t } = useTranslation(); const theme = useTheme(); const navigate = useNavigate(); + const { deleteFn, loading: isDeleting } = useDelete(); + + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const [selectedStatusPage, setSelectedStatusPage] = useState(null); + + const handleDeleteClick = (statusPage: StatusPage) => { + setSelectedStatusPage(statusPage); + setIsDeleteDialogOpen(true); + }; + + const handleDeleteConfirm = async () => { + if (!selectedStatusPage) return; + const result = await deleteFn(`/status-page/${selectedStatusPage.id}`); + if (result) { + createToast({ body: t("pages.statusPages.deleteSuccess") }); + refetch(); + } + setIsDeleteDialogOpen(false); + setSelectedStatusPage(null); + }; + + const handleDeleteCancel = () => { + setIsDeleteDialogOpen(false); + setSelectedStatusPage(null); + }; + + const getActions = (row: StatusPage): ActionMenuItem[] => { + return [ + { + id: 1, + label: t("common.buttons.configure"), + action: () => { + navigate(`/status/configure/${row.url}`); + }, + closeMenu: true, + }, + { + id: 2, + label: ( + + {t("common.buttons.delete")} + + ), + action: () => { + handleDeleteClick(row); + }, + closeMenu: true, + }, + ]; + }; const handleUrlClick = (e: React.MouseEvent, row: StatusPage) => { if (row.isPublished) { @@ -87,6 +143,13 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => { ); }, }, + { + id: "actions", + content: t("common.table.headers.actions"), + render: (row) => { + return ; + }, + }, ]; }; @@ -102,6 +165,14 @@ export const StatusPagesTable = ({ data }: StatusPagesTableProps) => { onRowClick={handleRowClick} emptyViewText={t("common.table.empty")} /> + ); }; diff --git a/client/src/Pages/StatusPage/StatusPages/index.tsx b/client/src/Pages/StatusPage/StatusPages/index.tsx index 0c891591b..e1031e9e6 100644 --- a/client/src/Pages/StatusPage/StatusPages/index.tsx +++ b/client/src/Pages/StatusPage/StatusPages/index.tsx @@ -13,6 +13,7 @@ const StatusPages = () => { data: statusPages, isLoading, error, + refetch, } = useGet("/status-page/team"); const isAdmin = useIsAdmin(); @@ -33,7 +34,10 @@ const StatusPages = () => { path="/status/create" isAdmin={isAdmin} /> - + ); };