sinonimo.component.html 3.39 KB
<div class="bg-primary rounded text-white">
  <div class="modal-header">
    <img
      draggable="false"
      ondragstart="return false;"
      (contextmenu)="false"
      (click)="close()"
      class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
      src="assets/img/icono-cancelar-blanco.svg">
    <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
  </div>

  <div class="modal-body my-2">
    <p class="mb-2 h5">Cantidad restante {{sinonimos[currentIndex].cantidadRestante}}</p>
    <div class="lista-sinonimos scroll-y-visible">
      <div
        class="row mx-0 mb-2 fade-in-left"
        *ngFor="let articulo of sinonimos[currentIndex].productos"
        [hidden]="articulo.ExiVta <= 0">
        <div class="col-8 p-0 my-auto h6 text-right">
          <p class="m-0 font-weight-normal">
            {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
          </p>
        </div>
        <div class="col-4">
          <div class="row mx-0 justify-content-between border border-white badge-pill">
            <!-- BOTON MENOS -->
            <div class="col-auto px-0 my-auto">
              <img
                draggable="false"
                ondragstart="return false;"
                (contextmenu)="false"
                class="d-block ml-auto py-2 icon-30 btn-effect"
                src="assets/img/menos-blanco.svg"
                (click)="restarCantidadSinonimo(articulo, currentIndex)">
            </div>
            <!-- CANTIDAD -->
            <div class="col px-0 my-auto text-white text-center">
              <p>{{articulo.cantidad}}</p>
            </div>
            <!-- BOTON MAS -->
            <div class="col-auto px-0 my-auto">
              <img
                draggable="false"
                ondragstart="return false;"
                (contextmenu)="false"
                class="d-block ml-auto py-2 icon-30 btn-effect"
                src="assets/img/mas-blanco.svg"
                (click)="sumarCantidadSinonimo(articulo, currentIndex)">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="modal-footer">
    <div
      *ngIf="currentIndex != 0 && sinonimos.length > 1"
      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto fade-in-right"
      (click)="currentIndex = currentIndex-1">
      <img
        draggable="false"
        ondragstart="return false;"
        (contextmenu)="false"
        class="icon-30 flip"
        src="assets/img/ir-color.svg">
      VOLVER
    </div>
    <div
      [ngClass]="validateNext()"
      *ngIf="currentIndex != sinonimos.length-1"
      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
      (click)="goNext()">
      SIGUIENTE
      <img
        draggable="false"
        ondragstart="return false;"
        (contextmenu)="false"
        class="icon-30"
        src="assets/img/ir-color.svg">
    </div>
    <div
      [ngClass]="validate()"
      *ngIf="currentIndex == sinonimos.length-1"
      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
      (click)="continue()">
      CONTINUAR
      <img
        draggable="false"
        ondragstart="return false;"
        (contextmenu)="false"
        class="icon-30"
        src="assets/img/ir-color.svg">
    </div>
  </div>
</div>