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

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

@@ -344,12 +344,30 @@ footer {
   }
 }
 
+.no-notifications{
+  width: 384px;
+  text-align: center;
+}
+
 .notification-container{
-  padding: 4px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: nowrap;
   width: 384px;
   cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.notification-decoration{
+  height: 68px;
+  width: 16px;
+}
+
+.notification-content{
+  width: calc(100% - 16px);
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
 }
 
 .notification_separator{
@@ -369,7 +387,8 @@ footer {
 }
 
 .notification-container:hover{
-  opacity: 0.7;
+  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
+  opacity: 0.9;
 }
 
 .notification-item-module{
@@ -380,4 +399,16 @@ footer {
   overflow: hidden;
   white-space: nowrap;
   margin: 0;
+}
+
+.notification-item-body{
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.not_readed{
+  background-color: rgba(63, 81, 181, 0.12);
 }

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

@@ -1,4 +1,4 @@
-<mat-toolbar class="toolbar" (window:resize)="onResize()">
+<mat-toolbar class="toolbar prevent-select" (window:resize)="onResize()">
   <mat-toolbar-row class="p-0">
     <div class="toolbar-row">
       <div class="menu-items">
@@ -446,11 +446,18 @@
           </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>
-        <p class="notification-item-module">{{ notification.FECREG }} &bullet; {{ notification.READED ? 'L' : 'No l' }}eído</p>
+    <mat-drawer #rightDrawer mode="over" position="end" class="prevent-select">
+      <div *ngIf="totalNotifications.length == 0" class="no-notifications pt-64">
+        <b>Aún no se han generado notificaciones para su usuario.</b>
+      </div>
+      <div *ngFor="let notification of totalNotifications; let i = index" class="notification-container" (click)="openNotification(notification.ID_NOTIFICACION, true)" 
+      [ngClass]="{ notification_separator: i < totalNotifications.length - 1, not_readed: !notification.READED }">
+        <div class="notification-decoration indigo_primary_background"></div>
+        <div class="notification-content">
+          <p class="notification-item-title">{{ notification.TITULO }}</p>
+          <p class="notification-item-module">{{ notification.FECREG_DISP }} &bullet; {{ notification.READED ? 'L' : 'No l' }}eído</p>
+          <p class="notification-item-body">{{ notification.CUERPO_NOTIFICACION }}</p>
+        </div>
       </div>
     </mat-drawer>
     <div style="height: 100%; box-sizing: border-box; overflow: hidden;" (click)="closeNestedMenu()">
@@ -467,7 +474,7 @@
             </div>
             <div class="push-notification-body">{{ notification.CUERPO_NOTIFICACION }}</div>
           </div>
-          <button mat-button color="primary" (click)="openNotification(notification.ID_NOTIFICACION)">
+          <button mat-button color="primary" (click)="openNotification(notification.ID_NOTIFICACION, false)">
             Abrir
           </button>
         </div>

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

@@ -13,7 +13,7 @@ import { lastValueFrom } from 'rxjs';
 import { UsersProfilesService } from './../../services/users-profiles.service';
 import { SocketService } from './../../services/socket.service';
 import { EncService } from './../../services/enc/enc.service';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { LoginDataService } from 'src/app/services/login/login-data.service';
@@ -43,6 +43,7 @@ import { DOCUMENT } from '@angular/common';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { FunctionsService } from 'src/app/services/functions.service';
 import { NotificationDialogComponent } from './notification-dialog/notification-dialog.component';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Component({
   selector: 'app-template',
@@ -75,6 +76,8 @@ export class TemplateComponent implements OnInit {
   unreadNotifications: number;
   totalNotifications: NotificationsListItem[];
 
+  @ViewChild('rightDrawer') sidenav?: MatSidenav;
+
   constructor(
     @Inject(DOCUMENT) private _document: Document,
     public resourcesService: ResourcesService,
@@ -457,13 +460,22 @@ export class TemplateComponent implements OnInit {
             this.resourcesService.openSnackBar(notification.msg);
           }else{
             notification.response.FECHA = this._functionsService.getDateTimeHour(notification.response.FECREG);
+            notification.response.FECREG_DISP = this._functionsService.notificationDate(notification.response.FECREG);
+
             let audienceArr = JSON.parse(notification.response.AUDIENCIA);
             let idUserDec = await this._encService.decrypt(idUser);
 
             for(const user of audienceArr as string[]){
               let userDec = await this._encService.decrypt(user);
               if(userDec == idUserDec){
+                let notificationsAux = this.totalNotifications;
+                notificationsAux.reverse();
+                notificationsAux.push(notification.response);
+                notificationsAux.reverse();
+
+                this.totalNotifications = notificationsAux;
                 this.notificationsForPanel.push(notification.response);
+                this.unreadNotifications++;
     
                 setTimeout(() => {
                   let divNotification = this._document.getElementById(`notification-${notification.response.ID_NOTIFICACION}`);
@@ -507,6 +519,16 @@ export class TemplateComponent implements OnInit {
       
       this.isLoading = false;
       this.checkCatalogues();
+
+      setInterval(() => {
+        let notificationsAux: NotificationsListItem[] = [];
+        for(const notification of this.totalNotifications){
+          notification.FECREG_DISP = this._functionsService.notificationDate(notification.FECREG);
+          notificationsAux.push(notification);
+        } 
+
+        this.totalNotifications = notificationsAux;
+      }, 30000);
     }catch(error: any){
       let msg = '';
       if(error.error == undefined){
@@ -545,7 +567,7 @@ export class TemplateComponent implements OnInit {
             }
           }
           
-          notification.FECREG = this._functionsService.notificationDate(notification.FECREG)!;
+          notification.FECREG_DISP = this._functionsService.notificationDate(notification.FECREG)!;
           notificationsArr.push(notification);
         }
 
@@ -777,7 +799,25 @@ export class TemplateComponent implements OnInit {
     
   }
 
-  openNotification(idNotification: string){
+  openNotification(idNotification: string, isFromSidenav: boolean){
+    let notificationFilt = this.totalNotifications.filter(item => item.ID_NOTIFICACION == idNotification);
+    if(notificationFilt.length > 0){
+      let notification = notificationFilt[0];
+      notification.READED = true;
+
+      let notificationsAux: NotificationsListItem[] = [];
+      for(const notificationObj of this.totalNotifications){
+        if(notificationObj.ID_NOTIFICACION == notification.ID_NOTIFICACION){
+          notificationsAux.push(notification);
+        }else{
+          notificationsAux.push(notificationObj);
+        }
+      }
+
+      this.totalNotifications = notificationsAux;
+      this.unreadNotifications--;
+    }
+    
     this.closeNotification(idNotification);
     let dialogRef = this._dialg.open(NotificationDialogComponent, {
       width: '520px',
@@ -787,8 +827,44 @@ export class TemplateComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe(res => {
-      let resArr = res.split('|');
-      console.log(resArr);
+      if(res != null && res != undefined && res != ''){
+        let resArr = res.split('|');
+        if(resArr.length < 2){
+          this.resourcesService.openSnackBar('La acción seleccionada es inválida.');
+        }else if(resArr[0] == 'start'){
+          this.startWorkOrder(resArr[1], resArr[2]);
+        }else{
+          console.log(resArr);
+        }
+
+        if(isFromSidenav){
+          this.sidenav?.close();
+        }
+      }
     });
   }
+
+  private async startWorkOrder(idOrder: string, orderType: string){
+    try{
+      let idUser = localStorage.getItem('idusuario')!;
+      let idOrderEnc = await this._encService.encrypt(idOrder);
+      let formData = new FormData();
+
+      formData.append('id_user', idUser);
+      formData.append('linea', '1');
+      formData.append('id_order', idOrderEnc);
+
+      if(orderType == 'Correctivo'){
+        console.log(formData);
+      }
+    }catch(error: any){
+      if(error.error == undefined){
+        this.resourcesService.openSnackBar('Ocurrió un error inesperado.');
+      }else if(error.error.msg == undefined){
+        this.resourcesService.openSnackBar('Ocurrió un error inesperado.');
+      }else{
+        this.resourcesService.openSnackBar(error.error.msg);
+      }
+    }
+  }
 }

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

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

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

@@ -49,12 +49,33 @@ export class FunctionsService {
     if(diffInMins >= 1 && diffInMins < 2){
       return "Hace un minuto";
     }else if(diffInMins < 60){
-      let minutes = Math.ceil(diffInMins);
+      let minutes = Math.trunc(diffInMins);
       return `Hace ${minutes} minutos`;
     }
-    console.log(diffInMins);
 
-    return "";
+    let diffInHours = diffInMins / 60;
+    if(diffInHours >= 1 && diffInHours < 2){
+      return "Hace una hora";
+    }else if(diffInHours < 24){
+      let hours = Math.trunc(diffInHours);
+      return `Hace ${hours} horas`;
+    }
+
+    let diffInDays = diffInHours / 24;
+    if(diffInDays >= 1 && diffInDays < 2){
+      return "Ayer";
+    }
+
+    let dateTimeArr = date.split(' ');
+    let dateArr = dateTimeArr[0].split('-').reverse();
+    let dateStr = dateArr.join('/');
+
+    let timeArr = dateTimeArr[1].split(':');
+    let hour = parseInt(timeArr[0]);
+    let period = hour < 12 ? 'AM' : 'PM';
+
+    hour = hour > 12 ? hour - 12 : hour;
+    return `${dateStr} ${hour}:${timeArr[1]} ${period}`;
   }
 
   buildHumanDate(date: string): string{

sistema-mantenimiento-front/src/styles.css

@@ -341,6 +341,7 @@ body {
 
 /* ABAJO */
 .mb-2 {margin-bottom: 2px !important;}
+.mb_2 {margin-bottom: 2px !important;}
 .mb-4 {margin-bottom: 4px !important;}
 .mb-8 {margin-bottom: 8px !important;}
 .mb-10 {margin-bottom: 10px !important;}