feat_api(fe): added alert notifications

frontend/src/app/modules/global/components/menu/menu.component.css

@@ -160,6 +160,9 @@
   .sidebar.active {
     transform: translateX(0);
   }
+  .notifications-menu {
+    min-width: 200px !important;
+  }
 }
 @media (min-width: 768px) {
   .sidebar {
@@ -172,6 +175,9 @@
   .menu-btn {
     display: none;
   }
+  .notifications-menu {
+    min-width: 500px !important;
+  }
 }
 @font-face {
   font-family: 'Gruppo';

frontend/src/app/modules/global/components/menu/menu.component.html

@@ -4,12 +4,17 @@
     <img src="logo.png" alt="Company Logo" (click)="navigateHome()">
     <p>Electro Manage</p>
     <div class="icons">
-      <div class="notifications-menu-container">
+      <div class="notifications-menu-container" *appShowForRoles="['Admin', 'Manager']">
         <mat-icon [matBadge]="alerts.length - alertsViews" (click)="toggleNotificationsMenu($event)">notifications</mat-icon>
         <span class="cdk-visually-hidden"></span>
-        <div class="notifications-menu" style="min-width: 500px; max-height: 330px; overflow: auto;" *ngIf="isNotificationsMenuOpen">
+        <div class="notifications-menu" style="overflow: auto;" *ngIf="isNotificationsMenuOpen">
           <ul class="info-section">
-            <li class="info-container" style="color: #8b1010;" *ngFor="let alert of alerts">{{ alert }}</li>
+            <li class="info-container" style="color: #8b1010;" *ngFor="let alert of alerts">
+              {{ alert.name }}
+              <button (click)="removeNotification(alert.id)" style="border: none; background-color: transparent; color: #8b1010;">
+                <mat-icon>clear</mat-icon>
+              </button>
+            </li>
           </ul>
         </div>
       </div>

frontend/src/app/modules/global/components/menu/menu.component.ts

@@ -7,7 +7,8 @@ import { GlobalModule } from '../../global.module';
 import { UserById } from '../../../../models/credential.interface';
 import { UserService } from '../../../../services/user/user.service';
 import { Observable } from 'rxjs';
-import { WebSocketService } from '../../../../services/webSocket/web-socket.service';
+import { NotificationService } from '../../../../services/notification/notification.service';
+import { Item } from '../../../../shared/shared.module';
 
 @Component({
   selector: 'app-menu',
@@ -43,7 +44,7 @@ import { WebSocketService } from '../../../../services/webSocket/web-socket.serv
 export class MenuComponent implements OnInit {
   isSidebarActive = false;
   currentURL = '/';
-  alerts: string[] = [];
+  alerts: Item[] = [];
   alertsViews: number = 0;
   menuItems: any[] = [];
   isUserMenuOpen: boolean = false;
@@ -65,7 +66,7 @@ export class MenuComponent implements OnInit {
     private router: Router,
     private auth: AuthService,
     private httpUser: UserService,
-    private webSocketService: WebSocketService
+    private httpNotification: NotificationService,
   ) {
     const storedLoginTime = sessionStorage.getItem('loginTime');
     this.loginStartTime = storedLoginTime ? parseInt(storedLoginTime) : new Date().getTime();
@@ -99,6 +100,11 @@ export class MenuComponent implements OnInit {
         menuItem.isOpen = true;
     });
 
+    this.httpNotification.notifications$.subscribe((notifications) => {
+      this.alerts = notifications;
+      console.log(this.alerts);
+    });
+
     setInterval(() => this.updateLoginTime(), 1000);
   }
 
@@ -109,6 +115,20 @@ export class MenuComponent implements OnInit {
     this.isSidebarActive = !this.isSidebarActive;
   }
 
+  /**
+   * Removes a notification with the specified ID.
+   *
+   * This method calls the `removeNotification` method of the `httpNotification` service
+   * to remove the notification with the given ID. Additionally, it decrements the
+   * `alertsViews` count by 1.
+   *
+   * @param id - The ID of the notification to be removed.
+   */
+  removeNotification(id: number): void {
+    this.httpNotification.removeNotification(id);
+    this.alertsViews -= 1;
+  }
+
   /**
    * Hide the visibility of the sidebar.
    */

frontend/src/app/modules/workCenter/components/register/form/register-form.component.ts

@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs';
 import { SnackbarService } from '../../../../../services/snackbar/snackbar.service';
 import { Register, RegisterInfo } from '../../../../../models/register.interface';
 import { RegisterService } from '../../../../../services/register/register.service';
+import { NotificationService } from '../../../../../services/notification/notification.service';
 
 @Component({
   selector: 'app-register-form',
@@ -24,7 +25,8 @@ export class RegisterFormComponent implements OnInit, OnDestroy {
     public global: GlobalModule,
     private dataService: DataService,
     private snackbar: SnackbarService,
-    private httpRegister: RegisterService
+    private httpRegister: RegisterService,
+    private httpNotification: NotificationService
   )
   {
     const today = new Date();
@@ -179,6 +181,13 @@ export class RegisterFormComponent implements OnInit, OnDestroy {
         this.snackbar.openSnackBar(successMessage);
         this.dataService.notifyDataUpdated();
         this.activateCloseButton();
+
+        if (response.isOverLimit) {
+          this.httpNotification.addNotification(
+            `La sucursal ${response.companyName} ha superado su límite mensual de ` +
+            `${response.warningInfo.establishedLimit} KwH.`
+          );
+        }
       },
       error: (error: any) => {
         this.loading = false;

frontend/src/app/services/webSocket/web-socket.service.spec.ts → frontend/src/app/services/notification/notification.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { WebSocketService } from './web-socket.service';
+import { NotificationService } from './notification.service';
 
-describe('WebSocketService', () => {
-  let service: WebSocketService;
+describe('NotificationService', () => {
+  let service: NotificationService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(WebSocketService);
+    service = TestBed.inject(NotificationService);
   });
 
   it('should be created', () => {

frontend/src/app/services/notification/notification.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Item } from '../../shared/shared.module';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  private lastId = 0;
+  private notificationsSubject = new BehaviorSubject<Item[]>([]);
+  notifications$ = this.notificationsSubject.asObservable();
+
+  constructor() {}
+
+  /**
+   * Adds a new notification with the specified message.
+   *
+   * This method creates a new notification object with a unique ID and the provided message.
+   * It then updates the current notifications list by adding the new notification and
+   * emits the updated list using the `notificationsSubject`.
+   *
+   * @param message - The message to be included in the new notification.
+   */
+  addNotification(message: string): void {
+    const newNotification: Item = {
+      id: ++this.lastId,
+      name: message
+    };
+
+    const currentNotifications = this.notificationsSubject.value;
+    this.notificationsSubject.next([...currentNotifications, newNotification]);
+  }
+
+  /**
+   * Removes a notification with the specified ID.
+   *
+   * This method filters out the notification with the given ID from the current notifications list
+   * and emits the updated list using the `notificationsSubject`.
+   *
+   * @param id - The ID of the notification to be removed.
+   */
+  removeNotification(id: number): void {
+    const updatedNotifications = this.notificationsSubject.value.filter(
+      (notification) => notification.id !== id
+    );
+    this.notificationsSubject.next(updatedNotifications);
+  }
+}