mesauth-angular 0.1.0

package/dist/notification-panel.component.js

@@ -0,0 +1,327 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MesAuthService } from './mes-auth.service';
+import { ToastService } from './toast.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+let NotificationPanelComponent = class NotificationPanelComponent {
+    constructor(authService, toastService) {
+        this.authService = authService;
+        this.toastService = toastService;
+        this.isOpen = false;
+        this.notifications = [];
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.loadNotifications();
+        // Listen for new real-time notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((notification) => {
+            // Show toast for new notification
+            this.toastService.show(notification.message, notification.title, 'info', 5000);
+            // Reload notifications list
+            this.loadNotifications();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadNotifications() {
+        this.authService.getNotifications(1, 50, false).subscribe({
+            next: (response) => {
+                this.notifications = response.items || [];
+            },
+            error: (err) => console.error('Error loading notifications:', err)
+        });
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    markAsRead(notificationId) {
+        this.authService.markAsRead(notificationId).subscribe({
+            next: () => {
+                const notification = this.notifications.find(n => n.id === notificationId);
+                if (notification) {
+                    notification.isRead = true;
+                }
+            },
+            error: (err) => console.error('Error marking as read:', err)
+        });
+    }
+    markAllAsRead() {
+        this.authService.markAllAsRead().subscribe({
+            next: () => {
+                this.notifications.forEach(n => n.isRead = true);
+            },
+            error: (err) => console.error('Error marking all as read:', err)
+        });
+    }
+    delete(notificationId, event) {
+        event.stopPropagation();
+        this.authService.deleteNotification(notificationId).subscribe({
+            next: () => {
+                this.notifications = this.notifications.filter(n => n.id !== notificationId);
+            },
+            error: (err) => console.error('Error deleting notification:', err)
+        });
+    }
+    formatDate(dateString) {
+        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();
+    }
+};
+NotificationPanelComponent = __decorate([
+    Component({
+        selector: 'ma-notification-panel',
+        standalone: true,
+        imports: [CommonModule],
+        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>
+
+      <!-- Notifications List -->
+      <div class="notifications-list">
+        <ng-container *ngIf="notifications.length > 0">
+          <div 
+            *ngFor="let notification of notifications"
+            class="notification-item"
+            [class.unread]="!notification.isRead"
+            (click)="markAsRead(notification.id)"
+          >
+            <div class="notification-content">
+              <div class="notification-title">{{ notification.title }}</div>
+              <div class="notification-message">{{ notification.message }}</div>
+              <div class="notification-meta">
+                <span class="app-name">{{ notification.sourceAppName }}</span>
+                <span class="time">{{ formatDate(notification.createdAt) }}</span>
+              </div>
+            </div>
+            <button 
+              class="delete-btn" 
+              (click)="delete(notification.id, $event)"
+              title="Delete"
+            >
+              ✕
+            </button>
+          </div>
+        </ng-container>
+
+        <ng-container *ngIf="notifications.length === 0">
+          <div class="empty-state">
+            No notifications
+          </div>
+        </ng-container>
+      </div>
+
+      <!-- Footer Actions -->
+      <div class="panel-footer" *ngIf="notifications.length > 0">
+        <button class="action-btn" (click)="markAllAsRead()">
+          Mark all as read
+        </button>
+      </div>
+    </div>
+  `,
+        styles: [`
+    .notification-panel {
+      position: fixed;
+      top: 0;
+      right: -350px;
+      width: 350px;
+      height: 100vh;
+      background: white;
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      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 #e0e0e0;
+      background-color: #f5f5f5;
+    }
+
+    .panel-header h3 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+    }
+
+    .close-btn {
+      background: none;
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      color: #666;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.2s;
+    }
+
+    .close-btn:hover {
+      color: #333;
+    }
+
+    .notifications-list {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .notification-item {
+      display: flex;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid #f0f0f0;
+      cursor: pointer;
+      background-color: #fafafa;
+      transition: background-color 0.2s;
+    }
+
+    .notification-item:hover {
+      background-color: #f5f5f5;
+    }
+
+    .notification-item.unread {
+      background-color: #e3f2fd;
+    }
+
+    .notification-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .notification-title {
+      font-weight: 600;
+      color: #333;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .notification-message {
+      color: #666;
+      font-size: 13px;
+      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: #999;
+    }
+
+    .app-name {
+      font-weight: 500;
+      color: #1976d2;
+    }
+
+    .delete-btn {
+      background: none;
+      border: none;
+      color: #999;
+      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: #f44336;
+    }
+
+    .empty-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #999;
+      font-size: 14px;
+    }
+
+    .panel-footer {
+      padding: 12px 16px;
+      border-top: 1px solid #e0e0e0;
+      background-color: #f5f5f5;
+    }
+
+    .action-btn {
+      width: 100%;
+      padding: 8px;
+      background-color: #1976d2;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: background-color 0.2s;
+    }
+
+    .action-btn:hover {
+      background-color: #1565c0;
+    }
+
+    @media (max-width: 600px) {
+      .notification-panel {
+        width: 100%;
+        right: -100%;
+      }
+    }
+  `]
+    }),
+    __metadata("design:paramtypes", [MesAuthService, ToastService])
+], NotificationPanelComponent);
+export { NotificationPanelComponent };

package/dist/toast-container.component.d.ts

@@ -0,0 +1,9 @@
+import { OnInit } from '@angular/core';
+import { ToastService, Toast } from './toast.service';
+export declare class ToastContainerComponent implements OnInit {
+    private toastService;
+    toasts: Toast[];
+    constructor(toastService: ToastService);
+    ngOnInit(): void;
+    close(id: string): void;
+}

package/dist/toast-container.component.js

@@ -0,0 +1,185 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToastService } from './toast.service';
+let ToastContainerComponent = class ToastContainerComponent {
+    constructor(toastService) {
+        this.toastService = toastService;
+        this.toasts = [];
+    }
+    ngOnInit() {
+        this.toastService.toasts.subscribe(toasts => {
+            this.toasts = toasts;
+        });
+    }
+    close(id) {
+        this.toastService.remove(id);
+    }
+};
+ToastContainerComponent = __decorate([
+    Component({
+        selector: 'ma-toast-container',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div class="toast-container">
+      <div 
+        *ngFor="let toast of toasts"
+        class="toast"
+        [class]="'toast-' + toast.type"
+        [@slideIn]
+      >
+        <div class="toast-content">
+          <div *ngIf="toast.title" class="toast-title">{{ toast.title }}</div>
+          <div class="toast-message">{{ toast.message }}</div>
+        </div>
+        <button class="toast-close" (click)="close(toast.id)" aria-label="Close">
+          ✕
+        </button>
+      </div>
+    </div>
+  `,
+        styles: [`
+    .toast-container {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      z-index: 9999;
+      pointer-events: none;
+    }
+
+    .toast {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 16px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      background-color: white;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      pointer-events: auto;
+      min-width: 300px;
+      max-width: 500px;
+      animation: slideIn 0.3s ease-out;
+    }
+
+    .toast-content {
+      flex: 1;
+    }
+
+    .toast-title {
+      font-weight: 600;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    .toast-message {
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .toast-close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 18px;
+      color: #999;
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: color 0.2s;
+    }
+
+    .toast-close:hover {
+      color: #333;
+    }
+
+    /* Toast types */
+    .toast-info {
+      border-left: 4px solid #2196f3;
+    }
+
+    .toast-info .toast-title {
+      color: #2196f3;
+    }
+
+    .toast-info .toast-message {
+      color: #333;
+    }
+
+    .toast-success {
+      border-left: 4px solid #4caf50;
+    }
+
+    .toast-success .toast-title {
+      color: #4caf50;
+    }
+
+    .toast-success .toast-message {
+      color: #333;
+    }
+
+    .toast-warning {
+      border-left: 4px solid #ff9800;
+    }
+
+    .toast-warning .toast-title {
+      color: #ff9800;
+    }
+
+    .toast-warning .toast-message {
+      color: #333;
+    }
+
+    .toast-error {
+      border-left: 4px solid #f44336;
+    }
+
+    .toast-error .toast-title {
+      color: #f44336;
+    }
+
+    .toast-error .toast-message {
+      color: #333;
+    }
+
+    @keyframes slideIn {
+      from {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .toast-container {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+      }
+
+      .toast {
+        min-width: auto;
+        max-width: 100%;
+      }
+    }
+  `]
+    }),
+    __metadata("design:paramtypes", [ToastService])
+], ToastContainerComponent);
+export { ToastContainerComponent };

