mesauth-angular 1.2.3 → 1.2.5

package/src/notification-badge.component.ts

@@ -0,0 +1,125 @@
+import { Component, OnInit, OnDestroy, Output, EventEmitter, HostBinding } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { MesAuthService } from './mes-auth.service';
+import { ThemeService, Theme } from './theme.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'ma-notification-badge',
+  standalone: true,
+  imports: [NgIf],
+  template: `
+    <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+      <span class="icon">🔔</span>
+      <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+    </button>
+  `,
+  styles: [`
+    :host {
+      --error-color: #f44336;
+    }
+
+    :host(.theme-dark) {
+      --error-color: #ef5350;
+    }
+
+    .notification-btn {
+      position: relative;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 8px;
+      transition: opacity 0.2s;
+    }
+
+    .notification-btn:hover {
+      opacity: 0.7;
+    }
+
+    .icon {
+      display: inline-block;
+    }
+
+    .badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: var(--error-color);
+      color: white;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  `]
+})
+export class NotificationBadgeComponent implements OnInit, OnDestroy {
+  @Output() notificationClick = new EventEmitter<void>();
+  @HostBinding('class') get themeClass(): string {
+    return `theme-${this.currentTheme}`;
+  }
+  
+  unreadCount = 0;
+  currentTheme: Theme = 'light';
+  private hasUser = false;
+  private destroy$ = new Subject<void>();
+
+  constructor(private authService: MesAuthService, private themeService: ThemeService) {}
+
+  ngOnInit() {
+    this.themeService.currentTheme$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(theme => {
+        this.currentTheme = theme;
+      });
+
+    this.authService.currentUser$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(user => {
+        this.hasUser = !!user;
+        if (!this.hasUser) {
+          this.unreadCount = 0;
+          return;
+        }
+        this.loadUnreadCount();
+      });
+    
+    // Listen for new notifications
+    this.authService.notifications$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        if (this.hasUser) {
+          this.loadUnreadCount();
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private loadUnreadCount() {
+    if (!this.hasUser) {
+      this.unreadCount = 0;
+      return;
+    }
+
+    this.authService.getUnreadCount().subscribe({
+      next: (response: any) => {
+        this.unreadCount = response.unreadCount || 0;
+      },
+      error: (err) => console.error('Error loading unread count:', err)
+    });
+  }
+
+  onNotificationClick() {
+    this.notificationClick.emit();
+  }
+}