Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 411952c8b2e2c6d312aadc433b938173ea666a0d

Authored by Marcelo Puebla
1 parent a8a760b735
Exists in develop

Fix 

En seleccion de sinonimos
Showing 5 changed files with 85 additions and 66 deletions   Show diff stats
1 1 {
2 2 "name": "autoservicio-axion",
3   - "version": "0.0.1",
  3 + "version": "1.0.0",
4 4 "lockfileVersion": 1,
5 5 "requires": true,
6 6 "dependencies": {
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 411952c
... ... @@ -8,60 +8,57 @@
8 8 class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
9 9 src="assets/img/icono-cancelar-blanco.svg">
10 10 <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
11   - <!-- <div class="col-5 pt-4 pr-0 text-right">
12   - <p *ngFor="let s of sinonimos; let i = index">
13   - <span
14   - class="btn-effect"
15   - (click)="scrollTo(i)">
16   - Ir a opción {{i+1}}
17   - <i class="far fa-hand-point-left"></i>
18   - </span>
19   - </p>
20   - </div> -->
21 11 </div>
22 12  
23   - <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
24   - <div class="row mx-0 mb-2" *ngFor="let articulo of sinonimos[currentIndex].productos">
25   - <div class="col-7 p-0 my-auto h6 text-right">
26   - <p class="m-0 font-weight-normal">
27   - {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
28   - </p>
29   - </div>
30   - <div class="col-5 pr-0">
31   - <div class="row mx-0 justify-content-between border border-white badge-pill">
32   - <!-- BOTON MENOS -->
33   - <div class="col-auto px-0 my-auto">
34   - <img
35   - draggable="false"
36   - ondragstart="return false;"
37   - (contextmenu)="false"
38   - class="d-block ml-auto py-2 icon-15 btn-effect"
39   - src="assets/img/menos-blanco.svg"
40   - (click)="restarCantidadSinonimo(articulo, currentIndex)">
41   - </div>
42   - <!-- CANTIDAD -->
43   - <div class="col px-0 my-auto text-white text-center">
44   - <p><small>{{articulo.cantidad}}</small></p>
45   - </div>
46   - <!-- BOTON MAS -->
47   - <div class="col-auto px-0 my-auto">
48   - <img
49   - draggable="false"
50   - ondragstart="return false;"
51   - (contextmenu)="false"
52   - class="d-block ml-auto py-2 icon-15 btn-effect"
53   - src="assets/img/mas-blanco.svg"
54   - (click)="sumarCantidadSinonimo(articulo, currentIndex)">
  13 + <div class="modal-body my-2">
  14 + <p class="mb-2 h4">Opcion {{currentIndex+1}}</p>
  15 + <p class="mb-2 h5">Cantidad restante {{sinonimos[currentIndex].cantidadRestante}}</p>
  16 + <div class="lista-sinonimos scroll-y-visible">
  17 + <div
  18 + class="row mx-0 mb-2 fade-in-left"
  19 + *ngFor="let articulo of sinonimos[currentIndex].productos">
  20 + <div class="col-8 p-0 my-auto h6 text-right">
  21 + <p class="m-0 font-weight-normal">
  22 + {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
  23 + </p>
  24 + </div>
  25 + <div class="col-4">
  26 + <div class="row mx-0 justify-content-between border border-white badge-pill">
  27 + <!-- BOTON MENOS -->
  28 + <div class="col-auto px-0 my-auto">
  29 + <img
  30 + draggable="false"
  31 + ondragstart="return false;"
  32 + (contextmenu)="false"
  33 + class="d-block ml-auto py-2 icon-30 btn-effect"
  34 + src="assets/img/menos-blanco.svg"
  35 + (click)="restarCantidadSinonimo(articulo, currentIndex)">
  36 + </div>
  37 + <!-- CANTIDAD -->
  38 + <div class="col px-0 my-auto text-white text-center">
  39 + <p>{{articulo.cantidad}}</p>
  40 + </div>
  41 + <!-- BOTON MAS -->
  42 + <div class="col-auto px-0 my-auto">
  43 + <img
  44 + draggable="false"
  45 + ondragstart="return false;"
  46 + (contextmenu)="false"
  47 + class="d-block ml-auto py-2 icon-30 btn-effect"
  48 + src="assets/img/mas-blanco.svg"
  49 + (click)="sumarCantidadSinonimo(articulo, currentIndex)">
  50 + </div>
55 51 </div>
56 52 </div>
57 53 </div>
58 54 </div>
  55 +
59 56 </div>
60 57  
61 58 <div class="modal-footer">
62 59 <div
63 60 *ngIf="currentIndex != 0 && sinonimos.length > 1"
64   - class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto"
  61 + class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto fade-in-right"
65 62 (click)="currentIndex = currentIndex-1">
66 63 <img
67 64 draggable="false"
... ... @@ -72,8 +69,8 @@
72 69 VOLVER
73 70 </div>
74 71 <div
75   - *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
76   - class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
  72 + *ngIf="currentIndex != sinonimos.length-1"
  73 + class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto fade-in-left"
77 74 (click)="currentIndex = currentIndex+1">
78 75 SIGUIENTE
79 76 <img
... ... @@ -86,7 +83,7 @@
86 83 <div
87 84 [ngClass]="validate()"
88 85 *ngIf="currentIndex == sinonimos.length-1"
89   - class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
  86 + class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
90 87 (click)="continue()">
91 88 CONTINUAR
92 89 <img
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 411952c
... ... @@ -15,7 +15,6 @@ export class SinonimoComponent implements OnInit {
15 15 sinonimos: ISinonimo[] = [];
16 16 isValid: boolean;
17 17 onClose: Subject<any>;
18   - articulosSelected: IArticulo[] = [];
19 18 articulo: IArticulo;
20 19 isSinonimoSelected = false;
21 20 currentIndex = 0;
... ... @@ -25,7 +24,6 @@ export class SinonimoComponent implements OnInit {
25 24 private articuloService: ArticuloService,
26 25 ) {
27 26 this.onClose = new Subject();
28   - this.articulosSelected.length = this.sinonimos.length;
29 27 }
30 28  
31 29 ngOnInit() {
... ... @@ -36,22 +34,13 @@ export class SinonimoComponent implements OnInit {
36 34 }
37 35 }
38 36  
39   - selectSinonimo(index: number, articulo: IArticulo) {
40   - for (const a of this.sinonimos[index].productos) {
41   - a.seleccionado = false;
42   - }
43   - articulo.seleccionado = true;
44   - this.articulosSelected[index] = articulo;
45   - }
46   -
47 37 validate() {
48 38 this.isValid = true;
49 39 for (const s of this.sinonimos) {
50   - for (const a of s.productos) {
51   - this.isValid = (!a.seleccionado) ? false : true;
52   - if (this.isValid) break;
  40 + if (s.cantidadRestante > 0) {
  41 + this.isValid = false;
  42 + break;
53 43 }
54   - if (!this.isValid) break;
55 44 }
56 45 return !this.isValid ? 'disabled' : 'btn-effect';
57 46 }
... ... @@ -63,10 +52,10 @@ export class SinonimoComponent implements OnInit {
63 52 const ID_SINS = [];
64 53 const observables = [];
65 54  
66   - for (const articulo of this.articulosSelected) {
67   - ID_SINS.push(articulo.ID_SIN);
68   - observables.push(this.articuloService.getById(articulo.id));
69   - }
  55 + // for (const articulo of this.articulosSelected) {
  56 + // ID_SINS.push(articulo.ID_SIN);
  57 + // observables.push(this.articuloService.getById(articulo.id));
  58 + // }
70 59  
71 60 forkJoin(observables)
72 61 .subscribe((res: IArticulo[]) => {
src/scss/animations.scss
Diff comments   View file @ 411952c
... ... @@ -124,6 +124,39 @@
124 124 }
125 125  
126 126 /*
  127 + * animation fade-in-right
  128 + */
  129 +.fade-in-right {
  130 + -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  131 + animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  132 +}
  133 +
  134 +@-webkit-keyframes fade-in-right {
  135 + 0% {
  136 + -webkit-transform: translateX(50px);
  137 + transform: translateX(50px);
  138 + opacity: 0;
  139 + }
  140 + 100% {
  141 + -webkit-transform: translateX(0);
  142 + transform: translateX(0);
  143 + opacity: 1;
  144 + }
  145 +}
  146 +@keyframes fade-in-right {
  147 + 0% {
  148 + -webkit-transform: translateX(50px);
  149 + transform: translateX(50px);
  150 + opacity: 0;
  151 + }
  152 + 100% {
  153 + -webkit-transform: translateX(0);
  154 + transform: translateX(0);
  155 + opacity: 1;
  156 + }
  157 +}
  158 +
  159 +/*
127 160 * animation swing-in-top-fwd
128 161 */
129 162 .swing-in-top-fwd {
... ... @@ -87,7 +87,7 @@ p {
87 87 }
88 88  
89 89 .disabled {
90   - opacity: 0.5;
  90 + background-color: hsla(0, 0%, 100%, 0.4) !important;
91 91 }
92 92  
93 93 .modal-content.media-pantalla {