Luis Suarez / autoservicio-axion

Commit c337433eafef2f2ccd80bca06a139f2b814b4e23

Authored by Marcelo Puebla 2020-01-24 15:32:37 -0300

Exists in develop

Add

Sumar y restar cantidad de articulos en carrito

Showing 5 changed files with 86 additions and 27 deletions Show diff stats

src/app/modules/carrito/carrito.component.ts

Diff comments View file @ c337433

 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Location } from '@angular/common';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { Router } from '@angular/router';
 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-carrito',
   templateUrl: './carrito.component.html',
   styleUrls: ['./carrito.component.scss'],
   animations: [
     trigger('EnterLeave', [
       state('flyIn', style({ transform: 'translateX(0)' })),
       transition(':enter', [
         style({ transform: 'translateX(-100%)' }),
         animate('1s ease-in')
       ]),
       transition(':leave', [
         animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
       ])
     ])
   ]
 })
 export class CarritoComponent implements OnInit, OnDestroy {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   maxCantidad = 50;
   modalRef: BsModalRef;
   constructor(
     public articuloService: ArticuloService,
     private location: Location,
     private router: Router,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     if (!this.articuloService.carrito.length) {
       this.router.navigate(['']);
       return;
     }
     this.mediaPantallaP();
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
   substractCant(articulo: IArticulo) {
-    if (articulo.cantidad === 1) return;
+    this.articuloService.substractCant(articulo);
-    articulo.cantidad--;
-    this.articuloService.calcularTotal();
   }
   addCant(articulo: IArticulo) {
-    if (articulo.cantidad >= this.maxCantidad) return;
+    this.articuloService.addCant(articulo);
-    articulo.cantidad++;
-    this.articuloService.calcularTotal();
   }
   goBack() {
     this.location.back();
   }
   @HostListener('document:click', ['$event'])
   eventListener(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mediaPantallaP() {
     if ($('body').hasClass('media-pantalla')) {
       $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
     }
   }
 }

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ c337433

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary py-1
                       border-left-0 rounded-right scroll-y cat-box"
                 (scroll)="scrollEvent($event)">
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
                     [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
                   (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-30 h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
                       class="col-12 px-1 h6 h-auto text-center min-h-60">
                       {{articulo.DetArt.toUpperCase()}}
                     </p>
                     <div class="col-12 px-1 align-self-end h-auto">
                       <div
                         [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
                         class="row mx-0 justify-content-between badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
-              <!-- MENSAJE DE ADVERTENCIA -->
-              <div *ngIf="!articuloService.carrito.length" class="col h-100">
-                <p class="text-center py-5">No hay articulos en el carrito</p>
-              </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
-                *ngFor="let articulo of articuloService.carrito; let i = index;">
+                *ngFor="let articulo of articuloService.carrito; let i = index;"
-                <div class="swing-in-top-fwd">
+                @EnterLeave>
-                  <img
+                <img
-                    class="btn-effect icon-20 position-absolute right-0"
+                  class="btn-effect icon-20 mr-2 position-absolute right-0"
-                    src="assets/img/icono-cancelar-color.svg"
+                  src="assets/img/icono-cancelar-color.svg"
-                    (click)="deleteArticulo(i)">
+                  (click)="deleteArticulo(i)">
-                  <img
+                <img
-                    draggable="false"
+                  draggable="false"
-                    ondragstart="return false;"
+                  ondragstart="return false;"
-                    (contextmenu)="false"
+                  (contextmenu)="false"
-                    class="d-block img-fluid p-2 mx-auto rounded"
+                  class="d-block img-fluid p-2 mx-auto rounded"
-                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
+                  src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
-                    onerror="this.src='assets/img/image-not-found.jpg'">
+                  onerror="this.src='assets/img/image-not-found.jpg'">
-                  <p class="d-block mt-auto text-center text-primary text-truncate">
+                <p class="d-block mt-auto text-center text-primary text-truncate">
-                    <small>{{articulo.DetArt}}</small>
+                  <small>{{articulo.DetArt}}</small>
-                  </p>
+                </p>
+                <div class="row mx-0 justify-content-between bg-primary 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-blanco.svg"
+                      (click)="substractCant(articulo)">
+                  </div>
+                  <!-- CANTIDAD -->
+                  <div class="col px-0 my-auto text-white 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-blanco.svg"
+                      (click)="addCant(articulo)">
+                  </div>
                 </div>
               </div>
+              <!-- MENSAJE DE ADVERTENCIA -->
+              <div *ngIf="!articuloService.carrito.length" class="col h-100">
+                <p class="text-center py-5">No hay articulos en el carrito</p>
+              </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto align-self-center text-primary">TOTAL</div>
           <div class="col-auto bg-primary badge-pill">
             <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
         class="col-auto px-0 mt-2 h-20"
         *ngIf="articuloService.carrito.length"
         [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
             <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ c337433

 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
-  styleUrls: ['./seleccion-articulos.component.scss']
+  styleUrls: ['./seleccion-articulos.component.scss'],
+  animations: [
+    trigger('EnterLeave', [
+      state('flyIn', style({ transform: 'translateY(0)' })),
+      transition(':enter', [
+        style({ transform: 'translateY(-100%)' }),
+        animate('0.5s ease-in')
+      ]),
+      transition(':leave', [
+        animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
+      ])
+    ])
+  ]
 })
 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     this.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
       this.modalService.hide(i);
     }
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar === 'ordenar') {
           this.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
   }
   filterItems() {
     if (this.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
   selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
           this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
   getSinonimos(articulo: IArticulo) {
     this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
       .subscribe((res: ISinonimo[]) => {
         if (res.length) {
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
       class: 'modal-promo modal-dialog-centered'
     });
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: { sinonimos: sinonimosData },
       class: 'modal-promo modal-dialog-centered'
     });
     this.modalRef.content.onClose
       .subscribe((res: any) => {
         for (const a of articulo.productos) {
           if (a.idSinonimo === res.ID_SIN) {
             a.CODA = res.articulo.CodArt;
             a.CodArt = res.articulo.CodArt;
             a.SECA = res.articulo.CodSec;
             a.CodSec = res.articulo.CodSec;
             a.PreVen = res.articulo.PreVen;
             a.id = res.articulo.id;
             a.DET_LAR = res.articulo.DET_LAR;
             a.DetArt = res.articulo.DetArt;
           }
         }
         this.articuloService.setArticulo(articulo);
       });
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
+  substractCant(articulo: IArticulo) {
+    this.articuloService.substractCant(articulo);
+  }
+  addCant(articulo: IArticulo) {
+    this.articuloService.addCant(articulo);
+  }
   increaseShow() {
     this.showQuantity += 100;
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
     }
   }
 }

src/app/services/articulo/articulo.service.ts

Diff comments View file @ c337433

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { APP_SETTINGS } from '../../../etc/AppSettings';
 import { IArticulo } from '../../interfaces/IArticulo';
 import { ClienteService } from '../cliente/cliente.service';
 import { Observable } from 'rxjs';
 @Injectable()
 export class ArticuloService {
   carrito: IArticulo[] = [];
   articuloAcargar: IArticulo;
   promoAcargar: IArticulo;
   mostrar: string;
   esPromoPersonalizada = false;
   urlDeboSuite = APP_SETTINGS.apiDeboSuite;
   medioPago: number;
   idComanda: number;
   subTotal = 0;
+  maxCantidad = 50;
   constructor(
     private http: HttpClient,
     private clienteService: ClienteService,
   ) { }
   getById(id) {
     return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
   }
   getAll() {
     return this.http.get(`${this.urlDeboSuite}/articulos/`);
   }
   getAllWithPaginator(page: number = 1) {
     return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
   }
+  substractCant(articulo: IArticulo) {
+    if (articulo.cantidad === 1) return;
+    articulo.cantidad--;
+    this.calcularTotal();
+  }
+  addCant(articulo: IArticulo) {
+    if (articulo.cantidad >= this.maxCantidad) return;
+    articulo.cantidad++;
+    this.calcularTotal();
+  }
   calcularTotal() {
     this.subTotal = 0;
     this.carrito.forEach(articulo => {
       this.subTotal += (articulo.PreVen * articulo.cantidad);
     });
   }
   setArticulo(articulo: IArticulo) {
     articulo.cantidad = 1;
     for (const articuloCarrito of this.carrito) {
       if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
         articuloCarrito.cantidad++;
         this.calcularTotal();
         return;
       }
     }
     this.setArticulosSinImagen([articulo]);
     this.carrito.unshift(articulo);
     this.calcularTotal();
   }
   deleteArticulo(index: number) {
     this.carrito.splice(index, 1);
     this.calcularTotal();
   }
   pay(dataPago: any) {
     return new Observable((observer) => {
       this.clienteService.getById(-1)
         .subscribe(cliente => {
           this.markArticuloInPromoAsRemoved();
           this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
             productos: this.carrito,
             cliente,
             origen: 'autoservicio',
             codigoVendedor: 5,
             puntoVenta: APP_SETTINGS.puntoVenta,
             pedidoAnombreDe: dataPago.pedidoAnombreDe,
             numeroPlanilla: APP_SETTINGS.numeroPlanilla,
             pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
           })
             .subscribe((data) => {
               observer.next(data);
               observer.complete();
             });
         });
     });
   }
   cleanShoppingCar() {
     this.articuloAcargar = undefined;
     this.promoAcargar = undefined;
     this.carrito = [];
   }
   setArticulosSinImagen(articulos: IArticulo[]) {
     articulos.forEach((articulo: IArticulo) => {
       articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
         !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
     });
   }
   markArticuloInPromoAsRemoved() {
     this.carrito.forEach((articuloCarrito: IArticulo) => {
       if (articuloCarrito.PRO) {
         articuloCarrito.productos.forEach((articulo: IArticulo) => {
           if (articulo.cantidadAdicionada === 0) {
             articulo.cantidad = 0;
             articulo.importeValorExtra = 0;
           }
         });
       }
     });
   }
 }

src/scss/icons.scss

Diff comments View file @ c337433

+.icon-15 {
+  width: 15px;
+}
 .icon-20 {
   width: 20px;
 }
 .icon-30 {
   width: 30px;
 }
 .icon-40 {
   width: 40px;
 }
 .icon-50 {
   width: 50px;
 }
 .icon-60 {
   width: 60px;
 }
 .icon-150 {
   width: 150px;
 }