Modificaciones en MESMPR

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

@@ -41,12 +41,35 @@
       </div>
     </mat-grid-tile>
   </mat-grid-list>
-
   <div align="right" style="right: 0; display: flex; align-items: center">
     <div style="width: 100%; margin-left: 150px;">
+      <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;">
+        <mat-expansion-panel class="expansion-panel" style="margin-top: 20px;" [disabled]="diasTomadosValid.length === 0">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <mat-icon>calendar_month</mat-icon>
+            </mat-panel-title>
+            <mat-panel-description><b>Vacaciones tomadas</b></mat-panel-description>
+          </mat-expansion-panel-header>
+          <div class="vacaciones-panel" *ngFor="let periodos of periodos">
+            <div class="periodo-flex">
+              <span>Periodo {{ formatoPeriodo(periodos.PERIODO) }}</span>
+            </div>
 
+            <div>
+              <div *ngFor="let detallePeriodo of formatoDetalles(periodos.DETALLES)">
+                <mat-divider></mat-divider>
+                <div class="panel-flex">
+                  <span><b> Fecha inicio: </b>{{ formatoFecha(detallePeriodo.fecha_inicio) }}</span>
+                  <span><b> Fecha fin: </b>{{ formatoFecha(detallePeriodo.fecha_fin) }}</span>
+                  <span><b> Días tomados: </b>{{ detallePeriodo.dias_tomados }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
     </div>
-
     <div style="width: 180px; text-align: center; margin-right: 30px; top: 10px !important;">
       <mat-card-title class="display-text">Días solicitados</mat-card-title>
       <span class="display-text-small text-secondary"><b> {{ diasSolicitadosAnterior }} </b></span>
@@ -89,9 +112,10 @@
   </mat-grid-list>
 
   <div align="right" style="right: 0; display: flex; align-items: center">
+    
     <div style="width: 100%; margin-left: 150px;">
-      <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;">
-        <mat-expansion-panel class="expansion-panel" style="margin-top: 20px;" [disabled]="detalles.length === 0">
+      <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;" *ngIf="!casoAnterior">
+        <mat-expansion-panel class="expansion-panel" style="margin-top: 20px;" [disabled]="diasTomadosValid.length === 0">
           <mat-expansion-panel-header>
             <mat-panel-title>
               <mat-icon>calendar_month</mat-icon>
@@ -117,7 +141,6 @@
         </mat-expansion-panel>
       </mat-accordion>
     </div>
-
     <div style="width: 180px; text-align: center; margin-right: 30px;">
       <mat-card-title class="display-text">Días solicitados</mat-card-title>
       <span class="display-text-small text-secondary"><b> {{ diasSolicitadosActual }} </b></span>
@@ -161,7 +184,7 @@
   <div align="right" style="right: 0; display: flex; align-items: center">
     <div style="width: 100%; margin-left: 150px;">
       <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;" *ngIf="!casoActual && !casoAnterior">
-        <mat-expansion-panel style="margin-top: 20px;" class="expansion-panel" [disabled]="detalles.length === 0">
+        <mat-expansion-panel style="margin-top: 20px;" class="expansion-panel" [disabled]="diasTomadosValid.length === 0">
           <mat-expansion-panel-header style="margin: auto;">
             <mat-panel-title>
               <mat-icon>calendar_month</mat-icon>
@@ -186,13 +209,11 @@
         </mat-expansion-panel>
       </mat-accordion>
     </div>
-
     <div style="width: 180px; text-align: center; margin-right: 30px;">
       <mat-card-title class="display-text">Días solicitados</mat-card-title>
       <span class="display-text-small text-secondary"><b> {{ diasSolicitadosEAYG }} </b></span>
     </div>
   </div>
-
 </mat-card>
 
 

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

@@ -52,6 +52,8 @@ export class MESMPRComponent implements OnInit {
   public diasSolicitadosActual: number = 0;
   public diasSolicitadosAnterior: number = 0;
 
+  public diasTomadosValid:Array<any> = [];
+
   usuario: string = '';
   usuario_session: USERInterface = JSON.parse(
     localStorage.getItem('TIMUSERENC')!
@@ -65,10 +67,11 @@ export class MESMPRComponent implements OnInit {
     private _validationService: ValidationsService,
   ) {
     this.usuario = this.usuario_session.NOMBRE;
+    this.obtener();
   }
 
   ngOnInit(): void {
-    this.obtener();
+    
   }
 
   private async obtener() {
@@ -128,6 +131,14 @@ export class MESMPRComponent implements OnInit {
         if (element.DETALLES.length > 0) {
           this.detalles = [...element.DETALLES];
         }
+        this.detalles.map(element => {
+          if (element.DIASTOMADOS > 0) {
+
+            this.diasTomadosValid.push(element.DIASTOMADOS);
+          }
+        })
+        console.log(this.diasTomadosValid.length);
+        
         return element;
       });