From c337433eafef2f2ccd80bca06a139f2b814b4e23 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Fri, 24 Jan 2020 15:32:37 -0300
Subject: [PATCH] Add Sumar y restar cantidad de articulos en carrito

---
 src/app/modules/carrito/carrito.component.ts       |  8 +--
 .../seleccion-articulos.component.html             | 65 +++++++++++++++-------
 .../seleccion-articulos.component.ts               | 23 +++++++-
 src/app/services/articulo/articulo.service.ts      | 13 +++++
 src/scss/icons.scss                                |  4 ++
 5 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts
index baec0e1..8bf7d84 100644
--- a/src/app/modules/carrito/carrito.component.ts
+++ b/src/app/modules/carrito/carrito.component.ts
@@ -54,15 +54,11 @@ export class CarritoComponent implements OnInit, OnDestroy {
   }
 
   substractCant(articulo: IArticulo) {
-    if (articulo.cantidad === 1) return;
-    articulo.cantidad--;
-    this.articuloService.calcularTotal();
+    this.articuloService.substractCant(articulo);
   }
 
   addCant(articulo: IArticulo) {
-    if (articulo.cantidad >= this.maxCantidad) return;
-    articulo.cantidad++;
-    this.articuloService.calcularTotal();
+    this.articuloService.addCant(articulo);
   }
 
   goBack() {
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 33ae096..48512f2 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -170,31 +170,56 @@
               #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;">
-                <div class="swing-in-top-fwd">
-                  <img
-                    class="btn-effect icon-20 position-absolute right-0"
-                    src="assets/img/icono-cancelar-color.svg"
-                    (click)="deleteArticulo(i)">
-                  <img
-                    draggable="false"
-                    ondragstart="return false;"
-                    (contextmenu)="false"
-                    class="d-block img-fluid p-2 mx-auto rounded"
-                    src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
-                    onerror="this.src='assets/img/image-not-found.jpg'">
-                  <p class="d-block mt-auto text-center text-primary text-truncate">
-                    <small>{{articulo.DetArt}}</small>
-                  </p>
+                *ngFor="let articulo of articuloService.carrito; let i = index;"
+                @EnterLeave>
+                <img
+                  class="btn-effect icon-20 mr-2 position-absolute right-0"
+                  src="assets/img/icono-cancelar-color.svg"
+                  (click)="deleteArticulo(i)">
+                <img
+                  draggable="false"
+                  ondragstart="return false;"
+                  (contextmenu)="false"
+                  class="d-block img-fluid p-2 mx-auto rounded"
+                  src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
+                  onerror="this.src='assets/img/image-not-found.jpg'">
+                <p class="d-block mt-auto text-center text-primary text-truncate">
+                  <small>{{articulo.DetArt}}</small>
+                </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 -->
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index af7e34e..6f71990 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -10,11 +10,24 @@ 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;
@@ -195,6 +208,14 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     this.articuloService.deleteArticulo(index);
   }
 
+  substractCant(articulo: IArticulo) {
+    this.articuloService.substractCant(articulo);
+  }
+
+  addCant(articulo: IArticulo) {
+    this.articuloService.addCant(articulo);
+  }
+
   increaseShow() {
     this.showQuantity += 100;
   }
diff --git a/src/app/services/articulo/articulo.service.ts b/src/app/services/articulo/articulo.service.ts
index fd5c50f..949ad96 100644
--- a/src/app/services/articulo/articulo.service.ts
+++ b/src/app/services/articulo/articulo.service.ts
@@ -16,6 +16,7 @@ export class ArticuloService {
   medioPago: number;
   idComanda: number;
   subTotal = 0;
+  maxCantidad = 50;
 
   constructor(
     private http: HttpClient,
@@ -34,6 +35,18 @@ export class ArticuloService {
     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 => {
diff --git a/src/scss/icons.scss b/src/scss/icons.scss
index cfea7c2..8323fd7 100644
--- a/src/scss/icons.scss
+++ b/src/scss/icons.scss
@@ -1,3 +1,7 @@
+.icon-15 {
+  width: 15px;
+}
+
 .icon-20 {
   width: 20px;
 }
-- 
1.9.1