Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 66822ea9fe7a62155c321f916dd566f1421b00b2

Authored by Marcelo Puebla
1 parent ceb40c2a7d
Exists in master and in 1 other branch validar_pve

Logica inicial para setear sinonimos

Showing 5 changed files with 106 additions and 41 deletions   Show diff stats
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 66822ea
... ... @@ -5,6 +5,7 @@ import { Producto } from 'src/app/wrappers/producto';
5 5 import { ProductoService } from 'src/app/services/producto.service';
6 6 import { Router } from '@angular/router';
7 7 import { Promocion } from 'src/app/wrappers/promocion';
  8 +import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 9  
9 10 @Component({
10 11 selector: 'app-inicio',
... ... @@ -16,10 +17,10 @@ export class InicioComponent implements OnInit {
16 17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
17 18 private productoAcargar: Producto;
18 19 private promoAcargar: Promocion;
19   - private sinonimoAcargar: Producto;
  20 + private sinonimoAcargar: Sinonimo;
20 21  
21 22 promociones: Promocion[] = [];
22   - sinonimos: Producto[] = [];
  23 + sinonimos: Sinonimo[] = [];
23 24 apiUrl: string = appSettings.apiUrl
24 25  
25 26 constructor(
... ... @@ -90,13 +91,16 @@ export class InicioComponent implements OnInit {
90 91 var sector = this.promoAcargar.sector;
91 92 var codigo = this.promoAcargar.codigo;
92 93 this.productoService.getPromocionSinonimos(sector, codigo)
93   - .subscribe((res: Producto[]) => {
  94 + .subscribe((res: Sinonimo[]) => {
94 95 res.forEach(resSinonimo => {
95   - this.promoAcargar.productos.forEach(producto => {
96   - if (producto.id === resSinonimo.id) {
97   - resSinonimo.esPadre = true;
98   - }
99   - });
  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 + })
100 104 })
101 105 this.sinonimos = res;
102 106 this.showPopover();
... ... @@ -104,8 +108,9 @@ export class InicioComponent implements OnInit {
104 108 }
105 109 }
106 110  
107   - sinonimoSeleccionado($event: Producto) {
  111 + sinonimoSeleccionado($event: Sinonimo) {
108 112  
  113 + console.log($event);
109 114 this.sinonimoAcargar = $event;
110 115 }
111 116  
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 66822ea
... ... @@ -8,32 +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.id"
27   - name="sinonimoOpciones"
28   - class="custom-control-input"
29   - (click)="setSinonimo(sinonimo)"
30   - [checked]="sinonimo.esPadre">
31   - <label
32   - class="font-weight-normal custom-control-label"
33   - [for]="sinonimo.id">
34   - {{sinonimo.DetArt}}
35   - </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>
36 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 +
37 54 </div>
38 55 </div>
39 56 </div>
... ... @@ -48,4 +65,4 @@
48 65 </div>
49 66 </div>
50 67  
51 68 -</div>
  69 +</div>
52 70 \ No newline at end of file
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ 66822ea
1 1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 2 import { PopoverDirective } from 'ngx-bootstrap';
3 3 import { Producto } from 'src/app/wrappers/producto';
  4 +import { Sinonimo } from 'src/app/wrappers/sinonimo';
4 5  
5 6 @Component({
6 7 selector: 'app-popover-sinonimos',
... ... @@ -11,9 +12,9 @@ export class PopoverSinonimosComponent implements OnInit {
11 12  
12 13 //Directiva del popover, para poder cerrarlo desde este componente
13 14 @Input() popover: PopoverDirective;
14   - @Input() popoverContent: Producto[];
15   - @Output() sinonimoSeleccionado = new EventEmitter<Producto>();
16   - sinonimo: Producto;
  15 + @Input() popoverContent: Sinonimo[];
  16 + @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
  17 + sinonimo: Sinonimo;
17 18  
18 19 constructor() { }
19 20  
... ... @@ -21,7 +22,7 @@ export class PopoverSinonimosComponent implements OnInit {
21 22  
22 23 //Seteo en la variable a emitir el sinonimo que sea padre
23 24 this.popoverContent.forEach(sinonimo => {
24   - this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
  25 + // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
25 26 })
26 27 }
27 28  
... ... @@ -31,7 +32,7 @@ export class PopoverSinonimosComponent implements OnInit {
31 32 this.popover.hide();
32 33 }
33 34  
34   - setSinonimo(sinonimo: Producto) {
  35 + setSinonimo(sinonimo: Sinonimo) {
35 36  
36 37 this.sinonimo = sinonimo;
37 38 }
src/app/wrappers/sinonimo.ts
Diff comments   View file @ 66822ea
... ... @@ -0,0 +1,8 @@
  1 +import { Producto } from './producto';
  2 +
  3 +export interface Sinonimo {
  4 +
  5 + ID_SIN: number,
  6 + descripcion: string,
  7 + productos: Producto[],
  8 +}
src/assets/scss/animation.scss
Diff comments   View file @ 66822ea
... ... @@ -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 +}