feat: fetch provider list on portal based on selected application

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

@@ -86,6 +86,33 @@ export const GetApplications = gql`
   }
 `;
 
+export const GetProviders = gql`
+  query GetProviders($limit: Int!, $offset: Int!, $filters: [UniversalFilter!]) {
+    providers(
+      options: {
+        limit: $limit
+        offset: $offset
+        sortBy: "createdOn"
+        sortOrder: ASC
+        filters: $filters
+      }
+    ) {
+      providers {
+        applicationId
+        channelType
+        createdOn
+        name
+        providerId
+        status
+        updatedOn
+      }
+      total
+      offset
+      limit
+    }
+  }
+`;
+
 export const LoginUser = gql`
   mutation LoginUser($username: String!, $password: String!) {
     login(loginUserInput: { username: $username, password: $password }) {

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

@@ -6,9 +6,9 @@ <h2 class="p-col-12">Notifications</h2>
   <div class="p-grid">
     <div class="p-col-12 p-md-3 filter-row">
       <p-dropdown
-        [options]="channelTypes"
-        [(ngModel)]="selectedChannelType"
-        placeholder="Select a Channel Type"
+        [options]="providers"
+        [(ngModel)]="selectedProvider"
+        placeholder="Select a Provider"
         class="grid-dropdown"
         [showClear]="true"
         (onChange)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
@@ -52,7 +52,10 @@ <h2 class="p-col-12">Notifications</h2>
         placeholder="Select an Application"
         class="grid-dropdown"
         [showClear]="false"
-        (onChange)="loadNotificationsLazy({ first: 0, rows: this.pageSize })"
+        (onChange)="
+          loadNotificationsLazy({ first: 0, rows: this.pageSize });
+          getProvidersForSelectedApplication()
+        "
         *ngIf="applications.length !== 0"
       ></p-dropdown>
     </div>

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

@@ -7,6 +7,8 @@ import { NotificationsService } from './notifications.service';
 import { Notification, NotificationResponse } from './notification.model';
 import { ApplicationsService } from '../applications/applications.service';
 import { ApplicationResponse } from '../applications/application.model';
+import { ProvidersService } from '../providers/providers.service';
+import { ProviderResponse } from '../providers/provider.model';
 
 @Component({
   selector: 'app-notifications',
@@ -36,24 +38,21 @@ export class NotificationsComponent implements OnInit {
   };
 
   // for component
-  channelTypes = Object.entries(ChannelType).map(([, value]) => ({
-    label: `${this.channelTypeMap[value].altText} - ${this.channelTypeMap[value].providerName}`,
-    value,
-  }));
-
   deliveryStatuses = Object.entries(DeliveryStatus).map(([, value]) => ({
     label: this.deliveryStatusMap[value].value,
     value,
   }));
 
   applications = [];
 
-  selectedChannelType = null;
+  providers = [];
 
   selectedDeliveryStatus = null;
 
   selectedApplication = null;
 
+  selectedProvider = null;
+
   selectedFromDate = null;
 
   selectedToDate = null;
@@ -85,6 +84,7 @@ export class NotificationsComponent implements OnInit {
   constructor(
     private notificationService: NotificationsService,
     private applicationService: ApplicationsService,
+    private providerService: ProvidersService,
     private messageService: MessageService,
     private authService: AuthService,
   ) {}
@@ -177,6 +177,9 @@ export class NotificationsComponent implements OnInit {
 
         // Now that applications are loaded, load notifications
         this.loadNotificationsLazy({ first: 0, rows: this.pageSize });
+
+        // Load providers for selected application
+        this.getProvidersForSelectedApplication();
       });
   }
 
@@ -225,6 +228,89 @@ export class NotificationsComponent implements OnInit {
     }
   }
 
+  getProvidersForSelectedApplication() {
+    // Set the query variables
+    const variables = {
+      filters: [],
+      offset: 0,
+      limit: 15,
+    };
+
+    if (!this.selectedApplication) {
+      // Handle missing selected application
+      return;
+    }
+
+    // Set query filters
+    variables.filters.push({
+      field: 'applicationId',
+      operator: 'eq',
+      value: this.selectedApplication.toString(),
+    });
+
+    // Fetch the login token
+    const loginToken = this.getJWTLoginToken();
+
+    if (!loginToken) {
+      // Handle missing token
+      return;
+    }
+
+    // Fetch providers and handle errors
+    this.providerService
+      .getProviders(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 providers. Reason: ${error.message}`,
+          });
+          return of(null); // Return null to indicate error
+        }),
+      )
+      .subscribe((providerResponse: ProviderResponse | null) => {
+        if (providerResponse?.errors?.length) {
+          const unauthorizedError = providerResponse.errors.find(
+            (error) => error.message === 'Unauthorized',
+          );
+
+          this.providers = [];
+
+          if (unauthorizedError) {
+            this.messageService.add({
+              key: 'tst',
+              severity: 'error',
+              summary: 'Error',
+              detail: 'Unauthorized access. Please log in again.',
+            });
+            this.authService.logoutUser();
+          } else {
+            providerResponse.errors.forEach((error) => {
+              this.messageService.add({
+                key: 'tst',
+                severity: 'error',
+                summary: 'Error',
+                detail: `GraphQL Error - Get Providers: ${error.message}`,
+              });
+            });
+          }
+        } else if (providerResponse?.providers?.length) {
+          // Fetch list of providers for dropdown
+          this.providers = providerResponse.providers.map((obj) => ({
+            // Name to display and ID to return upon selection
+            label: `${obj.name} - ${this.channelTypeMap[obj.channelType].altText}`,
+            value: obj.providerId,
+          }));
+        } else {
+          this.providers = [];
+          this.selectedProvider = null;
+        }
+      });
+  }
+
   loadNotificationsLazy(event: LazyLoadEvent) {
     this.loading = true;
 
@@ -257,29 +343,6 @@ export class NotificationsComponent implements OnInit {
       value: this.selectedApplication.toString(),
     });
 
