Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit c337433eafef2f2ccd80bca06a139f2b814b4e23

Authored by Marcelo Puebla
1 parent 78c2e7838a
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
... ... @@ -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() {
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ c337433
... ... @@ -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 -->
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ c337433
... ... @@ -10,11 +10,24 @@ import { PromocionComponent } from &#39;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 }
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ c337433
... ... @@ -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 }