mesauth-angular 1.2.0 → 1.2.1

package/src/notification-panel.component.ts

@@ -1,672 +0,0 @@
-import { Component, OnInit, OnDestroy, HostBinding, Output, EventEmitter } from '@angular/core';
-import { NgIf, NgFor } from '@angular/common';
-import { MesAuthService, NotificationDto, PagedList, RealTimeNotificationDto } from './mes-auth.service';
-import { ToastService } from './toast.service';
-import { ThemeService, Theme } from './theme.service';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-@Component({
-  selector: 'ma-notification-panel',
-  standalone: true,
-  imports: [NgIf, NgFor],
-  template: `
-    <div class="notification-panel" [class.open]="isOpen">
-      <!-- Header -->
-      <div class="panel-header">
-        <h3>Notifications</h3>
-        <button class="close-btn" (click)="close()" title="Close">✕</button>
-      </div>
-
-      <!-- Tabs -->
-      <div class="tabs">
-        <button
-          class="tab-btn"
-          [class.active]="activeTab === 'unread'"
-          (click)="switchTab('unread')"
-        >
-          Unread ({{ unreadNotifications.length }})
-        </button>
-        <button
-          class="tab-btn"
-          [class.active]="activeTab === 'read'"
-          (click)="switchTab('read')"
-        >
-          Read ({{ readNotifications.length }})
-        </button>
-      </div>
-
-      <!-- Notifications List -->
-      <div class="notifications-list">
-        <ng-container *ngIf="currentNotifications.length > 0">
-          <div
-            *ngFor="let notification of currentNotifications"
-            class="notification-item"
-            [class.unread]="!notification.isRead"
-            (click)="openDetails(notification)"
-          >
-            <div class="notification-content">
-              <div class="notification-title">{{ notification.title }}</div>
-              <div class="notification-message">{{ getNotificationMessage(notification) }}</div>
-              <div class="notification-meta">
-                <span class="app-name">{{ notification.sourceAppName }}</span>
-                <span class="time">{{ formatDate(notification.createdAt) }}</span>
-              </div>
-            </div>
-            <button
-              class="read-btn"
-              (click)="markAsRead(notification.id, $event)"
-              title="Mark as read"
-              *ngIf="!notification.isRead"
-            >
-              ✓
-            </button>
-            <button
-              class="delete-btn"
-              (click)="delete(notification.id, $event)"
-              title="Delete notification"
-              *ngIf="notification.isRead"
-            >
-              🗑
-            </button>
-          </div>
-        </ng-container>
-
-        <ng-container *ngIf="currentNotifications.length === 0">
-          <div class="empty-state">
-            No {{ activeTab }} notifications
-          </div>
-        </ng-container>
-      </div>
-
-      <!-- Footer Actions -->
-      <div class="panel-footer" *ngIf="currentNotifications.length > 0">
-        <div class="footer-actions" *ngIf="activeTab === 'unread'">
-          <button class="action-btn" (click)="markAllAsRead()" *ngIf="unreadNotifications.length > 0">
-            Mark all as read
-          </button>
-          <button class="action-btn delete-all-btn" (click)="deleteAllUnread()" *ngIf="unreadNotifications.length > 0">
-            Delete all
-          </button>
-        </div>
-        <button class="action-btn delete-all-btn" (click)="deleteAllRead()" *ngIf="activeTab === 'read' && readNotifications.length > 0">
-          Delete all
-        </button>
-      </div>
-    </div>
-
-    <!-- Details Modal -->
-    <div class="modal-overlay" *ngIf="selectedNotification" (click)="closeDetails()">
-      <div class="modal-container" (click)="$event.stopPropagation()">
-        <div class="modal-header">
-          <h3>{{ selectedNotification.title }}</h3>
-          <button class="close-btn" (click)="closeDetails()" title="Close">✕</button>
-        </div>
-        <div class="modal-meta">
-          <span class="app-name">{{ selectedNotification.sourceAppName }}</span>
-          <span class="time">{{ formatDate(selectedNotification.createdAt) }}</span>
-        </div>
-        <div class="modal-body" [innerHTML]="getHtmlMessage(selectedNotification)"></div>
-        <div class="modal-footer">
-          <button class="action-btn" (click)="closeDetails()">Close</button>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    :host {
-      display: block;
-      position: relative;
-      --primary-color: #1976d2;
-      --primary-hover: #1565c0;
-      --success-color: #4caf50;
-      --error-color: #f44336;
-      --text-primary: #333;
-      --text-secondary: #666;
-      --text-muted: #999;
-      --bg-primary: white;
-      --bg-secondary: #f5f5f5;
-      --bg-tertiary: #fafafa;
-      --bg-hover: #f5f5f5;
-      --bg-unread: #e3f2fd;
-      --border-color: #e0e0e0;
-      --border-light: #f0f0f0;
-      --shadow: rgba(0, 0, 0, 0.1);
-    }
-
-    :host(.theme-dark) {
-      display: block;
-      position: relative;
-      --primary-color: #90caf9;
-      --primary-hover: #64b5f6;
-      --success-color: #81c784;
-      --error-color: #ef5350;
-      --text-primary: #e0e0e0;
-      --text-secondary: #b0b0b0;
-      --text-muted: #888;
-      --bg-primary: #1e1e1e;
-      --bg-secondary: #2d2d2d;
-      --bg-tertiary: #252525;
-      --bg-hover: #333;
-      --bg-unread: rgba(144, 202, 249, 0.1);
-      --border-color: #404040;
-      --border-light: #333;
-      --shadow: rgba(0, 0, 0, 0.3);
-    }
-
-    .notification-panel {
-      position: fixed;
-      top: 0;
-      right: -350px;
-      width: 350px;
-      height: 100vh;
-      background: var(--bg-primary);
-      box-shadow: -2px 0 8px var(--shadow);
-      display: flex;
-      flex-direction: column;
-      z-index: 1000;
-      transition: right 0.3s ease;
-    }
-
-    .notification-panel.open {
-      right: 0;
-    }
-
-    .panel-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px;
-      border-bottom: 1px solid var(--border-color);
-      background-color: var(--bg-secondary);
-    }
-
-    .panel-header h3 {
-      margin: 0;
-      font-size: 18px;
-      color: var(--text-primary);
-    }
-
-    .close-btn {
-      background: none;
-      border: none;
-      font-size: 20px;
-      cursor: pointer;
-      color: var(--text-secondary);
-      padding: 0;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: color 0.2s;
-    }
-
-    .close-btn:hover {
-      color: var(--text-primary);
-    }
-
-    .tabs {
-      display: flex;
-      border-bottom: 1px solid var(--border-color);
-      background-color: var(--bg-secondary);
-    }
-
-    .tab-btn {
-      flex: 1;
-      padding: 12px 16px;
-      background: none;
-      border: none;
-      color: var(--text-secondary);
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-      transition: all 0.2s;
-      border-bottom: 2px solid transparent;
-    }
-
-    .tab-btn:hover {
-      background-color: var(--bg-hover);
-      color: var(--text-primary);
-    }
-
-    .tab-btn.active {
-      color: var(--primary-color);
-      border-bottom-color: var(--primary-color);
-      background-color: var(--bg-primary);
-    }
-
-    .notifications-list {
-      flex: 1;
-      overflow-y: auto;
-    }
-
-    .notification-item {
-      display: flex;
-      gap: 12px;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-light);
-      cursor: pointer;
-      background-color: var(--bg-tertiary);
-      transition: background-color 0.2s;
-    }
-
-    .notification-item:hover {
-      background-color: var(--bg-hover);
-    }
-
-    .notification-item.unread {
-      background-color: var(--bg-unread);
-    }
-
-    .notification-content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .notification-title {
-      font-weight: 600;
-      color: var(--text-primary);
-      font-size: 14px;
-      margin-bottom: 4px;
-    }
-
-    .notification-message {
-      color: var(--text-secondary);
-      font-size: 12px;
-      line-height: 1.4;
-      margin-bottom: 6px;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    .notification-meta {
-      display: flex;
-      justify-content: space-between;
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-
-    .app-name {
-      font-weight: 500;
-      color: var(--primary-color);
-    }
-
-    .read-btn {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 14px;
-      padding: 0;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: color 0.2s;
-    }
-
-    .read-btn:hover {
-      color: var(--success-color);
-    }
-
-    .delete-btn {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 14px;
-      padding: 0;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: color 0.2s;
-    }
-
-    .delete-btn:hover {
-      color: var(--error-color);
-    }
-
-    .empty-state {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      color: var(--text-muted);
-      font-size: 14px;
-    }
-
-    .panel-footer {
-      padding: 12px 16px;
-      border-top: 1px solid var(--border-color);
-      background-color: var(--bg-secondary);
-    }
-
-    .footer-actions {
-      display: flex;
-      gap: 8px;
-    }
-
-    .footer-actions .action-btn {
-      flex: 1;
-    }
-
-    .action-btn {
-      width: 100%;
-      padding: 8px;
-      background-color: var(--primary-color);
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-weight: 500;
-      transition: background-color 0.2s;
-    }
-
-    .action-btn:hover {
-      background-color: var(--primary-hover);
-    }
-
-    .delete-all-btn {
-      background-color: var(--error-color);
-      color: white;
-    }
-
-    .delete-all-btn:hover {
-      background-color: #d32f2f; /* Darker red for hover */
-    }
-
-    /* Modal Overlay */
-    .modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100vw;
-      height: 100vh;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-    }
-
-    .modal-container {
-      background: var(--bg-primary);
-      border-radius: 8px;
-      width: 90%;
-      max-width: 600px;
-      max-height: 80vh;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 4px 20px var(--shadow);
-    }
-
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border-color);
-      background-color: var(--bg-secondary);
-      border-radius: 8px 8px 0 0;
-    }
-
-    .modal-header h3 {
-      margin: 0;
-      font-size: 18px;
-      color: var(--text-primary);
-    }
-
-    .modal-meta {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 20px;
-      font-size: 12px;
-      color: var(--text-muted);
-      background-color: var(--bg-tertiary);
-      border-bottom: 1px solid var(--border-light);
-    }
-
-    .modal-body {
-      padding: 20px;
-      overflow-y: auto;
-      flex: 1;
-      color: var(--text-primary);
-      font-size: 14px;
-      line-height: 1.6;
-    }
-
-    .modal-footer {
-      padding: 12px 20px;
-      border-top: 1px solid var(--border-color);
-      background-color: var(--bg-secondary);
-      border-radius: 0 0 8px 8px;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .modal-footer .action-btn {
-      width: auto;
-      padding: 8px 24px;
-    }
-
-    @media (max-width: 600px) {
-      .notification-panel {
-        width: 100%;
-        right: -100%;
-      }
-
-      .modal-container {
-        width: 95%;
-        max-height: 90vh;
-      }
-    }
-  `]
-})
-export class NotificationPanelComponent implements OnInit, OnDestroy {
-  @Output() notificationRead = new EventEmitter<void>();
-  @HostBinding('class') get themeClass(): string {
-    return `theme-${this.currentTheme}`;
-  }
-
-  isOpen = false;
-  notifications: NotificationDto[] = [];
-  currentTheme: Theme = 'light';
-  activeTab: 'unread' | 'read' = 'unread'; // Default to unread tab
-  private destroy$ = new Subject<void>();
-
-  get unreadNotifications(): NotificationDto[] {
-    return this.notifications.filter(n => !n.isRead);
-  }
-
-  get readNotifications(): NotificationDto[] {
-    return this.notifications.filter(n => n.isRead);
-  }
-
-  get currentNotifications(): NotificationDto[] {
-    return this.activeTab === 'unread' ? this.unreadNotifications : this.readNotifications;
-  }
-
-  selectedNotification: NotificationDto | null = null;
-
-  // Returns plain text message for list display
-  getNotificationMessage(notification: NotificationDto): string {
-    return notification.message || '';
-  }
-
-  // Returns HTML message for modal display
-  getHtmlMessage(notification: NotificationDto): string {
-    return notification.messageHtml || notification.message || '';
-  }
-
-  constructor(private authService: MesAuthService, private toastService: ToastService, private themeService: ThemeService) {}
-
-  ngOnInit() {
-    this.themeService.currentTheme$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(theme => {
-        this.currentTheme = theme;
-      });
-
-    this.loadNotifications();
-
-    // Listen for new real-time notifications
-    this.authService.notifications$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((notification: RealTimeNotificationDto) => {
-        // Show toast for new notification
-        this.toastService.show(
-          notification.messageHtml || notification.message || '',
-          notification.title,
-          'info',
-          5000
-        );
-        // Reload notifications list
-        this.loadNotifications();
-      });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  private loadNotifications() {
-    this.authService.getNotifications(1, 50, true).subscribe({ // includeRead = true to get both read and unread
-      next: (response: PagedList<NotificationDto>) => {
-        this.notifications = response.items || [];
-      },
-      error: (err) => {}
-    });
-  }
-
-  open() {
-    this.isOpen = true;
-    this.activeTab = 'unread'; // Reset to unread tab when opening
-  }
-
-  close() {
-    this.isOpen = false;
-  }
-
-  switchTab(tab: 'unread' | 'read') {
-    this.activeTab = tab;
-  }
-
-  openDetails(notification: NotificationDto) {
-    this.selectedNotification = notification;
-    // Mark as read when opening details (if not already read)
-    if (!notification.isRead) {
-      this.authService.markAsRead(notification.id).subscribe({
-        next: () => {
-          notification.isRead = true;
-          this.notificationRead.emit();
-        },
-        error: () => {}
-      });
-    }
-  }
-
-  closeDetails() {
-    this.selectedNotification = null;
-  }
-
-  markAsRead(notificationId: string, event?: Event) {
-    if (event) {
-      event.stopPropagation();
-    }
-    this.authService.markAsRead(notificationId).subscribe({
-      next: () => {
-        const notification = this.notifications.find(n => n.id === notificationId);
-        if (notification) {
-          notification.isRead = true;
-          this.notificationRead.emit();
-        }
-      },
-      error: (err) => {}
-    });
-  }
-
-  markAllAsRead() {
-    this.authService.markAllAsRead().subscribe({
-      next: () => {
-        this.notifications.forEach(n => n.isRead = true);
-        this.notificationRead.emit();
-      },
-      error: (err) => {}
-    });
-  }
-
-  deleteAllRead() {
-    const readNotificationIds = this.notifications
-      .filter(n => n.isRead)
-      .map(n => n.id);
-
-    // Delete all read notifications
-    const deletePromises = readNotificationIds.map(id =>
-      this.authService.deleteNotification(id).toPromise()
-    );
-
-    Promise.all(deletePromises).then(() => {
-      // Remove all read notifications from the local array
-      this.notifications = this.notifications.filter(n => !n.isRead);
-    }).catch((err) => {
-      // If bulk delete fails, reload notifications to get current state
-      this.loadNotifications();
-    });
-  }
-
-  deleteAllUnread() {
-    const unreadNotificationIds = this.notifications
-      .filter(n => !n.isRead)
-      .map(n => n.id);
-
-    // Delete all unread notifications
-    const deletePromises = unreadNotificationIds.map(id =>
-      this.authService.deleteNotification(id).toPromise()
-    );
-
-    Promise.all(deletePromises).then(() => {
-      // Remove all unread notifications from the local array
-      this.notifications = this.notifications.filter(n => n.isRead);
-    }).catch((err) => {
-      // If bulk delete fails, reload notifications to get current state
-      this.loadNotifications();
-    });
-  }
-
-  delete(notificationId: string, event: Event) {
-    event.stopPropagation();
-    this.authService.deleteNotification(notificationId).subscribe({
-      next: () => {
-        this.notifications = this.notifications.filter(n => n.id !== notificationId);
-      },
-      error: (err) => {}
-    });
-  }
-
-  formatDate(dateString: string): string {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'Now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-    
-    return date.toLocaleDateString();
-  }
-}