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

<div class="centre text-card">
  <h1 class="display-1">Bienvenido(a)</h1>
  <span class="display-text">{{ usuario }}</span>
</div>

<mat-grid-list cols="12" rowHeight="600px" class="card-title" *ngIf="loading">
  <mat-grid-tile colspan="12">
    <mat-spinner class="text-secondary"></mat-spinner>
  </mat-grid-tile>
</mat-grid-list>

<!-- EASYG -->
<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" *ngIf="!loading && casoEAYG">
  <mat-grid-list cols="12" rowHeight="100px">
    <!-- Fila 1 | Periodo | Días disponibles (título) -->
    <mat-grid-tile colspan="12">
      <!-- Periodo Actual -->
      <div class="ml-5" style="position: absolute; left: 0">
        <mat-card-title style="margin-left: auto">
          <b>{{ periodoEAYG }}</b>
        </mat-card-title>
        <span class="display-text">Periodo EAYG</span><br>
        <span style="margin-top: 5px;"><b>Vencimiento:</b> {{ fechaVencimientoEAYG }}</span>
      </div>
      <div>
        <span class="display-0">Días disponibles</span>
      </div>
      <div class="mr-5" class="position-right" style="width: 210px">
        <mat-card-title class="display-text">Días por periodo</mat-card-title>
        <span class="display-text-small text-secondary"><b>{{ diasPeriodoEAYG }}</b></span>
      </div>
    </mat-grid-tile>
    <!-- Fila 2 | Días Tomados | Días disponibles (Dato) -->
    <mat-grid-tile colspan="12">
      <h1 class="display-4 text-secondary">
        {{ diasDisponiblesEAYG }}
      </h1>
      <div class="mr-5" class="position-right" style="margin-right: 1%; width: 180px">
        <mat-card-title class="display-text">Días tomados</mat-card-title>
        <span class="display-text-small text-secondary"><b> {{ diasTomadosEAYG }} </b></span>
      </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%;" *ngIf="!casoActual && !casoAnterior">
        <mat-expansion-panel class="expansion-panel" [disabled]="detalles.length === 0">
          <mat-expansion-panel-header style="margin: auto;">
            <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;">
      <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>

<!-- Periodo Actual -->
<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" [style.margin-bottom]="!casoAnterior ? '100px' : ''"
  *ngIf="!loading && casoActual">
  <mat-grid-list cols="12" rowHeight="100px">
    <!-- Fila 1 | Periodo | Días disponibles (título) -->
    <mat-grid-tile colspan="12">
      <!-- Periodo Actual -->
      <div class="ml-5" style="position: absolute; left: 0">
        <mat-card-title style="margin-left: auto">
          <b>{{ periodoActual }}</b>
        </mat-card-title>
        <span class="display-text">Periodo actual</span><br>
        <span style="margin-top: 5px;"><b>Vencimiento:</b> {{ fechaVencimientoActual }}</span>
      </div>
      <div>
        <span class="display-0">Días disponibles</span>
      </div>
      <div class="mr-5" class="position-right" style="width: 210px">
        <mat-card-title class="display-text">Días por periodo</mat-card-title>
        <span class="display-text-small text-secondary"><b>{{ diasPeriodoActual }}</b></span>
      </div>
    </mat-grid-tile>
    <!-- Fila 2 | Días Tomados | Días disponibles (Dato) -->
    <mat-grid-tile colspan="12">
      <h1 class="display-4 text-secondary">
        {{ diasDisponiblesActual }}
      </h1>
      <div class="mr-5" class="position-right" style="margin-right: 1%; width: 180px">
        <mat-card-title class="display-text">Días tomados</mat-card-title>
        <span class="display-text-small text-secondary"><b> {{ diasTomadosActual }} </b></span>
      </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" [disabled]="detalles.length === 0">
          <mat-expansion-panel-header style="margin: auto;">
            <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;">
      <mat-card-title class="display-text">Días solicitados</mat-card-title>
      <span class="display-text-small text-secondary"><b> {{ diasSolicitadosActual }} </b></span>
    </div>
  </div>
</mat-card>

<!-- Periodo Anterior -->
<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" style="margin-bottom: 100px;"
  *ngIf="!loading && casoAnterior">
  <mat-grid-list cols="12">
    <!-- Fila 1 | Periodo | Días disponibles (título) -->
    <mat-grid-tile colspan="12">
      <div class="ml-5" style="position: absolute; left: 0">
        <mat-card-title style="margin-left: auto">
          <b>{{ periodoAnterior }}</b>
        </mat-card-title>
        <span class="display-text">Periodo anterior</span><br>
        <span style="margin-top: 5px;"><b>Vencimiento:</b> {{ fechaVencimientoAnterior }}</span>
      </div>
      <div>
        <span class="display-0">Días disponibles</span>
      </div>
      <div class="mr-5" class="position-right" style="width: 210px">
        <mat-card-title class="display-text">Días por periodo</mat-card-title>
        <span class="display-text-small text-secondary"><b>{{ diasPeriodoAnterior }}</b></span>
      </div>
    </mat-grid-tile>

    <!-- Fila 2 | Días Tomados | Días disponibles (Dato) -->
    <mat-grid-tile colspan="12">
      <h1 class="display-4 text-secondary">
        {{ diasDisponiblesAnterior }}
      </h1>
      <div class="mr-5" class="position-right" style="margin-right: 1%; width: 180px; ">
        <mat-card-title class="display-text">Días tomados</mat-card-title>
        <span class="display-text-small text-secondary"><b>{{ diasTomadosAnterior }}</b></span>
      </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;">  
     
    </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> {{ diasSolicitadosAnterior }} </b></span>
    </div>
  </div>
</mat-card>

<div *ngIf="caso0 && !loading" class="centre">
  <h2>Aún no existen periodos vacaciones para este usuario</h2>
</div>