Commit 207a1ff0a8d86b95f5f5634a7675581f534a75cf

Authored by Marcelo Puebla
Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !55
src/app/modules/carrito/carrito.component.html
... ... @@ -46,37 +46,12 @@
46 46 <!-- CANTIDAD -->
47 47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
48 48 <p class="h-40"><small>CANT</small></p>
49   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
50   - <!-- BOTON MENOS -->
51   - <div class="col-auto px-0 my-auto">
52   - <img
53   - draggable="false"
54   - ondragstart="return false;"
55   - (contextmenu)="false"
56   - class="d-block ml-auto py-2 icon-20 btn-effect"
57   - src="assets/img/menos-blanco.svg"
58   - (click)="substractCant(articulo)">
59   - </div>
60   - <!-- CANTIDAD -->
61   - <div class="col px-0 py-2 my-auto text-white">
62   - <p><small>{{articulo.cantidad}}</small></p>
63   - </div>
64   - <!-- BOTON MAS -->
65   - <div class="col-auto px-0 my-auto">
66   - <img
67   - draggable="false"
68   - ondragstart="return false;"
69   - (contextmenu)="false"
70   - class="d-block ml-auto py-2 icon-20 btn-effect"
71   - src="assets/img/mas-blanco.svg"
72   - (click)="addCant(articulo)">
73   - </div>
74   - </div>
  49 + <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
75 50 </div>
76 51 <!-- PRECIO -->
77 52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
78 53 <p class="h-40"><small>PRECIO</small></p>
79   - <div class="py-2 badge-pill bg-dark text-white">
  54 + <div class="py-1 badge-pill bg-dark text-white">
80 55 <p><small>{{articulo.PreVen | currency}}</small></p>
81 56 </div>
82 57 </div>
src/app/modules/carrito/carrito.component.ts
... ... @@ -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/info-formas-pago/info-formas-pago.component.ts
1   -import { Component, OnInit, TemplateRef } from '@angular/core';
  1 +import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2 2 import { BsModalService } from 'ngx-bootstrap/modal';
