app/services/message.service.ts

0001 import { Injectable, TemplateRef } from '@angular/core';
0002 import { MatSnackBar } from '@angular/material/snack-bar';
0003 import { BehaviorSubject } from 'rxjs';
0004 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
0005
0006 export type MessageType = 'error' | 'info' | 'warning';
0007 export type Message = {
0008   type: MessageType;
0009   content: string;
0010   timestamp: Date;
0011 };
0012
0013 @Injectable({ providedIn: 'root' })
0014 export class MessageService {
0015   private errorQueue: Message[] = [];
0016   private infoQueue: Message[] = [];
0017   private allMessages = new BehaviorSubject<Message[]>([]);
0018   private viewport?: CdkVirtualScrollViewport;
0019
0020   constructor(private snackBar: MatSnackBar) {}
0021
0022   registerViewport(viewport: CdkVirtualScrollViewport) {
0023     this.viewport = viewport;
0024   }
0025
0026   addMessage(type: MessageType, content: string) {
0027     const message: Message = {
0028       type,
0029       content,
0030       timestamp: new Date()
0031     };
0032
0033     // Add to appropriate queue
0034     if (type === 'error') {
0035       this.errorQueue.push(message);
0036       this.processErrorQueue();
0037     } else {
0038       this.infoQueue.push(message);
0039       this.processInfoQueue();
0040     }
0041
0042     // Add to all messages log
0043     this.allMessages.next([...this.allMessages.value, message]);
0044
0045     // Scroll to bottom if viewport exists
0046     setTimeout(() => this.viewport?.scrollToIndex(this.allMessages.value.length));
0047   }
0048
0049   private processErrorQueue() {
0050     if (this.errorQueue.length > 0) {
0051       const message = this.errorQueue.shift()!;
0052       this.showSnackBar(message);
0053     }
0054   }
0055
0056   private processInfoQueue() {
0057     if (this.infoQueue.length > 0 && this.errorQueue.length === 0) {
0058       const message = this.infoQueue.shift()!;
0059       this.showSnackBar(message);
0060     }
0061   }
0062
0063   private showSnackBar(message: Message) {
0064     this.snackBar.open(message.content, 'Dismiss', {
0065       duration: message.type === 'error' ? 5000 : 3000,
0066       panelClass: [`message-${message.type}`],
0067       verticalPosition: 'top',
0068       horizontalPosition: 'right'
0069     }).afterDismissed().subscribe(() => {
0070       if (message.type === 'error') {
0071         this.processErrorQueue();
0072       } else {
0073         this.processInfoQueue();
0074       }
0075     });
0076   }
0077
0078   getMessageStream() {
0079     return this.allMessages.asObservable();
0080   }
0081
0082   clearMessages() {
0083     this.allMessages.next([]);
0084   }
0085 }