Modificaciones en el menú

vacaciones/src/app/components/mco/mco.component.html

@@ -1,4 +1,4 @@
-<mat-sidenav-container
+<!-- <mat-sidenav-container
   class="example-container"
   hasBackdrop="true"
   (window:resize)="onResize($event)"
@@ -62,7 +62,280 @@
             <mat-panel-title> Menú de configuración </mat-panel-title>
           </mat-expansion-panel-header>
           <li>
-            <a [routerLink]="['/admin/mcomau']" (click)="sidenav.toggle()"
+            <a  href="http://localhost:4200/#/admin/mesmav"
+              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomor']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcompv']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomdf']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomap']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
+              Perfiles</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomba']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomun']" (click)="sidenav.toggle()"
+              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
+            >
+          </li>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </ul>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <mat-toolbar style="position: fixed; z-index: 10000">
+      <mat-toolbar-row id="colorApp2" [class]="empresa" class="nav primary" >
+        <button
+          *ngIf="isLoggedIn"
+          mat-icon-button
+          id="colorAppText1"
+          [class]="'text-'+empresa"
+          style="background-color: white;"
+          (click)="sidenav.toggle()"
+        >
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span class="ml-5 mr-5" style="color: white"></span>
+        <app-toolbar></app-toolbar>
+        <span class="example-spacer"></span>
+        <button
+          *ngIf="isLoggedIn"
+          mat-icon-button
+          id="colorAppText2"
+          [class]="'example-icon favorite-icon text-'+empresa"
+          matTooltip="Cerrar Sesión"
+          (click)="logout()"
+          style="background-color: white;"
+        >
+          <mat-icon style="font-size: 15pt">logout</mat-icon>
+        </button>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </mat-sidenav-content>
+</mat-sidenav-container> -->
+
+<mat-drawer-container
+  class="example-container"
+  (window:resize)="onResize($event)"
+>
+  <mat-drawer mode="side"  [opened]="pantallaGrande" *ngIf="isLoggedIn">
+    <div id="colorApp4" [class]="empresa" class="side-encabezado primary">
+      <div class="user-view">
+        <img [src]="imagenLogo()" alt="" width="270" />
+        <div>
+          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
+          <br />
+          <span class="rol-menu">{{ perfil }}</span>
+        </div>
+      </div>
+      <div></div>
+    </div>
+    <ul id="slide-out" class="sidenav">
+      <li>
+        <a [routerLink]="['/admin/mesmpr']" (click)="smallMenu()"
+          ><mat-icon matSuffix>home</mat-icon>Inicio</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmsv']" (click)="smallMenu()"
+          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmav']" (click)="smallMenu()"
+          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmhs']" (click)="smallMenu()"
+          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmcv']" (click)="smallMenu()"
+          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmre']" (click)="smallMenu()"
+          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmcc']" (click)="smallMenu()"
+          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
+        >
+      </li>
+      <mat-divider></mat-divider>
+      <mat-accordion>
+        <mat-expansion-panel [disabled]="menuMCO">
+          <mat-expansion-panel-header>
+            <mat-panel-title> Menú de configuración </mat-panel-title>
+          </mat-expansion-panel-header>
+          <li>
+            <a [routerLink]="['/admin/mcomau']" (click)="smallMenu()"
+              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomor']" (click)="smallMenu()"
+              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcompv']" (click)="smallMenu()"
+              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomdf']" (click)="smallMenu()"
+              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomap']" (click)="smallMenu()"
+              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
+              Perfiles</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomba']" (click)="smallMenu()"
+              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
+            >
+          </li>
+          <li>
+            <a [routerLink]="['/admin/mcomun']" (click)="smallMenu()"
+              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
+            >
+          </li>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </ul>
+  </mat-drawer>
+  <mat-drawer-content>
+    <mat-toolbar style="position: absolute; z-index: 10000">
+      <mat-toolbar-row id="colorApp5" [class]="empresa" class="nav primary">
+        <button
+          *ngIf="isLoggedIn && auxCont"
+          mat-icon-button
+          id="colorAppText1"
+          [class]="'text-'+empresa"
+          style="background-color: white;"
+          (click)="smallMenu()"
+        >
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span class="ml-5 mr-5" style="color: white" *ngIf="auxCont"></span>
+        <app-toolbar></app-toolbar>
+        <span class="example-spacer-2"></span>
+        <button
+          *ngIf="isLoggedIn"
+          mat-icon-button
+          id="colorAppText3"
+          [class]="'example-icon favorite-icon text-'+empresa"
+          matTooltip="Cerrar Sesión"
+          (click)="logout()"
+          style="background-color: white;"
+        >
+          <mat-icon style="font-size: 15pt">logout</mat-icon>
+        </button>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </mat-drawer-content>
+</mat-drawer-container>
+
+
+
+<!-- <mat-sidenav-container
+  class="example-container"
+  hasBackdrop="true"
+  (window:resize)="onResize($event)"
+  *ngIf="!pantallaGrande"
+>
+  <mat-sidenav #sidenav mode="push">
+    <div id="colorApp1" [class]="empresa" class="side-encabezado primary">
+      <div class="user-view">
+        <img [src]="imagenLogo()" alt="" width="270" />
+        <div>
+          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
+          <br />
+          <span class="rol-menu">{{ perfil }}</span>
+        </div>
+      </div>
+     
+    </div>
+    <ul id="slide-out" class="sidenav" *ngIf="isLoggedIn">
+      <li>
+        <a [routerLink]="['/admin/mesmpr']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>home</mat-icon>Inicio</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmsv']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmav']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmhs']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmcv']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/admin/mesmre']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
+        >
+      </li>
+
+      <li>
+        <a [routerLink]="['/admin/mesmcc']" (click)="sidenav.toggle()"
+          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
+        >
+      </li>
+      <mat-divider></mat-divider>
+      <mat-accordion>
+        <mat-expansion-panel [disabled]="menuMCO">
+          <mat-expansion-panel-header>
+            <mat-panel-title> Menú de configuración </mat-panel-title>
+          </mat-expansion-panel-header>
+          <li>
+            <a  href="http://localhost:4200/#/admin/mesmav"
               ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
             >
           </li>
