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 | } |