Adaptación de navegación en submódulos

sistema-mantenimiento-front/src/app/components/personal-management/personal-management.component.html

@@ -1,20 +1,24 @@
-<div id="navigation" class="mb-8" style="float: left; width: 50% !important;
-    margin: 20px;">
-    <div class="prev-page prevent-select indigo_primary_background
-        mat-elevation-z8"
-        [routerLink]="['/sam/home']" matRipple>
-        <mat-icon style="color: white;">arrow_back</mat-icon>
-        <div class="page-name ml-4">Regresar</div>
-    </div>
-</div>
-
-<div class="menu-title">
-    <span>Gestión de Personal, Recursos y Subcontratistas</span>
-</div>
+<div class="module-container">
+  <div id="navigation" class="mb-8" style="float: left; width: 50% !important;
+      margin: 20px;">
+      <div class="prev-page prevent-select indigo_primary_background
+          mat-elevation-z8"
+          [routerLink]="['/sam/home']" matRipple>
+          <mat-icon style="color: white;">arrow_back</mat-icon>
+          <div class="page-name ml-4">Regresar</div>
+      </div>
+  </div>
 
-<div class="menu-card">
+  <div class="menu-title animated fadeIn">
+      <span>Gestión de Personal, Recursos y Subcontratistas</span>
+  </div>
 
-    <mat-card class="animated fadeIn fast centre menu-card-item" [routerLink]="['/sam/GPRS/subcontratist']">
+  <div class="menu-card">
+    <mat-card class="animated fadeIn fast centre menu-card-item" *ngFor="let submodule of submodules" (click)="openMenu(submodule)">
+      <img mat-card-md-image [src]="'assets/img/' + submodule.IMAGENSUBMODULO + '.svg'">
+      <mat-card-title class="fz-15">{{ submodule.NOMBRESUBMODULO }}</mat-card-title>
+    </mat-card>
+    <!--<mat-card class="animated fadeIn fast centre menu-card-item" [routerLink]="['/sam/GPRS/subcontratist']">
       <img mat-card-md-image src="assets/img/subcontract.svg">
       <mat-card-title class="fz-15">Subcontratistas</mat-card-title>
     </mat-card>
@@ -32,6 +36,17 @@
     <mat-card class="animated fadeIn fast centre menu-card-item" [routerLink]="['/sam/GPRS/work-team']">
       <img mat-card-md-image src="assets/img/work-team.svg">
       <mat-card-title class="fz-15">Equipos de Trabajo</mat-card-title>
-    </mat-card>
-
+    </mat-card>-->
+  </div>
+  
+  <div class="loader-container" *ngIf="isLoading">
+    <mat-spinner></mat-spinner>
+    <h2 class="loader-label">Cargando...</h2>
   </div>
+  
+  <div class="error-container" *ngIf="!isLoading && hasError">
+    <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
+    <h1 style="color: #e53935;">¡Error!</h1>
+    <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
+  </div>
+</div>

sistema-mantenimiento-front/src/app/components/personal-management/personal-management.component.ts

