Commit 192b6d09a2593c461d9a882083b586a30b39d005
1 parent
bfc48cd165
Exists in
develop
modal confirmacion
Showing
3 changed files
with
29 additions
and
21 deletions
 
Show diff stats
src/app/shared/confirmacion/confirmacion.component.html
| 1 | -<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulo"> | |
| 1 | +<div class="modal-header bg-primary rounded-top pt-4 px-2"> | |
| 2 | 2 | <div class="row mx-0 w-100 justify-content-between"> | 
| 3 | 3 | <div class="col-8"> | 
| 4 | - <p class="h3 text-white">{{articulo.DetArt}}</p> | |
| 4 | + <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p> | |
| 5 | 5 | </div> | 
| 6 | 6 | </div> | 
| 7 | - <div class="col-4 align-self-center"> | |
| 7 | + <div *ngIf="imagenPath" class="col-4 align-self-center"> | |
| 8 | 8 | <img | 
| 9 | 9 | draggable="false" | 
| 10 | 10 | ondragstart="return false;" | 
| 11 | 11 | (contextmenu)="false" | 
| 12 | - src="{{urlImagenes}}{{articulo.imagenes}}" | |
| 12 | + src="{{urlImagenes}}{{imagenPath}}" | |
| 13 | 13 | onerror="this.src='assets/img/image-not-found.jpg'" | 
| 14 | 14 | class="card-img-top img-fluid rounded-circle"> | 
| 15 | 15 | </div> | 
| 16 | 16 | </div> | 
| 17 | -<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulo"> | |
| 17 | +<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2"> | |
| 18 | 18 | <div class="row justify-content-between mx-0 w-100"> | 
| 19 | 19 | <div class="col-8"> | 
| 20 | - <p class="text-white"><small>¿DESEA AGREGAR ESTE ARTÍCULO</small></p> | |
| 21 | - <h1 class="text-white mb-4">a su carrito?</h1> | |
| 20 | + <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p > | |
| 21 | + <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1> | |
| 22 | 22 | </div> | 
| 23 | 23 | <div class="col-4"> | 
| 24 | 24 | <div | 
| 25 | 25 | class="mx-0" | 
| 26 | - (click)="elegirArticulo(articulo)"> | |
| 26 | + (click)="confirmarArticulo(true)"> | |
| 27 | 27 | <div class="col-auto bg-white badge-pill"> | 
| 28 | 28 | <div class="row justify-content-between"> | 
| 29 | - <div class="col-auto px-0 align-self-center text-primary pl-3"> | |
| 30 | - <p class="font-weight-bold">{{articulo.PreVen | currency}}</p> | |
| 29 | + <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3"> | |
| 30 | + <p class="font-weight-bold">{{footerConfirmation | currency}}</p> | |
| 31 | 31 | </div> | 
| 32 | 32 | <div class="col-auto px-0"> | 
| 33 | 33 | <img | 
| ... | ... | @@ -40,12 +40,12 @@ | 
| 40 | 40 | </div> | 
| 41 | 41 | </div> | 
| 42 | 42 | </div> | 
| 43 | - <div class="bg-white badge-pill mt-2"> | |
| 43 | + <div *ngIf="footerClose" class="bg-white badge-pill mt-2"> | |
| 44 | 44 | <div class="row justify-content-between"> | 
| 45 | 45 | <div | 
| 46 | 46 | class="col-auto mx-0 " | 
| 47 | 47 | (click)="close()"> | 
| 48 | - <p class="font-weight-bold text-center text-primary">volver</p> | |
| 48 | + <p class="font-weight-bold text-center text-primary">{{footerClose}}</p> | |
| 49 | 49 | </div> | 
| 50 | 50 | <i class="fas fa-undo-alt text-info mr-3 my-auto"></i> | 
| 51 | 51 | </div> | 
src/app/shared/confirmacion/confirmacion.component.ts
| ... | ... | @@ -12,7 +12,9 @@ import { Subject } from 'rxjs'; | 
| 12 | 12 | }) | 
| 13 | 13 | export class ConfirmacionComponent implements OnInit { | 
| 14 | 14 | idArticulo: number; | 
| 15 | - articulo: IArticulo; | |
| 15 | + imagenArticulo: any; | |
| 16 | + detLarArticulo: string; | |
| 17 | + preVenArticulo: any; | |
| 16 | 18 | onClose: Subject<any>; | 
| 17 | 19 | |
| 18 | 20 | constructor( | 
| ... | ... | @@ -24,15 +26,10 @@ export class ConfirmacionComponent implements OnInit { | 
| 24 | 26 | } | 
| 25 | 27 | |
| 26 | 28 | ngOnInit() { | 
| 27 | - this.articuloService.getById(this.idArticulo) | |
| 28 | - .subscribe((res: IArticulo) => { | |
| 29 | - this.articulo = res; | |
| 30 | - }, err => console.error(err)); | |
| 31 | 29 | } | 
| 32 | 30 | |
| 33 | - elegirArticulo(articulo: IArticulo) { | |
| 34 | - articulo.cantidad = 1; | |
| 35 | - this.articuloService.setArticulo(articulo); | |
| 31 | + confirmarArticulo(value) { | |
| 32 | + this.onClose.next(); | |
| 36 | 33 | this.modalRef.hide(); | 
| 37 | 34 | } | 
| 38 | 35 | 
src/app/shared/header-publicidad/header-publicidad.component.ts
| ... | ... | @@ -67,10 +67,21 @@ export class HeaderPublicidadComponent implements OnInit { | 
| 67 | 67 | this.modalRef = this.modalService.show(ConfirmacionComponent, | 
| 68 | 68 | { | 
| 69 | 69 | initialState: { | 
| 70 | - idArticulo: articulo.id | |
| 70 | + titleMessage: articulo.DET_LAR, | |
| 71 | + imagenPath: articulo.imagenes, | |
| 72 | + footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, | |
| 73 | + footerMessageSecond: `a su carrito?`, | |
| 74 | + footerConfirmation: articulo.PreVen, | |
| 75 | + footerClose: `volver` | |
| 71 | 76 | }, | 
| 72 | 77 | class: 'modal-promo modal-dialog-centered' | 
| 73 | 78 | }); | 
| 79 | + this.modalRef.content.onClose.subscribe(() => { | |
| 80 | + articulo.cantidad = 1; | |
| 81 | + this.articuloService.setArticulo(articulo); | |
| 82 | + }); | |
| 83 | + | |
| 84 | + | |
| 74 | 85 | } | 
| 75 | 86 | |
| 76 | 87 | } |