Commit 0197afc4cc4461318fa312b788f8845899625fda

Authored by Marcelo Puebla
1 parent 5b96c07780
Exists in develop

Fix

En logica de stock
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 align-items-end" 5 <div class="row mx-0 align-items-end"
6 [ngClass]="boxCarrito.classList.contains('media-pantalla') 6 [ngClass]="boxCarrito.classList.contains('media-pantalla')
7 ? 'h-68' : 'h-80'"> 7 ? 'h-68' : 'h-80'">
8 <!-- CABECERA --> 8 <!-- CABECERA -->
9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
10 <div class="col-12 p-2 align-self-center"> 10 <div class="col-12 p-2 align-self-center">
11 <div class="px-3"> 11 <div class="px-3">
12 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 12 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <!-- CUERPO --> 16 <!-- CUERPO -->
17 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 17 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
18 <div class="col-12 h-100 px-0 py-3"> 18 <div class="col-12 h-100 px-0 py-3">
19 <div class="row mx-0 h-100"> 19 <div class="row mx-0 h-100">
20 <app-filtro-categorias 20 <app-filtro-categorias
21 class="col-5 col-sm-3 col-xl-2 h-100" 21 class="col-5 col-sm-3 col-xl-2 h-100"
22 #filtroCategorias 22 #filtroCategorias
23 (getProductos)="getProductos()" 23 (getProductos)="getProductos()"
24 (setProductos)="setProductos()" 24 (setProductos)="setProductos()"
25 (filterItems)="filterItems()"> 25 (filterItems)="filterItems()">
26 </app-filtro-categorias> 26 </app-filtro-categorias>
27 <!-- LISTA DE ARTICULOS --> 27 <!-- LISTA DE ARTICULOS -->
28 <div 28 <div
29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
30 (scroll)="scrollEvent($event)"> 30 (scroll)="scrollEvent($event)">
31 <!-- SPINNER --> 31 <!-- SPINNER -->
32 <div 32 <div
33 class="d-flex justify-content-center" 33 class="d-flex justify-content-center"
34 *ngIf="loading"> 34 *ngIf="loading">
35 <div class="spinner-border text-primary mt-5" role="status"> 35 <div class="spinner-border text-primary mt-5" role="status">
36 <span class="sr-only">Loading...</span> 36 <span class="sr-only">Loading...</span>
37 </div> 37 </div>
38 </div> 38 </div>
39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
40 <!-- ARTICULO --> 40 <!-- ARTICULO -->
41 <div 41 <div
42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;" 42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
43 class="col px-2 my-1 my-md-3 h-auto"> 43 class="col px-2 my-1 my-md-3 h-auto">
44 <div 44 <div
45 class="swing-in-top-fwd btn-effect card h-auto" 45 class="swing-in-top-fwd btn-effect card h-auto"
46 (click)="selectArticulo(articulo)"> 46 (click)="selectArticulo(articulo)">
47 <img 47 <img
48 draggable="false" 48 draggable="false"
49 ondragstart="return false;" 49 ondragstart="return false;"
50 (contextmenu)="false" 50 (contextmenu)="false"
51 *ngIf="articulo.ExiVta < 1" 51 *ngIf="articulo.ExiVta < 1"
52 class="position-fixed right-0" 52 class="w-50 position-fixed right-0"
53 src="assets/img/sin-stock.svg"> 53 src="assets/img/sin-stock.svg">
54 <img 54 <img
55 draggable="false" 55 draggable="false"
56 ondragstart="return false;" 56 ondragstart="return false;"
57 (contextmenu)="false" 57 (contextmenu)="false"
58 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 58 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
59 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 59 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
60 class="card-img-top w-100 h-auto h-md-55 rounded-sm"> 60 class="card-img-top w-100 h-auto h-md-55 rounded-sm">
61 <div class="row mx-0 py-1 h-auto justify-content-center"> 61 <div class="row mx-0 py-1 h-auto justify-content-center">
62 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60"> 62 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
63 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 63 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
64 </p> 64 </p>
65 <div class="col-12 px-1 align-self-end h-auto"> 65 <div class="col-12 px-1 align-self-end h-auto">
66 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 66 <div class="row mx-0 justify-content-between bg-primary badge-pill">
67 <div class="col px-0 align-self-center text-white text-right"> 67 <div class="col px-0 align-self-center text-white text-right">
68 {{articulo.PreVen | currency}} 68 {{articulo.PreVen | currency}}
69 </div> 69 </div>
70 <div class="col-5 px-0"> 70 <div class="col-5 px-0">
71 <img 71 <img
72 draggable="false" 72 draggable="false"
73 ondragstart="return false;" 73 ondragstart="return false;"
74 (contextmenu)="false" 74 (contextmenu)="false"
75 class="d-block ml-auto py-1 icon-30" 75 class="d-block ml-auto py-1 icon-30"
76 src="assets/img/ir.svg"> 76 src="assets/img/ir.svg">
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 <!-- BOTON VER MAS --> 84 <!-- BOTON VER MAS -->
85 <div class="row mx-0"> 85 <div class="row mx-0">
86 <div 86 <div
87 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 87 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
88 class="col-12 px-0 mb-2"> 88 class="col-12 px-0 mb-2">
89 <button 89 <button
90 (click)="increaseShow()" 90 (click)="increaseShow()"
91 class="btn btn-block btn-outline-primary"> 91 class="btn btn-block btn-outline-primary">
92 Ver Más 92 Ver Más
93 </button> 93 </button>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
99 </div> 99 </div>
100 <!-- FOOTER CARRITO DE COMPRAS --> 100 <!-- FOOTER CARRITO DE COMPRAS -->
101 <div class="row w-90 mx-auto h-auto justify-content-center"> 101 <div class="row w-90 mx-auto h-auto justify-content-center">
102 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 102 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
103 [ngClass]="boxCarrito.classList.contains('media-pantalla') 103 [ngClass]="boxCarrito.classList.contains('media-pantalla')
104 ? 'col-8' : 'col-12'" id="boxCarrito"> 104 ? 'col-8' : 'col-12'" id="boxCarrito">
105 <!-- CABECERA --> 105 <!-- CABECERA -->
106 <div class="row mx-0 h-15 border-bottom border-primary"> 106 <div class="row mx-0 h-15 border-bottom border-primary">
107 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 107 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
108 </div> 108 </div>
109 <!-- CUERPO --> 109 <!-- CUERPO -->
110 <div class="row h-85 mx-0 justify-content-around"> 110 <div class="row h-85 mx-0 justify-content-around">
111 <!-- BOTON SCROLL IZQUIERDA --> 111 <!-- BOTON SCROLL IZQUIERDA -->
112 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 112 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
113 <img 113 <img
114 draggable="false" 114 draggable="false"
115 ondragstart="return false;" 115 ondragstart="return false;"
116 (contextmenu)="false" 116 (contextmenu)="false"
117 class="icon-30 rotate-180-neg" 117 class="icon-30 rotate-180-neg"
118 src="assets/img/ir-fondo-color.svg" 118 src="assets/img/ir-fondo-color.svg"
119 (mousedown)="scrollX(templateCarrito, -100)" 119 (mousedown)="scrollX(templateCarrito, -100)"
120 (mouseup)="mouseup()" 120 (mouseup)="mouseup()"
121 (mouseleave)="mouseup()"> 121 (mouseleave)="mouseup()">
122 </div> 122 </div>
123 <!-- CARRITO --> 123 <!-- CARRITO -->
124 <div class="col-6 col-sm-8 col-lg-10 h-100"> 124 <div class="col-6 col-sm-8 col-lg-10 h-100">
125 <div 125 <div
126 #templateCarrito 126 #templateCarrito
127 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 127 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
128 (scroll)="scrollEvent($event)"> 128 (scroll)="scrollEvent($event)">
129 <!-- ARTICULOS --> 129 <!-- ARTICULOS -->
130 <div 130 <div
131 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 131 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
132 *ngFor="let articulo of articuloService.carrito; let i = index;" 132 *ngFor="let articulo of articuloService.carrito; let i = index;"
133 @EnterLeaveY> 133 @EnterLeaveY>
134 <img 134 <img
135 class="btn-effect icon-20 mr-2 position-absolute right-0" 135 class="btn-effect icon-20 mr-2 position-absolute right-0"
136 src="assets/img/icono-cancelar-color.svg" 136 src="assets/img/icono-cancelar-color.svg"
137 (click)="deleteArticulo(i)"> 137 (click)="deleteArticulo(i)">
138 <img 138 <img
139 draggable="false" 139 draggable="false"
140 ondragstart="return false;" 140 ondragstart="return false;"
141 (contextmenu)="false" 141 (contextmenu)="false"
142 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto" 142 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
143 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 143 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
144 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 144 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
145 <p class="d-block mt-auto text-center text-primary text-truncate"> 145 <p class="d-block mt-auto text-center text-primary text-truncate">
146 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 146 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
147 </p> 147 </p>
148 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 148 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
149 </div> 149 </div>
150 <!-- MENSAJE DE ADVERTENCIA --> 150 <!-- MENSAJE DE ADVERTENCIA -->
151 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 151 <div *ngIf="!articuloService.carrito.length" class="col h-100">
152 <p class="text-center py-5">No hay artículos en el carrito</p> 152 <p class="text-center py-5">No hay artículos en el carrito</p>
153 </div> 153 </div>
154 </div> 154 </div>
155 </div> 155 </div>
156 <!-- BOTON SCROLL DERECHA --> 156 <!-- BOTON SCROLL DERECHA -->
157 <div *ngIf="articuloService.carrito.length" 157 <div *ngIf="articuloService.carrito.length"
158 class="col-auto btn-effect h-20 align-self-center d-contents"> 158 class="col-auto btn-effect h-20 align-self-center d-contents">
159 <img 159 <img
160 draggable="false" 160 draggable="false"
161 ondragstart="return false;" 161 ondragstart="return false;"
162 (contextmenu)="false" 162 (contextmenu)="false"
163 class="icon-30" 163 class="icon-30"
164 src="assets/img/ir-fondo-color.svg" 164 src="assets/img/ir-fondo-color.svg"
165 (mousedown)="scrollX(templateCarrito, 100)" 165 (mousedown)="scrollX(templateCarrito, 100)"
166 (mouseup)="mouseup()" 166 (mouseup)="mouseup()"
167 (mouseleave)="mouseup()"> 167 (mouseleave)="mouseup()">
168 </div> 168 </div>
169 </div> 169 </div>
170 </div> 170 </div>
171 <!-- TOTAL--> 171 <!-- TOTAL-->
172 <div 172 <div
173 class="col-auto mt-2 ml-auto h-20"> 173 class="col-auto mt-2 ml-auto h-20">
174 <div class="row mx-0"> 174 <div class="row mx-0">
175 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div> 175 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
176 <div class="col-auto align-self-center bg-primary badge-pill"> 176 <div class="col-auto align-self-center bg-primary badge-pill">
177 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p> 177 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p>
178 </div> 178 </div>
179 </div> 179 </div>
180 </div> 180 </div>
181 181
182 <!-- VER CARRITO --> 182 <!-- VER CARRITO -->
183 <div 183 <div
184 class="col-auto px-0 h-20" 184 class="col-auto px-0 h-20"
185 *ngIf="articuloService.carrito.length" 185 *ngIf="articuloService.carrito.length"
186 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'"> 186 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'">
187 <div 187 <div
188 class="btn-effect col-auto px-0 align-self-center bg-white" 188 class="btn-effect col-auto px-0 align-self-center bg-white"
189 [routerLink]="['/carrito']"> 189 [routerLink]="['/carrito']">
190 <div class="row mx-0 bg-light"> 190 <div class="row mx-0 bg-light">
191 <div class="col-auto p-0 bg-primary"> 191 <div class="col-auto p-0 bg-primary">
192 <img 192 <img
193 draggable="false" 193 draggable="false"
194 ondragstart="return false;" 194 ondragstart="return false;"
195 (contextmenu)="false" 195 (contextmenu)="false"
196 class="p-2 icon-40" 196 class="p-2 icon-40"
197 src="assets/img/carrito.svg"> 197 src="assets/img/carrito.svg">
198 </div> 198 </div>
199 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 199 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
200 </div> 200 </div>
201 </div> 201 </div>
202 </div> 202 </div>
203 203
204 </div> 204 </div>
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13 import * as _ from 'lodash'; 13 import * as _ from 'lodash';
14 import { ANIMATIONS } from 'src/app/utils/animations'; 14 import { ANIMATIONS } from 'src/app/utils/animations';
15 import { NoStockComponent } from './no-stock/no-stock.component'; 15 import { NoStockComponent } from './no-stock/no-stock.component';
16 16
17 @Component({ 17 @Component({
18 selector: 'app-seleccion-articulos', 18 selector: 'app-seleccion-articulos',
19 templateUrl: './seleccion-articulos.component.html', 19 templateUrl: './seleccion-articulos.component.html',
20 styleUrls: ['./seleccion-articulos.component.scss'], 20 styleUrls: ['./seleccion-articulos.component.scss'],
21 animations: [ANIMATIONS.EnterLeaveY] 21 animations: [ANIMATIONS.EnterLeaveY]
22 }) 22 })
23 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { 23 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
24 loading = true; 24 loading = true;
25 timeoutHandler: any; 25 timeoutHandler: any;
26 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; 26 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
27 articulos: IArticulo[] = []; 27 articulos: IArticulo[] = [];
28 auxArticulos: IArticulo[] = []; 28 auxArticulos: IArticulo[] = [];
29 showQuantity = 100; 29 showQuantity = 100;
30 searchTerm = ''; 30 searchTerm = '';
31 ordenandoByVendidos = true; 31 ordenandoByVendidos = true;
32 modalRef: BsModalRef; 32 modalRef: BsModalRef;
33 total = 0; 33 total = 0;
34 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; 34 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
35 35
36 constructor( 36 constructor(
37 public articuloService: ArticuloService, 37 public articuloService: ArticuloService,
38 private sinonimoService: SinonimoService, 38 private sinonimoService: SinonimoService,
39 private modalService: BsModalService, 39 private modalService: BsModalService,
40 private inactiveScreen: InactiveScreenService, 40 private inactiveScreen: InactiveScreenService,
41 ) { } 41 ) { }
42 42
43 ngOnInit() { } 43 ngOnInit() { }
44 44
45 ngAfterViewInit(): void { 45 ngAfterViewInit(): void {
46 this.filtroCategorias.getCategorias(); 46 this.filtroCategorias.getCategorias();
47 this.mediaPantalla(); 47 this.mediaPantalla();
48 } 48 }
49 49
50 ngOnDestroy() { 50 ngOnDestroy() {
51 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 51 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
52 this.modalService.hide(i); 52 this.modalService.hide(i);
53 } 53 }
54 } 54 }
55 55
56 getProductos() { 56 getProductos() {
57 this.articuloService.getAll() 57 this.articuloService.getAll()
58 .subscribe((result: IArticulo[]) => { 58 .subscribe((result: IArticulo[]) => {
59 this.articuloService.setArticulosSinImagen(result); 59 this.articuloService.setArticulosSinImagen(result);
60 if (this.filtroCategorias.queMostrar === 'ordenar') { 60 if (this.filtroCategorias.queMostrar === 'ordenar') {
61 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { 61 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
62 const tempArticulos = result.filter((articulo: IArticulo) => { 62 const tempArticulos = result.filter((articulo: IArticulo) => {
63 return articulo.categoria_selfservice === categoria.id; 63 return articulo.categoria_selfservice === categoria.id;
64 }); 64 });
65 result = tempArticulos; 65 result = tempArticulos;
66 }); 66 });
67 } 67 }
68 localStorage.setItem('articulos', JSON.stringify(result)); 68 localStorage.setItem('articulos', JSON.stringify(result));
69 this.setProductos(); 69 this.setProductos();
70 }, (error) => { 70 }, (error) => {
71 console.error(error); 71 console.error(error);
72 }); 72 });
73 } 73 }
74 74
75 setProductos() { 75 setProductos() {
76 this.articulos = JSON.parse(localStorage.getItem('articulos')); 76 this.articulos = JSON.parse(localStorage.getItem('articulos'));
77 this.filterItems(); 77 this.filterItems();
78 this.loading = false; 78 this.loading = false;
79 } 79 }
80 80
81 filterItems() { 81 filterItems() {
82 if (this.filtroCategorias.categoriaActive === 0) { 82 if (this.filtroCategorias.categoriaActive === 0) {
83 this.auxArticulos = this.articulos; 83 this.auxArticulos = this.articulos;
84 return; 84 return;
85 } 85 }
86 this.auxArticulos = this.articulos.filter(x => { 86 this.auxArticulos = this.articulos.filter(x => {
87 return x.categoria_selfservice === this.filtroCategorias.categoriaActive; 87 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
88 }); 88 });
89 this.ordenar(); 89 this.ordenar();
90 } 90 }
91 91
92 ordenar() { 92 ordenar() {
93 if (this.ordenandoByVendidos) { 93 if (this.ordenandoByVendidos) {
94 this.auxArticulos.sort((a, b) => { 94 this.auxArticulos.sort((a, b) => {
95 return b.cantidadVendida - a.cantidadVendida; 95 return b.cantidadVendida - a.cantidadVendida;
96 }); 96 });
97 } 97 }
98 } 98 }
99 99
100 selectArticulo(articulo: IArticulo) { 100 selectArticulo(articulo: IArticulo) {
101 if (articulo.ExiVta < 1) { 101 if (articulo.ExiVta < 1) {
102 if (this.modalRef) return; 102 if (this.modalRef) return;
103 this.modalRef = this.modalService.show(NoStockComponent, { 103 this.modalRef = this.modalService.show(NoStockComponent, {
104 class: 'modal-dialog-centered', 104 class: 'modal-dialog-centered',
105 backdrop: false, 105 backdrop: false,
106 ignoreBackdropClick: true, 106 ignoreBackdropClick: true,
107 }); 107 });
108 this.modalRef.content.onClose 108 this.modalRef.content.onClose
109 .subscribe(() => this.modalRef = null); 109 .subscribe(() => this.modalRef = null);
110 } else {
111 this.getByID(articulo.id);
110 } 112 }
111 this.getByID(articulo.id);
112 } 113 }
113 114
114 getByID(id: number) { 115 getByID(id: number) {
115 this.articuloService.getById(id) 116 this.articuloService.getById(id)
116 .subscribe((res: IArticulo) => { 117 .subscribe((res: IArticulo) => {
117 if (res.FPP) { 118 if (res.FPP) {
118 this.openModalPromos(res); 119 this.openModalPromos(res);
119 } else { 120 } else {
120 this.getSinonimos(res); 121 this.getSinonimos(res);
121 } 122 }
122 }, err => console.error(err)); 123 }, err => console.error(err));
123 } 124 }
124 125
125 getSinonimos(articulo: IArticulo) { 126 getSinonimos(articulo: IArticulo) {
126 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 127 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
127 .subscribe((res: any[]) => { 128 .subscribe((res: any[]) => {
128 if (res.length) { 129 if (res.length) {
129 const sinonimos = []; 130 const sinonimos = [];
130 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); 131 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
131 Object.keys(gruposArticulos).forEach((key, i) => { 132 Object.keys(gruposArticulos).forEach((key, i) => {
132 sinonimos.push({ productos: gruposArticulos[key], }); 133 sinonimos.push({ productos: gruposArticulos[key], });
133 for (const a of articulo.productos) { 134 for (const a of articulo.productos) {
134 if (key === a.idSinonimo.toString()) { 135 if (key === a.idSinonimo.toString()) {
135 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad; 136 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad;
136 continue; 137 continue;
137 } 138 }
138 } 139 }
139 }); 140 });
140 res = sinonimos; 141 res = sinonimos;
141 this.openModalSinonimos(res, articulo); 142 this.openModalSinonimos(res, articulo);
142 } else { 143 } else {
143 this.articuloService.setArticulo(articulo); 144 this.articuloService.setArticulo(articulo);
144 } 145 }
145 }); 146 });
146 } 147 }
147 148
148 openModalPromos(articulo: IArticulo) { 149 openModalPromos(articulo: IArticulo) {
149 if (this.modalRef) return; 150 if (this.modalRef) return;
150 this.articuloService.setArticulosSinImagen([articulo]); 151 this.articuloService.setArticulosSinImagen([articulo]);
151 this.modalRef = this.modalService.show(PromocionComponent, { 152 this.modalRef = this.modalService.show(PromocionComponent, {
152 initialState: { articulosPromo: [articulo] }, 153 initialState: { articulosPromo: [articulo] },
153 class: 'modal-dialog-centered', 154 class: 'modal-dialog-centered',
154 ignoreBackdropClick: true, 155 ignoreBackdropClick: true,
155 }); 156 });
156 this.modalRef.content.onClose 157 this.modalRef.content.onClose
157 .subscribe(() => this.modalRef = null); 158 .subscribe(() => this.modalRef = null);
158 this.mediaPantalla(); 159 this.mediaPantalla();
159 } 160 }
160 161
161 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 162 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
162 if (this.modalRef) return; 163 if (this.modalRef) return;
163 this.modalRef = this.modalService.show(SinonimoComponent, { 164 this.modalRef = this.modalService.show(SinonimoComponent, {
164 initialState: { 165 initialState: {
165 sinonimos: sinonimosData, 166 sinonimos: sinonimosData,
166 articulo 167 articulo
167 }, 168 },
168 class: 'modal-dialog-centered', 169 class: 'modal-dialog-centered',
169 ignoreBackdropClick: true, 170 ignoreBackdropClick: true,
170 }); 171 });
171 172
172 this.modalRef.content.onClose 173 this.modalRef.content.onClose
173 .subscribe((res: any) => { 174 .subscribe((res: any) => {
174 this.modalRef = null; 175 this.modalRef = null;
175 if (!res) return; 176 if (!res) return;
176 articulo.productos = res.articulos; 177 articulo.productos = res.articulos;
177 this.articuloService.setArticulo(articulo); 178 this.articuloService.setArticulo(articulo);
178 }); 179 });
179 this.mediaPantalla(); 180 this.mediaPantalla();
180 } 181 }
181 182
182 deleteArticulo(index: number) { 183 deleteArticulo(index: number) {
183 this.articuloService.deleteArticulo(index); 184 this.articuloService.deleteArticulo(index);
184 } 185 }
185 186
186 increaseShow() { 187 increaseShow() {
187 this.showQuantity += 100; 188 this.showQuantity += 100;
188 } 189 }
189 190
190 @HostListener('scroll', ['$event']) 191 @HostListener('scroll', ['$event'])
191 scrollEvent(event: Event) { 192 scrollEvent(event: Event) {
192 clearTimeout(this.inactiveScreen.timerReposo); 193 clearTimeout(this.inactiveScreen.timerReposo);
193 this.inactiveScreen.startTimeOutInactividad(); 194 this.inactiveScreen.startTimeOutInactividad();
194 } 195 }
195 196
196 mouseup() { 197 mouseup() {
197 if (!this.timeoutHandler) return; 198 if (!this.timeoutHandler) return;
198 clearInterval(this.timeoutHandler); 199 clearInterval(this.timeoutHandler);
199 } 200 }
200 201
201 scrollY(el: HTMLElement, value) { 202 scrollY(el: HTMLElement, value) {
202 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 203 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
203 this.timeoutHandler = setInterval(() => { 204 this.timeoutHandler = setInterval(() => {
204 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 205 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
205 }, 500); 206 }, 500);
206 } 207 }
207 208
208 scrollX(el: HTMLElement, value) { 209 scrollX(el: HTMLElement, value) {
209 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 210 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
210 this.timeoutHandler = setInterval(() => { 211 this.timeoutHandler = setInterval(() => {
211 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 212 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
212 }, 500); 213 }, 500);
213 } 214 }
214 215
215 mediaPantalla() { 216 mediaPantalla() {
216 if ($('body').hasClass('media-pantalla')) { 217 if ($('body').hasClass('media-pantalla')) {
217 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, 218 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
218 .cat-box,.img-categoria, .modal-content`) 219 .cat-box,.img-categoria, .modal-content`)
219 .addClass('media-pantalla') 220 .addClass('media-pantalla')
220 .addBack('media-pantalla'); 221 .addBack('media-pantalla');
221 } 222 }
222 } 223 }
223 } 224 }