package/dist/toast.service.d.ts

@@ -0,0 +1,15 @@
+import { Observable } from 'rxjs';
+export interface Toast {
+    id: string;
+    message: string;
+    title?: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    duration?: number;
+}
+export declare class ToastService {
+    private toasts$;
+    toasts: Observable<Toast[]>;
+    show(message: string, title?: string, type?: 'info' | 'success' | 'warning' | 'error', duration?: number): string;
+    remove(id: string): void;
+    clear(): void;
+}

package/dist/toast.service.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+let ToastService = class ToastService {
+    constructor() {
+        this.toasts$ = new BehaviorSubject([]);
+        this.toasts = this.toasts$.asObservable();
+    }
+    show(message, title, type = 'info', duration = 5000) {
+        const id = Math.random().toString(36).substr(2, 9);
+        const toast = {
+            id,
+            message,
+            title,
+            type,
+            duration
+        };
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next([...currentToasts, toast]);
+        if (duration > 0) {
+            setTimeout(() => {
+                this.remove(id);
+            }, duration);
+        }
+        return id;
+    }
+    remove(id) {
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next(currentToasts.filter(t => t.id !== id));
+    }
+    clear() {
+        this.toasts$.next([]);
+    }
+};
+ToastService = __decorate([
+    Injectable({ providedIn: 'root' })
+], ToastService);
+export { ToastService };

package/dist/user-profile.component.d.ts

@@ -0,0 +1,23 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { MesAuthService, IUser } from './mes-auth.service';
+export declare class UserProfileComponent implements OnInit, OnDestroy {
+    private authService;
+    private router;
+    notificationClick: EventEmitter<void>;
+    currentUser: IUser | null;
+    unreadCount: number;
+    dropdownOpen: boolean;
+    private destroy$;
+    constructor(authService: MesAuthService, router: Router);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private loadUnreadCount;
+    getAvatarUrl(user: IUser): string;
+    getLastNameInitial(user: IUser): string;
+    toggleDropdown(): void;
+    onLogin(): void;
+    onViewProfile(): void;
+    onLogout(): void;
+    onNotificationClick(): void;
+}