From 2161684256bb30ba327b1f4370aae678c6c398ea Mon Sep 17 00:00:00 2001
From: Benjamin <brodriguez@focasoftware.com>
Date: Thu, 23 Jan 2020 10:13:56 -0300
Subject: [PATCH] Modal confirmacion terminado + sacar el splash clickeando en
 cualquier lado

---
 .../seleccion-articulos.component.ts               |  2 +-
 .../seleccion-articulos.module.ts                  |  6 ++-
 .../splash-screen/splash-screen.component.html     | 12 +++--
 .../confirmacion/confirmacion.component.html       | 58 ++++++++++++++++++++++
 .../confirmacion/confirmacion.component.scss       |  0
 .../confirmacion/confirmacion.component.spec.ts    | 25 ++++++++++
 .../shared/confirmacion/confirmacion.component.ts  | 44 ++++++++++++++++
 .../header-publicidad.component.ts                 | 19 +++++--
 8 files changed, 155 insertions(+), 11 deletions(-)
 create mode 100644 src/app/shared/confirmacion/confirmacion.component.html
 create mode 100644 src/app/shared/confirmacion/confirmacion.component.scss
 create mode 100644 src/app/shared/confirmacion/confirmacion.component.spec.ts
 create mode 100644 src/app/shared/confirmacion/confirmacion.component.ts

diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index d8bc15e..8a4d2b5 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -158,7 +158,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     this.showQuantity += 100;
   }
 
-  @HostListener("scroll", ['$event'])
+  @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
index b793c89..ecbc912 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
@@ -7,12 +7,14 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
+import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
 
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
-    PromocionComponent
+    PromocionComponent,
+    ConfirmacionComponent
   ],
   imports: [
     CommonModule,
@@ -22,6 +24,6 @@ import { SharedModule } from '../shared/shared.module';
     SharedModule
   ],
   exports: [HeaderPublicidadComponent],
-  entryComponents: [PromocionComponent]
+  entryComponents: [PromocionComponent, ConfirmacionComponent]
 })
 export class SeleccionArticulosModule { }
diff --git a/src/app/modules/splash-screen/splash-screen.component.html b/src/app/modules/splash-screen/splash-screen.component.html
index 9657ac3..dd40995 100644
--- a/src/app/modules/splash-screen/splash-screen.component.html
+++ b/src/app/modules/splash-screen/splash-screen.component.html
@@ -1,5 +1,7 @@
 <div *ngIf="showSplashScreen" class="h-100 bg-splash">
-  <div class="row mx-0 h-100">
+  <div
+    class="row mx-0 h-100"
+    [routerLink]="['/info-formas-pago']">
     <div class="col-12 px-0 h-30 my-auto">
       <img
         draggable="false"
@@ -12,7 +14,9 @@
 </div>
 
 <div *ngIf="!showSplashScreen" class="h-100 bg-primary fade-in">
-  <div class="row mx-0 h-100">
+  <div
+    class="row mx-0 h-100"
+    [routerLink]="['/info-formas-pago']">
     <div class="col-12 px-0 h-100 my-auto">
       <div class="row mx-0 h-15">
         <div class="col-12 px-0 h-80 my-auto">
@@ -42,9 +46,7 @@
           </div>
         </div>
       </div>
-      <div
-        class="row mx-0 h-10 loop-color cursor-pointer"
-        [routerLink]="['/info-formas-pago']">
+      <div class="row mx-0 h-10 loop-color cursor-pointer">
         <div class="col-12 text-center align-self-center px-0">
           <p class="h6 text-white">TOCA PARA COMENZAR</p>
         </div>
