Martin Macola / autoservicio

Download as
Browse Code »

Commit 66822ea9fe7a62155c321f916dd566f1421b00b2

Authored by Marcelo Puebla
1 parent ceb40c2a7d
Exists in master

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
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion'; 7 import { Promocion } from 'src/app/wrappers/promocion';
8 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 9
9 @Component({ 10 @Component({
10 selector: 'app-inicio', 11 selector: 'app-inicio',
11 templateUrl: './inicio.component.html', 12 templateUrl: './inicio.component.html',
12 styleUrls: ['./inicio.component.scss'] 13 styleUrls: ['./inicio.component.scss']
13 }) 14 })
14 export class InicioComponent implements OnInit { 15 export class InicioComponent implements OnInit {
15 16
16 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
17 private productoAcargar: Producto; 18 private productoAcargar: Producto;
18 private promoAcargar: Promocion; 19 private promoAcargar: Promocion;
19 private sinonimoAcargar: Producto; 20 private sinonimoAcargar: Sinonimo;
20 21
21 promociones: Promocion[] = []; 22 promociones: Promocion[] = [];
22 sinonimos: Producto[] = []; 23 sinonimos: Sinonimo[] = [];
23 apiUrl: string = appSettings.apiUrl 24 apiUrl: string = appSettings.apiUrl
24 25
25 constructor( 26 constructor(
26 private router: Router, 27 private router: Router,
27 private productoService: ProductoService) { } 28 private productoService: ProductoService) { }
28 29
29 ngOnInit() { 30 ngOnInit() {
30 31
31 this.productoAcargar = this.productoService.productoAcargar; 32 this.productoAcargar = this.productoService.productoAcargar;
32 this.getPromociones(); 33 this.getPromociones();
33 } 34 }
34 35
35 getPromociones() { 36 getPromociones() {
36 if (this.productoAcargar) { 37 if (this.productoAcargar) {
37 var sector = this.productoAcargar.CodSec; 38 var sector = this.productoAcargar.CodSec;
38 var codigo = this.productoAcargar.CodArt; 39 var codigo = this.productoAcargar.CodArt;
39 this.productoService.getPromocion(sector, codigo) 40 this.productoService.getPromocion(sector, codigo)
40 .subscribe((res: Promocion[]) => { 41 .subscribe((res: Promocion[]) => {
41 42
42 if (res.length === 0) { 43 if (res.length === 0) {
43 //Si no tiene promociones la cargará al carrito despues de un tiempo 44 //Si no tiene promociones la cargará al carrito despues de un tiempo
44 setTimeout(() => { 45 setTimeout(() => {
45 this.productoService.productos.push(this.productoAcargar); 46 this.productoService.productos.push(this.productoAcargar);
46 this.productoAcargar = undefined; 47 this.productoAcargar = undefined;
47 }, 2000) 48 }, 2000)
48 } else { 49 } else {
49 50
50 this.promociones = res; 51 this.promociones = res;
51 this.popoverDirective.show(); 52 this.popoverDirective.show();
52 } 53 }
53 }, error => { console.error(error); }) 54 }, error => { console.error(error); })
54 } 55 }
55 } 56 }
56 57
57 showPopover() { 58 showPopover() {
58 59
59 this.popoverDirective.show(); 60 this.popoverDirective.show();
60 } 61 }
61 62
62 private goPage(pageUrl) { 63 private goPage(pageUrl) {
63 64
64 this.router.navigate([pageUrl]); 65 this.router.navigate([pageUrl]);
65 } 66 }
66 67
67 deshacerCarga() { 68 deshacerCarga() {
68 69
69 if (this.sinonimoAcargar || this.sinonimos.length > 0) { 70 if (this.sinonimoAcargar || this.sinonimos.length > 0) {
70 this.sinonimos = []; 71 this.sinonimos = [];
71 this.sinonimoAcargar = undefined; 72 this.sinonimoAcargar = undefined;
72 this.popoverDirective.hide(); 73 this.popoverDirective.hide();
73 } 74 }
74 75
75 if (this.promoAcargar) { 76 if (this.promoAcargar) {
76 this.promoAcargar = undefined; 77 this.promoAcargar = undefined;
77 this.popoverDirective.show(); 78 this.popoverDirective.show();
78 } else { 79 } else {
79 this.productoAcargar = undefined; 80 this.productoAcargar = undefined;
80 this.promociones = []; 81 this.promociones = [];
81 this.popoverDirective.hide(); 82 this.popoverDirective.hide();
82 } 83 }
83 } 84 }
84 85
85 promoSeleccionada($event: Promocion) { 86 promoSeleccionada($event: Promocion) {
86 87
87 this.promoAcargar = $event; 88 this.promoAcargar = $event;
88 this.popoverDirective.hide(); 89 this.popoverDirective.hide();
89 if (this.promoAcargar.sinonimos) { 90 if (this.promoAcargar.sinonimos) {
90 var sector = this.promoAcargar.sector; 91 var sector = this.promoAcargar.sector;
91 var codigo = this.promoAcargar.codigo; 92 var codigo = this.promoAcargar.codigo;
92 this.productoService.getPromocionSinonimos(sector, codigo) 93 this.productoService.getPromocionSinonimos(sector, codigo)
93 .subscribe((res: Producto[]) => { 94 .subscribe((res: Sinonimo[]) => {
94 res.forEach(resSinonimo => { 95 res.forEach(resSinonimo => {
95 this.promoAcargar.productos.forEach(producto => { 96 resSinonimo.productos.forEach(productoSinonimo => {
96 if (producto.id === resSinonimo.id) { 97 this.promoAcargar.productos.forEach(productoPromo => {
97 resSinonimo.esPadre = true; 98 if (productoPromo.id === productoSinonimo.id) {
98 } 99 productoSinonimo.esPadre = true;
99 }); 100 }
101 });
102
103 })
100 }) 104 })
101 this.sinonimos = res; 105 this.sinonimos = res;
102 this.showPopover(); 106 this.showPopover();
103 }) 107 })
104 } 108 }
105 } 109 }
106 110
107 sinonimoSeleccionado($event: Producto) { 111 sinonimoSeleccionado($event: Sinonimo) {
108 112
113 console.log($event);
109 this.sinonimoAcargar = $event; 114 this.sinonimoAcargar = $event;
110 } 115 }
111 116
112 } 117 }
113 118
src/app/components/popover-sinonimos/popover-sinonimos.component.html
Diff comments   View file @ 66822ea
1 <div class="card-body fade-left"> 1 <div class="card-body fade-left">
2 2
3 <div class="row m-0"> 3 <div class="row m-0">
4 <div class="col text-left"> 4 <div class="col text-left">
5 <p class="h4 card-title"> 5 <p class="h4 card-title">
6 Personalice su pedido 6 Personalice su pedido
7 </p> 7 </p>
8 </div> 8 </div>
9 </div> 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 <div class="row m-0 overflow-scroll popover-size pr-2 my-2"> 11 <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
20 <div class="col"> 12 <div class="col">
21 <div class="row" *ngFor="let sinonimo of popoverContent"> 13 <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
22 <div class="col pl-4 h6"> 14 <div class="col">
23 <div class="custom-control custom-radio"> 15
24 <input 16 <div class="row m-0">
25 type="radio" 17 <div class="col text-left">
26 [id]="sinonimo.id" 18 <p class="h5 card-title">
27 name="sinonimoOpciones" 19 Elija una opción
28 class="custom-control-input" 20 </p>
29 (click)="setSinonimo(sinonimo)" 21 </div>
30 [checked]="sinonimo.esPadre">
31 <label
32 class="font-weight-normal custom-control-label"
33 [for]="sinonimo.id">
34 {{sinonimo.DetArt}}
35 </label>
36 </div> 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 </div> 54 </div>
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
Diff comments   View file @ 66822ea
1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 1 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Sinonimo } from 'src/app/wrappers/sinonimo';
4 5
5 @Component({ 6 @Component({
6 selector: 'app-popover-sinonimos', 7 selector: 'app-popover-sinonimos',
7 templateUrl: './popover-sinonimos.component.html', 8 templateUrl: './popover-sinonimos.component.html',
8 styleUrls: ['./popover-sinonimos.component.scss'] 9 styleUrls: ['./popover-sinonimos.component.scss']
9 }) 10 })
10 export class PopoverSinonimosComponent implements OnInit { 11 export class PopoverSinonimosComponent implements OnInit {
11 12
12 //Directiva del popover, para poder cerrarlo desde este componente 13 //Directiva del popover, para poder cerrarlo desde este componente
13 @Input() popover: PopoverDirective; 14 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Producto[]; 15 @Input() popoverContent: Sinonimo[];
15 @Output() sinonimoSeleccionado = new EventEmitter<Producto>(); 16 @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
16 sinonimo: Producto; 17 sinonimo: Sinonimo;
17 18
18 constructor() { } 19 constructor() { }
19 20
20 ngOnInit() { 21 ngOnInit() {
21 22
22 //Seteo en la variable a emitir el sinonimo que sea padre 23 //Seteo en la variable a emitir el sinonimo que sea padre
23 this.popoverContent.forEach(sinonimo => { 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
28 hidePopover() { 29 hidePopover() {
29 30
30 this.sinonimoSeleccionado.emit(this.sinonimo); 31 this.sinonimoSeleccionado.emit(this.sinonimo);
31 this.popover.hide(); 32 this.popover.hide();
32 } 33 }
33 34
34 setSinonimo(sinonimo: Producto) { 35 setSinonimo(sinonimo: Sinonimo) {
35 36
36 this.sinonimo = sinonimo; 37 this.sinonimo = sinonimo;
37 } 38 }
38 39
39 } 40 }
40 41
src/app/wrappers/sinonimo.ts
Diff comments   View file @ 66822ea
File was created 1 import { Producto } from './producto';
2
3 export interface Sinonimo {
4
5 ID_SIN: number,
6 descripcion: string,
7 productos: Producto[],
8 }
9
src/assets/scss/animation.scss
Diff comments   View file @ 66822ea
1 .fade-in { 1 .fade-in {
2 margin-top: 25px; 2 margin-top: 25px;
3 font-size: 21px; 3 font-size: 21px;
4 text-align: center; 4 text-align: center;
5 animation: fadein 1s; 5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */ 6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */ 7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */ 8 -o-animation: fadein 1s; /* Opera */
9 } 9 }
10 10
11 @keyframes fadein { 11 @keyframes fadein {
12 from { 12 from {
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 to { 15 to {
16 opacity: 1; 16 opacity: 1;
17 } 17 }
18 } 18 }
19 19
20 @-moz-keyframes fadein { 20 @-moz-keyframes fadein {
21 /* Firefox */ 21 /* Firefox */
22 from { 22 from {
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 to { 25 to {
26 opacity: 1; 26 opacity: 1;
27 } 27 }
28 } 28 }
29 29
30 @-webkit-keyframes fadein { 30 @-webkit-keyframes fadein {
31 /* Safari and Chrome */ 31 /* Safari and Chrome */
32 from { 32 from {
33 opacity: 0; 33 opacity: 0;
34 } 34 }
35 to { 35 to {
36 opacity: 1; 36 opacity: 1;
37 } 37 }
38 } 38 }
39 39
40 .fade-right { 40 .fade-right {
41 margin-top: 25px; 41 margin-top: 25px;
42 font-size: 21px; 42 font-size: 21px;
43 text-align: center; 43 text-align: center;
44 animation: faderight 1s; 44 animation: faderight 1s;
45 -moz-animation: faderight 1s; /* Firefox */ 45 -moz-animation: faderight 1s; /* Firefox */
46 -webkit-animation: faderight 1s; /* Safari and Chrome */ 46 -webkit-animation: faderight 1s; /* Safari and Chrome */
47 -o-animation: faderight 1s; /* Opera */ 47 -o-animation: faderight 1s; /* Opera */
48 } 48 }
49 49
50 @keyframes faderight { 50 @keyframes faderight {
51 from { 51 from {
52 opacity: 0; 52 opacity: 0;
53 transform: translateX(-20px); 53 transform: translateX(-20px);
54 } 54 }
55 to { 55 to {
56 opacity: 1; 56 opacity: 1;
57 transform: translateX(0); 57 transform: translateX(0);
58 } 58 }
59 } 59 }
60 60
61 @-moz-keyframes faderight { 61 @-moz-keyframes faderight {
62 /* Firefox */ 62 /* Firefox */
63 from { 63 from {
64 opacity: 0; 64 opacity: 0;
65 -moz-transform: translateX(-20px); 65 -moz-transform: translateX(-20px);
66 } 66 }
67 to { 67 to {
68 opacity: 1; 68 opacity: 1;
69 -moz-transform: translateX(0); 69 -moz-transform: translateX(0);
70 } 70 }
71 } 71 }
72 72
73 @-webkit-keyframes faderight { 73 @-webkit-keyframes faderight {
74 /* Safari and Chrome */ 74 /* Safari and Chrome */
75 from { 75 from {
76 opacity: 0; 76 opacity: 0;
77 -webkit-transform: translateX(-20px); 77 -webkit-transform: translateX(-20px);
78 } 78 }
79 to { 79 to {
80 opacity: 1; 80 opacity: 1;
81 -webkit-transform: translateX(0); 81 -webkit-transform: translateX(0);
82 } 82 }
83 } 83 }
84 84
85 .fade-left { 85 .fade-left {
86 86 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
87 -webkit-animation: fadeleft .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;
88 animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
89 } 88 }
90 89
91 @-webkit-keyframes fadeleft { 90 @-webkit-keyframes fadeleft {
92 0% { 91 0% {
93 -webkit-transform: scaleX(0); 92 -webkit-transform: scaleX(0);
94 transform: scaleX(0); 93 transform: scaleX(0);
95 -webkit-transform-origin: 100% 100%; 94 -webkit-transform-origin: 100% 100%;
96 transform-origin: 100% 100%; 95 transform-origin: 100% 100%;
97 opacity: 1; 96 opacity: 1;
98 } 97 }
99 100% { 98 100% {
100 -webkit-transform: scaleX(1); 99 -webkit-transform: scaleX(1);
101 transform: scaleX(1); 100 transform: scaleX(1);
102 -webkit-transform-origin: 100% 100%; 101 -webkit-transform-origin: 100% 100%;
103 transform-origin: 100% 100%; 102 transform-origin: 100% 100%;
104 opacity: 1; 103 opacity: 1;
105 } 104 }
106 } 105 }
107 106
108 @keyframes fadeleft { 107 @keyframes fadeleft {
109 0% { 108 0% {
110 -webkit-transform: scaleX(0); 109 -webkit-transform: scaleX(0);
111 transform: scaleX(0); 110 transform: scaleX(0);
112 -webkit-transform-origin: 100% 100%; 111 -webkit-transform-origin: 100% 100%;
113 transform-origin: 100% 100%; 112 transform-origin: 100% 100%;
114 opacity: 1; 113 opacity: 1;
115 } 114 }
116 100% { 115 100% {
117 -webkit-transform: scaleX(1); 116 -webkit-transform: scaleX(1);
118 transform: scaleX(1); 117 transform: scaleX(1);
119 -webkit-transform-origin: 100% 100%; 118 -webkit-transform-origin: 100% 100%;
120 transform-origin: 100% 100%; 119 transform-origin: 100% 100%;
121 opacity: 1; 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 }