Add

Sumar y restar cantidad de articulos en carrito

Add
Sumar y restar cantidad de articulos en carrito
Marcelo Puebla
1 parent 78c2e7838a
Showing 5 changed files with 86 additions and 27 deletions Show diff stats
src/app/modules/carrito/carrito.component.ts
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
src/app/services/articulo/articulo.service.ts
src/scss/icons.scss
@@ -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() {
@@ -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 -->
@@ -10,11 +10,24 @@ import { PromocionComponent } from &#39;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;
   }
@@ -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 => {
+.icon-15 {
+  width: 15px;
+}
+
 .icon-20 {
   width: 20px;
 }
...	...	@@ -54,15 +54,11 @@ export class CarritoComponent implements OnInit, OnDestroy {
54	54	}
55	55
56	56	substractCant(articulo: IArticulo) {
57		- if (articulo.cantidad === 1) return;
58		- articulo.cantidad--;
59		- this.articuloService.calcularTotal();
	57	+ this.articuloService.substractCant(articulo);
60	58	}
61	59
62	60	addCant(articulo: IArticulo) {
63		- if (articulo.cantidad >= this.maxCantidad) return;
64		- articulo.cantidad++;
65		- this.articuloService.calcularTotal();
	61	+ this.articuloService.addCant(articulo);
66	62	}
67	63
68	64	goBack() {
...	...	@@ -170,31 +170,56 @@
170	170	#templateCarrito
171	171	class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
172	172	(scroll)="scrollEvent($event)">
173		- <!-- MENSAJE DE ADVERTENCIA -->
174		- <div *ngIf="!articuloService.carrito.length" class="col h-100">
175		- <p class="text-center py-5">No hay articulos en el carrito</p>
176		- </div>
177	173	<!-- ARTICULOS -->
178	174	<div
179	175	class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
180		- *ngFor="let articulo of articuloService.carrito; let i = index;">
181		- <div class="swing-in-top-fwd">
182		- <img
183		- class="btn-effect icon-20 position-absolute right-0"
184		- src="assets/img/icono-cancelar-color.svg"
185		- (click)="deleteArticulo(i)">
186		- <img
187		- draggable="false"
188		- ondragstart="return false;"
189		- (contextmenu)="false"
190		- class="d-block img-fluid p-2 mx-auto rounded"
191		- src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
192		- onerror="this.src='assets/img/image-not-found.jpg'">
193		- <p class="d-block mt-auto text-center text-primary text-truncate">
194		- <small>{{articulo.DetArt}}</small>
195		- </p>
	176	+ *ngFor="let articulo of articuloService.carrito; let i = index;"
	177	+ @EnterLeave>
	178	+ <img
	179	+ class="btn-effect icon-20 mr-2 position-absolute right-0"
	180	+ src="assets/img/icono-cancelar-color.svg"
	181	+ (click)="deleteArticulo(i)">
	182	+ <img
	183	+ draggable="false"
	184	+ ondragstart="return false;"
	185	+ (contextmenu)="false"
	186	+ class="d-block img-fluid p-2 mx-auto rounded"
	187	+ src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
	188	+ onerror="this.src='assets/img/image-not-found.jpg'">
	189	+ <p class="d-block mt-auto text-center text-primary text-truncate">
	190	+ <small>{{articulo.DetArt}}</small>
	191	+ </p>
	192	+ <div class="row mx-0 justify-content-between bg-primary badge-pill">
	193	+ <!-- BOTON MENOS -->
	194	+ <div class="col-auto px-0 my-auto">
	195	+ <img
	196	+ draggable="false"
	197	+ ondragstart="return false;"
	198	+ (contextmenu)="false"
	199	+ class="d-block ml-auto py-2 icon-15 btn-effect"
	200	+ src="assets/img/menos-blanco.svg"
	201	+ (click)="substractCant(articulo)">
	202	+ </div>
	203	+ <!-- CANTIDAD -->
	204	+ <div class="col px-0 my-auto text-white text-center">
	205	+ <p><small>{{articulo.cantidad}}</small></p>
	206	+ </div>
	207	+ <!-- BOTON MAS -->
	208	+ <div class="col-auto px-0 my-auto">
	209	+ <img
	210	+ draggable="false"
	211	+ ondragstart="return false;"
	212	+ (contextmenu)="false"
	213	+ class="d-block ml-auto py-2 icon-15 btn-effect"
	214	+ src="assets/img/mas-blanco.svg"
	215	+ (click)="addCant(articulo)">
	216	+ </div>
196	217	</div>
197	218	</div>
	219	+ <!-- MENSAJE DE ADVERTENCIA -->
	220	+ <div *ngIf="!articuloService.carrito.length" class="col h-100">
	221	+ <p class="text-center py-5">No hay articulos en el carrito</p>
	222	+ </div>
198	223	</div>
199	224	</div>
200	225	<!-- BOTON SCROLL DERECHA -->
...	...	@@ -10,11 +10,24 @@ import { PromocionComponent } from 'src/app/shared/promocion/promocion.component
10	10	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11	11	import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12	12	import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
	13	+import { trigger, state, style, transition, animate } from '@angular/animations';
13	14
14	15	@Component({
15	16	selector: 'app-seleccion-articulos',
16	17	templateUrl: './seleccion-articulos.component.html',
17		- styleUrls: ['./seleccion-articulos.component.scss']
	18	+ styleUrls: ['./seleccion-articulos.component.scss'],
	19	+ animations: [
	20	+ trigger('EnterLeave', [
	21	+ state('flyIn', style({ transform: 'translateY(0)' })),
	22	+ transition(':enter', [
	23	+ style({ transform: 'translateY(-100%)' }),
	24	+ animate('0.5s ease-in')
	25	+ ]),
	26	+ transition(':leave', [
	27	+ animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
	28	+ ])
	29	+ ])
	30	+ ]
18	31	})
19	32	export class SeleccionArticulosComponent implements OnInit, OnDestroy {
20	33	showSpinner = true;
...	...	@@ -195,6 +208,14 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
195	208	this.articuloService.deleteArticulo(index);
196	209	}
197	210
	211	+ substractCant(articulo: IArticulo) {
	212	+ this.articuloService.substractCant(articulo);
	213	+ }
	214	+
	215	+ addCant(articulo: IArticulo) {
	216	+ this.articuloService.addCant(articulo);
	217	+ }
	218	+
198	219	increaseShow() {
199	220	this.showQuantity += 100;
200	221	}
...	...	@@ -16,6 +16,7 @@ export class ArticuloService {
16	16	medioPago: number;
17	17	idComanda: number;
18	18	subTotal = 0;
	19	+ maxCantidad = 50;
19	20
20	21	constructor(
21	22	private http: HttpClient,
...	...	@@ -34,6 +35,18 @@ export class ArticuloService {
34	35	return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35	36	}
36	37
	38	+ substractCant(articulo: IArticulo) {
	39	+ if (articulo.cantidad === 1) return;
	40	+ articulo.cantidad--;
	41	+ this.calcularTotal();
	42	+ }
	43	+
	44	+ addCant(articulo: IArticulo) {
	45	+ if (articulo.cantidad >= this.maxCantidad) return;
	46	+ articulo.cantidad++;
	47	+ this.calcularTotal();
	48	+ }
	49	+
37	50	calcularTotal() {
38	51	this.subTotal = 0;
39	52	this.carrito.forEach(articulo => {
	1	+.icon-15 {
	2	+ width: 15px;
	3	+}
	4	+
1	5	.icon-20 {
2	6	width: 20px;
3	7	}