popover-sinonimos.component.html 2.24 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 overflow-scroll popover-size pr-2 my-2">
    <div class="col">
      <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index">
        <div class="col">

          <div class="row m-0">
            <div class="col text-left">
              <p class="h5 card-title">
                Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}}
              </p>
            </div>
          </div>

          <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
            <div class="col-7 pl-2 h6 text-right">
              <p class="m-0 font-weight-normal">
                {{producto.DetArt}}
              </p>
            </div>
            <div class="col-5">
              <div class="btn-group float-left 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 class="row mt-3 justify-content-end">
    <div class="col-auto">
      <button
        type="button"
        class="btn btn-sm 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>