-    if (this.selectedChannelType) {
-      if (this.selectedChannelType === this.allPortalChannelTypes.UNKNOWN) {
-        // Condition to filter all notifications with unknown channel type
-        const existingChannelTypes = Object.keys(this.channelTypeMap).filter(
-          (value) => value !== this.allPortalChannelTypes.UNKNOWN.toString(),
-        );
-        existingChannelTypes.forEach((key) => {
-          variables.filters.push({
-            field: 'channelType',
-            operator: 'ne',
-            value: key.toString(),
-          });
-        });
-      } else {
-        // Default behavior when we are sorting on known channelType
-        variables.filters.push({
-          field: 'channelType',
-          operator: 'eq',
-          value: this.selectedChannelType.toString(),
-        });
-      }
-    }
-
     if (this.selectedDeliveryStatus) {
       variables.filters.push({
         field: 'deliveryStatus',
@@ -288,6 +351,14 @@ export class NotificationsComponent implements OnInit {
       });
     }
 
+    if (this.selectedProvider) {
+      variables.filters.push({
+        field: 'providerId',
+        operator: 'eq',
+        value: this.selectedProvider.toString(),
+      });
+    }
+
     if (this.selectedFromDate) {
       variables.filters.push({
         field: 'createdOn',

apps/portal/src/app/views/providers/provider.model.ts

@@ -0,0 +1,18 @@
+import { GraphQLFormattedError } from 'graphql/error/GraphQLError';
+
+export interface Provider {
+  providerId: number;
+  name: string;
+  channelType: number;
+  createdOn: Date;
+  updatedOn: Date;
+  status: number;
+}
+
+export interface ProviderResponse {
+  providers: Provider[];
+  total: number;
+  offset: number;
+  limit: number;
+  errors?: ReadonlyArray<GraphQLFormattedError>;
+}

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

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Observable, catchError, map } from 'rxjs';
+import { GraphqlService } from 'src/app/graphql/graphql.service';
+import { GetProviders } from 'src/app/graphql/graphql.queries';
+import { ApolloQueryResult } from '@apollo/client/core';
+import { Provider, ProviderResponse } from './provider.model';
+
+interface GetProvidersResponse {
+  providers: {
+    providers?: Provider[];
+    total?: number;
+    offset?: number;
+    limit?: number;
+  };
+}
+@Injectable({
+  providedIn: 'root',
+})
+export class ProvidersService {
+  constructor(private graphqlService: GraphqlService) {}
+
+  getProviders(variables, inputToken): Observable<ProviderResponse> {
+    return this.graphqlService.query(GetProviders, variables, inputToken).pipe(
+      map((response: ApolloQueryResult<GetProvidersResponse>) => {
+        const providerArray = response.data?.providers.providers;
+
+        const providerResponseObject: ProviderResponse = {
+          providers: providerArray,
+          total: response.data?.providers.total,
+          offset: response.data?.providers.offset,
+          limit: response.data?.providers.limit,
+          errors: response.errors || null,
+        };
+        return providerResponseObject;
+      }),
+      catchError((error) => {
+        const errorMessage: string = error.message;
+        throw new Error(errorMessage);
+      }),
+    );
+  }
+}