@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { lastValueFrom } from 'rxjs';
+import { Submodules, SubmodulesResponse } from 'src/app/interfaces/submodules.interface';
+import { EncService } from 'src/app/services/enc/enc.service';
+import { ModulesService } from 'src/app/services/modules.service';
+import { SubmoduleFunctionsComponent } from '../template/menu-item/submodule-functions/submodule-functions.component';
 
 @Component({
   selector: 'app-personal-management',
@@ -6,10 +14,82 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./personal-management.component.css']
 })
 export class PersonalManagementComponent implements OnInit {
+  isLoading: boolean;
+  hasError: boolean;
+  errorStr: string;
+  submodules: Submodules[];
 
-  constructor() { }
+
+  constructor(
+    private _encService: EncService,
+    private _modulesService: ModulesService,
+    private _dialog: MatDialog,
+    private _router: Router,
+    private _snackBar: MatSnackBar,
+  ) { 
+    this.isLoading = true;
+    this.hasError = false;
+    this.errorStr = "";
+    this.submodules = [];
+  }
 
   ngOnInit(): void {
+    this.getSubmodules();
+  }
+
+  async getSubmodules(){
+    try{
+      let moduleEnc = await this._encService.encrypt('S002V01M11GPRS');
+      let modShort = await lastValueFrom(this._encService.shortEncrypt(moduleEnc));
+      
+      let idEnc = localStorage.getItem('idusuario');
+      let idShort = await lastValueFrom(this._encService.shortEncrypt(idEnc!));
+      let submodules: SubmodulesResponse = await lastValueFrom(this._modulesService.getSubmodules(
+        modShort.response.encrypted,
+        idShort.response.encrypted, 
+        1
+      ));
+
+      this.isLoading = false;
+      this.hasError = submodules.error;
+      this.errorStr = submodules.msg;
+
+      if(!this.hasError){
+        this.submodules = submodules.response;
+      }
+    }catch(error: any){
+      if(error.error == undefined){
+        this.errorStr = "Ocurrió un error inesperado.";
+      }else if(error.error.msg == undefined){
+        this.errorStr = "Ocurrió un error inesperado.";
+      }else{
+        this.errorStr = error.error.msg;
+      }
+
+      this.hasError = true;
+      this.isLoading = false;
+    }
   }
 
+  openMenu(submodule: Submodules){
+    let dialogRef = this._dialog.open(SubmoduleFunctionsComponent, {
+      width: '560px',
+      data: {
+        module: 'S002V01M11GPRS',
+        submodule: submodule.IDSUBMODULO,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != null && res != undefined && res != ""){
+        let idFunc = res.IDFUNCION.replace("S002V01F", "");
+        idFunc = idFunc.substring(2);
+        
+        let idSub = submodule.IDSUBMODULO.replace("S002V01S", "");
+        idSub = idSub.substring(2);
+
+        this._router.navigate([`sam/GPRS/${idSub}/${idFunc}`]);
+      }
+    });
+  }
 }

sistema-mantenimiento-front/src/app/components/preventive-maintenance/preventive-maintenance.component.html

@@ -13,12 +13,11 @@
   
   <div class="menu-card" *ngIf="!isLoading && !hasError">
     <mat-card class="animated fadeIn fast centre menu-card-item" *ngFor="let submodule of submodules" (click)="openMenu(submodule)">
-      <mat-card-content class="p-32">
+      <!--<mat-card-content class="p-32">
         <mat-icon >{{ submodule.ICONOSUBMODULO }}</mat-icon>
-      </mat-card-content>
-      <mat-card-title class="fz-15 ph-8">
-        {{ submodule.NOMBRESUBMODULO }}
-      </mat-card-title>
+      </mat-card-content>-->
+      <img mat-card-md-image [src]="'assets/img/' + submodule.IMAGENSUBMODULO + '.svg'">
+      <mat-card-title class="fz-15">{{ submodule.NOMBRESUBMODULO }}</mat-card-title>
     </mat-card>
   </div>
   

sistema-mantenimiento-front/src/app/components/preventive-maintenance/preventive-maintenance.component.ts

@@ -24,7 +24,7 @@ export class PreventiveMaintenanceComponent implements OnInit {
     private _encService: EncService,
     private _modulesService: ModulesService,
     private _dialog: MatDialog,
-    private router: Router,
+    private _router: Router,
     private _snackBar: MatSnackBar,
   ) { 
     this.isLoading = true;
@@ -58,65 +58,39 @@ export class PreventiveMaintenanceComponent implements OnInit {
         this.submodules = submodules.response;
       }
     }catch(error: any){
-      this.isLoading = false;
-      this.hasError = true;
-      
-      let msg = "";
       if(error.error == undefined){
-        msg = "Ocurrió un error inesperado.";
+        this.errorStr = "Ocurrió un error inesperado.";
+      }else if(error.error.msg == undefined){
+        this.errorStr = "Ocurrió un error inesperado.";
       }else{
-        msg = error.error.msg;
+        this.errorStr = error.error.msg;
       }
 
-      this.errorStr = msg;
+      this.hasError = true;
+      this.isLoading = false;
     }
   }
 