@@ -258,3 +531,4 @@
     <app-footer></app-footer>
   </mat-drawer-content>
 </mat-drawer-container>
+ -->

vacaciones/src/app/components/mco/mco.component.ts

@@ -1,6 +1,6 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Router } from '@angular/router';
+import { Router, RouterLink, UrlTree } from '@angular/router';
 import { IAMService } from 'src/app/services/iam/iam.service';
 import { MCOService } from 'src/app/services/mco/mco.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -20,10 +20,12 @@ export class MCOComponent implements AfterViewInit {
   isLoggedIn:Boolean = false;
   menuMCO:Boolean = false;
   opened: boolean = false;
-  pantallaGrande:Boolean =  !this.breakpointObserver.isMatched('(max-width: 1700px)');
+  pantallaGrande:boolean =  !this.breakpointObserver.isMatched('(max-width: 1700px)');
 
   empresa:string = "";
   razonSocial: string = ""
+
+  public auxCont:boolean = false
   public perfil : string;
   constructor( 
     private router: Router, 
@@ -31,18 +33,29 @@ export class MCOComponent implements AfterViewInit {
     private _IAMService:IAMService,
     private _mcoService:MCOService,
     private _encService: ENCService,
+    private _router: Router,
     private _validationService: ValidationsService,
     private _snackBar: MatSnackBar) {
     this.anio = new Date().getFullYear();
     this.isLoggedIn = (localStorage.getItem('jwt') !== "");
+    
 
     this.empresa = this._encService.desencriptar( this.usuario_session.RFCEMPRESA);
     this.razonSocial = this._encService.desencriptar(this.usuario_session.RAZONSOCIAL);
     this.perfil = this._encService.desencriptar(this.usuario_session.NOMBREPERFIL);
+
+    console.log(this.pantallaGrande);
+    
   }
 
   ngAfterViewInit(): void {
     this.consultarAnio();
+
+    if(!this.pantallaGrande){
+      this.auxCont = true;
+    }else{
+      this.auxCont = false;
+    }
   }
 
   consultarAnio() {  
@@ -70,6 +83,10 @@ export class MCOComponent implements AfterViewInit {
     }
   }
 
+  smallMenu(){
+    this.pantallaGrande = !this.pantallaGrande;
+  }
+
   imagenLogo(){
     if (window.location.href.includes("ferrariventilatori")) {
       return `https://ferrariventilatori.mx/vacaciones/assets/img/${this.empresa}-NO-BG.png`
@@ -92,6 +109,11 @@ export class MCOComponent implements AfterViewInit {
 
   onResize(event:any) {
     this.pantallaGrande = event.target.innerWidth > 1700
+    if(!this.pantallaGrande){
+      this.auxCont = true;
+    }else{
+      this.auxCont = false;
+    } 
   }
   
   logout() {

vacaciones/src/app/components/mes/mes.component.html

@@ -1,4 +1,89 @@
-<mat-sidenav-container
+<mat-drawer-container
+  class="example-container"
+  (window:resize)="onResize($event)"
+>
+  <mat-drawer mode="side"  [opened]="pantallaGrande" *ngIf="isLoggedIn">
+    <div id="colorApp4" [class]="empresa" class="side-encabezado primary">
+      <div class="user-view">
+        <img [src]="imagenLogo()" alt="" width="270" />
+        <div>
+          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
+          <br />
+          <span class="rol-menu">{{ perfil }}</span>
+        </div>
+      </div>
+      <div></div>
+    </div>
+    <ul id="slide-out" class="sidenav" *ngIf="isLoggedIn">
+      <li>
+        <a [routerLink]="['/mesmpr']" (click)="smallMenu()"
+          ><mat-icon matSuffix>home</mat-icon>Inicio</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/mesmsv']" (click)="smallMenu()"
+          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/mesmav']" (click)="smallMenu()"
+          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
+          vacaciones</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/mesmhs']" (click)="smallMenu()"
+          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/mesmre']" (click)="smallMenu()"
+          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
+        >
+      </li>
+      <li>
+        <a [routerLink]="['/mesmcc']" (click)="smallMenu()"
+          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
+        >
+      </li>
+    </ul>
+  </mat-drawer>
+  <mat-drawer-content>
+    <mat-toolbar style="position: absolute; z-index: 10000">
+      <mat-toolbar-row id="colorApp5" [class]="empresa" class="nav primary">
+        <button
+          *ngIf="isLoggedIn && auxCont"
+          mat-icon-button
+          id="colorAppText1"
+          [class]="'text-'+empresa"
+          style="background-color: white;"
+          (click)="smallMenu()"
+        >
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span class="ml-5 mr-5" style="color: white" *ngIf="auxCont"></span>
+        <app-toolbar></app-toolbar>
+        <span class="example-spacer-2"></span>
+        <button
+          *ngIf="isLoggedIn"
+          mat-icon-button
+          id="colorAppText3"
+          [class]="'example-icon favorite-icon text-'+empresa"
+          matTooltip="Cerrar Sesión"
+          (click)="logout()"
+          style="background-color: white;"
+        >
+          <mat-icon style="font-size: 15pt">logout</mat-icon>
+        </button>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </mat-drawer-content>
+</mat-drawer-container>
+
+<!-- <mat-sidenav-container
   class="example-container"
   hasBackdrop="true"
   (window:resize)="onResize($event)"
@@ -160,3 +245,4 @@
     <app-footer></app-footer>
   </mat-drawer-content>
 </mat-drawer-container>
+ -->

vacaciones/src/app/components/mes/mes.component.ts

@@ -21,10 +21,11 @@ export class MESComponent implements AfterViewInit {
   isLoggedIn:Boolean = false;
   events: string[] = [];
   opened: boolean = false;
-  pantallaGrande:Boolean =  !this.breakpointObserver.isMatched('(max-width: 1700px)');
+  pantallaGrande:boolean =  !this.breakpointObserver.isMatched('(max-width: 1700px)');
   nombreUsuario: string;
   usuario_session:USERInterface = JSON.parse(localStorage.getItem('TIMUSERENC')!);
   empresa:string = "";
+  public auxCont:boolean = false
   razonSocial: string = "";
   public perfil : string;
   public activateMenu( response:Boolean ){
@@ -43,11 +44,25 @@ export class MESComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.cargarColores();
+
+    if(!this.pantallaGrande){
+      this.auxCont = true;
+    }else{
+      this.auxCont = false;
+    }
   }
   
   onResize(event:any) {
     this.pantallaGrande = event.target.innerWidth > 1700
-    
+    if(!this.pantallaGrande){
+      this.auxCont = true;
+    }else{
+      this.auxCont = false;
+    } 
+  }
+
+  smallMenu(){
+    this.pantallaGrande = !this.pantallaGrande;
   }
 
   async cargarColores(){