general-library-union 3.0.46 → 3.0.48

package/src/app/core/servicios/auth.service.ts

@@ -0,0 +1,189 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable, Inject } from '@angular/core';
+import { catchError, map, Observable, tap } from 'rxjs';
+import { UserLoginCredentials } from '../modelos/user.model';
+import { AuthenticationError } from '../errores/authentication.error';
+import { StorageService } from './storage.service';
+import { CargarControlFuncionalidadService } from './cargar-control-funcionalidad.service';
+import { CookieService } from 'ngx-cookie-service';
+import { TareasModel } from '../../seguridad/modelos/TareasModel';
+import { ModulosModel } from '../../seguridad/modelos/ModulosModel';
+import { RolModel } from '../../seguridad/modelos/RolModel'; 
+import { environment } from '../../../environments/environment';
+import * as CryptoJS from 'crypto-js';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  constructor(
+    private http: HttpClient,
+    private storageService: StorageService, 
+    private controlFuncionalidad: CargarControlFuncionalidadService,
+    private cookieService: CookieService) {}
+
+  /**
+   * Realiza la petición para autenticar al usuario. Devuelve el token que generó el servicio.
+   * @param credentials Objeto con los datos de acceso
+   * @returns Token válido
+   */
+  login(credentials: UserLoginCredentials, urlapinucleo, tokenPublico): Observable<string> {
+    const url = `${urlapinucleo}/authentication/login`;
+    if (!this.cookieService.get('urlnucleo')){
+      this.cookieService.set('urlnucleo', urlapinucleo);
+    }
+    var headers = new HttpHeaders().set('Authorization', `Bearer ${tokenPublico}`)
+    return this.http.post<string>(url, credentials, {headers}).pipe(
+      map((data) => {
+        const token = (data as any)?.token as string;
+        this.storageService.setItem('token', token);
+
+        /**********************************
+         * Control funcionalidades
+         **********************************/
+       /* let rol: any = {}
+        rol.codigoRol = this.getTokenKey('llaveRol');
+        this.controlFuncionalidad.cargarFuncionalidad(rol, `${urlapinucleo}/authentication/funcionalidades`, headers).subscribe({});
+       */
+        var listRoles = (data as any)?.listaRoles;
+        console.log(listRoles)
+      if (listRoles.length > 1 ){
+        this.storageService.setItem('roles', JSON.stringify(listRoles));
+        //this.mostrarRoles = true;
+      }if (listRoles.length == 1 ){
+        let rol: any = {}
+        rol.codigoRol = this.getTokenKey('llaveRol');
+        rol.aplicacion = this.getTokenKey('aplicacion');
+        this.controlFuncionalidad.cargarFuncionalidad(rol, `${urlapinucleo}/authentication/funcionalidades`, headers).subscribe({});
+         /********************************************************************************************/
+        /* Codigo temporal para mantener las tareas, pero estas deben ser obtenidas por un servicio */
+        var tareas: TareasModel[] = (data as any).tareasmodulo;
+        console.log(tareas)
+        this.storageService.setItem('__tareas',  JSON.stringify(tareas));
+        var modulosDeTareas = tareas.filter((obj, index, self) => {
+          return index === self.findIndex((o) => o.modulo === obj.modulo);
+        });
+        var modulos: ModulosModel[] = [];
+        modulosDeTareas.forEach(data => {
+          let modulo: ModulosModel = {
+            llave: data.modulo,
+            descripcion: data.nombreModulo,
+            icono: data.iconoModulo
+          }
+          modulos.push(modulo)
+        })
+        console.log('entra aca  login general');
+
+        this.storageService.setItem('modulos', JSON.stringify(modulos));
+        if (this.storageService.getItem('moduloFavorito') !== undefined && this.storageService.getItem('moduloFavorito')){
+          this.storageService.setItem('moduloSeleccionado', this.storageService.getItem('moduloFavorito'));
+        }else {
+          let modulodefecto = (data as any)?.modulodefecto;
+          if (!modulodefecto) {
+            modulodefecto = modulos[0].llave;
+          }
+          this.storageService.setItem('moduloSeleccionado', modulodefecto);
+        }
+      }
+      let tokenDecrypt = CryptoJS.AES.encrypt(JSON.stringify((data as any)?.autenticacionUsuarioDTO), environment.crypto_secret_key)
+      this.storageService.setItem('autenticacionUsuarioDTO', tokenDecrypt.toString());
+       
+        /********************************************************************************************/
+        return token;
+      }),
+      catchError((error) => {
+        if (error.status >= 400) {
+          throw new AuthenticationError('Usuario/contraseña inválido.');
+        }
+        throw error;
+      })
+    );
+  }
+
+  /**
+   * Devuelve el token almacenado en el storage o vacio si no lo encuentra
+   * @returns Token
+   */
+  getToken(): string {
+    return this.storageService.getItem('token', '');
+  }
+
+  /**
+   * Devuelve el valor asociado a la llave que se encuentra almacenado en el token.
+   * @param key Llave presente en el objeto del token
+   * @returns Valor almacenado
+   */
+  getTokenKey(key: string): string {
+    try {
+      const data = this._decodeToken();
+      return data[key].toString();
+    } catch (error) {
+      return undefined;
+    }
+  }
+
+  /**
+   * Indica si el token almacenado en el storage es válido verificando que se
+   * pueda decodificar y que el tiempo actual sea menor al de expiración.
+   * @returns
+   */
+  isTokenValid(): boolean {
+    try {
+      const data = this._decodeToken();
+      const expiryTime = data.exp;
+      const currentTime = Math.floor(new Date().getTime() / 1000);
+      if((currentTime <= expiryTime) && this.getTokenKey('numeroEmpresa') && this.getTokenKey('nombreConexion')){
+        return true
+      }
+      return false;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /**
+   * Borra el token del usuario para invalidar la sesión
+   */
+  deleteToken(): void {
+    this.storageService.removeItem('token');
+  }
+
+  /**
+   * Decodifica el token que esta almacenado y devuelve el objeto que representa
+   * @returns Información almacenada en el Token
+   */
+  private _decodeToken(): any {
+    try {
+      const token = this.getToken();
+      const data = token.split('.')[1];
+      return JSON.parse(atob(data));
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  public refrescarToken(objeto: any, token): Observable<any> {
+    let url = this.cookieService.get('urlnucleo')
+    let headers = new HttpHeaders()
+      .set('Authorization', `Bearer ${token}`);
+      return this.http.post<any>(`${url}/authentication/refrescarToken`, objeto, { headers });
+  }
+
+  public generarTokenPublico(urlnucleo?) {
+    let url = this.cookieService.get('urlnucleo')
+    if (!url){
+      url = urlnucleo
+    }
+    return this.http.get<any>(`${url}/authentication/generarTokenPublico`);
+  }
+
+  public seleccionRol(_rolSeleccionado: RolModel, urlnucleo?): Observable<any> {
+    let url = this.cookieService.get('urlnucleo')
+    if (!url){
+      url = urlnucleo
+    }
+        return this.http.post<any>(`${url}/requieretoken/rol/seleccionado`, _rolSeleccionado);
+    }
+ 
+}

package/src/app/core/servicios/cargar-control-funcionalidad.service.ts

@@ -0,0 +1,49 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, map, Observable } from 'rxjs';
+import { AuthenticationError } from '../errores/authentication.error';
+import { StorageService } from './storage.service';
+import { UtilsService } from './utils.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CargarControlFuncionalidadService {
+
+  constructor(private httpClient: HttpClient, private storageService: StorageService, private utilsService: UtilsService) { }
+
+  cargarFuncionalidad(rol: any, url : string, headers: HttpHeaders): Observable<string> {
+    return this.httpClient.post<any>(url, rol, {headers}).pipe(
+      map((data) => {
+        const controlFuncionalidades = (data as any)?.controlFuncionalidades as string;
+        this.storageService.setItem('controlFuncionalidades', controlFuncionalidades);
+        return null;
+      }), catchError((error) => {
+        if (error.status >= 400) {
+          throw new AuthenticationError('Error consultando control de funcionalidades.');
+        }
+        throw error;
+      })
+    );
+  }
+
+  getControlFuncionalidad(valor: string) : boolean{
+    if (this.storageService.getItem('controlFuncionalidades') != null){
+      let listaFuncionalidades = this.storageService.getItem('controlFuncionalidades');
+      var validar = listaFuncionalidades.indexOf(valor);
+      if(validar !== -1){
+        return true;
+      }else{
+        return false;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Borra controles de funcionalidad en la sesión
+   */
+  eliminarFuncionalidades(): void {
+    this.storageService.removeItem('controlFuncionalidades');
+  }
+}

package/src/app/core/servicios/data-exporter-table.utils.ts

@@ -0,0 +1,78 @@
+import jsPDF from "jspdf";
+import "jspdf-autotable";
+import * as FileSaver from 'file-saver';
+import { Workbook } from 'exceljs';
+
+export class DataExporter {
+
+    constructor() { }
+
+    exportPdf(lista: any[], exportColumns: any[], nombreArchivo: string) {
+        console.log(lista);
+        const doc = new jsPDF('p', 'pt');
+        doc['autoTable'](exportColumns, lista);
+        doc.save(nombreArchivo + ".pdf");
+    }
+
+    async exportExcel(lista: any[], nombreArchivo: string) {
+        const workbook = new Workbook();
+        const worksheet = workbook.addWorksheet('data');
+
+        worksheet.columns = Object.keys(lista[0]).map(key => ({ header: key, key }));
+
+        lista.forEach(item => {
+            worksheet.addRow(item);
+        });
+
+        const buffer = await workbook.xlsx.writeBuffer();
+        this.saveAsExcelFile(buffer, nombreArchivo);
+    }
+
+    async exportExcelColumnas(lista: any[], nombreArchivo: string, columnas: string[], nombreHoja?: string) {
+        const workbook = new Workbook();
+        const worksheet = workbook.addWorksheet(nombreHoja ? nombreHoja : 'data');
+
+        worksheet.columns = columnas.map(col => ({ header: col, key: col }));
+
+        lista.forEach(item => {
+            const filteredItem: any = {};
+            columnas.forEach(col => {
+                filteredItem[col] = item[col];
+            });
+            worksheet.addRow(filteredItem);
+        });
+
+        const buffer = await workbook.xlsx.writeBuffer();
+        this.saveAsExcelFile(buffer, nombreArchivo);
+    }
+
+    saveAsExcelFile(buffer: any, fileName: string): void {
+        const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+        const EXCEL_EXTENSION = '.xlsx';
+        const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
+        FileSaver.saveAs(data, `${fileName}${EXCEL_EXTENSION}`);
+    }
+
+    exportCSV(lista: any[], columnas: string[], nombreArchivo: string) {
+        const listaParaExportar = lista;
+        const csvContent = this.convertirAFormatoCSV(listaParaExportar, columnas );
+        this.descargarArchivoCSV(csvContent, nombreArchivo);
+    }
+
+    convertirAFormatoCSV(data: any[], columns: string[]) {
+        const csvHeader = columns.join(',') + '\n';
+        const csvRows = data.map(item => columns.map(col => item[col]).join(',')).join('\n');
+        return csvHeader + csvRows + '\n';
+    }
+
+    descargarArchivoCSV(csvContent: any, nombreArchivo: string) {
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', `${nombreArchivo}.csv`);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}

package/src/app/core/servicios/error-interceptor.service.ts

@@ -0,0 +1,208 @@
+import { Injectable } from '@angular/core';
+import Swal from 'sweetalert2';
+import { ErrorResponseModel } from '../modelos/error-response.model';
+import { UtilsService } from './utils.service';
+import { Router } from '@angular/router';
+import { AuthService } from './auth.service';
+import { StorageService } from './storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorIntecertorService {
+
+  constructor(private utilsService: UtilsService,
+              private route: Router,
+              private authService: AuthService,
+              private storageService: StorageService,
+  ) { }
+
+   /**
+   * Muestra un mensaje de error según el tipo de error proporcionado.
+   * @param errorJson El objeto JSON que representa el error.
+   */
+  showError(errorJson: string): void {
+    const error: ErrorResponseModel = JSON.parse(errorJson);
+    if (error.codigo == 'UNI-DB-002' || error.codigo == 'UNI-DB-003' 
+      || error.mensaje?.includes('Se produjo un error de red') || error.mensaje?.includes('El servicio no está disponible') 
+      || error.mensaje?.includes('Conexion no valida'))  {
+      this.storageService.setItem('mensaje_notfound', error.mensaje);
+      this.storageService.setItem('url_regresar', window.location.href);
+      window.location.href = window.location.origin + '/' + this.utilsService.obtenerBase() + '/not-found'
+      //this.route.navigate([this.utilsService.obtenerBase()+'/not-found']);
+      return;
+    }
+    if (error.tipo === 'INF') {
+      this.showInfo(error.mensaje, error.codigo);
+    } else if (error.tipo === 'WAR') {
+      this.showWarning(error.mensaje, error.codigo, error.causa, error.accion, error.traza);
+    } else if (error.tipo === 'ERR') {
+      this.showErrorDetails(error.mensaje ? error.mensaje : '', error.codigo, error.traza, error.causa);
+    }
+  }
+
+  /**
+   * Muestra un mensaje de información con el código.
+   * @param mensaje El mensaje a mostrar.
+   * @param codigo El código asociado al mensaje.
+   */
+  private showInfo(mensaje: string, codigo: string): void {
+    Swal.fire({
+      background: '#f7bfbf',
+      position: 'top-end',
+      html: '<div style="text-align: left;">' +
+              '<p style="text-align: left;"><b>Código:</b> ' + codigo + '</p>' +
+              '<p style="text-align: left; font-size:12px">' + mensaje + '</p>' +
+            '</div>',
+      showConfirmButton: false,
+      timer: 5500,
+      color: '#ff0000'
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      } else if (result.dismiss === Swal.DismissReason.cancel) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      } else if (result.dismiss === Swal.DismissReason.close) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      }
+    });
+    this.utilsService.sleep(500).then(data => {
+      this.utilsService.resizeWindowIFrame();
+    })
+  }
+
+  /**
+   * Muestra una advertencia con detalles adicionales como causa, acción y traza.
+   * @param mensaje El mensaje a mostrar.
+   * @param codigo El código asociado al mensaje.
+   * @param causa La causa del error.
+   * @param accion La acción recomendada.
+   * @param traza La traza del error.
+   */
+  private showWarning(mensaje: string, codigo: string, causa: string, accion: string, traza: string): void {
+    let contenidoHtml = `<p class="msjError">${mensaje}</p>`
+    contenidoHtml = contenidoHtml + (this.utilsService.validarCampoObligatorio(codigo) ? `<p class="cauError"><b>Código:</b> ${codigo}</p>` : ' ');
+    contenidoHtml = contenidoHtml + (this.utilsService.validarCampoObligatorio(causa) ? `<p class="cauError"><b>Causa:</b> ${causa}</p>` : ' ');
+    contenidoHtml = contenidoHtml + (this.utilsService.validarCampoObligatorio(accion) ? `<p class="cauError"><b>Acción Recomendada:</b> ${accion}</p>` : ' ');
+    let contenidoPlusHtml = `<p class="msjError">${mensaje.slice(0, 100)}</p><button id="verMasButton">Ver más</button> <button id="Ok">OK</button>`;
+
+    Swal.fire({
+      title: '<span style="color: var(--color-700);">' + 'Advertencia' + '</span>',
+      html: contenidoHtml,
+      icon: 'warning',
+      showCancelButton: false,
+      showCloseButton: true,
+      showConfirmButton: true,
+      didOpen: () => {
+          const OkButton = document.getElementById('Ok');
+          OkButton.classList.add('swal2-styled', 'swal2-cancel', 'btn-ok');
+          OkButton.addEventListener('click', () => {
+            Swal.close();
+            this.utilsService.sleep(500).then(data => {
+              this.utilsService.resizeWindowIFrame();
+            })
+          });
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      } else if (result.dismiss === Swal.DismissReason.cancel) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      } else if (result.dismiss === Swal.DismissReason.close) {
+        this.utilsService.sleep(500).then(data => {
+          this.utilsService.resizeWindowIFrame();
+        })
+      }
+    });
+    
+    this.utilsService.sleep(500).then(data => {
+      this.utilsService.resizeWindowIFrame();
+    })
+  }
+
+  /**
+   * Muestra un mensaje de error con detalles adicionales como el código de error y la traza.
+   * @param mensaje El mensaje a mostrar.
+   * @param errorCode El código de error asociado al mensaje.
+   * @param traza La traza del error.
+   */
+  private showErrorDetails(mensaje: string, codigo: string, traza: string, causa? : string): void {
+      let contenidoHtml = `<p class="msjError">${mensaje}</p><p class="codError"><b>Código:</b> ${codigo}</p><p class="traError"><b>Traza:</b> ${traza}</p><p class="cauError">`;
+      if (causa!= null && causa != undefined) {
+        contenidoHtml = `<p class="msjError">${mensaje}</p><p class="codError"><b>Código:</b> ${codigo}</p><p class="traError"><b>Traza:</b> ${traza}</p><p class="cauError"><b>Causa:</b> ${causa}</p>`;
+      }
+      let contenidoPlusHtml = `<p class="msjError">${mensaje.slice(0, 100)}</p><button id="verMasButton">Ver más</button> <button class="btn-ok" id="Ok">OK</button>`;
+
+      Swal.fire({
+        title: '<span style="color: var(--color-700);">' + 'Error' + '</span>',
+        html: (mensaje.length + traza.length) > 100 ? contenidoPlusHtml : contenidoHtml,
+        icon: 'error',
+        showCancelButton: false,
+        showCloseButton: true,
+        showConfirmButton: false,
+        customClass: 'my-swal',
+        didOpen: () => {
+          if ((mensaje.length + traza.length) > 100) {
+            // Agregar estilos al botón "Ver más"
+            const verMasButton = document.getElementById('verMasButton');
+            verMasButton.classList.add('swal2-styled', 'swal2-cancel', 'btn-vermas' );
+
+            const OkButton = document.getElementById('Ok');
+            OkButton.classList.add('swal2-styled', 'swal2-cancel' , 'btn-ok');
+
+            // Agregar un evento al botón "Ver más" para mostrar todo el contenido cuando se hace clic
+            verMasButton.addEventListener('click', () => {
+              Swal.update({
+                html: contenidoHtml,
+                showConfirmButton: true,
+              });
+              this.utilsService.sleep(500).then(data => {
+                this.utilsService.resizeWindowIFrame();
+              })
+            });
+
+            OkButton.addEventListener('click', () => {
+              Swal.close();
+              this.utilsService.sleep(500).then(data => {
+                this.utilsService.resizeWindowIFrame();
+              })
+            });
+          }
+          else{
+            Swal.update({
+              html: contenidoHtml,
+              showConfirmButton: true,
+            });
+          }
+        },
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.utilsService.sleep(500).then(data => {
+            this.utilsService.resizeWindowIFrame();
+          })
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          this.utilsService.sleep(500).then(data => {
+            this.utilsService.resizeWindowIFrame();
+          })
+        } else if (result.dismiss === Swal.DismissReason.close) {
+          this.utilsService.sleep(500).then(data => {
+            this.utilsService.resizeWindowIFrame();
+          })
+        }
+      });
+      
+    this.utilsService.sleep(500).then(data => {
+      this.utilsService.resizeWindowIFrame();
+    })
+  }
+}

