Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 192b6d09a2593c461d9a882083b586a30b39d005

Authored by Benjamin Rodriguez
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
Diff comments   View file @ 192b6d0
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 <div class="row mx-0 w-100 justify-content-between"> 2 <div class="row mx-0 w-100 justify-content-between">
3 <div class="col-8"> 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 </div> 5 </div>
6 </div> 6 </div>
7 <div class="col-4 align-self-center"> 7 <div *ngIf="imagenPath" class="col-4 align-self-center">
8 <img 8 <img
9 draggable="false" 9 draggable="false"
10 ondragstart="return false;" 10 ondragstart="return false;"
11 (contextmenu)="false" 11 (contextmenu)="false"
12 src="{{urlImagenes}}{{articulo.imagenes}}" 12 src="{{urlImagenes}}{{imagenPath}}"
13 onerror="this.src='assets/img/image-not-found.jpg'" 13 onerror="this.src='assets/img/image-not-found.jpg'"
14 class="card-img-top img-fluid rounded-circle"> 14 class="card-img-top img-fluid rounded-circle">
15 </div> 15 </div>
16 </div> 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 <div class="row justify-content-between mx-0 w-100"> 18 <div class="row justify-content-between mx-0 w-100">
19 <div class="col-8"> 19 <div class="col-8">
20 <p class="text-white"><small>¿DESEA AGREGAR ESTE ARTÍCULO</small></p> 20 <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p >
21 <h1 class="text-white mb-4">a su carrito?</h1> 21 <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1>
22 </div> 22 </div>
23 <div class="col-4"> 23 <div class="col-4">
24 <div 24 <div
25 class="mx-0" 25 class="mx-0"
26 (click)="elegirArticulo(articulo)"> 26 (click)="confirmarArticulo(true)">
27 <div class="col-auto bg-white badge-pill"> 27 <div class="col-auto bg-white badge-pill">
28 <div class="row justify-content-between"> 28 <div class="row justify-content-between">
29 <div class="col-auto px-0 align-self-center text-primary pl-3"> 29 <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3">
30 <p class="font-weight-bold">{{articulo.PreVen | currency}}</p> 30 <p class="font-weight-bold">{{footerConfirmation | currency}}</p>
31 </div> 31 </div>
32 <div class="col-auto px-0"> 32 <div class="col-auto px-0">
33 <img 33 <img
34 draggable="false" 34 draggable="false"
35 ondragstart="return false;" 35 ondragstart="return false;"
36 (contextmenu)="false" 36 (contextmenu)="false"
37 class="d-block ml-auto my-1 icon-30 pr-2" 37 class="d-block ml-auto my-1 icon-30 pr-2"
38 src="assets/img/ir-color.svg"> 38 src="assets/img/ir-color.svg">
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 <div class="bg-white badge-pill mt-2"> 43 <div *ngIf="footerClose" class="bg-white badge-pill mt-2">
44 <div class="row justify-content-between"> 44 <div class="row justify-content-between">
45 <div 45 <div
46 class="col-auto mx-0 " 46 class="col-auto mx-0 "
47 (click)="close()"> 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 </div> 49 </div>
50 <i class="fas fa-undo-alt text-info mr-3 my-auto"></i> 50 <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 </div> 54 </div>
55 </div> 55 </div>
56 56
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ 192b6d0
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
6 import { Subject } from 'rxjs'; 6 import { Subject } from 'rxjs';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-confirmacion', 9 selector: 'app-confirmacion',
10 templateUrl: './confirmacion.component.html', 10 templateUrl: './confirmacion.component.html',
11 styleUrls: ['./confirmacion.component.scss'] 11 styleUrls: ['./confirmacion.component.scss']
12 }) 12 })
13 export class ConfirmacionComponent implements OnInit { 13 export class ConfirmacionComponent implements OnInit {
14 idArticulo: number; 14 idArticulo: number;
15 articulo: IArticulo; 15 imagenArticulo: any;
16 detLarArticulo: string;
17 preVenArticulo: any;
16 onClose: Subject<any>; 18 onClose: Subject<any>;
17 19
18 constructor( 20 constructor(
19 public modalRef: BsModalRef, 21 public modalRef: BsModalRef,
20 private articuloService: ArticuloService, 22 private articuloService: ArticuloService,
21 private inactiveScreen: InactiveScreenService, 23 private inactiveScreen: InactiveScreenService,
22 ) { 24 ) {
23 this.onClose = new Subject(); 25 this.onClose = new Subject();
24 } 26 }
25 27
26 ngOnInit() { 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) { 31 confirmarArticulo(value) {
34 articulo.cantidad = 1; 32 this.onClose.next();
35 this.articuloService.setArticulo(articulo);
36 this.modalRef.hide(); 33 this.modalRef.hide();
37 } 34 }
38 35
39 close() { 36 close() {
40 this.modalRef.hide(); 37 this.modalRef.hide();
41 } 38 }
42 39
43 @HostListener('document:click', ['$event']) 40 @HostListener('document:click', ['$event'])
44 eventListener(event: Event) { 41 eventListener(event: Event) {
45 clearTimeout(this.inactiveScreen.timerReposo); 42 clearTimeout(this.inactiveScreen.timerReposo);
46 this.inactiveScreen.startTimeOutInactividad(); 43 this.inactiveScreen.startTimeOutInactividad();
47 } 44 }
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 192b6d0
1 import { Component, OnInit, TemplateRef } from '@angular/core'; 1 import { Component, OnInit, TemplateRef } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings'; 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { IPublicidad } from 'src/app/interfaces/IPublicidad'; 3 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service'; 4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
5 import { IArticulo } from 'src/app/interfaces/IArticulo'; 5 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 import { PromocionComponent } from '../promocion/promocion.component'; 6 import { PromocionComponent } from '../promocion/promocion.component';
7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; 7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; 9 import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
10 10
11 @Component({ 11 @Component({
12 selector: 'app-header-publicidad', 12 selector: 'app-header-publicidad',
13 templateUrl: './header-publicidad.component.html', 13 templateUrl: './header-publicidad.component.html',
14 styleUrls: ['./header-publicidad.component.scss'] 14 styleUrls: ['./header-publicidad.component.scss']
15 }) 15 })
16 export class HeaderPublicidadComponent implements OnInit { 16 export class HeaderPublicidadComponent implements OnInit {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 publicidades: IPublicidad[] = []; 18 publicidades: IPublicidad[] = [];
19 modalRef: BsModalRef; 19 modalRef: BsModalRef;
20 template: any; 20 template: any;
21 21
22 constructor( 22 constructor(
23 private publicidadService: PublicidadService, 23 private publicidadService: PublicidadService,
24 private articuloService: ArticuloService, 24 private articuloService: ArticuloService,
25 private modalService: BsModalService, 25 private modalService: BsModalService,
26 ) { } 26 ) { }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 this.getPublicidades(); 29 this.getPublicidades();
30 } 30 }
31 31
32 getPublicidades() { 32 getPublicidades() {
33 this.publicidadService.getAll() 33 this.publicidadService.getAll()
34 .subscribe((res: IPublicidad[]) => { 34 .subscribe((res: IPublicidad[]) => {
35 this.publicidades = res; 35 this.publicidades = res;
36 }, err => console.error(err)); 36 }, err => console.error(err));
37 } 37 }
38 38
39 elegirArticulo(publicidad: IPublicidad) { 39 elegirArticulo(publicidad: IPublicidad) {
40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
41 } 41 }
42 42
43 getByID(id: number) { 43 getByID(id: number) {
44 this.articuloService.getById(id) 44 this.articuloService.getById(id)
45 .subscribe((res: IArticulo) => { 45 .subscribe((res: IArticulo) => {
46 if (res.FPP) { 46 if (res.FPP) {
47 this.openModalPromos(res); 47 this.openModalPromos(res);
48 return; 48 return;
49 } else { 49 } else {
50 this.openModalConfirmacion(res); 50 this.openModalConfirmacion(res);
51 return; 51 return;
52 } 52 }
53 }, err => console.error(err)); 53 }, err => console.error(err));
54 } 54 }
55 55
56 openModalPromos(articulo: IArticulo) { 56 openModalPromos(articulo: IArticulo) {
57 this.modalRef = this.modalService.show(PromocionComponent, 57 this.modalRef = this.modalService.show(PromocionComponent,
58 { 58 {
59 initialState: { 59 initialState: {
60 idArticulo: articulo.id 60 idArticulo: articulo.id
61 }, 61 },
62 class: 'modal-promo modal-dialog-centered' 62 class: 'modal-promo modal-dialog-centered'
63 }); 63 });
64 } 64 }
65 65
66 openModalConfirmacion(articulo: IArticulo) { 66 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent, 67 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 { 68 {
69 initialState: { 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 class: 'modal-promo modal-dialog-centered' 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 }
77 88