feat: update pagination to show all notification records in portal

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

@@ -1,9 +1,15 @@
 import { gql } from 'apollo-angular';
 
 export const GetNotifications = gql`
-  query GetNotifications($filters: [UniversalFilter!]) {
+  query GetNotifications($limit: Int!, $offset: Int!, $filters: [UniversalFilter!]) {
     notifications(
-      options: { limit: 100, sortBy: "createdOn", sortOrder: DESC, filters: $filters }
+      options: {
+        limit: $limit
+        offset: $offset
+        sortBy: "createdOn"
+        sortOrder: DESC
+        filters: $filters
+      }
     ) {
       notifications {
         channelType
@@ -17,6 +23,9 @@ export const GetNotifications = gql`
         updatedBy
         updatedOn
       }
+      total
+      offset
+      limit
     }
   }
 `;

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

@@ -10,3 +10,10 @@ export interface Notification {
   updatedBy: string;
   status: number;
 }
+
+export interface NotificationResponse {
+  notifications: Notification[];
+  total: number;
+  offset: number;
+  limit: number;
+}

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

@@ -11,23 +11,23 @@ <h2 class="p-col-12">Notifications</h2>
         placeholder="Select a Channel Type"
         class="grid-dropdown"
         [showClear]="true"
-        (onChange)="loadNotifications()"
+        (onChange)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
       ></p-dropdown>
       <p-dropdown
         [options]="deliveryStatuses"
         [(ngModel)]="selectedDeliveryStatus"
         placeholder="Select a Delivery Status Type"
         class="grid-dropdown"
         [showClear]="true"
-        (onChange)="loadNotifications()"
+        (onChange)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
       ></p-dropdown>
       <p-dropdown
         [options]="applications"
         [(ngModel)]="selectedApplication"
         placeholder="Select an Application"
         class="grid-dropdown"
         [showClear]="false"
-        (onChange)="loadNotifications()"
+        (onChange)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
         *ngIf="allApplicationsList.length !== 0"
       ></p-dropdown>
     </div>
@@ -36,15 +36,16 @@ <h2 class="p-col-12">Notifications</h2>
   <div class="p-grid table-container">
     <div class="p-col-12">
       <p-table
-        [value]="filteredNotifications"
+        [value]="notifications"
         [rows]="pageSize"
         [paginator]="true"
         [totalRecords]="totalRecords"
-        (onPage)="onPageChange($event)"
+        lazy="true"
+        (onLazyLoad)="loadNotificationsLazy($event)"
         [showCurrentPageReport]="true"
         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
         [rowsPerPageOptions]="pageSizeOptions"
-        *ngIf="!loading"
+        [loading]="loading"
       >
         <ng-template pTemplate="header">
           <tr>
@@ -154,9 +155,6 @@ <h2 class="p-col-12">Notifications</h2>
           </tr>
         </ng-template>
       </p-table>
-      <div class="card flex justify-content-center" *ngIf="loading">
-        <p-progressSpinner ariaLabel="Loading"></p-progressSpinner>
-      </div>
       <app-json-dialog
         *ngIf="jsonDialogData"
         [jsonData]="jsonDialogData"

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

@@ -10,7 +10,6 @@ h2 {
   margin-bottom: 15px;
 }
 
-
 .label {
   font-weight: bold;
   margin-right: 10px;

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

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ChannelType, ChannelTypeMap, DeliveryStatus } from 'src/common/constants/notification';
-import { MessageService } from 'primeng/api';
+import { LazyLoadEvent, MessageService } from 'primeng/api';
 import { catchError, of } from 'rxjs';
 import { NotificationsService } from './notifications.service';
-import { Notification } from './notification.model';
+import { Notification, NotificationResponse } from './notification.model';
 
 @Component({
   selector: 'app-notifications',
@@ -13,8 +13,6 @@ import { Notification } from './notification.model';
 export class NotificationsComponent implements OnInit {
   notifications: Notification[] = [];
 
-  filteredNotifications: Notification[] = [];
-
   allServerApiKeysList = [];
 
   allApplicationsList = [];
@@ -67,8 +65,6 @@ export class NotificationsComponent implements OnInit {
 
   totalRecords = 0;
 
-  displayedNotifications: Notification[] = [];
-
   jsonDialogData: Record<string, unknown>;
 
   jsonDialogVisible: Boolean = false;
@@ -83,7 +79,7 @@ export class NotificationsComponent implements OnInit {
   ngOnInit(): void {
     this.applications = this.getApplications();
     this.selectedApplication = this.setApplicationOnInit();
-    this.loadNotifications();
+    this.loadNotificationsLazy({ first: 0, rows: this.pageSize });
   }
 
   getApplications() {
@@ -123,9 +119,13 @@ export class NotificationsComponent implements OnInit {
     return this.mapApplicationAndKeys.get(this.selectedApplication);
   }
 
-  loadNotifications() {
+  loadNotificationsLazy(event: LazyLoadEvent) {
     this.loading = true;
-    const variables = { filters: [] };
+    const variables = {
+      filters: [],
+      offset: event.first,
+      limit: event.rows,
+    };
 
     if (this.selectedChannelType) {
       if (this.selectedChannelType === this.allPortalChannelTypes.UNKNOWN) {
@@ -141,7 +141,7 @@ export class NotificationsComponent implements OnInit {
           });
         });
       } else {
-        // Default behavior
+        // Default behavior when we are sorting on known channelType
         variables.filters.push({
           field: 'channelType',
           operator: 'eq',
@@ -176,39 +176,14 @@ export class NotificationsComponent implements OnInit {
           return of([]);
         }),
       )
-      .subscribe((notifications: Notification[]) => {
-        this.notifications = [];
-        this.notifications.push(...notifications);
-        // Apply filters to the merged array of notifications
-        this.applyFilters();
+      .subscribe((notificationResponse: NotificationResponse) => {
+        // pagination is handled by p-table component of primeng
+        this.notifications = notificationResponse.notifications;
+        this.totalRecords = notificationResponse.total;
         this.loading = false;
       });
   }
 
-  applyFilters() {
-    this.filteredNotifications = this.notifications;
-    this.totalRecords = this.notifications.length;
-    this.updateDisplayedNotifications();
-  }
-
-  // Update displayed notifications based on pagination
-  updateDisplayedNotifications() {
-    const startIndex = (this.currentPage - 1) * this.pageSize;
-    const endIndex = startIndex + this.pageSize;
-    this.displayedNotifications = this.filteredNotifications.slice(startIndex, endIndex);
-  }
-
-  // Handle page change event
-  onPageChange(event) {
-    this.currentPage = event.page;
-    this.updateDisplayedNotifications();
-  }
-
-  // Handle page size change event
-  onPageSizeChange() {
-    this.updateDisplayedNotifications();
-  }
-
   showJsonObject(json: Record<string, unknown>): void {
     this.jsonDialogData = json;
     this.jsonDialogVisible = true;

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

@@ -3,11 +3,14 @@ import { Observable, catchError, map } from 'rxjs';
 import { GraphqlService } from 'src/app/graphql/graphql.service';
 import { GetNotifications } from 'src/app/graphql/graphql.queries';
 import { ApolloQueryResult } from '@apollo/client/core';
-import { Notification } from './notification.model';
+import { Notification, NotificationResponse } from './notification.model';
 
 interface GetNotificationsResponse {
   notifications: {
     notifications?: Notification[];
+    total?: number;
+    offset?: number;
+    limit?: number;
   };
 }
 @Injectable({
@@ -16,11 +19,18 @@ interface GetNotificationsResponse {
 export class NotificationsService {
   constructor(private graphqlService: GraphqlService) {}
 
-  getNotifications(variables, inputToken): Observable<Notification[]> {
+  getNotifications(variables, inputToken): Observable<NotificationResponse> {
     return this.graphqlService.query(GetNotifications, variables, inputToken).pipe(
       map((response: ApolloQueryResult<GetNotificationsResponse>) => {
-        const notifications = response.data?.notifications.notifications;
-        return [...notifications];
+        const notificationArray = response.data?.notifications.notifications;
+
+        const notificationResponseObject: NotificationResponse = {
+          notifications: [...notificationArray],
+          total: response.data?.notifications.total,
+          offset: response.data?.notifications.offset,
+          limit: response.data?.notifications.limit,
+        };
+        return notificationResponseObject;
       }),
       catchError((error) => {
         const errorMessage: string = error.message;