package/src/app/core/servicios/guardias/auth.guard.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { CanLoad, Route, Router, UrlSegment, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../core/servicios/auth.service';
+import { ToastService } from '../../../core/servicios/toast.service';
+import { StorageService } from '../storage.service';
+import { UtilsService } from '../utils.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanLoad {
+  constructor(private authService: AuthService, private utilsService: UtilsService, private route: Router, private toastService: ToastService, private storageService: StorageService) {}
+
+  canLoad(route: Route, segments: UrlSegment[]): any {//Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (!this.authService.isTokenValid()) {
+      this.authService.deleteToken();
+      this.toastService.showError('Tu sesión no es válida. Primero debes autenticarte con tu usuario y contraseña.', 'Acceso Denegado');
+      return this.route.createUrlTree(['/' + this.utilsService.obtenerBase() +'/login']);
+    }
+    let aplicacion = this.authService.getTokenKey('aplicacion');
+    console.log('aplicacion:'+aplicacion)
+    if (aplicacion.trim() == '10') {
+      return true;
+    }
+    let tareasss = JSON.parse(this.storageService.getItem('__tareas'));
+    let ruta = '';
+    let continuar = true;
+    segments.forEach(data => {
+        if (continuar){
+            if (data.path !== 'US_editar'){
+                ruta = ruta + '/' + data.path
+            } else {
+                continuar = false;
+            }
+        }
+     }) 
+    let respuesta = false;
+    console.log(ruta)
+    tareasss.forEach(element => {
+        if (  element.urlprincipal.replace(/.jsf/, '') === ruta){
+            respuesta = true;
+        }
+    });
+    
+    if (!respuesta){
+        return this.route.createUrlTree(['/'+this.utilsService.obtenerBase()+'/not-found']);
+    }
+    return respuesta;
+  }
+}

