Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 2161684256bb30ba327b1f4370aae678c6c398ea

Authored by Benjamin Rodriguez
1 parent d36ba06638
Exists in develop

Modal confirmacion terminado + sacar el splash clickeando en cualquier lado

Showing 8 changed files with 155 additions and 11 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 2161684
... ... @@ -158,7 +158,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
158 158 this.showQuantity += 100;
159 159 }
160 160  
161   - @HostListener("scroll", ['$event'])
  161 + @HostListener('scroll', ['$event'])
162 162 scrollEvent(event: Event) {
163 163 clearTimeout(this.inactiveScreen.timerReposo);
164 164 this.inactiveScreen.startTimeOutInactividad();
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 2161684
... ... @@ -7,12 +7,14 @@ import { ModalModule } from 'ngx-bootstrap/modal';
7 7 import { CarouselModule } from 'ngx-bootstrap/carousel';
8 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 9 import { SharedModule } from '../shared/shared.module';
  10 +import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
10 11  
11 12 @NgModule({
12 13 declarations: [
13 14 SeleccionArticulosComponent,
14 15 HeaderPublicidadComponent,
15   - PromocionComponent
  16 + PromocionComponent,
  17 + ConfirmacionComponent
16 18 ],
17 19 imports: [
18 20 CommonModule,
... ... @@ -22,6 +24,6 @@ import { SharedModule } from '../shared/shared.module';
22 24 SharedModule
23 25 ],
24 26 exports: [HeaderPublicidadComponent],
25   - entryComponents: [PromocionComponent]
  27 + entryComponents: [PromocionComponent, ConfirmacionComponent]
26 28 })
27 29 export class SeleccionArticulosModule { }
src/app/modules/splash-screen/splash-screen.component.html
Diff comments   View file @ 2161684
1 1 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
2   - <div class="row mx-0 h-100">
  2 + <div
  3 + class="row mx-0 h-100"
  4 + [routerLink]="['/info-formas-pago']">
3 5 <div class="col-12 px-0 h-30 my-auto">
4 6 <img
5 7 draggable="false"
... ... @@ -12,7 +14,9 @@
12 14 </div>
13 15  
14 16 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
15   - <div class="row mx-0 h-100">
  17 + <div
  18 + class="row mx-0 h-100"
  19 + [routerLink]="['/info-formas-pago']">
16 20 <div class="col-12 px-0 h-100 my-auto">
17 21 <div class="row mx-0 h-15">
18 22 <div class="col-12 px-0 h-80 my-auto">
... ... @@ -42,9 +46,7 @@
42 46 </div>
43 47 </div>
44 48 </div>
45   - <div
46   - class="row mx-0 h-10 loop-color cursor-pointer"
47   - [routerLink]="['/info-formas-pago']">
  49 + <div class="row mx-0 h-10 loop-color cursor-pointer">
48 50 <div class="col-12 text-center align-self-center px-0">
49 51 <p class="h6 text-white">TOCA PARA COMENZAR</p>
50 52 </div>
src/app/shared/confirmacion/confirmacion.component.html
Diff comments   View file @ 2161684
... ... @@ -0,0 +1,58 @@
  1 +<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulo">
  2 + <div class="row mx-0 w-100 justify-content-between">
  3 + <div class="col-8">
  4 + <p class="h3 text-white">{{articulo.DetArt}}</p>
  5 + </div>
  6 + </div>
  7 + <div class="col-4 align-self-center">
  8 + <img
  9 + draggable="false"
  10 + ondragstart="return false;"
  11 + (contextmenu)="false"
  12 + src="{{urlImagenes}}{{articulo.imagenes}}"
  13 + onerror="this.src='assets/img/image-not-found.jpg'"
  14 + class="card-img-top img-fluid rounded-circle">
  15 + </div>
  16 +</div>
  17 +<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulo">
  18 + <div class="row justify-content-between mx-0 w-100">
  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>
  22 + </div>
  23 + <div class="col-4">
  24 + <div
  25 + class="mx-0"
  26 + (click)="elegirArticulo(articulo)">
  27 + <div class="col-auto bg-white badge-pill">
  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>
  31 + </div>
  32 + <div class="col-auto px-0">
  33 + <img
  34 + draggable="false"
  35 + ondragstart="return false;"
  36 + (contextmenu)="false"
  37 + class="d-block ml-auto my-1 icon-30 pr-2"
  38 + src="assets/img/ir-color.svg">
  39 + </div>
  40 + </div>
  41 + </div>
  42 + </div>
  43 + <div class="bg-white badge-pill mt-2">
  44 + <div class="row justify-content-between">
  45 + <div
  46 + class="col-auto mx-0 "
  47 + (click)="close()">
  48 + <p class="font-weight-bold text-center text-primary">volver</p>
  49 + </div>
  50 + <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
  51 + </div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 +
  56 +
  57 +
  58 +</div>
src/app/shared/confirmacion/confirmacion.component.scss
Diff comments   View file @ 2161684
src/app/shared/confirmacion/confirmacion.component.spec.ts
Diff comments   View file @ 2161684
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ConfirmacionComponent } from './confirmacion.component';
  4 +
  5 +describe('ConfirmacionComponent', () => {
  6 + let component: ConfirmacionComponent;
  7 + let fixture: ComponentFixture<ConfirmacionComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ConfirmacionComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ConfirmacionComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ 2161684
... ... @@ -0,0 +1,44 @@
  1 +import { Component, OnInit, HostListener } from '@angular/core';
  2 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  3 +import { IArticulo } from 'src/app/interfaces/IArticulo';
  4 +import { BsModalRef } from 'ngx-bootstrap/modal';
  5 +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
  6 +
  7 +@Component({
  8 + selector: 'app-confirmacion',
  9 + templateUrl: './confirmacion.component.html',
  10 + styleUrls: ['./confirmacion.component.scss']
  11 +})
  12 +export class ConfirmacionComponent implements OnInit {
  13 + idArticulo: number;
  14 + articulo: IArticulo;
  15 +
  16 + constructor(
  17 + public modalRef: BsModalRef,
  18 + private articuloService: ArticuloService,
  19 + private inactiveScreen: InactiveScreenService,
  20 + ) { }
  21 +
  22 + ngOnInit() {
  23 + this.articuloService.getById(this.idArticulo)
  24 + .subscribe((res: IArticulo) => {
  25 + this.articulo = res;
  26 + }, err => console.error(err));
  27 + }
  28 +
  29 + elegirArticulo(articulo: IArticulo) {
  30 + articulo.cantidad = 1;
  31 + this.articuloService.setArticulo(articulo);
  32 + this.modalRef.hide();
  33 + }
  34 +
  35 + close() {
  36 + this.modalRef.hide();
  37 + }
  38 +
  39 + @HostListener('document:click', ['$event'])
  40 + eventListener(event: Event) {
  41 + clearTimeout(this.inactiveScreen.timerReposo);
  42 + this.inactiveScreen.startTimeOutInactividad();
  43 + }
  44 +}
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 2161684
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, TemplateRef } from '@angular/core';
2 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 3 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
4 4 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
... ... @@ -6,6 +6,7 @@ import { IArticulo } from &#39;src/app/interfaces/IArticulo&#39;;
6 6 import { PromocionComponent } from '../promocion/promocion.component';
7 7 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
8 8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  9 +import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
9 10  
10 11 @Component({
11 12 selector: 'app-header-publicidad',
... ... @@ -16,6 +17,7 @@ export class HeaderPublicidadComponent implements OnInit {
16 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
17 18 publicidades: IPublicidad[] = [];
18 19 modalRef: BsModalRef;
  20 + template: any;
19 21  
20 22 constructor(
21 23 private publicidadService: PublicidadService,
... ... @@ -44,9 +46,10 @@ export class HeaderPublicidadComponent implements OnInit {
44 46 if (res.FPP) {
45 47 this.openModalPromos(res);
46 48 return;
  49 + } else {
  50 + this.openModalConfirmacion(res);
  51 + return;
47 52 }
48   - res.cantidad = 1;
49   - this.articuloService.setArticulo(res);
50 53 }, err => console.error(err));
51 54 }
52 55  
... ... @@ -60,4 +63,14 @@ export class HeaderPublicidadComponent implements OnInit {
60 63 });
61 64 }
62 65  
  66 + openModalConfirmacion(articulo: IArticulo) {
  67 + this.modalRef = this.modalService.show(ConfirmacionComponent,
  68 + {
  69 + initialState: {
  70 + idArticulo: articulo.id
  71 + },
  72 + class: 'modal-promo modal-dialog-centered'
  73 + });
  74 + }
  75 +
63 76 }