-  async openMenu(submodule: Submodules){
-    try{
-      let idUser = localStorage.getItem('idusuario');
-      let shortEnc = await lastValueFrom(this._encService.shortEncrypt(idUser!));
-
-      let modEnc = await this._encService.encrypt('S002V01M10GMPR');
-      let modShort = await lastValueFrom(this._encService.shortEncrypt(modEnc));
-
-      let subEnc = await this._encService.encrypt(submodule.IDSUBMODULO);
-      let subShort = await lastValueFrom(this._encService.shortEncrypt(subEnc));
-
-      let submoduleFunctions: SubmoduleFunctionsResponse = await lastValueFrom(this._modulesService.getSubmoduleFunctions(
-        modShort.response.encrypted,
-        subShort.response.encrypted,
-        shortEnc.response.encrypted,
-        1
-      ));
-
-      let dialogRef = this._dialog.open(SubmoduleFunctionsComponent, {
-        width: '560px',
-        data: {
-          FUNCIONES: submoduleFunctions.response,
-        },
-      });
-      
-      dialogRef.afterClosed().subscribe(res => {
-        if(res != null && res != undefined && res != ""){
-          let idFunc = res.IDFUNCION.replace("S002V01F", "");
-          idFunc = idFunc.substring(2);
-          
-          let idSub = submodule.IDSUBMODULO.replace("S002V01S", "");
-          idSub = idSub.substring(2);
+  openMenu(submodule: Submodules){
+    let dialogRef = this._dialog.open(SubmoduleFunctionsComponent, {
+      width: '560px',
+      data: {
+        module: 'S002V01M10GMPR',
+        submodule: submodule.IDSUBMODULO,
+      },
+    });
+    
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != null && res != undefined && res != ""){
+        let idFunc = res.IDFUNCION.replace("S002V01F", "");
+        idFunc = idFunc.substring(2);
+        
+        let idSub = submodule.IDSUBMODULO.replace("S002V01S", "");
+        idSub = idSub.substring(2);
 
-          this.router.navigate([`sam/GMPR/${idSub}/${idFunc}`]);
-        }
-      });
-    }catch(error: any){
-      if(error.error == undefined){
-        this.openSnackBar('Ocurrió un error inesperado.');
-      }else if(error.error.msg == undefined){
-        this.openSnackBar('Ocurrió un error inesperado.');
-      }else{
-        this.openSnackBar(error.error.msg);
+        this._router.navigate([`sam/GMPR/${idSub}/${idFunc}`]);
       }
-    }
+    });
   }
 
   openSnackBar(msg: string){

sistema-mantenimiento-front/src/app/components/system-admin/system-params/system-params.component.ts

@@ -246,7 +246,8 @@ export class SystemParamsComponent implements OnInit {
               let submodule: Submodules = {
                 IDSUBMODULO: submod.IDSUBMODULO,
                 NOMBRESUBMODULO: submod.NOMBRESUBMODULO,
-                ICONOSUBMODULO: submod.ICONOSUBMODULO
+                ICONOSUBMODULO: submod.ICONOSUBMODULO,
+                IMAGENSUBMODULO: ""
               }
 
               submodules.push(submodule);

sistema-mantenimiento-front/src/app/components/template/menu-item/submodule-functions/submodule-functions.component.html

@@ -1,14 +1,22 @@
-<h1 mat-dialog-title>Selecciona una función</h1>
-<div mat-dialog-content>
-  <div class="w-100" *ngIf="functions.length > 0">
+<h1 mat-dialog-title class="prevent-select">Seleccione una función</h1>
+<div mat-dialog-content class="prevent-select">
+  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
+    <mat-spinner align="center"></mat-spinner>
+    <h3>Cargando datos ...</h3>
+  </div>
+  <div class="has-error animated fadeIn" *ngIf="!isLoading && hasError">
+    <mat-icon class="red_primary_font mt-50">error</mat-icon>
+    <h2>{{ errorStr }}</h2>
+  </div>
+  <div class="w-100 animated fadeIn" *ngIf="functions.length > 0 && !isLoading && !hasError">
     <button mat-button style="width: 100%;" *ngFor="let func of functions" [mat-dialog-close]="func">
       <mat-icon>{{ func.ICONOFUNCION }}</mat-icon> {{ func.NOMBREFUNCION }}
     </button>
   </div>
-  <div class="animated fadeIn" *ngIf="functions.length == 0">
+  <div class="animated fadeIn" *ngIf="functions.length == 0 && !isLoading && !hasError">
     <h3 class="ml-20"><b>Su perfil no cuenta con los permisos necesarios para utilizar las funciones de este submódulo.</b></h3>
   </div>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close cdkFocusInitial>Cancel</button>
+  <button mat-button mat-dialog-close cdkFocusInitial>Cerrar</button>
 </mat-dialog-actions>

sistema-mantenimiento-front/src/app/components/template/menu-item/submodule-functions/submodule-functions.component.ts

@@ -1,5 +1,10 @@
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Component, OnInit, Inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { lastValueFrom } from 'rxjs';
+import { EncService } from 'src/app/services/enc/enc.service';
+import { SubmoduleFunctionsResponse } from 'src/app/interfaces/submodule-functions.interface';
+import { ModulesService } from 'src/app/services/modules.service';
 
 @Component({
   selector: 'app-submodule-functions',
@@ -7,18 +12,74 @@ import { Component, OnInit, Inject } from '@angular/core';
   styleUrls: ['./submodule-functions.component.css']
 })
 export class SubmoduleFunctionsComponent implements OnInit {
+  isLoading: boolean;
+  hasError: boolean;
+  errorStr: string;
   functions: any[];
 
-  constructor(@Inject(MAT_DIALOG_DATA) private data: any) { 
+  constructor(
+    @Inject(MAT_DIALOG_DATA) private _data: any,
+    private _snackBar: MatSnackBar,
+    private _encService: EncService,
+    private _modulesService: ModulesService,
+  ) { 
+    this.isLoading = true;
+    this.hasError = false;
+    this.errorStr = "";
     this.functions = [];
   }
 
   ngOnInit(): void {
-    this.data.FUNCIONES.forEach((funcion: any) => {
-      if(funcion.HASSCREENS){
-        this.functions.push(funcion);
+    this.openMenu(this._data.module, this._data.submodule)
+  }
+
+  async openMenu(module: string, submodule: string){
+    try{
+      let idUser = localStorage.getItem('idusuario');
+      let shortEnc = await lastValueFrom(this._encService.shortEncrypt(idUser!));
+
+      let modEnc = await this._encService.encrypt(module);
+      let modShort = await lastValueFrom(this._encService.shortEncrypt(modEnc));
+
+      let subEnc = await this._encService.encrypt(submodule);
+      let subShort = await lastValueFrom(this._encService.shortEncrypt(subEnc));
+
+      let submoduleFunctions: SubmoduleFunctionsResponse = await lastValueFrom(this._modulesService.getSubmoduleFunctions(
+        modShort.response.encrypted,
+        subShort.response.encrypted,
+        shortEnc.response.encrypted,
+        1
+      ));
+
+      this.hasError = submoduleFunctions.error;
+      this.errorStr = submoduleFunctions.msg;
+
+      if(!this.hasError){
+        submoduleFunctions.response.forEach(funct => {
+          if(funct.HASSCREENS){
+            this.functions.push(funct);
+          }
+        });
+      }
+
+      this.isLoading = false;
+    }catch(error: any){
+      if(error.error == undefined){
+        this.errorStr = 'Ocurrió un error inesperado.';
+      }else if(error.error.msg == undefined){
+        this.errorStr = 'Ocurrió un error inesperado.';
+      }else{
+        this.errorStr = error.error.msg;
       }
-    });
+
+      this.hasError = true;
+      this.isLoading = false;
+    }
   }
 
+  openSnackBar(msg: string){
+    this._snackBar.open(msg, undefined, {
+      duration: 2500, 
+    })
+  }
 }

sistema-mantenimiento-front/src/app/components/users-profiles/users-profiles.component.html

@@ -13,12 +13,11 @@
   
   <div class="menu-card" *ngIf="!isLoading && !hasError">
     <mat-card class="animated fadeIn fast centre menu-card-item" *ngFor="let submodule of submodules" (click)="openMenu(submodule)">
-      <mat-card-content class="p-32">
+      <!--<mat-card-content class="p-32">
         <mat-icon >{{ submodule.ICONOSUBMODULO }}</mat-icon>
-      </mat-card-content>
-      <mat-card-title class="fz-15 ph-8">
-        {{ submodule.NOMBRESUBMODULO }}
-      </mat-card-title>
+      </mat-card-content>-->
+      <img mat-card-md-image [src]="'assets/img/' + submodule.IMAGENSUBMODULO + '.svg'">
+      <mat-card-title class="fz-15">{{ submodule.NOMBRESUBMODULO }}</mat-card-title>
     </mat-card>
   </div>
   

sistema-mantenimiento-front/src/app/components/users-profiles/users-profiles.component.ts

@@ -154,65 +154,24 @@ export class UsersProfilesComponent implements OnInit {
   }
 
   async openMenu(submodule: Submodules){
-    try{
-      let idUser = localStorage.getItem('idusuario');
-      let shortEnc = await lastValueFrom(this._encService.shortEncrypt(idUser!));
-
-      let modEnc = await this._encService.encrypt('S002V01M02USPE');
-      let modShort = await lastValueFrom(this._encService.shortEncrypt(modEnc));
-
-      let subEnc = await this._encService.encrypt(submodule.IDSUBMODULO);
-      let subShort = await lastValueFrom(this._encService.shortEncrypt(subEnc));
-
-      let submoduleFunctions: SubmoduleFunctionsResponse = await lastValueFrom(this._modulesService.getSubmoduleFunctions(
-        modShort.response.encrypted,
-        subShort.response.encrypted,
-        shortEnc.response.encrypted,
-        1
-      ));
-
-      let permissionsEnc = localStorage.getItem('permisos');
-      let permissionsDec = await this._encService.decrypt(permissionsEnc!);
-      let permissionsArr: Permissions = JSON.parse(permissionsDec);
-
-      let newFunct: SubmoduleFunctions[] = [];
-      let modPerm = permissionsArr.permissions.filter(item => item.id == 'S002V01M02USPE')[0];
-      let subPerm = modPerm.children.filter(item => item.id == submodule.IDSUBMODULO)[0];
-
-      submoduleFunctions.response.forEach(item => {
-        let idFunc = item.IDFUNCION;
-        let func = subPerm.children.filter(item2 => item2.id == idFunc)[0];
-        if(func.access > 0){
-          newFunct.push(item);
-        }
-      });
-
-      let dialogRef = this._dialog.open(SubmoduleFunctionsComponent, {
-        width: '380px',
-        data: {
-          FUNCIONES: newFunct,
-        },
-      });
-      
-      dialogRef.afterClosed().subscribe(res => {
-        if(res != null && res != undefined && res != ""){
-          let idFunc = res.IDFUNCION.replace("S002V01F", "");
-          idFunc = idFunc.substring(2);
-          
-          let idSub = submodule.IDSUBMODULO.replace("S002V01S", "");
-          idSub = idSub.substring(2);
-
-          this._router.navigate([`sam/USPE/${idSub}/${idFunc}`]);
-        }
-      });
-    }catch(error: any){
-      if(error.error == undefined){
-        this.openSnackBar('Ocurrió un error inesperado.');
-      }else if(error.error.msg == undefined){
-        this.openSnackBar('Ocurrió un error inesperado.');
-      }else{
-        this.openSnackBar(error.error.msg);
+    let dialogRef = this._dialog.open(SubmoduleFunctionsComponent, {
+      width: '560px',
+      data: {
+        module: 'S002V01M02USPE',
+        submodule: submodule.IDSUBMODULO,
+      },
+    });
+    
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != null && res != undefined && res != ""){
+        let idFunc = res.IDFUNCION.replace("S002V01F", "");
+        idFunc = idFunc.substring(2);
+        
+        let idSub = submodule.IDSUBMODULO.replace("S002V01S", "");
+        idSub = idSub.substring(2);
+
+        this._router.navigate([`sam/USPE/${idSub}/${idFunc}`]);
       }
-    }
+    });
   }
 }

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

@@ -8,4 +8,5 @@ export interface Submodules{
     IDSUBMODULO: string;
     NOMBRESUBMODULO: string;
     ICONOSUBMODULO: string;
+    IMAGENSUBMODULO: string;
 }