Commit 207a1ff0a8d86b95f5f5634a7675581f534a75cf
Exists in
develop
Merge branch 'develop' into 'develop'
Develop See merge request !55
Showing
15 changed files
Show diff stats
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 'ngx-bootstrap/modal'; |
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
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
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
... | ... | @@ -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 | } |
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
... | ... | @@ -10,6 +10,7 @@ import { SharedModule } from '../shared/shared.module'; |
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 '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 '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()" |