diff --git a/src/app/shared/confirmacion/confirmacion.component.html b/src/app/shared/confirmacion/confirmacion.component.html
new file mode 100644
index 0000000..3ee292e
--- /dev/null
+++ b/src/app/shared/confirmacion/confirmacion.component.html
@@ -0,0 +1,58 @@
+<div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulo">
+  <div class="row mx-0 w-100 justify-content-between">
+    <div class="col-8">
+      <p class="h3 text-white">{{articulo.DetArt}}</p>
+    </div>
+  </div>
+  <div class="col-4 align-self-center">
+    <img
+    draggable="false"
+    ondragstart="return false;"
+    (contextmenu)="false"
+    src="{{urlImagenes}}{{articulo.imagenes}}"
+    onerror="this.src='assets/img/image-not-found.jpg'"
+    class="card-img-top img-fluid rounded-circle">
+  </div>
+</div>
+<div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulo">
+  <div class="row justify-content-between mx-0 w-100">
+    <div class="col-8">
+      <p class="text-white"><small>¿DESEA AGREGAR ESTE ARTÍCULO</small></p>
+      <h1 class="text-white mb-4">a su carrito?</h1>
+    </div>
+    <div class="col-4">
+      <div
+        class="mx-0"
+        (click)="elegirArticulo(articulo)">
+        <div class="col-auto bg-white badge-pill">
+          <div class="row justify-content-between">
+            <div class="col-auto px-0 align-self-center text-primary pl-3">
+              <p class="font-weight-bold">{{articulo.PreVen | currency}}</p> 
+            </div>
+            <div class="col-auto px-0">
+              <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="d-block ml-auto my-1 icon-30 pr-2"
+                src="assets/img/ir-color.svg">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-white badge-pill mt-2">
+        <div class="row justify-content-between">
+          <div
+            class="col-auto mx-0 "
+            (click)="close()">
+            <p class="font-weight-bold text-center text-primary">volver</p>
+          </div>
+          <i class="fas fa-undo-alt text-info mr-3 my-auto"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+</div>
diff --git a/src/app/shared/confirmacion/confirmacion.component.scss b/src/app/shared/confirmacion/confirmacion.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/confirmacion/confirmacion.component.spec.ts b/src/app/shared/confirmacion/confirmacion.component.spec.ts
new file mode 100644
index 0000000..c270ee5
--- /dev/null
+++ b/src/app/shared/confirmacion/confirmacion.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmacionComponent } from './confirmacion.component';
+
+describe('ConfirmacionComponent', () => {
+  let component: ConfirmacionComponent;
+  let fixture: ComponentFixture<ConfirmacionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmacionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmacionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/confirmacion/confirmacion.component.ts b/src/app/shared/confirmacion/confirmacion.component.ts
new file mode 100644
index 0000000..9dea197
--- /dev/null
+++ b/src/app/shared/confirmacion/confirmacion.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit, HostListener } from '@angular/core';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { IArticulo } from 'src/app/interfaces/IArticulo';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+
+@Component({
+  selector: 'app-confirmacion',
+  templateUrl: './confirmacion.component.html',
+  styleUrls: ['./confirmacion.component.scss']
+})
+export class ConfirmacionComponent implements OnInit {
+  idArticulo: number;
+  articulo: IArticulo;
+
+  constructor(
+    public modalRef: BsModalRef,
+    private articuloService: ArticuloService,
+    private inactiveScreen: InactiveScreenService,
+  ) { }
+
+  ngOnInit() {
+    this.articuloService.getById(this.idArticulo)
+    .subscribe((res: IArticulo) => {
+      this.articulo = res;
+    }, err => console.error(err));
+  }
+
+  elegirArticulo(articulo: IArticulo) {
+    articulo.cantidad = 1;
+    this.articuloService.setArticulo(articulo);
+    this.modalRef.hide();
+  }
+
+  close() {
+    this.modalRef.hide();
+  }
+
+  @HostListener('document:click', ['$event'])
+  eventListener(event: Event) {
+    clearTimeout(this.inactiveScreen.timerReposo);
+    this.inactiveScreen.startTimeOutInactividad();
+  }
+}
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.ts b/src/app/shared/header-publicidad/header-publicidad.component.ts
index f8286d2..995d7e3 100644
--- a/src/app/shared/header-publicidad/header-publicidad.component.ts
+++ b/src/app/shared/header-publicidad/header-publicidad.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef } from '@angular/core';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { IPublicidad } from 'src/app/interfaces/IPublicidad';
 import { PublicidadService } from 'src/app/services/publicidad/publicidad.service';
@@ -6,6 +6,7 @@ import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { PromocionComponent } from '../promocion/promocion.component';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { ConfirmacionComponent } from '../confirmacion/confirmacion.component';
 
 @Component({
   selector: 'app-header-publicidad',
@@ -16,6 +17,7 @@ export class HeaderPublicidadComponent implements OnInit {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   publicidades: IPublicidad[] = [];
   modalRef: BsModalRef;
+  template: any;
 
   constructor(
     private publicidadService: PublicidadService,
@@ -44,9 +46,10 @@ export class HeaderPublicidadComponent implements OnInit {
         if (res.FPP) {
           this.openModalPromos(res);
           return;
+        } else {
+          this.openModalConfirmacion(res);
+          return;
         }
-        res.cantidad = 1;
-        this.articuloService.setArticulo(res);
       }, err => console.error(err));
   }
 
@@ -60,4 +63,14 @@ export class HeaderPublicidadComponent implements OnInit {
       });
   }
 
+  openModalConfirmacion(articulo: IArticulo) {
+    this.modalRef = this.modalService.show(ConfirmacionComponent,
+      {
+        initialState: {
+          idArticulo: articulo.id
+        },
+        class: 'modal-promo modal-dialog-centered'
+      });
+  }
+
 }
-- 
1.9.1