ordensalida.componente.html

<div class="m-5" [formGroup]="datos_materialSobrante">
  <!----------------------------------------------------------------------DESCRIPCION DE ORDEN DE SALIDA ------------------------------------------------------------------->

  <div class="lg:w-1/5 md:w-full">
    <mat-form-field class="w-full" appearance="outline" floatLabel="always">
      <mat-label>N° de Orden de Salida</mat-label>
      <input soloNumeros="entero" type="text" placeholder="Ingresar N° de Orden Salida" matInput formControlName="numeroOrden" maxlength="6">
    </mat-form-field>
  </div>

  <div class="w-full">
    <mat-form-field class="w-full">
      <mat-label>DESCRIPCIÓN DEL MATERIAL SOBRANTE :</mat-label>
      <textarea formControlName="descMaterial" matInput placeholder="Breve descripción de los materiales faltantes y su estado"></textarea>
    </mat-form-field>
  </div>

  <!---------------------------------------------------------------------- SECCIÓN MATERIALES SOBRANTES  ---------------------------------------------------------------------->

  <div class="mt-6">
    <!-- Título y botón de agregar artículo -->
    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 items-center">
      <mat-label class="text-[1.1em] font-bold mb-4 flex items-center">
        LISTADO DE MATERIAL SOBRANTE
        <mat-icon>deployed_code_update</mat-icon>
      </mat-label>
      <button [ngStyle]="{'visibility': activarNuevoArticulo ? 'visible' : 'hidden'}" [disabled]="!activarNuevoArticulo" mat-raised-button (click)="onEventoAgregarArticulo($event)">
        <mat-icon>add</mat-icon>
        <b>Agregar material</b>
      </button>
    </div>

    <!-- Tabla de artículos -->
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-full">
        <!-- Columna Nombre de Artículo -->
        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef> NOMBRE DE ARTÍCULO </th>
          <td mat-cell *matCellDef="let element">
              {{ element.nombre }}
          </td>
        </ng-container>

        <!-- Columna Unidad -->
        <ng-container matColumnDef="unidad">
          <th mat-header-cell *matHeaderCellDef> UNIDAD </th>
          <td mat-cell *matCellDef="let element">
              {{ element.unidad }}
          </td>
        </ng-container>

        <!-- Columna Cantidad -->
        <ng-container matColumnDef="cantidad">
          <th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
          <td mat-cell *matCellDef="let element">
              {{ element.cantidad }}
          </td>
        </ng-container>

        <!-- Columna Estado Artículo -->
        <ng-container matColumnDef="estado">
          <th mat-header-cell *matHeaderCellDef> ESTADO ARTÍCULO </th>
          <td mat-cell *matCellDef="let element">
              {{ formatoEstado(element.estado) }}
          </td>
        </ng-container>

        <!-- Columna Acción -->
        <ng-container matColumnDef="accion">
          <th mat-header-cell *matHeaderCellDef> ACCIÓN </th>
          <td mat-cell *matCellDef="let element">
            <button mat-icon-button (click)="onEventoEditarArticulo($event, element)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button (click)="onEventoEliminarArticulo($event, element)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>

        <!-- Header y Filas -->
        <tr mat-header-row *matHeaderRowDef="columnasArticulos"></tr>
        <tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
      </table>
    </div>
  </div>

  <div class="mt-6">
    <div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIA DE MATERIAL SOBRANTE: (opcional)</b></div>
    <div>
      <button mat-fab class="!w-full" style="background-color: #ffcf83" (click)="fotoATC.click()">
        <mat-label>FOTO MATERIAL SOBRANTE</mat-label>
        <mat-icon>file_open</mat-icon>
      </button>
      <input  type="file" #fotoATC (change)="onEventoSubirArchivo($event,5)" class="hidden"  multiple accept="image/png, image/jpeg">
    </div>
    <div class="flex w-full mt-2" *ngFor="let archivo of archivosMaterial; let i = index">
        <p class="w-2/4" matTooltip="{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)')}}" matTooltipPosition="above">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
        <div class="w-2/4 grid grid-cols-3 gap-4">
          <button (click)="gestionArchivos(i,1,archivo.file)"><mat-icon>info</mat-icon></button>
          <button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
        </div>
    </div>
  </div>

</div>