package/src/app/core/servicios/guardias/publico.guard.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../core/servicios/auth.service';
+import { UtilsService } from '../utils.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PublicoGuard implements CanActivate {
+  constructor(private authService: AuthService, private route: Router, private utilsService: UtilsService) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): any{//Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (this.authService.isTokenValid()) {
+      if (window.location.href.toString().includes('admonPortal')) {
+        return this.route.createUrlTree(['/' + this.utilsService.obtenerBase()+ '/admonPortal/inicio']);
+      } else {
+        return this.route.createUrlTree(['/' + this.utilsService.obtenerBase()+ '/inicio']);
+      }
+    }
+    return true;
+  }
+}

package/src/app/core/servicios/interceptores/loading-interceptor.ts

@@ -0,0 +1,37 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError, TimeoutError, timer } from 'rxjs';
+import { catchError, finalize, timeoutWith } from 'rxjs/operators';
+import { SpinnerService } from '../spinner-service';
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LoadingInterceptor implements HttpInterceptor {
+
+  constructor(private spinnerService: SpinnerService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
+    var spinnerActivated = false;
+    var timeElapsed: number = 0;
+    var intervalId: any; 
+    intervalId = setInterval(() => {
+        timeElapsed++;
+        if (timeElapsed > 5 && !spinnerActivated) {
+            spinnerActivated = true;
+            this.spinnerService.show();
+        }
+      }, 1000);
+
+    return next.handle(req).pipe(
+      finalize(() => {
+          this.spinnerService.hide();
+        if (intervalId) {
+            clearInterval(intervalId);
+          }
+      })
+    );
+  }
+  
+}