3 3  
4 4 @Component({
... ... @@ -6,17 +6,24 @@ import { BsModalService } from &#39;ngx-bootstrap/modal&#39;;
6 6 templateUrl: './info-formas-pago.component.html',
7 7 styleUrls: ['./info-formas-pago.component.scss']
8 8 })
9   -export class InfoFormasPagoComponent implements OnInit {
  9 +export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10 10 mediaPantalla = false;
  11 + timer: any;
11 12  
12 13 constructor(
13 14 private modalService: BsModalService,
14 15 ) { }
15 16  
16   - ngOnInit() {
  17 + ngOnInit() { }
  18 +
  19 + ngOnDestroy() {
  20 + if (this.timer) clearTimeout(this.timer);
17 21 }
18 22  
19 23 openGoCaja(templateRef: TemplateRef<any>) {
20   - this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
  24 + const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
  25 + this.timer = setTimeout(() => {
  26 + modalRef.hide();
  27 + }, 3000);
21 28 }
22 29 }
src/app/modules/opcion-pedido/opcion-pedido.component.ts
... ... @@ -21,7 +21,7 @@ export class OpcionPedidoComponent implements OnInit {
21 21 }
22 22  
23 23 seleccionPedido(lugar) {
24   - lugar === 'true' ? lugar = true : false;
  24 + lugar = lugar === 'true' ? true : false;
25 25 localStorage.setItem('pedidoParaLlevar', lugar);
26 26 }
27 27  
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
... ... @@ -45,7 +45,7 @@
45 45 draggable="false"
46 46 ondragstart="return false;"
47 47 (contextmenu)="false"
48   - class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
  48 + class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
49 49 src="assets/img/logo-spot.svg">
50 50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 51 </div>
... ... @@ -59,7 +59,7 @@
59 59 draggable="false"
60 60 ondragstart="return false;"
61 61 (contextmenu)="false"
62   - class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
  62 + class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
63 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 65 onerror="this.src='assets/img/image-not-found.jpg'">
... ... @@ -170,30 +170,30 @@
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>
196   - </div>
  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 + <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
  193 + </div>
  194 + <!-- MENSAJE DE ADVERTENCIA -->
  195 + <div *ngIf="!articuloService.carrito.length" class="col h-100">
  196 + <p class="text-center py-5">No hay articulos en el carrito</p>
197 197 </div>
198 198 </div>
199 199 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
... ... @@ -58,7 +58,3 @@ $primary: #aa006b;
58 58 .cat-btn.media-pantalla {
59 59 height: 7% !important;
60 60 }
61   -
62   -.img-categoria.media-pantalla{
63   - min-height: 40px !important;
64   -}
65 61 \ No newline at end of file
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
... ... @@ -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/modules/seleccion-articulos/seleccion-articulos.module.ts
... ... @@ -10,6 +10,7 @@ import { SharedModule } from &#39;../shared/shared.module&#39;;
10 10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 11 import { FormsModule } from '@angular/forms';
12 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
  13 +import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
13 14  
14 15 @NgModule({
15 16 declarations: [
... ... @@ -17,7 +18,8 @@ import { ConfirmacionComponent } from &#39;src/app/shared/confirmacion/confirmacion.
17 18 HeaderPublicidadComponent,
18 19 PromocionComponent,
19 20 SinonimoComponent,
20   - ConfirmacionComponent
  21 + ConfirmacionComponent,
  22 + ArticuloCantidadComponent,
21 23 ],
22 24 imports: [
23 25 CommonModule,
... ... @@ -27,7 +29,7 @@ import { ConfirmacionComponent } from &#39;src/app/shared/confirmacion/confirmacion.
27 29 CarouselModule.forRoot(),
28 30 SharedModule
29 31 ],
30   - exports: [HeaderPublicidadComponent],
  32 + exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
31 33 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
32 34 })
33 35 export class SeleccionArticulosModule { }
src/app/services/articulo/articulo.service.ts
... ... @@ -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 => {
src/app/shared/articulo-cantidad/articulo-cantidad.component.html
... ... @@ -0,0 +1,26 @@
  1 +<div class="row mx-0 justify-content-between bg-primary badge-pill">
  2 + <!-- BOTON MENOS -->
  3 + <div class="col-auto px-0 my-auto">
  4 + <img
  5 + draggable="false"
  6 + ondragstart="return false;"
  7 + (contextmenu)="false"
  8 + class="d-block ml-auto py-2 icon-15 btn-effect"
  9 + src="assets/img/menos-blanco.svg"
  10 + (click)="substractCant(articulo)">
  11 + </div>
  12 + <!-- CANTIDAD -->
  13 + <div class="col px-0 my-auto text-white text-center">
  14 + <p><small>{{articulo.cantidad}}</small></p>
  15 + </div>
  16 + <!-- BOTON MAS -->
  17 + <div class="col-auto px-0 my-auto">
  18 + <img
  19 + draggable="false"
  20 + ondragstart="return false;"
  21 + (contextmenu)="false"
  22 + class="d-block ml-auto py-2 icon-15 btn-effect"
  23 + src="assets/img/mas-blanco.svg"
  24 + (click)="addCant(articulo)">
  25 + </div>
  26 +</div>
src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ArticuloCantidadComponent } from './articulo-cantidad.component';
  4 +
  5 +describe('ArticuloCantidadComponent', () => {
  6 + let component: ArticuloCantidadComponent;
  7 + let fixture: ComponentFixture<ArticuloCantidadComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ArticuloCantidadComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ArticuloCantidadComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
... ... @@ -0,0 +1,25 @@
  1 +import { Component, OnInit, Input } from '@angular/core';
  2 +import { IArticulo } from 'src/app/interfaces/IArticulo';
  3 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  4 +
  5 +@Component({
  6 + selector: 'app-articulo-cantidad',
  7 + templateUrl: './articulo-cantidad.component.html',
  8 + styleUrls: ['./articulo-cantidad.component.scss']
  9 +})
  10 +export class ArticuloCantidadComponent implements OnInit {
  11 + @Input() articulo: IArticulo;
  12 +
  13 + constructor(private articuloService: ArticuloService) { }
  14 +
  15 + ngOnInit() { }
  16 +
  17 + substractCant(articulo: IArticulo) {
  18 + this.articuloService.substractCant(articulo);
  19 + }
  20 +
  21 + addCant(articulo: IArticulo) {
  22 + this.articuloService.addCant(articulo);
  23 + }
  24 +
  25 +}
src/app/shared/sinonimo/sinonimo.component.html
1 1 <div class="bg-primary rounded text-white">
2 2 <div class="modal-header">
3   - <p class="h4">Seleccione sinonimos</p>
  3 + <p class="h4">Elige una opción</p>
4 4 </div>
5 5  
6 6 <div class="modal-body">
... ... @@ -24,7 +24,7 @@
24 24 </div>
25 25 </div>
26 26 </div>
27   -
  27 +
28 28 <div class="modal-footer">
29 29 <div
30 30 [ngClass]="validate()"
  1 +.icon-15 {
  2 + width: 15px;
  3 +}
  4 +
1 5 .icon-20 {
2 6 width: 20px;
3 7 }