Commit 192b6d09a2593c461d9a882083b586a30b39d005

Authored by Benjamin Rodriguez
1 parent bfc48cd165
Exists in develop

modal confirmacion

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 &#39;rxjs&#39;;
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 }