From 3b11a01966546791eb0e112dd5b04bcfccb4c93f Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 19 Feb 2024 16:06:21 +1100
Subject: [PATCH] [PUI] Notifications (#6515)

* Add placeholder buttons

* Add callback functions

- Mark all notifications as read
- Delete all read notifications

* remove unused import
---
 src/frontend/src/enums/ApiEndpoints.tsx       |  5 +-
 src/frontend/src/pages/Notifications.tsx      | 54 ++++++++++++++++++-
 .../notifications/NotificationsTable.tsx      |  3 ++
 3 files changed, 60 insertions(+), 2 deletions(-)

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={[
+              <ActionButton
+                icon={<IconMailOpened />}
+                tooltip={`Mark all as read`}
+                onClick={markAllAsRead}
+              />
+            ]}
           />
         )
       },
@@ -88,6 +132,14 @@ export default function NotificationsPage() {
                 }
               }
             ]}
+            tableActions={[
+              <ActionButton
+                color="red"
+                icon={<IconTrash />}
+                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
       }}