Merge branch 'master' of http://209.50.56.224/git/ITTEC/SistemaMantenimiento

sistema-mantenimiento-front/src/app/components/template/template.component.css

@@ -342,4 +342,27 @@ footer {
     opacity: 0;
     transform: translateX(384px);
   }
+}
+
+.notification-container{
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  width: 384px;
+  cursor: pointer;
+}
+
+.notification_separator{
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0, 0, 0, 0.12);
+}
+
+.notification-item-title{
+  width: 100%;
+  font-weight: 500;
+  font-size: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }

sistema-mantenimiento-front/src/app/components/template/template.component.html

@@ -14,11 +14,18 @@
         </button>
         <mat-progress-bar style="background-color: #FFFFFF; color: #FFFFFF; width: 550px;" mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
 
-        <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode">
+        <button mat-button [matMenuTriggerFor]="menuA" class="white_font animated fadeIn" *ngIf="!isLoading && !maintenanceMode" 
+        [matBadge]="unreadNotifications" [matBadgeHidden]="unreadNotifications <= 0" matBadgeColor="warn">
           <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }}
         </button>
         <mat-menu #menuA="matMenu">
           <button mat-menu-item (click)="openMyProfile()"><mat-icon>person</mat-icon> Mi perfil</button>
+          <button mat-menu-item (click)="rightDrawer.toggle()">
+            <mat-icon>notifications</mat-icon>
+            <span>Notificaciones <span class="red_primary_font" style="font-weight: 500;" *ngIf="unreadNotifications > 0">
+              ({{ unreadNotifications }})
+            </span></span>
+          </button>
           <button mat-menu-item [routerLink]="['/sam/vacation']"><mat-icon>houseboat</mat-icon> Gestión de Vacaciones </button>
           <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
           <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
@@ -439,6 +446,12 @@
           </mat-expansion-panel>
       </div>
     </mat-drawer>
+    <mat-drawer #rightDrawer mode="over" position="end">
+      <div *ngFor="let notification of totalNotifications; let i = index" class="notification-container" 
+      [ngClass]="{ notification_separator: i < totalNotifications.length - 1 }">
+        <p class="notification-item-title">{{ notification.TITULO }}</p>
+      </div>
+    </mat-drawer>
     <div style="height: 100%; box-sizing: border-box; overflow: hidden;" (click)="closeNestedMenu()">
       <div class="push-notifications-list">
         <div class="push-notification-item push-notification-enter" *ngFor="let notification of notificationsForPanel"

sistema-mantenimiento-front/src/app/components/template/template.component.ts

@@ -38,7 +38,7 @@ import { TypeFormSubcontract } from 'src/app/interfaces/personal-managment/subco
 import { EquipmentManagementService } from 'src/app/services/equipment-management.service';
 import { EquipmentDetails, EquipmentDetailsResponse } from 'src/app/interfaces/equipment-management.interface';
 import { EquipmentAlertComponent } from './equipment-alert/equipment-alert.component';
-import { NotificationDetailsResponse, NotificationsListItem } from 'src/app/interfaces/notification.interface';
+import { NotificationDetailsResponse, NotificationsListItem, NotificationsListResponse } from 'src/app/interfaces/notification.interface';
 import { DOCUMENT } from '@angular/common';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { FunctionsService } from 'src/app/services/functions.service';
@@ -72,6 +72,8 @@ export class TemplateComponent implements OnInit {
 
   modulesActivated = false;
   notificationsForPanel: NotificationsListItem[];
+  unreadNotifications: number;
+  totalNotifications: NotificationsListItem[];
 
   constructor(
     @Inject(DOCUMENT) private _document: Document,
@@ -95,6 +97,8 @@ export class TemplateComponent implements OnInit {
     this.menuItems = [];
     this.nestedMenu = [];
     this.notificationsForPanel = [];
+    this.unreadNotifications = 0;
+    this.totalNotifications = [];
   }
 
   async ngOnInit() {
@@ -495,6 +499,8 @@ export class TemplateComponent implements OnInit {
 
       let userName = localStorage.getItem('nombre_usuario');
       let name = await this._encService.decrypt(userName!);
+
+      await this.getNotifications();
       
       this.userName = name;
       this.nestedMenu = menu.response;
@@ -516,6 +522,46 @@ export class TemplateComponent implements OnInit {
     }
   }
 
+  async getNotifications(){
+    try{
+      let idUser = localStorage.getItem('idusuario')!;
+      let notifications: NotificationsListResponse = await lastValueFrom(this._notificationsService.getNotificationsByUser(idUser, 1));
+
+      if(notifications.error){
+        this.openDialog(notifications.msg);
+      }else{
+        let notificationsArr: NotificationsListItem[] = [];
+        let idUserDec = await this._encService.decrypt(idUser);
+
+        for(const notification of notifications.response){
+          let scopeArr = JSON.parse(notification.ALCANCE);
+          for(const item of scopeArr){
+            let userDec = await this._encService.decrypt(item.USUARIO);
+            if(userDec == idUserDec && item.ESTADO == 'No leído'){
+              this.unreadNotifications++;
+              notification.READED = false;
+            }else if(userDec == idUserDec && item.ESTADO == 'Leído'){
+              notification.READED = true;
+            }
+          }
+          
+          notification.FECREG = this._functionsService.orderDate(notification.FECREG)!;
+          notificationsArr.push(notification);
+        }
+
+        this.totalNotifications = notificationsArr;
+      }
+    }catch(error: any){
+      if(error.error == undefined){
+        this.openDialog('Ocurrió un error inesperado.');
+      }else if(error.error.msg == undefined){
+        this.openDialog('Ocurrió un error inesperado.');
+      }else{
+        this.openDialog(error.error.msg);
+      }
+    }
+  }
+
   closeNotification(id: string){
     let notification = this._document.getElementById(`notification-${id}`);
     //Eliminar la clase de entrada
@@ -741,7 +787,8 @@ export class TemplateComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe(res => {
-      console.log(res);
+      let resArr = res.split('|');
+      console.log(resArr);
     });
   }
 }

sistema-mantenimiento-front/src/app/interfaces/notification.interface.ts

@@ -17,6 +17,7 @@ export interface NotificationsListItem{
   USRREG: string;
   FECREG: string;
   FECHA?: string;
+  READED?: boolean;
 }
 
 export interface NotificationDetailsResponse{

sistema-mantenimiento-front/src/app/services/notifications.service.ts

@@ -13,6 +13,10 @@ export class NotificationsService {
   getNotification(idNotification: string, setRead: string, idUser: string, line: number){
     return this.getQuery(`get-notification/${idNotification}/${setRead}/${idUser}/${line}`).pipe(map((data: any) => data));
   }
+
+  getNotificationsByUser(idUser: string, line: number){
+    return this.getQuery(`get-notifications-by-user/${idUser}/${line}`).pipe(map((data: any) => data));
+  }
   
   private getQuery(query: string, tk?: string){
     const URL = `${apiTemp}${query}`;