Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit c6ead4054f1718e23814a5d8044b30b78f15be51

Authored by Marcelo Puebla
1 parent d292db89d5
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Agregado metodo para agregar/restar cantidad de articulos

Showing 2 changed files with 16 additions and 2 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ c6ead40
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-85"> 5 <div class="h-85">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA --> 17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p> 19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div> 20 </div>
21 <!-- ARTICULOS --> 21 <!-- ARTICULOS -->
22 <div 22 <div
23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
24 *ngFor="let articulo of articuloService.carrito; let i = index;" 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave> 25 @EnterLeave>
26 <!-- ARTICULO --> 26 <!-- ARTICULO -->
27 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
28 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
29 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
30 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="d-block mx-auto h-55 rounded-sm shadow-sm" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
37 <div class="row mx-0 h-45"> 37 <div class="row mx-0 h-45">
38 <p class="col text-primary text-truncate align-self-end"> 38 <p class="col text-primary text-truncate align-self-end">
39 <small>{{articulo.DetArt}}</small> 39 <small>{{articulo.DetArt}}</small>
40 </p> 40 </p>
41 </div> 41 </div>
42 </div> 42 </div>
43 <!-- CANTIDAD --> 43 <!-- CANTIDAD -->
44 <div class="col-3 border-right border-primary"> 44 <div class="col-3 border-right border-primary">
45 <p><small>CANT</small></p> 45 <p><small>CANT</small></p>
46 <div class="row mt-2 mx-0"> 46 <div class="row mt-2 mx-0">
47 <div class="col-12 h-auto"> 47 <div class="col-12 h-auto">
48 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 48 <div class="row mx-0 justify-content-between bg-primary badge-pill">
49 <!-- BOTON MENOS --> 49 <!-- BOTON MENOS -->
50 <div class="col-auto px-0"> 50 <div class="col-auto px-0">
51 <img 51 <img
52 draggable="false" 52 draggable="false"
53 ondragstart="return false;" 53 ondragstart="return false;"
54 (contextmenu)="false" 54 (contextmenu)="false"
55 class="d-block ml-auto py-2 icon-20 btn-effect" 55 class="d-block ml-auto py-2 icon-20 btn-effect"
56 src="assets/img/menos-blanco.svg"> 56 src="assets/img/menos-blanco.svg"
57 (click)="substractCant(articulo)">
57 </div> 58 </div>
58 <!-- CANTIDAD --> 59 <!-- CANTIDAD -->
59 <div class="col px-0 align-self-center text-white"> 60 <div class="col px-0 align-self-center text-white">
60 <p><small>{{articulo.cantidad}}</small></p> 61 <p><small>{{articulo.cantidad}}</small></p>
61 </div> 62 </div>
62 <!-- BOTON MAS --> 63 <!-- BOTON MAS -->
63 <div class="col-auto px-0"> 64 <div class="col-auto px-0">
64 <img 65 <img
65 draggable="false" 66 draggable="false"
66 ondragstart="return false;" 67 ondragstart="return false;"
67 (contextmenu)="false" 68 (contextmenu)="false"
68 class="d-block ml-auto py-2 icon-20 btn-effect" 69 class="d-block ml-auto py-2 icon-20 btn-effect"
69 src="assets/img/mas-blanco.svg"> 70 src="assets/img/mas-blanco.svg"
71 (click)="addCant(articulo)">
70 </div> 72 </div>
71 </div> 73 </div>
72 </div> 74 </div>
73 </div> 75 </div>
74 </div> 76 </div>
75 <!-- OPCIONALES --> 77 <!-- OPCIONALES -->
76 <div class="col-3 border-right border-primary"> 78 <div class="col-3 border-right border-primary">
77 <p><small>OPCIONALES</small></p> 79 <p><small>OPCIONALES</small></p>
78 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 80 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
79 <div class="row mx-0 mt-2 justify-content-center"> 81 <div class="row mx-0 mt-2 justify-content-center">
80 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 82 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
81 <span> 83 <span>
82 <small class="pr-2">CAMBIAR</small> 84 <small class="pr-2">CAMBIAR</small>
83 <img 85 <img
84 draggable="false" 86 draggable="false"
85 ondragstart="return false;" 87 ondragstart="return false;"
86 (contextmenu)="false" 88 (contextmenu)="false"
87 class="icon-20" 89 class="icon-20"
88 src="assets/img/ir.svg"> 90 src="assets/img/ir.svg">
89 </span> 91 </span>
90 </div> 92 </div>
91 </div> 93 </div>
92 </div> 94 </div>
93 <!-- ELIMINAR --> 95 <!-- ELIMINAR -->
94 <div class="col-3 align-self-center"> 96 <div class="col-3 align-self-center">
95 <div class="row mx-0 justify-content-center"> 97 <div class="row mx-0 justify-content-center">
96 <div 98 <div
97 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 99 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
98 (click)="deleteArticulo(i)"> 100 (click)="deleteArticulo(i)">
99 <span> 101 <span>
100 <small class="pr-2">ELIMINAR</small> 102 <small class="pr-2">ELIMINAR</small>
101 <img 103 <img
102 draggable="false" 104 draggable="false"
103 ondragstart="return false;" 105 ondragstart="return false;"
104 (contextmenu)="false" 106 (contextmenu)="false"
105 class="icon-20 rotate-45" 107 class="icon-20 rotate-45"
106 src="assets/img/mas-blanco.svg"> 108 src="assets/img/mas-blanco.svg">
107 </span> 109 </span>
108 </div> 110 </div>
109 </div> 111 </div>
110 </div> 112 </div>
111 </div> 113 </div>
112 </div> 114 </div>
113 </div> 115 </div>
114 </div> 116 </div>
115 <!-- CONTINUAR --> 117 <!-- CONTINUAR -->
116 <div 118 <div
117 *ngIf="articuloService.carrito.length" 119 *ngIf="articuloService.carrito.length"
118 class="row mx-3 mt-4 h-auto justify-content-end"> 120 class="row mx-3 mt-4 h-auto justify-content-end">
119 <div 121 <div
120 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 122 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
121 [routerLink]="['/forma-pago']"> 123 [routerLink]="['/forma-pago']">
122 <span> 124 <span>
123 <small class="pr-2">CONTINUAR</small> 125 <small class="pr-2">CONTINUAR</small>
124 <img 126 <img
125 draggable="false" 127 draggable="false"
126 ondragstart="return false;" 128 ondragstart="return false;"
127 (contextmenu)="false" 129 (contextmenu)="false"
128 class="icon-20" 130 class="icon-20"
129 src="assets/img/ir.svg"> 131 src="assets/img/ir.svg">
130 </span> 132 </span>
131 </div> 133 </div>
132 </div> 134 </div>
133 <!-- SEGUIR COMPRANDO --> 135 <!-- SEGUIR COMPRANDO -->
134 <div class="row mx-3 mt-2 h-auto justify-content-end"> 136 <div class="row mx-3 mt-2 h-auto justify-content-end">
135 <div 137 <div
136 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
137 (click)="goBack()"> 139 (click)="goBack()">
138 <span> 140 <span>
139 <small class="pr-2">SEGUIR COMPRANDO</small> 141 <small class="pr-2">SEGUIR COMPRANDO</small>
140 <img 142 <img
141 draggable="false" 143 draggable="false"
142 ondragstart="return false;" 144 ondragstart="return false;"
143 (contextmenu)="false" 145 (contextmenu)="false"
144 class="icon-20" 146 class="icon-20"
145 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
146 </span> 148 </span>
147 </div> 149 </div>
148 </div> 150 </div>
149 </div> 151 </div>
150 152
151 </div> 153 </div>
152 154
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ c6ead40
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Location } from '@angular/common'; 2 import { Location } from '@angular/common';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { APP_SETTINGS } from 'src/etc/AppSettings'; 4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations'; 5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 7
7 @Component({ 8 @Component({
8 selector: 'app-carrito', 9 selector: 'app-carrito',
9 templateUrl: './carrito.component.html', 10 templateUrl: './carrito.component.html',
10 styleUrls: ['./carrito.component.scss'], 11 styleUrls: ['./carrito.component.scss'],
11 animations: [ 12 animations: [
12 trigger('EnterLeave', [ 13 trigger('EnterLeave', [
13 state('flyIn', style({ transform: 'translateX(0)' })), 14 state('flyIn', style({ transform: 'translateX(0)' })),
14 transition(':enter', [ 15 transition(':enter', [
15 style({ transform: 'translateX(-100%)' }), 16 style({ transform: 'translateX(-100%)' }),
16 animate('1s ease-in') 17 animate('1s ease-in')
17 ]), 18 ]),
18 transition(':leave', [ 19 transition(':leave', [
19 animate('1s ease-out', style({ transform: 'translateX(-100%)' })) 20 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
20 ]) 21 ])
21 ]) 22 ])
22 ] 23 ]
23 }) 24 })
24 export class CarritoComponent implements OnInit { 25 export class CarritoComponent implements OnInit {
25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 26 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
27 maxCantidad = 50;
26 28
27 constructor( 29 constructor(
28 private location: Location, 30 private location: Location,
29 public articuloService: ArticuloService, 31 public articuloService: ArticuloService,
30 ) { } 32 ) { }
31 33
32 ngOnInit() { } 34 ngOnInit() { }
33 35
34 deleteArticulo(index: number) { 36 deleteArticulo(index: number) {
35 this.articuloService.carrito.splice(index, 1); 37 this.articuloService.carrito.splice(index, 1);
36 } 38 }
37 39
40 substractCant(articulo: IArticulo) {
41 if (articulo.cantidad === 1) return;
42 articulo.cantidad--;
43 }
44
45 addCant(articulo: IArticulo) {
46 if (articulo.cantidad >= this.maxCantidad) return;
47 articulo.cantidad++;
48 }
49
38 goBack() { 50 goBack() {
39 this.location.back(); 51 this.location.back();
40 } 52 }
41 53
42 } 54 }
43 55