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

<mat-card class="card-small mat-elevation-z8 animated fadeIn fast centre">
  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

  <mat-grid-list cols="12" rowHeight="85px">
    <mat-grid-tile colspan="12">
      <mat-card-title>Solicitud de Vacaciones</mat-card-title>
    </mat-grid-tile>

    <form [formGroup]="formGroup">
      <mat-grid-tile colspan="12" *ngIf="perfil !== 1">
        <mat-form-field appearance="standard" class="input-text">
          <mat-label>Número de Empleado</mat-label>
          <input matInput placeholder="Ingrese el nombre" formControlName="numero_empleado" />
          <mat-icon matSuffix>tag</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="8" *ngIf="perfil === 1">

        <mat-form-field appearance="standard" class="input-text" style="width: 83%; padding: 0 !important;" *ngIf="!otro_usuario?.value">
          <mat-label>Número de Empleado</mat-label>
          <input matInput placeholder="Ingrese el nombre" formControlName="numero_empleado" />
          <mat-icon matSuffix>tag</mat-icon>
        </mat-form-field>

        <mat-form-field appearance="standard" class="example-full-width" style="width: 83%;" *ngIf="otro_usuario?.value" > 
          <mat-label>Seleccione el empleado</mat-label>
          <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto"  (ngModelChange)="cambioEmpleado()">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{option }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

      </mat-grid-tile>
      <mat-grid-tile colspan="4" *ngIf="perfil === 1">
        <section class="example-section">
          <mat-checkbox class="example-margin" formControlName="otro_usuario" (ngModelChange)="changeChBx()">Habiliar
            para otro usuario</mat-checkbox>
        </section>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="standard" class="input-text">
          <mat-label>Fechas solicitadas </mat-label>
          <mat-date-range-input [min]="minDate" [rangePicker]="picker" required [disabled]="disabledFechas" >
            <input matStartDate placeholder="Fecha Inicial" [value]="fecha_inicio" formControlName="fecha_inicio" />
            <input matEndDate placeholder="Fecha Final" [value]="fecha_fin" formControlName="fecha_fin" />
          </mat-date-range-input>
          <mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle>
          <mat-date-range-picker class="text" #picker [dateClass]="dateClass" ></mat-date-range-picker>
          <mat-error *ngIf="fecha_inicio!.invalid && fecha_fin!.invalid">{{
            fecha_inicio!.hasError("required")
            ? "Debe ingresar este campo"
            : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="standard" class="input-text">
          <mat-label>Días Vacacionales</mat-label>
          <input matInput type="number" min="1" formControlName="dias_vacacionales" [value]="calcular_dias()" (keyup)="applyFilter($event)" />
          <mat-icon matSuffix>date_range</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <button mat-raised-button (click)="openDialog()" class="secondary"
          [disabled]="formGroup.invalid || envioForm.status">
          {{ envioForm.text }}
        </button>
      </mat-grid-tile>
    </form>
  </mat-grid-list>
</mat-card>