conformidad.componente.html

<div style="display: flex;width: 100%;justify-content: center; margin: 20px 0;" xmlns="http://www.w3.org/1999/html">
  <div
    style="border: 1px solid black ;
    width: 75%; display: flex;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 15px rgba(0, 0, 0, 0.23);
    height: 3rem;
    align-items: center"
  >
    <label style="font-weight: bold;font-size: 2rem;font-family: 'inherit'">HOJA DE RUTA</label>
  </div>
</div>

<div class="body">

  <div class="div-datosGenerales divisionGeneral" [formGroup]="datos_personal">

    <mat-card appearance="outlined" class="titulo-Principal">
      <mat-card-content>DATOS PRINCIPALES</mat-card-content>
    </mat-card>

    <div style="display: flex;">
      <div style="width: 100%">
        <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">TÉCNICO : </label>
        <mat-form-field appearance="outline" floatLabel="always">
          <mat-label>Técnico responsable</mat-label>
          <mat-select formControlName="tecnicoPersonal" placeholder="TECNICOS" (selectionChange)="onEventTecnico($event)" required>
            <mat-option *ngFor="let option of this.personal_list" [value]="option?.codper">
              {{option?.personal}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div style="width: 100%">
        <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">FECHAS : </label>
        <mat-form-field>
          <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
            <input matStartDate formControlName="fechaInicio" placeholder="Fecha inicial">
            <input matEndDate formControlName="fechaFin" placeholder="Fecha Fin">
          </mat-date-range-input>
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-date-range-picker #picker></mat-date-range-picker>

          @if (range.controls.fechaInicio.hasError('matStartDateInvalid')) {
            <mat-error>Invalid start date</mat-error>
          }
          @if (range.controls.fechaFin.hasError('matEndDateInvalid')) {
            <mat-error>Invalid end date</mat-error>
          }
        </mat-form-field>
      </div>
    </div>
    <div style="display: flex;">
      <div style="width: 100%;">
        <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">SEDE : </label>
        <mat-form-field style="width: 20rem">
          <mat-label>Sede afectada : </mat-label>
          <mat-select formControlName="sedePersonal" placeholder="SEDES" required>
            <mat-option *ngFor="let option of this.sede_list" [value]="option?.codlocal">
              {{option?.deslocal}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <br>
        <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">ÁREA : </label>
        <mat-form-field>
          <mat-label>Área designada</mat-label>
          <input formControlName="areaPersonal" matInput placeholder="Área designada" value="" readonly>
        </mat-form-field>
      </div>
      <div style="width: 100%; display: flex;justify-content: flex-start">
        <div style="margin : 0 20px 0 0">
          <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">PASAJE(Soles) : </label>
          <br>
          <mat-form-field>
            <mat-label>Pásaje designado</mat-label>
            <input formControlName="pasajePersonal" matInput placeholder="Calculo final del pasaje" value="">
          </mat-form-field>
        </div>
        <div>
          <div style="display: flex ; width:100%;">
            <h6 class="panel-title" id="panel-title-tabla-asistencia">LISTADO DE PASAJES<mat-icon class="mat-icon-small">attach_money</mat-icon></h6>
              <button mat-fab >
                  <mat-icon>add</mat-icon>
                  Agregar pasaje
              </button>
          </div>
          <div>
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
            <ng-container matColumnDef="lugarOrigen">
              <th mat-header-cell *matHeaderCellDef> LUGAR DE ORIGEN </th>
              <td mat-cell *matCellDef="let element"> {{element.lugarOrigen}} </td>
            </ng-container>

            <ng-container matColumnDef="lugarDestino">
              <th mat-header-cell *matHeaderCellDef> LUGAR DESTINO </th>
              <td mat-cell *matCellDef="let element"> {{element.lugarDestino}} </td>
            </ng-container>

            <ng-container matColumnDef="monto">
              <th mat-header-cell *matHeaderCellDef> MONTO </th>
              <td mat-cell *matCellDef="let element"> {{element.monto}} </td>
            </ng-container>

            <ng-container matColumnDef="fecha">
              <th mat-header-cell *matHeaderCellDef> FECHA </th>
              <td mat-cell *matCellDef="let element"> {{element.fecha}} </td>
            </ng-container>

            <ng-container matColumnDef="accion">
              <th mat-header-cell *matHeaderCellDef> ACCIÓN </th>
              <td mat-cell *matCellDef="let element"> {{element.lugarDestino}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="columnasPasaje"></tr>
            <tr mat-row *matRowDef="let row; columns: columnasPasaje;"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="div-serviocisPrestados divisionGeneral"  [formGroup]="datos_servicio">

      <mat-card appearance="outlined" class="titulo-Principal">
        <mat-card-content>SERVICIOS PRESTADOS</mat-card-content>
      </mat-card>

      <div class="servicio-descripcion">

        <div style="display: flex;align-items: center">
          <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit' ; padding: 0 10px">REQUERIMIENTOS : </label>
          <mat-form-field class="divRequerimientos">
            <mat-label>Listado de Requerimientos</mat-label>
            <input
                   type="text"
                   placeholder="Buscar requerimiento"
                   matInput
                   #inputBusqueda
                   formControlName="selectedOption"
                   [matAutocomplete]="auto"
                   (input)="onBusquedaRequerimiento($event)"
            >
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onEventSeleccion($event)" >
              <mat-option *ngFor="let option of filteredOptions" [value]="option.codigo">
                {{ option.numero }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
          <div class="contenedorRequerimiento" *ngFor="let card of cards">
            <mat-card >
              <mat-card-content>
                <div class="contenedor-general-botones">
                  <mat-card-subtitle style="font-size: 1rem;font-weight: bold;align-content: center">{{ card.titulo }}</mat-card-subtitle>
                  <div class="contenedor-botones">
                    <button mat-fab aria-label="Eliminar"  matTooltip="Eliminar" matTooltipPosition="above" (click)="deleteRequerimiento(card.id)">
                      <mat-icon class="mat-icon-small">delete</mat-icon>
                    </button>
                  </div>
                  <div class="contenedor-botones">
                    <button mat-fab aria-label="Información" matTooltip="Información" matTooltipPosition="above" (click)="infoRequerimiento(card.codigo)">
                      <mat-icon class="mat-icon-small">info</mat-icon>
                    </button>
                  </div>
                </div>
              </mat-card-content>
            </mat-card>
            <br>
          </div>
          <br>
          <mat-label [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>

        </div>

        <br>

        <mat-form-field class="example-full-width">
          <mat-label>DESCRIPCIÓN DEL PROBLEMA : </mat-label>
          <textarea matInput placeholder="Breve descripciòn sobrel los problemas encontrados en la sede" formControlName="descripcionServicio"></textarea>
        </mat-form-field>

        <br>

        <mat-form-field class="example-full-width">
          <mat-label>CAUSA : </mat-label>
          <textarea matInput placeholder="Breve descripciòn sobre las causas del problema" formControlName="causaServicio"></textarea>
        </mat-form-field>
      </div>

      <input style="display: none" type="file" name="file" id="file">
      <input style="display: none" type="file" name="fila2" id="file2">

      <div class="servicio-evidencia" style="margin: 20px 0;">
        <div class="example-button-row" style=" display: flex;  width:100%;justify-content: center">
          <div class="example-flex-container" style="display: flex; width: 50%;justify-content: space-between"  >
            <div class="example-button-container">
              <button mat-fab extended >
                <mat-icon>upload_file</mat-icon>
                 EVIDENCIA DEL PROBLEMA
              </button>
            </div>
            <div class="example-button-container">
              <button mat-fab extended >
                <mat-icon>upload_file</mat-icon>
                EVIDENCIA DE LA SOLUCIÓN
              </button>
            </div>
          </div>
        </div>
      </div>
  </div>

  <br>

  <div class="div-trabajosPrestados  divisionGeneral" [formGroup]="datos_trabajo">
    <mat-card appearance="outlined" class="titulo-Principal">
      <mat-card-content>TRABAJOS PRESTADOS</mat-card-content>
    </mat-card>

    <div class="div-trabajosPrestados">
      <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">TIPO DE TRABAJO : </label>
      <mat-form-field class="select-tipoTrabajo">
        <mat-label>Seleccionar tipo de trabajo</mat-label>
        <mat-select formControlName="tipoTrabajo">
          @for (tipoT of listTipoTrabajo; track tipoT) {
            <mat-option [value]="tipoT.value">{{tipoT.viewValue}}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <br>
      <mat-form-field class="example-full-width">
        <mat-label>DESCRIPCIÓN DEL TRABAJO : </mat-label>
        <textarea matInput placeholder="Breve descripciòn del trabajo realizado" formControlName="descripcionTrabajo"></textarea>
      </mat-form-field>
    </div>

  </div>



  <!-- <h4>MATERIAL SOBRANTE</h4> -->
  <div class="div-MaterialSobrante  divisionGeneral" [formGroup]="datos_material">

      <mat-card appearance="outlined" class="titulo-Principal">
        <mat-card-content>MATERIAL SOBRANTE</mat-card-content>
      </mat-card>


      <mat-label> ¿ Se encontro material para devolver al almacen ? : </mat-label>
      <mat-button-toggle-group formControlName="materialSobrante" aria-label="Existe material sobrante" >
        <mat-button-toggle value="1">SI</mat-button-toggle>
        <mat-button-toggle value="2">NO</mat-button-toggle>
      </mat-button-toggle-group>

  </div>
</div>




<!-- <h4>TÉCNICO :</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select name="food">
    @for (food of foods; track food) {
      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<h4>FECHAS : </h4>
<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  @if (range.controls.start.hasError('matStartDateInvalid')) {
    <mat-error>Invalid start date</mat-error>
  }
  @if (range.controls.end.hasError('matEndDateInvalid')) {
    <mat-error>Invalid end date</mat-error>
  }
</mat-form-field>


<h4>SEDE :</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select name="food">
    @for (food of foods; track food) {
      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
    }
  </mat-select>
</mat-form-field>


<h4>AREA </h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select name="food">
    @for (food of foods; track food) {
      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
    }
  </mat-select>
</mat-form-field>


<h5>SERVICIOS PRESTADO </h5> -->