popover-sinonimos.component.html 2.81 KB
<div class="card-body fade-left">

  <div class="row m-0">
    <div class="col text-left">
      <p class="h4 card-title">
        Personalice su pedido
      </p>
    </div>
  </div>

  <div class="row m-0 pr-2">
    <div class="col">
      <div class="row" *ngFor="let sinonimo of popoverContent; let i = index">
        <div class="col p-0">

          <div class="row bg-white text-dark m-0 py-1 shadow">
            <div class="col text-left">
              <p class="h5 m-0 card-title">
                Elija opción - 
                <span [ngClass]="
                {
                  'text-success': cantidadRestanteSinonimos == 0,
                  'text-danger': cantidadRestanteSinonimos > 0
                }">
                  Cantidad Restante {{cantidadRestanteSinonimos}}
                </span>
              </p>
            </div>
          </div>

          <div class="row m-0 popover-size overflow-scroll">
            <div class="col-12 p-0">
              <div class="row m-0 my-2 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
                <div class="col-7 p-0 h6 text-right">
                  <p class="m-0 font-weight-normal">
                    {{producto.DetArt}}
                  </p>
                </div>
                <!-- SUMA -RESTA CANTIDAD DE PRODUCTOS -->
                <div class="col-5 pr-0">
                  <div class="btn-group float-right my-auto" role="group">
                    <button
                      type="button"
                      class="btn btn-light my-auto border shadow"
                      (click)="sumarCantidad(producto, i)">
                      <i class="fa fa-plus" aria-hidden="true"></i>
                    </button>
                    <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5">
                      <small
                        [ngClass]="{'font-weight-bold': producto.cantidad > 0}">
                        {{producto.cantidad}}
                      </small>
                    </div>
                    <button
                      type="button"
                      class="btn btn-light my-auto border shadow"
                      (click)="restarCantidad(producto, i)">
                      <i class="fa fa-minus" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="row m-0">
    <div class="col">
      <button
        [disabled]="cantidadRestanteSinonimos > 0"
        type="button"
        class="btn btn-block btn-light shadow"
        (click)="continuar()">
        <span class="font-weight-bold pr-2">Continuar</span>
        <i class="fa fa-check text-success" aria-hidden="true"></i>
      </button>
    </div>
  </div>

</div>