Mauricio Cattafi / autoservicio

Download as
Browse Code ยป

Commit 103858e63ea7cddcb99d69e459c9461d72f8e9a0

Authored by Eric Fernandez
2 parents 1ee6ab4e95 930ae70b35
Exists in master and in 1 other branch validar_pve

conflictos

Showing 24 changed files   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 103858e
... ... @@ -12,13 +12,13 @@ const routes: Routes = [
12 12 { path: '', component: HomeComponent },
13 13 { path: 'home', component: HomeComponent },
14 14 { path: 'abm-imagenes', component: AmbImagenesComponent },
  15 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
15 16 {
16 17 path: '',
17 18 component: MasterComponent,
18 19 children: [
19 20 { path: 'inicio', component: InicioComponent },
20 21 { path: 'busqueda-productos', component: BusquedaProductosComponent },
21   - { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
22 22 { path: 'pago', component: PagoComponent }
23 23 ]
24 24 },
src/app/app.module.ts
Diff comments   View file @ 103858e
... ... @@ -12,7 +12,6 @@ import { PopoverModule } from 'ngx-bootstrap/popover';
12 12 import { AppComponent } from './app.component';
13 13 import { HeaderComponent } from './components/header/header.component';
14 14 import { SidebarComponent } from './components/sidebar/sidebar.component';
15   -import { CarouselComponent } from './components/carousel/carousel.component';
16 15 import { HomeComponent } from './components/home/home.component';
17 16 import { InicioComponent } from './components/inicio/inicio.component';
18 17 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
... ... @@ -29,7 +28,6 @@ import { PagoComponent } from './components/pago/pago.component';
29 28 AppComponent,
30 29 HeaderComponent,
31 30 SidebarComponent,
32   - CarouselComponent,
33 31 HomeComponent,
34 32 InicioComponent,
35 33 BusquedaProductosComponent,
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 103858e
... ... @@ -75,7 +75,7 @@
75 75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
76 76 </div>
77 77 </div>
78   - <div *ngIf="producto.showCargarProducto" class="row mt-2">
  78 + <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom">
79 79 <div class="col-sm-12">
80 80 <button
81 81 type="button"
src/app/components/carousel/carousel.component.html
View file @ 103858e
... ... @@ -1,28 +0,0 @@
1   -<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
2   - <div class="carousel-inner">
3   - <div class="carousel-item active">
4   - <div class="card" style="width: 18rem;">
5   - <div class="card-body">
6   - <h5 class="card-title">Card title</h5>
7   - <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
8   - <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
9   - card's content.</p>
10   - <a href="#" class="card-link">Card link</a>
11   - <a href="#" class="card-link">Another link</a>
12   - </div>
13   - </div>
14   - </div>
15   - <div class="carousel-item">
16   - <div class="card" style="width: 18rem;">
17   - <div class="card-body">
18   - <h5 class="card-title">Card title 2222</h5>
19   - <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
20   - <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
21   - card's content.</p>
22   - <a href="#" class="card-link">Card link</a>
23   - <a href="#" class="card-link">Another link</a>
24   - </div>
25   - </div>
26   - </div>
27   - </div>
28   -</div>
29 0 \ No newline at end of file
src/app/components/carousel/carousel.component.scss
View file @ 103858e
src/app/components/carousel/carousel.component.spec.ts
View file @ 103858e
... ... @@ -1,25 +0,0 @@
1   -import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2   -
3   -import { CarouselComponent } from './carousel.component';
4   -
5   -describe('CarouselComponent', () => {
6   - let component: CarouselComponent;
7   - let fixture: ComponentFixture<CarouselComponent>;
8   -
9   - beforeEach(async(() => {
10   - TestBed.configureTestingModule({
11   - declarations: [ CarouselComponent ]
12   - })
13   - .compileComponents();
14   - }));
15   -
16   - beforeEach(() => {
17   - fixture = TestBed.createComponent(CarouselComponent);
18   - component = fixture.componentInstance;
19   - fixture.detectChanges();
20   - });
21   -
22   - it('should create', () => {
23   - expect(component).toBeTruthy();
24   - });
25   -});
src/app/components/carousel/carousel.component.ts
View file @ 103858e
... ... @@ -1,15 +0,0 @@
1   -import { Component, OnInit } from '@angular/core';
2   -
3   -@Component({
4   - selector: 'app-carousel',
5   - templateUrl: './carousel.component.html',
6   - styleUrls: ['./carousel.component.scss']
7   -})
8   -export class CarouselComponent implements OnInit {
9   -
10   - constructor() { }
11   -
12   - ngOnInit() {
13   - }
14   -
15   -}
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ 103858e
1   -<div class="row">
2   - <div class="col-12">
  1 +<div class="row m-0 fade-in bg-primary-gradient disable-user-select">
  2 + <div class="col-12 p-0 vh-100">
  3 +
  4 + <!-- TOP HEADER -->
  5 + <app-header></app-header>
3 6  
4 7 <!-- NOMBRE DE SECCION -->
5 8 <div class="row m-0">
6 9 <div class="col-12 p-0">
7   - <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
  10 + <p class="h5 py-1 bg-gray text-muted text-center m-0">
  11 + Pagar
  12 + <i class="fa fa-usd"></i>
  13 + </p>
8 14 </div>
9 15 </div>
10 16  
11   - <div class="row m-3 d-flex align-items-center">
12   - <div class="col-4">
13   - <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
14   - </div>
15   - <div class="col-8">
16   - <h2>ยฟDesea finalizar su compra?</h2>
17   - <h3>Por favor, controle y confirme su compra.</h3>
18   - </div>
19   - <div class="col-sm-7">
20   -
21   - <div class="row pr-3 vh-50 overflow-scroll">
22   - <div class="col-4 p-2" *ngFor="let producto of productos">
23   - <div class="card card-effect bg-white rounded-sm shadow border-0">
24   - <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">
25   - <div class="card-body">
26   - <p class="h5 text-left m-0">{{producto.variable}}</p>
27   - <div class="text-left">
28   - <p class="m-0"><small>ASDASDSADASDSA</small></p>
29   - <p class="m-0"><small>COD. 1222</small></p>
30   - <p class="m-0"><strong>$ 563</strong></p>
  17 + <div class="row m-0">
  18 + <div class="col-12">
  19 +
  20 + <!-- TEXTO DE IZQUIERDA -->
  21 + <div class="row mx-2 mt-4 text-white">
  22 + <div class="col-sm-2 my-auto">
  23 + <p class="h2">Mi Compra
  24 + <i class="fa fa-shopping-cart "></i>
  25 + </p>
  26 + </div>
  27 + <div class="col-sm-4 my-auto">
  28 + <p class="h3">ยฟDesea finalizar su compra?</p>
  29 + <p class="h4">Por favor, controle y confirme su compra.</p>
  30 + </div>
  31 + </div>
  32 +
  33 + <div class="row">
  34 + <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
  35 + <div class="col-sm-7">
  36 + <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
  37 + <div class="col-4 p-2" *ngFor="let producto of productos">
  38 + <div class="bg-white rounded-sm shadow border-0">
  39 + <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
  40 + <div class="p-2">
  41 + <p class="h6 text-left m-0">ZARAZA</p>
  42 + <div class="row justify-content-between m-0">
  43 + <div class="col-12 p-0">
  44 + <div class="text-left">
  45 + <p class="m-0 h6"><small>ZARAZA DETALLE</small></p>
  46 + <p class="m-0 h6"><small>COD. 5656</small></p>
  47 + </div>
  48 + </div>
  49 + <div class="col-12 my-auto pt-2 pr-2 p-0">
  50 + <p class="text-right m-0 h6">{{20 | currency}}</p>
  51 + </div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 + </div>
  56 + </div>
  57 + </div>
  58 +
  59 + <div class="col-sm-5">
  60 + <div class="row ml-3">
  61 + <!-- TICKET -->
  62 + <div class="col-sm-7">
  63 + <div class="card rounded-sm shadow">
  64 + <div class="card-body">
  65 + <p class="h5 card-title">Su Ticket</p>
  66 + <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
  67 + Ticket detalle.
  68 + </p>
  69 + <p class="h4 card-text text-right mt-3 mb-0">
  70 + Total {{230 | currency}}
  71 + </p>
  72 + </div>
31 73 </div>
32 74 </div>
33 75 </div>
34 76 </div>
35 77 </div>
36   - </div>
37   - <div class="col-sm-5">
38   - <h3>TOTAL: $553</h3>
  78 +
  79 + <!-- OPCIONES ABAJO DERECHA -->
  80 + <div class="row m-0 fixed-bottom">
  81 + <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
  82 + <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
  83 + <div class="card-body row m-0">
  84 + <div class="col-12 p-3">
  85 + <button
  86 + type="button"
  87 + class="btn btn-block btn-light shadow btn-sm shadow"
  88 + [routerLink]="['/inicio']">
  89 + <span class="pr-2">Volver</span>
  90 + <i class="fa fa-undo text-warning"></i>
  91 + </button>
  92 + <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
  93 + <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
  94 + <i class="fa fa-check text-success"></i>
  95 + </button>
  96 + <button
  97 + type="button"
  98 + class="btn btn-block btn-light shadow btn-sm shadow"
  99 + [routerLink]="['home']">
  100 + <span class="pr-2">Cancelar</span>
  101 + <i class="fa fa-times text-danger"></i>
  102 + </button>
  103 + </div>
  104 + </div>
  105 + </div>
  106 + </div>
  107 + </div>
  108 +
39 109 </div>
40 110 </div>
  111 +
41 112 </div>
  113 +
42 114 </div>
src/app/components/header/header.component.html
Diff comments   View file @ 103858e
1   -<div class="row bg-light p-4 justify-content-between">
  1 +<div class="row m-0 bg-light p-4 justify-content-between">
2 2 <div class="col-auto">
3 3 <img src="{{apiUrl}}/imagenes/logoaxion.png">
4 4 </div>
src/app/components/home/home.component.html
Diff comments   View file @ 103858e
1   -<div class="container-fluid">
  1 +<div class="container-fluid background-image">
2 2 <div class="row">
3 3 <div class="col p-0">
4   - <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
5   -
  4 + <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select">
  5 +
6 6 <!-- HEADER -->
7   - <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
8   - <p class="text-white text-center">HEADER</p>
  7 + <div class="row m-0 w-100 bg-primary-gradient-horizontal">
  8 + <div class="col-6 bg-white p-5 rounded-bottom-right">
  9 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
  10 + </div>
9 11 </div>
10 12  
11   - <div class="h-100 w-100 position-relative">
12   - <div class="background-image blur"></div>
13   - <div class="row position-absolute w-100 h-100">
14   - <div class="col-5 my-auto">
15   - <!-- CAROUSEL -->
16   - <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
17   - <div class="carousel-inner">
18   - <div class="carousel-item active">
19   - <img class="m-auto img-fluid d-block w-75"
20   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21   - alt="">
22   - </div>
23   - <div class="carousel-item">
24   - <img class="m-auto img-fluid d-block w-75"
25   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26   - alt="">
27   - </div>
28   - </div>
29   - </div>
30   - </div>
31   - <div class="col-7 my-auto">
32   - <div class="text-center text-white">
33   - <h1 class="display-2 font-weight-bold">ยกBIENVENIDO!</h1>
34   - <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35   - </div>
36   - </div>
  13 + <!-- INFO DE BIENVENIDA -->
  14 + <div class="row w-100">
  15 + <div class="col-4 offset-2">
  16 + <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
  17 + </div>
  18 + <div class="col-6 text-center text-white my-auto">
  19 + <p class="display-2 font-weight-bold mb-5">ยกBIENVENIDO!</p>
  20 + <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
37 21 </div>
38 22 </div>
39 23  
40 24 <!-- FOOTER -->
41   - <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
42   - <p class="text-white text-center">FOOTER</p>
  25 + <div class="row m-0 w-100 bg-gray">
  26 + <div class="col-6 bg-white offset-6 p-5 rounded-top-left">
  27 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
  28 + </div>
43 29 </div>
  30 +
44 31 </div>
45 32 </div>
46 33 </div>
47   -</div>
48 34 \ No newline at end of file
  35 +</div>
src/app/components/home/home.component.scss
Diff comments   View file @ 103858e
1 1 .background-image {
2   - background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
  2 + background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3 3 background-repeat: no-repeat;
4 4 background-size: cover;
5   - position: absolute;
6   - width: 100%;
7   - height: 100%;
  5 +}
  6 +
  7 +.w-20 {
  8 + width: 20% !important;
  9 +}
  10 +
  11 +.rounded-bottom-right {
  12 + border-bottom-right-radius: 10rem;
  13 + &:before {
  14 + border-radius: 0 40px 40px 0;
  15 + background-color: #fff;
  16 + }
  17 +}
  18 +
  19 +.rounded-top-left {
  20 + border-top-left-radius: 10rem;
  21 +}
  22 +
  23 +.bg-gray {
  24 + background-color: #cccccc;
8 25 }
src/app/components/home/home.component.ts
Diff comments   View file @ 103858e
1 1 import { Component, OnInit, HostListener } from '@angular/core';
2 2 import { Router } from '@angular/router';
  3 +import { appSettings } from 'src/etc/AppSettings';
3 4  
4 5 @Component({
5 6 selector: 'app-home',
... ... @@ -8,6 +9,8 @@ import { Router } from &#39;@angular/router&#39;;
8 9 })
9 10 export class HomeComponent implements OnInit {
10 11  
  12 + private apiUrl: string = appSettings.apiUrl;
  13 +
11 14 constructor(private router: Router) { }
12 15  
13 16 ngOnInit() {
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 103858e
... ... @@ -63,16 +63,17 @@
63 63 <!-- CARGAR PRODUCTOS -->
64 64 <ng-template #popTemplate>
65 65 <app-popover-promos
66   - *ngIf="productoAcargar && !productoEsPromo"
  66 + *ngIf="promociones.length > 0 && sinonimos.length === 0"
67 67 [popover]="popoverDirective"
68 68 [popoverContent]="promociones"
69 69 (promoSeleccionada)="promoSeleccionada($event)"
70 70 class="text-white rounded-sm border-0">
71 71 </app-popover-promos>
72 72 <app-popover-sinonimos
73   - *ngIf="promoAcargar && productoEsPromo"
  73 + *ngIf="sinonimos.length > 0"
74 74 [popover]="popoverDirective"
75 75 [popoverContent]="sinonimos"
  76 + (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
76 77 class="text-white rounded-sm border-0">
77 78 </app-popover-sinonimos>
78 79 </ng-template>
... ... @@ -106,7 +107,7 @@
106 107 src="{{apiUrl}}/imagenes/escanner.jpg">
107 108  
108 109 <!-- PRODUCTO A CARGAR -->
109   - <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
  110 + <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
110 111 <img
111 112 class="card-img-top d-block w-100 mx-auto rounded-sm"
112 113 src="{{apiUrl}}/imagenes/testImg3.jpg">
... ... @@ -122,7 +123,7 @@
122 123 </div>
123 124  
124 125 <!-- PROMO A CARGAR -->
125   - <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
  126 + <div class="fade-in m-0" *ngIf="promoAcargar">
126 127 <img
127 128 class="card-img-top d-block w-100 mx-auto rounded-sm"
128 129 src="{{apiUrl}}/imagenes/testImg3.jpg">
... ... @@ -132,7 +133,7 @@
132 133 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
133 134 </div>
134 135 <div class="col-12 text-right mt-2 align-self-end">
135   - <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
  136 + <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
136 137 </div>
137 138 </div>
138 139 </div>
... ... @@ -141,9 +142,9 @@
141 142 <!-- BOTONES DE CARGAR PRODUCTOS-->
142 143 <div
143 144 class="col-5 pr-0"
144   - *ngIf="productoAcargar && tienePromo">
  145 + *ngIf="promociones.length > 0">
145 146 <button
146   - *ngIf="productoEsPromo && promoAcargar.sinonimos"
  147 + *ngIf="sinonimos.length > 0"
147 148 type="button"
148 149 class="btn btn-light btn-block shadow-sm"
149 150 (click)="pop.show()">
... ... @@ -151,7 +152,7 @@
151 152 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
152 153 </button>
153 154 <button
154   - *ngIf="!productoEsPromo"
  155 + *ngIf="!promoAcargar"
155 156 type="button"
156 157 class="btn btn-primary btn-block shadow-sm"
157 158 (click)="pop.show()">
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ 103858e
... ... @@ -4,7 +4,3 @@
4 4 float: left;
5 5 background-color: #2872ae;
6 6 }
7   -
8   -.black-text {
9   - color: black;
10   -}
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 103858e
... ... @@ -7,7 +7,6 @@ import { Router } from &#39;@angular/router&#39;;
7 7 import { Promocion } from 'src/app/wrappers/promocion';
8 8 import { Sinonimo } from 'src/app/wrappers/sinonimo';
9 9  
10   -
11 10 @Component({
12 11 selector: 'app-inicio',
13 12 templateUrl: './inicio.component.html',
... ... @@ -18,8 +17,7 @@ export class InicioComponent implements OnInit {
18 17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
19 18 private productoAcargar: Producto;
20 19 private promoAcargar: Promocion;
21   - private tienePromo = false;
22   - private productoEsPromo = false;
  20 + private sinonimoAcargar: Sinonimo;
23 21  
24 22 promociones: Promocion[] = [];
25 23 sinonimos: Sinonimo[] = [];
... ... @@ -32,6 +30,10 @@ export class InicioComponent implements OnInit {
32 30 ngOnInit() {
33 31  
34 32 this.productoAcargar = this.productoService.productoAcargar;
  33 + this.getPromociones();
  34 + }
  35 +
  36 + getPromociones() {
35 37 if (this.productoAcargar) {
36 38 var sector = this.productoAcargar.CodSec;
37 39 var codigo = this.productoAcargar.CodArt;
... ... @@ -43,12 +45,10 @@ export class InicioComponent implements OnInit {
43 45 setTimeout(() => {
44 46 this.productoService.productos.push(this.productoAcargar);
45 47 this.productoAcargar = undefined;
46   - this.tienePromo = false;
47 48 }, 2000)
48 49 } else {
49 50  
50 51 this.promociones = res;
51   - this.tienePromo = true;
52 52 this.popoverDirective.show();
53 53 }
54 54 }, error => { console.error(error); })
... ... @@ -66,32 +66,52 @@ export class InicioComponent implements OnInit {
66 66 }
67 67  
68 68 deshacerCarga() {
69   - if (this.productoEsPromo) {
  69 +
  70 + if (this.sinonimoAcargar || this.sinonimos.length > 0) {
  71 + this.sinonimos = [];
  72 + this.sinonimoAcargar = undefined;
  73 + this.popoverDirective.hide();
  74 + }
  75 +
  76 + if (this.promoAcargar) {
70 77 this.promoAcargar = undefined;
71   - this.productoEsPromo = false;
72 78 this.popoverDirective.show();
73 79 } else {
74 80 this.productoAcargar = undefined;
75   - this.tienePromo = false;
  81 + this.promociones = [];
76 82 this.popoverDirective.hide();
77 83 }
78 84 }
79 85  
80 86 promoSeleccionada($event: Promocion) {
81 87  
82   - this.productoEsPromo = true;
83 88 this.promoAcargar = $event;
84 89 this.popoverDirective.hide();
85 90 if (this.promoAcargar.sinonimos) {
86 91 var sector = this.promoAcargar.sector;
87 92 var codigo = this.promoAcargar.codigo;
88 93 this.productoService.getPromocionSinonimos(sector, codigo)
89   - .subscribe((res : Sinonimo[]) => {
90   -
  94 + .subscribe((res: Sinonimo[]) => {
  95 + res.forEach(resSinonimo => {
  96 + resSinonimo.productos.forEach(productoSinonimo => {
  97 + this.promoAcargar.productos.forEach(productoPromo => {
  98 + if (productoPromo.id === productoSinonimo.id) {
  99 + productoSinonimo.esPadre = true;
  100 + }
  101 + });
  102 +
  103 + })
  104 + })
91 105 this.sinonimos = res;
92 106 this.showPopover();
93 107 })
94 108 }
95 109 }
96 110  
  111 + sinonimoSeleccionado($event: Sinonimo) {
  112 +
  113 + console.log($event);
  114 + this.sinonimoAcargar = $event;
  115 + }
  116 +
97 117 }
src/app/components/popover-promos/popover-promos.component.html
Diff comments   View file @ 103858e
... ... @@ -24,7 +24,7 @@
24 24 </div>
25 25 <div class="col-12 text-right mt-2">
26 26 <p class="h4 font-weight-bold mb-0">
27   - {{calcularPrecioDePromo(promo.productos) | currency}}
  27 + {{calcularPrecioDePromo(promo) | currency}}
28 28 </p>
29 29 </div>
30 30 </div>
src/app/components/popover-promos/popover-promos.component.ts
Diff comments   View file @ 103858e
... ... @@ -28,14 +28,13 @@ export class PopoverPromosComponent implements OnInit {
28 28 this.promoSeleccionada.emit(promo);
29 29 }
30 30  
31   - calcularPrecioDePromo(productos: Producto[]) {
  31 + calcularPrecioDePromo(promo: Promocion) {
32 32  
33   - var precio = 0;
34   - productos.forEach(producto => {
35   - precio += producto.PreVen;
  33 + promo.precioTotal = 0;
  34 + promo.productos.forEach(producto => {
  35 + promo.precioTotal += producto.PreVen;
36 36 })
37   -
38   - return precio;
  37 + return promo.precioTotal;
39 38 }
40 39  
41 40 }
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 103858e
... ... @@ -8,31 +8,49 @@
8 8 </div>
9 9 </div>
10 10  
11   - <div class="row m-0">
12   - <div class="col text-left">
13   - <p class="h5 card-title">
14   - Elija una opciรณn
15   - </p>
16   - </div>
17   - </div>
18   -
19 11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
20 12 <div class="col">
21   - <div class="row" *ngFor="let sinonimo of popoverContent">
22   - <div class="col pl-4 h6">
23   - <div class="custom-control custom-radio">
24   - <input
25   - type="radio"
26   - id="{{sinonimo.CodArt}}"
27   - name="sinonimoOpciones"
28   - class="custom-control-input"
29   - (click)="setSinonimo(sinonimo)">
30   - <label
31   - class="font-weight-normal custom-control-label"
32   - for="{{sinonimo.CodArt}}">
33   - {{sinonimo.DetArt}}
34   - </label>
  13 + <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
  14 + <div class="col">
  15 +
  16 + <div class="row m-0">
  17 + <div class="col text-left">
  18 + <p class="h5 card-title">
  19 + Elija una opciรณn
  20 + </p>
  21 + </div>
35 22 </div>
  23 +
  24 + <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
  25 + <div class="col-8 pl-4 h6 m-0">
  26 + <div class="custom-control custom-radio">
  27 + <input
  28 + type="radio"
  29 + [id]="producto.id"
  30 + [checked]="producto.esPadre"
  31 + name="sinonimoOpciones"
  32 + class="custom-control-input"
  33 + (click)="setSinonimo(sinonimo)">
  34 + <label class="font-weight-normal custom-control-label" [for]="producto.id">
  35 + {{producto.DetArt}}
  36 + </label>
  37 + </div>
  38 + </div>
  39 + <div class="col-auto">
  40 + <div class="btn-group-sm btn-group float-left my-auto" role="group">
  41 + <button type="button" class="btn btn-light btn-sm my-auto border">
  42 + <i class="fa fa-plus" aria-hidden="true"></i>
  43 + </button>
  44 + <div class="bg-white border border-white px-3 my-auto text-dark h5">
  45 + <small>{{producto.cantidad}}</small>
  46 + </div>
  47 + <button type="button" class="btn btn-light btn-sm my-auto border">
  48 + <i class="fa fa-minus" aria-hidden="true"></i>
  49 + </button>
  50 + </div>
  51 + </div>
  52 + </div>
  53 +
36 54 </div>
37 55 </div>
38 56 </div>
... ... @@ -47,4 +65,4 @@
47 65 </div>
48 66 </div>
49 67  
50 68 -</div>
  69 +</div>
51 70 \ No newline at end of file
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ 103858e
1   -import { Component, OnInit, Input } from '@angular/core';
  1 +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 2 import { PopoverDirective } from 'ngx-bootstrap';
  3 +import { Producto } from 'src/app/wrappers/producto';
3 4 import { Sinonimo } from 'src/app/wrappers/sinonimo';
4 5  
5 6 @Component({
... ... @@ -12,21 +13,28 @@ export class PopoverSinonimosComponent implements OnInit {
12 13 //Directiva del popover, para poder cerrarlo desde este componente
13 14 @Input() popover: PopoverDirective;
14 15 @Input() popoverContent: Sinonimo[];
15   - sinonimoAelegir: Sinonimo;
  16 + @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
  17 + sinonimo: Sinonimo;
16 18  
17 19 constructor() { }
18 20  
19 21 ngOnInit() {
  22 +
  23 + //Seteo en la variable a emitir el sinonimo que sea padre
  24 + this.popoverContent.forEach(sinonimo => {
  25 + // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
  26 + })
20 27 }
21 28  
22 29 hidePopover() {
23 30  
  31 + this.sinonimoSeleccionado.emit(this.sinonimo);
24 32 this.popover.hide();
25 33 }
26 34  
27 35 setSinonimo(sinonimo: Sinonimo) {
28 36  
29   - this.sinonimoAelegir = sinonimo;
  37 + this.sinonimo = sinonimo;
30 38 }
31 39  
32 40 }
src/app/wrappers/producto.ts
Diff comments   View file @ 103858e
... ... @@ -90,4 +90,5 @@ export interface Producto {
90 90 categoria_selfservice: number;
91 91 cantidad?: number;
92 92 showCargarProducto?: boolean;
  93 + esPadre?: boolean;
93 94 }
src/app/wrappers/promocion.ts
Diff comments   View file @ 103858e
... ... @@ -7,4 +7,5 @@ export interface Promocion {
7 7 sinonimos: boolean;
8 8 sector: number,
9 9 codigo: number,
  10 + precioTotal? : number,
10 11 }
src/app/wrappers/sinonimo.ts
Diff comments   View file @ 103858e
  1 +import { Producto } from './producto';
  2 +
1 3 export interface Sinonimo {
2   - EMP: number;
3   - ID_SIN: number;
4   - SEC: number;
5   - COD: string;
6   - DET: string;
7   - E_HD: string[];
8   - C_HD: string[];
9   - CodSec: number;
10   - CodArt: number;
11   - DetArt: string;
12   - CodRub: number;
13   - Costo: number;
14   - PreNet: number;
15   - ImpInt: number;
16   - UniVen: number;
17   - FecCos: Date;
18   - UltAct: Date;
19   - CodPro: number;
20   - ExiDep: number;
21   - ExiVta: number;
22   - MinDep: number;
23   - MaxDep: number;
24   - MinPVE: number;
25   - MaxPVE: number;
26   - ENTTur: number;
27   - SINTur: number;
28   - SALTur: number;
29   - IvaSN: boolean;
30   - DepSN: boolean;
31   - RubMay: number;
32   - PreVen: number;
33   - IvaCO: number;
34   - TIP: string;
35   - IMPIVA: number;
36   - ENTADM: number;
37   - SALADM: number;
38   - CODIIN: number;
39   - PRO: boolean;
40   - FPP: boolean;
41   - ESS: boolean;
42   - FID: Date;
43   - NID: number;
44   - FIV: Date;
45   - NIV: number;
46   - COO: string;
47   - CAG: string;
48   - CAP: number;
49   - UTL: number;
50   - NHA: boolean;
51   - PID: boolean;
52   - PRV: number;
53   - PRD: number;
54   - ImpInt2: number;
55   - CLA: number;
56   - UNICAP: number;
57   - ELBPRO: string;
58   - PPP: number;
59   - ALI: number;
60   - BAL_TIPO: string;
61   - PER_MAY: boolean;
62   - ES_MAY: boolean;
63   - CLA_MAY: number;
64   - PME_CMP: string;
65   - USA_BAL: boolean;
66   - DET_LAR: string;
67   - ROTULO: string;
68   - REC_MANUAL: boolean;
69   - E_HD1: string;
70   - C_HD1: string;
71   - ImpInt3: number;
72   - FUA_MAE_YPF: Date;
73   - CPQ: number;
74   - EPQ: string;
75   - BPQ: number;
76   - PUPQ: number;
77   - CORVTO: boolean;
78   - CORVTO_COSTO: number;
79   - UTLFR: number;
80   - FAMILIA: number;
81   - ES_LUB: boolean;
82   - ES_FERT: boolean;
83   - AutoFac: boolean;
84   - LitrosPCD: number;
85   - LisPCD: number;
86   - id: number;
87   - ImpLey23966: boolean;
88   - es_bio: boolean;
89   - ExpArbaRev: boolean;
90   - ES_AGROQ: boolean;
91   - ES_PLAST: boolean;
92   - es_bio_por: string;
93   - ID_MARCA: number;
94   - ID_ATRB1: number;
95   - ID_ATRB2: number;
96   - ID_ART_REF: number;
97   - ILPC: boolean;
98   - CantAgrupar: number;
99   - E_HD2: string;
100   - PPV: number;
101   - PPD: number;
102   - MOD_DET: boolean;
103   - C_HD2: string;
104   - nombreImagen?: any;
105   - IMP_IMP_INT: boolean;
  4 +
  5 + ID_SIN: number,
  6 + descripcion: string,
  7 + productos: Producto[],
106 8 }
src/assets/scss/animation.scss
Diff comments   View file @ 103858e
... ... @@ -83,9 +83,8 @@
83 83 }
84 84  
85 85 .fade-left {
86   -
87   - -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
88   - animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  86 + -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  87 + animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
89 88 }
90 89  
91 90 @-webkit-keyframes fadeleft {
... ... @@ -121,3 +120,38 @@
121 120 opacity: 1;
122 121 }
123 122 }
  123 +
  124 +.fade-bottom {
  125 + -webkit-animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  126 + animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  127 +}
  128 +
  129 +@-webkit-keyframes fade-top {
  130 + 0% {
  131 + -webkit-transform: scaleY(0.4);
  132 + transform: scaleY(0.4);
  133 + -webkit-transform-origin: 100% 0%;
  134 + transform-origin: 100% 0%;
  135 + }
  136 + 100% {
  137 + -webkit-transform: scaleY(1);
  138 + transform: scaleY(1);
  139 + -webkit-transform-origin: 100% 0%;
  140 + transform-origin: 100% 0%;
  141 + }
  142 +}
  143 +
  144 +@keyframes fade-top {
  145 + 0% {
  146 + -webkit-transform: scaleY(0.4);
  147 + transform: scaleY(0.4);
  148 + -webkit-transform-origin: 100% 0%;
  149 + transform-origin: 100% 0%;
  150 + }
  151 + 100% {
  152 + -webkit-transform: scaleY(1);
  153 + transform: scaleY(1);
  154 + -webkit-transform-origin: 100% 0%;
  155 + transform-origin: 100% 0%;
  156 + }
  157 +}
... ... @@ -67,8 +67,8 @@ body {
67 67 border-radius: 10px;
68 68 height: 12px;
69 69 &:active {
70   - box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
71   - -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
  70 + box-shadow: inset 0 0 8px $primary;
  71 + -webkit-box-shadow: inset 0 0 8px $primary;
72 72 }
73 73 }
74 74 &::-webkit-scrollbar-corner {
... ... @@ -84,6 +84,10 @@ body {
84 84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
85 85 }
86 86  
  87 +.bg-primary-gradient-horizontal {
  88 + background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
  89 +}
  90 +
87 91 .icon-dim {
88 92 height: 40px !important;
89 93 width: auto !important;