sinonimo.component.html 3.41 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 class="col-5 pt-4 pr-0 text-right">
      <p *ngFor="let s of sinonimos; let i = index">
        <span
          class="btn-effect"
          (click)="scrollTo(i)">
          Ir a opción {{i+1}}
          <i class="far fa-hand-point-left"></i>
        </span>
      </p>
    </div> -->
  </div>

  <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
    <div class="row mx-0 mb-2"  *ngFor="let articulo of sinonimos[currentIndex].productos">
      <div class="col-7 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-5 pr-0">
        <div class="row mx-0 justify-content-between bg-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-15 btn-effect"
              src="assets/img/menos.svg"
              (click)="restarCantidadSinonimo(articulo, currentIndex)">
          </div>
          <!-- CANTIDAD -->
          <div class="col px-0 my-auto text-primary text-center">
            <p><small>{{articulo.cantidad}}</small></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-15 btn-effect"
              src="assets/img/mas.svg"
              (click)="sumarCantidadSinonimo(articulo, currentIndex)">
          </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"
      (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
      *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
      (click)="currentIndex = currentIndex+1">
      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"
      (click)="continue()">
      CONTINUAR
      <img
        draggable="false"
        ondragstart="return false;"
        (contextmenu)="false"
        class="icon-30"
        src="assets/img/ir-color.svg">
    </div>
  </div>
</div>