From 66822ea9fe7a62155c321f916dd566f1421b00b2 Mon Sep 17 00:00:00 2001 From: mpuebla Date: Fri, 16 Aug 2019 09:37:01 -0300 Subject: [PATCH] Logica inicial para setear sinonimos --- src/app/components/inicio/inicio.component.ts | 23 +++++--- .../popover-sinonimos.component.html | 65 ++++++++++++++-------- .../popover-sinonimos.component.ts | 11 ++-- src/app/wrappers/sinonimo.ts | 8 +++ src/assets/scss/animation.scss | 40 ++++++++++++- 5 files changed, 106 insertions(+), 41 deletions(-) create mode 100644 src/app/wrappers/sinonimo.ts diff --git a/src/app/components/inicio/inicio.component.ts b/src/app/components/inicio/inicio.component.ts index 96be6b9..91ea6ae 100644 --- a/src/app/components/inicio/inicio.component.ts +++ b/src/app/components/inicio/inicio.component.ts @@ -5,6 +5,7 @@ import { Producto } from 'src/app/wrappers/producto'; import { ProductoService } from 'src/app/services/producto.service'; import { Router } from '@angular/router'; import { Promocion } from 'src/app/wrappers/promocion'; +import { Sinonimo } from 'src/app/wrappers/sinonimo'; @Component({ selector: 'app-inicio', @@ -16,10 +17,10 @@ export class InicioComponent implements OnInit { @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; private productoAcargar: Producto; private promoAcargar: Promocion; - private sinonimoAcargar: Producto; + private sinonimoAcargar: Sinonimo; promociones: Promocion[] = []; - sinonimos: Producto[] = []; + sinonimos: Sinonimo[] = []; apiUrl: string = appSettings.apiUrl constructor( @@ -90,13 +91,16 @@ export class InicioComponent implements OnInit { var sector = this.promoAcargar.sector; var codigo = this.promoAcargar.codigo; this.productoService.getPromocionSinonimos(sector, codigo) - .subscribe((res: Producto[]) => { + .subscribe((res: Sinonimo[]) => { res.forEach(resSinonimo => { - this.promoAcargar.productos.forEach(producto => { - if (producto.id === resSinonimo.id) { - resSinonimo.esPadre = true; - } - }); + resSinonimo.productos.forEach(productoSinonimo => { + this.promoAcargar.productos.forEach(productoPromo => { + if (productoPromo.id === productoSinonimo.id) { + productoSinonimo.esPadre = true; + } + }); + + }) }) this.sinonimos = res; this.showPopover(); @@ -104,8 +108,9 @@ export class InicioComponent implements OnInit { } } - sinonimoSeleccionado($event: Producto) { + sinonimoSeleccionado($event: Sinonimo) { + console.log($event); this.sinonimoAcargar = $event; } diff --git a/src/app/components/popover-sinonimos/popover-sinonimos.component.html b/src/app/components/popover-sinonimos/popover-sinonimos.component.html index 42a0a71..b158ad0 100644 --- a/src/app/components/popover-sinonimos/popover-sinonimos.component.html +++ b/src/app/components/popover-sinonimos/popover-sinonimos.component.html @@ -8,32 +8,49 @@ -
-
-

- Elija una opción -

-
-
-
-
-
-
- - +
+
+ +
+
+

+ Elija una opción +

+
+ +
+
+
+ + +
+
+
+
+ +
+ {{producto.cantidad}} +
+ +
+
+
+
@@ -48,4 +65,4 @@
-
+
\ No newline at end of file diff --git a/src/app/components/popover-sinonimos/popover-sinonimos.component.ts b/src/app/components/popover-sinonimos/popover-sinonimos.component.ts index 4f4b09a..78dadb6 100644 --- a/src/app/components/popover-sinonimos/popover-sinonimos.component.ts +++ b/src/app/components/popover-sinonimos/popover-sinonimos.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; import { PopoverDirective } from 'ngx-bootstrap'; import { Producto } from 'src/app/wrappers/producto'; +import { Sinonimo } from 'src/app/wrappers/sinonimo'; @Component({ selector: 'app-popover-sinonimos', @@ -11,9 +12,9 @@ export class PopoverSinonimosComponent implements OnInit { //Directiva del popover, para poder cerrarlo desde este componente @Input() popover: PopoverDirective; - @Input() popoverContent: Producto[]; - @Output() sinonimoSeleccionado = new EventEmitter(); - sinonimo: Producto; + @Input() popoverContent: Sinonimo[]; + @Output() sinonimoSeleccionado = new EventEmitter(); + sinonimo: Sinonimo; constructor() { } @@ -21,7 +22,7 @@ export class PopoverSinonimosComponent implements OnInit { //Seteo en la variable a emitir el sinonimo que sea padre this.popoverContent.forEach(sinonimo => { - this.sinonimo = sinonimo.esPadre ? sinonimo : undefined; + // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined; }) } @@ -31,7 +32,7 @@ export class PopoverSinonimosComponent implements OnInit { this.popover.hide(); } - setSinonimo(sinonimo: Producto) { + setSinonimo(sinonimo: Sinonimo) { this.sinonimo = sinonimo; } diff --git a/src/app/wrappers/sinonimo.ts b/src/app/wrappers/sinonimo.ts new file mode 100644 index 0000000..2c93f4e --- /dev/null +++ b/src/app/wrappers/sinonimo.ts @@ -0,0 +1,8 @@ +import { Producto } from './producto'; + +export interface Sinonimo { + + ID_SIN: number, + descripcion: string, + productos: Producto[], +} diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss index 7e18cd3..364fbb4 100644 --- a/src/assets/scss/animation.scss +++ b/src/assets/scss/animation.scss @@ -83,9 +83,8 @@ } .fade-left { - - -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; - animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @-webkit-keyframes fadeleft { @@ -121,3 +120,38 @@ opacity: 1; } } + +.fade-bottom { + -webkit-animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; +} + +@-webkit-keyframes fade-top { + 0% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } +} + +@keyframes fade-top { + 0% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } +} -- 1.9.1