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()" |