@opendevstack/ngx-appshell 19.0.5

package/schematics/nats-notifications/files/nats-service/nats.service.ts.template

@@ -0,0 +1,255 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { wsconnect, NatsConnection, Subscription } from '@nats-io/nats-core';
+import { jetstreamManager } from '@nats-io/jetstream';
+import { KV, Kvm, KvEntry } from '@nats-io/kv';
+
+export interface NatsMessage {
+  id: string;
+  subject: string;
+  data: any;
+  read: boolean;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NatsService implements OnDestroy {
+  private connection: NatsConnection | null = null;
+  private kv: KV | null = null;
+  private subscriptions: Map<string, Subscription> = new Map();
+  private messagesSubject: BehaviorSubject<NatsMessage[]> = new BehaviorSubject<NatsMessage[]>([]);
+  private unreadMessagesCountSubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);
+  private liveMessageSubject: BehaviorSubject<NatsMessage | null> = new BehaviorSubject<NatsMessage | null>(null);
+  private connectionError = new Subject<Error>();
+
+  public messages$: Observable<NatsMessage[]> = this.messagesSubject.asObservable();
+  public unreadMessagesCount$: Observable<number> = this.unreadMessagesCountSubject.asObservable();
+  public liveMessage$: Observable<NatsMessage | null> = this.liveMessageSubject.asObservable();
+  public connectionError$: Observable<Error> = this.connectionError.asObservable();
+  
+  constructor() {}
+
+  public async initialize(serverUrl: string): Promise<void> {
+    try {
+      this.connection = await wsconnect({ servers: serverUrl });
+    } catch (error) {
+      console.error('Failed to initialize NATS service', error);
+      this.connectionError.next(error as Error);
+      throw error;
+    }
+  }
+
+  public async initializeUser(user: string): Promise<void> {
+    try {      
+      await this.initializeKvStore(user);
+      await this.loadMessages(user);
+    } catch (error) {
+      console.error('Failed to initialize NATS service for user', error);
+      this.connectionError.next(error as Error);
+      throw error;
+    }
+  }
+
+  private async initializeKvStore(user: string): Promise<void> {
+    if (!this.connection) {
+      throw new Error('NATS connection not established properly');
+    }
+
+    const bucketName = `bucket-${user}`;
+
+    const publicKey = this.getPublicKey(user);
+    const privateKey = this.getPrivateKey(user);
+
+    try {
+      const kvm: Kvm = new Kvm(this.connection);
+      this.kv = await kvm.create(bucketName);
+
+      const publicKv: KvEntry | null = await this.kv.get(publicKey);
+      const privateKv: KvEntry | null = await this.kv.get(privateKey);
+
+      if(!publicKv) {
+        await this.kv.put(publicKey, '[]');
+      }
+      if(!privateKv) {
+        await this.kv.put(privateKey, '[]');
+      }
+    } catch (error) {
+      console.error('Failed to initialize KV store for user', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Load initial messages for all subjects from KV store
+   */
+  private async loadMessages(user: string): Promise<void> {
+    if (!this.connection || !this.kv) {
+      throw new Error('NATS connection or KV client not initialized');
+    }
+  
+    const subjects = ['app.com.notifications.public', `app.com.notifications.private.${user}`];
+  
+    try {
+      const jsm = await jetstreamManager(this.connection);
+      const messages: NatsMessage[] = [];
+  
+      for (const subjectName of subjects) {
+        const streamName = await jsm.streams.find(subjectName);
+        if (!streamName) {
+          console.error(`Stream not found for subject: ${subjectName}`);
+          return;
+        }
+        const createdConsumer = await jsm.consumers.add(streamName, { deliver_policy: 'all', filter_subject: subjectName });
+        const consumer = await jsm.jetstream().consumers.get(streamName, createdConsumer.name);
+        const iter = await consumer.consume();
+        const readIds = await this.getReadMessageIds(subjectName);
+        (async () => {
+          for await (const msg of iter) {
+            try {
+              const message: NatsMessage = {
+                id: msg.headers?.get('Nats-Msg-Id') || '',
+                subject: msg.subject,
+                data: msg.json(),
+                read: readIds.includes(msg.headers?.get('Nats-Msg-Id') || '')
+              };
+              if (this.isValidMessage(message.data)) {
+                messages.push(message);
+                if (message.data.date) {
+                  const messageDate = new Date(message.data.date);
+                  if (Date.now() - messageDate.getTime() <= 5000) { // We add a treshold of 5 seconds to show it as live message
+                    this.liveMessageSubject.next(message);
+                  }
+                }
+              }
+              if (msg.info.pending === 0) {
+                messages.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime());
+                this.messagesSubject.next(messages);
+                this.unreadMessagesCountSubject.next(messages.filter(m => !m.read).length);
+              }
+            } catch (error) {
+              console.error('Error processing message:', error);
+            }
+          }
+        })();
+      }
+    } catch (error) {
+      console.error('Failed to load initial messages from stream', error);
+      throw error;
+    }
+  }
+  
+
+  /**
+   * Mark multiple messages as read by storing their IDs in the KV store
+   * @param subject The subject the messages belong to
+   * @param messageIds The array of message IDs to mark as read
+   */
+  public async readMessages(subject: string, messageIds: string[]): Promise<void> {
+    if (!this.kv) {
+      throw new Error('KV store not initialized');
+    }
+
+    try {
+      const entry = await this.kv.get(subject);
+      let readMessageIds: string[] = [];
+      
+      if (entry) {
+        readMessageIds = JSON.parse(entry.string());
+      }
+      
+      const newReadMessageIds = messageIds.filter(id => !readMessageIds.includes(id));
+      if (newReadMessageIds.length > 0) {
+        readMessageIds.push(...newReadMessageIds);
+        await this.kv.put(subject, JSON.stringify(readMessageIds));
+      }
+      this.messagesSubject.next(this.messagesSubject.getValue().map(message => {
+        if (messageIds.includes(message.id)) {
+          message.read = true;
+        }
+        return message;
+      }));
+      this.unreadMessagesCountSubject.next(Math.max(0, this.messagesSubject.getValue().filter(m => !m.read && !readMessageIds.includes(m.id) ).length));
+    } catch (error) {
+      console.error(`Failed to mark messages as read: ${subject} - ${messageIds.join(', ')}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get the list of read message IDs for a specific key from the KV store
+   * @param key The key from the KV to get read message IDs for
+   * @returns Array of read message IDs
+   */
+  public async getReadMessageIds(key: string): Promise<string[]> {
+    if (!this.kv) {
+      throw new Error('KV store not initialized');
+    }
+
+    try {
+      const entry = await this.kv.get(key);
+      
+      if (!entry) {
+        return [];
+      }
+
+      return JSON.parse(entry.string());
+    } catch (error) {
+      console.error(`Failed to get read messages for key: ${key}`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Check if a specific message has been read
+   * @param subject The subject the message belongs to in the KV store
+   * @param messageId The ID of the message to check
+   * @returns Boolean indicating if the message has been read
+   */
+  public async isMessageRead(subject: string, messageId: string): Promise<boolean> {
+    const readMessageIds = await this.getReadMessageIds(subject);
+    return readMessageIds.includes(messageId);
+  }
+
+  /**
+   * Unsubscribe from all subjects, clear subscriptions and close the connection
+   */
+  public async close(): Promise<void> {
+    for (const [subject, subscription] of this.subscriptions.entries()) {
+      try {
+        await subscription.unsubscribe();
+      } catch (error) {
+        console.error(`Error unsubscribing from ${subject}:`, error);
+      }
+    }
+    
+    this.subscriptions.clear();
+    
+    if (this.connection) {
+      await this.connection.close();
+      this.connection = null;
+    }
+  }
+  
+  private getPublicKey(user: string): string {
+    return `app.com.notifications.public.${user}.read`;
+  }
+  
+  private getPrivateKey(user: string): string {
+    return `app.com.notifications.private.${user}.read`;
+  }
+
+  isValidMessage(message: any): boolean {
+    const requiredFields = ['type', 'title', 'date'];
+    const hasRequiredFields = requiredFields.every(field => message.hasOwnProperty(field) && message[field] && message[field] !== '');
+    const isValidDate = !isNaN(Date.parse(message.date));
+
+    return hasRequiredFields && isValidDate;
+  }
+
+  ngOnDestroy(): void {
+    this.close().catch(error => {
+      console.error('Error closing NATS connection', error);
+    });
+  }
+}

package/schematics/nats-notifications/files/notifications-screen/notifications-screen.component.html.template

@@ -0,0 +1,7 @@
+<appshell-notifications-screen
+    [pageTitle]="'Notifications'"
+    [breadcrumbLinks]="breadcrumbLinks"
+    [notifications]="notifications"
+    (readNotification)="markAsRead($event)"
+    (readAllNotifications)="markAllAsRead()"
+/>

package/schematics/nats-notifications/files/notifications-screen/notifications-screen.component.spec.ts.template

@@ -0,0 +1,152 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { NotificationsScreenComponent } from './notifications-screen.component';
+import { AppShellNotification } from '@appshell/ngx-appshell';
+import { NatsMessage, NatsService } from '../../services/nats.service';
+import { Subject } from 'rxjs';
+import { provideMarkdown } from 'ngx-markdown';
+
+describe('NotificationsScreenComponent', () => {
+  let component: NotificationsScreenComponent;
+  let fixture: ComponentFixture<NotificationsScreenComponent>;
+  let mockNatsService: jasmine.SpyObj<NatsService>;
+  let natsMessages$: Subject<NatsMessage[]>;
+
+  beforeEach(async () => {
+    natsMessages$ = new Subject<NatsMessage[]>();
+    mockNatsService = jasmine.createSpyObj('NatsService', ['initialize', 'initializeUser', 'isValidMessage', 'readMessages'], { messages$: natsMessages$.asObservable() });
+        
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, NotificationsScreenComponent],
+      providers: [
+        provideHttpClient(),
+        provideMarkdown(),
+        { provide: NatsService, useValue: mockNatsService }
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should subscribe to natsService messages$ and populate notifications', () => {
+    const mockMessages = [
+      {
+        id: '1',
+        data: { type: 'info', title: 'Test Title 1', message: 'Test Message 1', date: '2023-01-01T00:00:00Z' },
+        read: false,
+        subject: 'subject1'
+      },
+      {
+        id: '2',
+        data: { type: 'warning', title: 'Test Title 2', message: 'Test Message 2', date: '2023-01-02T00:00:00Z' },
+        read: true,
+        subject: 'subject2'
+      }
+    ];
+
+    mockNatsService.isValidMessage.and.returnValues(true, false);
+    natsMessages$.next(mockMessages);
+
+    expect(component.notifications).toEqual([
+      {
+        id: '1',
+        type: 'info',
+        title: 'Test Title 1',
+        message: 'Test Message 1',
+        date: new Date('2023-01-01T00:00:00Z'),
+        read: false,
+        subject: 'subject1'
+      }
+    ]);
+  });
+  
+  it('should mark a notification as read and call natsService.readMessages', () => {
+    const mockNotification: AppShellNotification = {
+      id: '1',
+      type: 'info',
+      title: 'Test Title',
+      message: 'Test Message',
+      date: new Date('2023-01-01T00:00:00Z'),
+      read: false,
+      subject: 'subject1'
+    };
+
+    component.notifications = [mockNotification];
+    component.markAsRead(mockNotification);
+
+    expect(mockNatsService.readMessages).toHaveBeenCalledWith('subject1', ['1']);
+  });
+
+  it('should not mark a notification as read if it does not exist in notifications', () => {
+    const mockNotification: AppShellNotification = {
+      id: '1',
+      type: 'info',
+      title: 'Test Title',
+      message: 'Test Message',
+      date: new Date('2023-01-01T00:00:00Z'),
+      read: false,
+      subject: 'subject1'
+    };
+
+    component.notifications = [];
+
+    component.markAsRead(mockNotification);
+
+    expect(mockNatsService.readMessages).not.toHaveBeenCalled();
+  });
+  
+  it('should mark all notifications as read and call natsService.readMessages for each subject', () => {
+    const mockNotifications: AppShellNotification[] = [
+      {
+        id: '1',
+        type: 'info',
+        title: 'Test Title 1',
+        message: 'Test Message 1',
+        date: new Date('2023-01-01T00:00:00Z'),
+        read: false,
+        subject: 'subject1'
+      },
+      {
+        id: '2',
+        type: 'success',
+        title: 'Test Title 2',
+        message: 'Test Message 2',
+        date: new Date('2023-01-02T00:00:00Z'),
+        read: false,
+        subject: 'subject1'
+      },
+      {
+        id: '3',
+        type: 'error',
+        title: 'Test Title 3',
+        message: 'Test Message 3',
+        date: new Date('2023-01-03T00:00:00Z'),
+        read: false,
+        subject: 'subject2'
+      }
+    ];
+
+    component.notifications = mockNotifications;
+
+    component.markAllAsRead();
+
+    expect(mockNatsService.readMessages).toHaveBeenCalledWith('subject1', ['1', '2']);
+    expect(mockNatsService.readMessages).toHaveBeenCalledWith('subject2', ['3']);
+  });
+
+  it('should not call natsService.readMessages if there are no notifications', () => {
+    component.notifications = [];
+
+    component.markAllAsRead();
+
+    expect(mockNatsService.readMessages).not.toHaveBeenCalled();
+  });
+});

package/schematics/nats-notifications/files/notifications-screen/notifications-screen.component.ts.template

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { AppShellNotificationsScreenComponent, AppShellLink, AppShellNotification } from '@appshell/ngx-appshell';
+import { Subscription } from 'rxjs';
+import { NatsService } from '../../services/nats.service';
+
+@Component({
+  selector: 'app-notifications-screen',
+  standalone: true,
+  imports: [AppShellNotificationsScreenComponent],
+  templateUrl: './notifications-screen.component.html',
+  styleUrl: './notifications-screen.component.scss'
+})
+export class NotificationsScreenComponent {
+
+  notifications: AppShellNotification[] = [];
+  private messageSubscription!: Subscription;
+
+  constructor(private natsService: NatsService) {
+    this.messageSubscription = this.natsService.messages$.subscribe((messages) => {
+      this.notifications = messages.filter((message) => this.natsService.isValidMessage(message.data)).map((message) => ({
+        id: message.id,
+        type: message.data.type,
+        title: message.data.title,
+        message: message.data.message,
+        date: new Date(message.data.date),
+        read: message.read,
+        subject: message.subject
+      }));
+    });
+  }
+
+  breadcrumbLinks: AppShellLink[] = [
+    {anchor: '', label: 'Notifications'}
+  ]
+
+  markAsRead(notification: AppShellNotification) {
+    const notif = this.notifications.find(n => n === notification);
+    if (!notif) {
+      return;
+    }
+    this.natsService.readMessages(notification.subject, [notification.id]);
+  }
+  
+  markAllAsRead() {
+    const groupedBySubject = this.notifications.reduce((acc, notification) => {
+      if (!acc[notification.subject]) {
+        acc[notification.subject] = [];
+      }
+      acc[notification.subject].push(notification.id);
+      return acc;
+    }, {} as Record<string, string[]>);
+
+    Object.entries(groupedBySubject).forEach(([subject, ids]) => {
+      this.natsService.readMessages(subject, ids);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.messageSubscription.unsubscribe();
+  }
+}

package/schematics/nats-notifications/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function natsNotificationsGenerator(): Rule;