gorkem-bwl
127ee5508a
The destination column wrapped onto two lines for long webhook URLs. Cap the cell at 320px and use rtl + plaintext bidi so the start and end of the URL stay visible with an ellipsis in between; full address is in the title attribute.
118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import type { Header } from "@/Components/design-elements/Table";
|
|
import { Table } from "@/Components/design-elements";
|
|
import { Pagination } from "@/Components/design-elements/Table";
|
|
import { useClientPagination } from "@/Hooks/useClientPagination";
|
|
|
|
import type { Notification } from "@/Types/Notification";
|
|
import { useNavigate } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useTheme } from "@mui/material";
|
|
|
|
interface NotificationsTableProps {
|
|
notifications: Notification[];
|
|
setSelectedChannel: Function;
|
|
}
|
|
|
|
export const NotificationsTable = ({
|
|
notifications,
|
|
setSelectedChannel,
|
|
}: NotificationsTableProps) => {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const { pagedRows, paginationProps } = useClientPagination(notifications);
|
|
|
|
const getActions = (channel: Notification): ActionMenuItem[] => {
|
|
return [
|
|
{
|
|
id: 1,
|
|
label: t("pages.common.monitors.actions.configure"),
|
|
action: () => {
|
|
navigate(`/notifications/configure/${channel.id}`);
|
|
},
|
|
closeMenu: true,
|
|
},
|
|
|
|
{
|
|
id: 7,
|
|
label: (
|
|
<Typography color={theme.palette.error.main}>
|
|
{t("pages.common.monitors.actions.delete")}
|
|
</Typography>
|
|
),
|
|
action: async () => {
|
|
setSelectedChannel(channel);
|
|
},
|
|
closeMenu: true,
|
|
},
|
|
];
|
|
};
|
|
|
|
const getHeaders = () => {
|
|
const headers: Header<Notification>[] = [
|
|
{
|
|
id: "name",
|
|
content: t("common.table.headers.name"),
|
|
render: (row) => {
|
|
return <Typography>{row?.notificationName}</Typography>;
|
|
},
|
|
},
|
|
|
|
{
|
|
id: "type",
|
|
content: t("common.table.headers.type"),
|
|
render: (row) => {
|
|
return <Typography textTransform={"capitalize"}>{row?.type}</Typography>;
|
|
},
|
|
},
|
|
{
|
|
id: "destination",
|
|
content: t("pages.notifications.table.headers.destination"),
|
|
render: (row) => {
|
|
return (
|
|
<Box sx={{ maxWidth: 320, mx: "auto" }}>
|
|
<Typography
|
|
title={row?.address}
|
|
sx={{
|
|
direction: "rtl",
|
|
textAlign: "left",
|
|
unicodeBidi: "plaintext",
|
|
whiteSpace: "nowrap",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
}}
|
|
>
|
|
{row?.address}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
content: t("common.table.headers.actions"),
|
|
render: (row) => {
|
|
return <ActionsMenu items={getActions(row)} />;
|
|
},
|
|
},
|
|
];
|
|
return headers;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
headers={getHeaders()}
|
|
data={pagedRows}
|
|
onRowClick={(row) => {
|
|
navigate(`/notifications/configure/${row.id}`);
|
|
}}
|
|
/>
|
|
{notifications.length > 0 && <Pagination {...paginationProps} />}
|
|
</>
|
|
);
|
|
};
|