feat: toggle active/archived notifications on portal (#368)

apps/portal/src/app/graphql/graphql.queries.ts

@@ -30,6 +30,36 @@ export const GetNotifications = gql`
   }
 `;
 
+export const GetArchivedNotifications = gql`
+  query GetArchivedNotifications($limit: Int!, $offset: Int!, $filters: [UniversalFilter!]) {
+    archivedNotifications(
+      options: {
+        limit: $limit
+        offset: $offset
+        sortBy: "createdOn"
+        sortOrder: DESC
+        filters: $filters
+      }
+    ) {
+      archivedNotifications {
+        channelType
+        createdBy
+        createdOn
+        data
+        deliveryStatus
+        notificationId
+        result
+        status
+        updatedBy
+        updatedOn
+      }
+      total
+      offset
+      limit
+    }
+  }
+`;
+
 export const GetApplications = gql`
   query GetApplications($limit: Int!, $offset: Int!, $filters: [UniversalFilter!]) {
     applications(

apps/portal/src/app/views/notifications/notification.model.ts

@@ -17,3 +17,16 @@ export interface NotificationResponse {
   offset: number;
   limit: number;
 }
+
+export interface ArchivedNotification {
+  notificationId: number;
+  channelType: number;
+  data: Record<string, unknown>;
+  deliveryStatus: number;
+  result?: Record<string, unknown> | null;
+  createdOn: Date;
+  updatedOn: Date;
+  createdBy: string;
+  updatedBy: string;
+  status: number;
+}

apps/portal/src/app/views/notifications/notifications.component.ts

@@ -95,6 +95,8 @@ export class NotificationsComponent implements OnInit {
 
   toggleArchive() {
     this.archivedNotificationToggle = !this.archivedNotificationToggle;
+    // Now that toggle has been activated, load notifications
+    this.loadNotificationsLazy({ first: 0, rows: this.pageSize });
   }
 
   getApplications() {
@@ -320,34 +322,66 @@ export class NotificationsComponent implements OnInit {
     // Set current page
     this.currentPage = Math.floor(event.first / event.rows) + 1;
 
-    // Fetch notifications and handle errors
-    this.notificationService
-      .getNotifications(variables, loginToken)
-      .pipe(
-        // catchError operator to handle errors
-        catchError((error) => {
-          this.messageService.add({
-            key: 'tst',
-            severity: 'error',
-            summary: 'Error',
-            detail: `There was an error while loading notifications. Reason: ${error.message}`,
-          });
+    // Check if we need to fetch from archive table or notifications table
+    if (this.archivedNotificationToggle) {
+      // Fetch archived notifications and handle errors
+      this.notificationService
+        .getArchivedNotifications(variables, loginToken)
+        .pipe(
+          // catchError operator to handle errors
+          catchError((error) => {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: 'Error',
+              detail: `There was an error while loading notifications. Reason: ${error.message}`,
+            });
+            this.loading = false;
+            return of(null);
+          }),
+        )
+        .subscribe((notificationResponse: NotificationResponse | null) => {
+          if (notificationResponse && notificationResponse.notifications) {
+            // pagination is handled by p-table component of primeng
+            this.notifications = notificationResponse.notifications;
+            this.totalRecords = notificationResponse.total;
+          } else {
+            this.notifications = [];
+            this.totalRecords = 0;
+          }
+
           this.loading = false;
-          return of(null);
-        }),
-      )
-      .subscribe((notificationResponse: NotificationResponse | null) => {
-        if (notificationResponse && notificationResponse.notifications) {
-          // pagination is handled by p-table component of primeng
-          this.notifications = notificationResponse.notifications;
-          this.totalRecords = notificationResponse.total;
-        } else {
-          this.notifications = [];
-          this.totalRecords = 0;
-        }
+        });
+    } else {
+      // Fetch notifications and handle errors
+      this.notificationService
+        .getNotifications(variables, loginToken)
+        .pipe(
+          // catchError operator to handle errors
+          catchError((error) => {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: 'Error',
+              detail: `There was an error while loading notifications. Reason: ${error.message}`,
+            });
+            this.loading = false;
+            return of(null);
+          }),
+        )
+        .subscribe((notificationResponse: NotificationResponse | null) => {
+          if (notificationResponse && notificationResponse.notifications) {
+            // pagination is handled by p-table component of primeng
+            this.notifications = notificationResponse.notifications;
+            this.totalRecords = notificationResponse.total;
+          } else {
+            this.notifications = [];
+            this.totalRecords = 0;
+          }
 
-        this.loading = false;
-      });
+          this.loading = false;
+        });
+    }
   }
 
   showJsonObject(json: Record<string, unknown>): void {

apps/portal/src/app/views/notifications/notifications.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Observable, catchError, map } from 'rxjs';
 import { GraphqlService } from 'src/app/graphql/graphql.service';
-import { GetNotifications } from 'src/app/graphql/graphql.queries';
+import { GetArchivedNotifications, GetNotifications } from 'src/app/graphql/graphql.queries';
 import { ApolloQueryResult } from '@apollo/client/core';
-import { Notification, NotificationResponse } from './notification.model';
+import { ArchivedNotification, Notification, NotificationResponse } from './notification.model';
 
 interface GetNotificationsResponse {
   notifications: {
@@ -13,6 +13,16 @@ interface GetNotificationsResponse {
     limit?: number;
   };
 }
+
+interface GetArchivedNotificationsResponse {
+  archivedNotifications: {
+    archivedNotifications?: ArchivedNotification[];
+    total?: number;
+    offset?: number;
+    limit?: number;
+  };
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -38,4 +48,37 @@ export class NotificationsService {
       }),
     );
   }
+
+  getArchivedNotifications(variables, inputToken): Observable<NotificationResponse> {
+    return this.graphqlService.query(GetArchivedNotifications, variables, inputToken).pipe(
+      map((response: ApolloQueryResult<GetArchivedNotificationsResponse>) => {
+        const archivedNotificationArray =
+          response.data?.archivedNotifications.archivedNotifications;
+
+        const notificationResponseObject: NotificationResponse = {
+          notifications:
+            archivedNotificationArray?.map((item) => ({
+              id: item.notificationId,
+              channelType: item.channelType,
+              data: item.data,
+              deliveryStatus: item.deliveryStatus,
+              result: item.result,
+              createdOn: item.createdOn,
+              updatedOn: item.updatedOn,
+              createdBy: item.createdBy,
+              updatedBy: item.updatedBy,
+              status: item.status,
+            })) ?? [],
+          total: response.data?.archivedNotifications.total,
+          offset: response.data?.archivedNotifications.offset,
+          limit: response.data?.archivedNotifications.limit,
+        };
+        return notificationResponseObject;
+      }),
+      catchError((error) => {
+        const errorMessage: string = error.message;
+        throw new Error(errorMessage);
+      }),
+    );
+  }
 }