diff --git a/src/frontend/src/enums/ApiEndpoints.tsx b/src/frontend/src/enums/ApiEndpoints.tsx
index 0d9c3d0c5a..3285f3d676 100644
--- a/src/frontend/src/enums/ApiEndpoints.tsx
+++ b/src/frontend/src/enums/ApiEndpoints.tsx
@@ -36,7 +36,6 @@ export enum ApiEndpoints {
api_search = 'search/',
settings_global_list = 'settings/global/',
settings_user_list = 'settings/user/',
- notifications_list = 'notifications/',
barcode = 'barcode/',
news = 'news/',
global_status = 'generic/status/',
@@ -45,6 +44,10 @@ export enum ApiEndpoints {
group_list = 'user/group/',
owner_list = 'user/owner/',
+ // Notification endpoints
+ notifications_list = 'notifications/',
+ notifications_readall = 'notifications/readall/',
+
// Build API endpoints
build_order_list = 'build/',
build_order_attachment_list = 'build/attachment/',
diff --git a/src/frontend/src/pages/Notifications.tsx b/src/frontend/src/pages/Notifications.tsx
index b70fc59c22..115865e391 100644
--- a/src/frontend/src/pages/Notifications.tsx
+++ b/src/frontend/src/pages/Notifications.tsx
@@ -1,15 +1,18 @@
import { t } from '@lingui/macro';
import { Stack } from '@mantine/core';
+import { modals } from '@mantine/modals';
import {
IconBellCheck,
IconBellExclamation,
IconCircleCheck,
IconCircleX,
+ IconMailOpened,
IconTrash
} from '@tabler/icons-react';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
import { api } from '../App';
+import { ActionButton } from '../components/buttons/ActionButton';
import { PageDetail } from '../components/nav/PageDetail';
import { PanelGroup } from '../components/nav/PanelGroup';
import { ApiEndpoints } from '../enums/ApiEndpoints';
@@ -21,6 +24,40 @@ export default function NotificationsPage() {
const unreadTable = useTable('unreadnotifications');
const readTable = useTable('readnotifications');
+ const markAllAsRead = useCallback(() => {
+ api
+ .get(apiUrl(ApiEndpoints.notifications_readall), {
+ params: {
+ read: false
+ }
+ })
+ .then((_response) => {
+ unreadTable.refreshTable();
+ readTable.refreshTable();
+ })
+ .catch((_error) => {});
+ }, []);
+
+ const deleteNotifications = useCallback(() => {
+ modals.openConfirmModal({
+ title: t`Delete Notifications`,
+ onConfirm: () => {
+ api
+ .delete(apiUrl(ApiEndpoints.notifications_list), {
+ data: {
+ filters: {
+ read: true
+ }
+ }
+ })
+ .then((_response) => {
+ readTable.refreshTable();
+ })
+ .catch((_error) => {});
+ }
+ });
+ }, []);
+
const notificationPanels = useMemo(() => {
return [
{
@@ -48,6 +85,13 @@ export default function NotificationsPage() {
}
}
]}
+ tableActions={[
+ }
+ tooltip={`Mark all as read`}
+ onClick={markAllAsRead}
+ />
+ ]}
/>
)
},
@@ -88,6 +132,14 @@ export default function NotificationsPage() {
}
}
]}
+ tableActions={[
+ }
+ tooltip={`Delete notifications`}
+ onClick={deleteNotifications}
+ />
+ ]}
/>
)
}
diff --git a/src/frontend/src/tables/notifications/NotificationsTable.tsx b/src/frontend/src/tables/notifications/NotificationsTable.tsx
index c2224ffaa4..9e71b5caf2 100644
--- a/src/frontend/src/tables/notifications/NotificationsTable.tsx
+++ b/src/frontend/src/tables/notifications/NotificationsTable.tsx
@@ -11,10 +11,12 @@ import { RowAction } from '../RowActions';
export function NotificationTable({
params,
tableState,
+ tableActions,
actions
}: {
params: any;
tableState: TableState;
+ tableActions: any[];
actions: (record: any) => RowAction[];
}) {
const columns: TableColumn[] = useMemo(() => {
@@ -47,6 +49,7 @@ export function NotificationTable({
columns={columns}
props={{
rowActions: actions,
+ tableActions: tableActions,
enableSelection: true,
params: params
}}