Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit 14a144eb224cf4685e99532c26ad7f5501bb4b27

Authored by Marcelo Puebla
1 parent 0a1cad4bbc
Exists in develop

Correccion en scroll

Showing 3 changed files with 7 additions and 7 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 14a144e
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 h-90 align-items-end"> 5 <div class="row mx-0 h-90 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -80)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" 39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)"> 40 (click)="selectCategoria(-1, 0)">
41 <img 41 <img
42 draggable="false" 42 draggable="false"
43 ondragstart="return false;" 43 ondragstart="return false;"
44 (contextmenu)="false" 44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg"> 46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> 47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div> 48 </div>
49 <div 49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab" 50 class="row mx-4 mb-2 h-32 justify-content-center tab"
51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
52 (click)="selectCategoria(i, categoria.id)" 52 (click)="selectCategoria(i, categoria.id)"
53 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
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 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
59 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
61 </div> 61 </div>
62 </div> 62 </div>
63 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
64 <img 64 <img
65 draggable="false" 65 draggable="false"
66 ondragstart="return false;" 66 ondragstart="return false;"
67 (contextmenu)="false" 67 (contextmenu)="false"
68 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
69 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
70 (mousedown)="scrollY(templateCategorias, 80)" 70 (mousedown)="scrollY(templateCategorias, 100)"
71 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
72 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
79 <!-- ARTICULO --> 79 <!-- ARTICULO -->
80 <div 80 <div
81 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
83 <div class="swing-in-top-fwd card h-auto"> 83 <div class="swing-in-top-fwd card h-auto">
84 <img 84 <img
85 draggable="false" 85 draggable="false"
86 ondragstart="return false;" 86 ondragstart="return false;"
87 (contextmenu)="false" 87 (contextmenu)="false"
88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
89 class="card-img-top h-55 shadow-sm rounded-sm"> 89 class="card-img-top h-55 shadow-sm rounded-sm">
90 <div class="row mx-0 py-1 h-auto justify-content-center"> 90 <div class="row mx-0 py-1 h-auto justify-content-center">
91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> 91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
92 <p class="col-12 px-1 h-auto text-center line-height-sm"> 92 <p class="col-12 px-1 h-auto text-center line-height-sm">
93 <small>{{articulo.DET_LAR}}</small> 93 <small>{{articulo.DET_LAR}}</small>
94 </p> 94 </p>
95 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 95 <div class="col-12 px-1 align-self-end btn-effect h-auto">
96 <div 96 <div
97 [ngClass]="{'bg-secondary': articulo.promo}" 97 [ngClass]="{'bg-secondary': articulo.promo}"
98 class="row mx-0 justify-content-between bg-primary badge-pill" 98 class="row mx-0 justify-content-between bg-primary badge-pill"
99 (click)="elegirArticulo(articulo)"> 99 (click)="elegirArticulo(articulo)">
100 <div class="col px-0 align-self-center text-white text-right"> 100 <div class="col px-0 align-self-center text-white text-right">
101 {{articulo.PreVen | currency}} 101 {{articulo.PreVen | currency}}
102 </div> 102 </div>
103 <div class="col-5 px-0"> 103 <div class="col-5 px-0">
104 <img 104 <img
105 draggable="false" 105 draggable="false"
106 ondragstart="return false;" 106 ondragstart="return false;"
107 (contextmenu)="false" 107 (contextmenu)="false"
108 class="d-block ml-auto py-1 icon-30" 108 class="d-block ml-auto py-1 icon-30"
109 src="assets/img/ir.svg"> 109 src="assets/img/ir.svg">
110 </div> 110 </div>
111 </div> 111 </div>
112 </div> 112 </div>
113 </div> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 <!-- BOTON VER MAS --> 117 <!-- BOTON VER MAS -->
118 <div class="row mx-0"> 118 <div class="row mx-0">
119 <div 119 <div
120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
121 class="col-12 px-0 mb-2"> 121 class="col-12 px-0 mb-2">
122 <button 122 <button
123 (click)="increaseShow()" 123 (click)="increaseShow()"
124 class="btn btn-block btn-outline-primary"> 124 class="btn btn-block btn-outline-primary">
125 Ver Más 125 Ver Más
126 </button> 126 </button>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131 </div> 131 </div>
132 </div> 132 </div>
133 <!-- FOOTER CARRITO DE COMPRAS --> 133 <!-- FOOTER CARRITO DE COMPRAS -->
134 <div class="row w-90 mx-auto h-auto justify-content-center"> 134 <div class="row w-90 mx-auto h-auto justify-content-center">
135 <div class="col-12 h-75 px-0 border border-primary rounded"> 135 <div class="col-12 h-75 px-0 border border-primary rounded">
136 <div class="row mx-0 h-15 border-bottom border-primary"> 136 <div class="row mx-0 h-15 border-bottom border-primary">
137 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 137 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
138 </div> 138 </div>
139 <div class="row h-85 mx-0 justify-content-between"> 139 <div class="row h-85 mx-0 justify-content-between">
140 <div class="col-auto btn-effect h-20 align-self-center"> 140 <div class="col-auto btn-effect h-20 align-self-center">
141 <img 141 <img
142 draggable="false" 142 draggable="false"
143 ondragstart="return false;" 143 ondragstart="return false;"
144 (contextmenu)="false" 144 (contextmenu)="false"
145 class="icon-30 rotate-180-neg" 145 class="icon-30 rotate-180-neg"
146 src="assets/img/ir-fondo-color.svg" 146 src="assets/img/ir-fondo-color.svg"
147 (mousedown)="scrollX(templateCarrito, -100)" 147 (mousedown)="scrollX(templateCarrito, -100)"
148 (mouseup)="mouseup()" 148 (mouseup)="mouseup()"
149 (mouseleave)="mouseup()"> 149 (mouseleave)="mouseup()">
150 </div> 150 </div>
151 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 151 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
152 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 152 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
153 <div 153 <div
154 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary" 154 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary"
155 (click)="selectCategoria(i)" 155 (click)="selectCategoria(i)"
156 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 156 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
157 <img 157 <img
158 draggable="false" 158 draggable="false"
159 ondragstart="return false;" 159 ondragstart="return false;"
160 (contextmenu)="false" 160 (contextmenu)="false"
161 class="d-block h-55 p-2 mx-auto" 161 class="d-block h-55 p-2 mx-auto"
162 src="assets/img/ir-color.svg"> 162 src="assets/img/ir-color.svg">
163 <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p> 163 <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p>
164 </div> 164 </div>
165 </div> 165 </div>
166 </div> 166 </div>
167 <div class="col-auto btn-effect h-20 align-self-center"> 167 <div class="col-auto btn-effect h-20 align-self-center">
168 <img 168 <img
169 draggable="false" 169 draggable="false"
170 ondragstart="return false;" 170 ondragstart="return false;"
171 (contextmenu)="false" 171 (contextmenu)="false"
172 class="icon-30" 172 class="icon-30"
173 src="assets/img/ir-fondo-color.svg" 173 src="assets/img/ir-fondo-color.svg"
174 (mousedown)="scrollX(templateCarrito, 100)" 174 (mousedown)="scrollX(templateCarrito, 100)"
175 (mouseup)="mouseup()" 175 (mouseup)="mouseup()"
176 (mouseleave)="mouseup()"> 176 (mouseleave)="mouseup()">
177 </div> 177 </div>
178 </div> 178 </div>
179 </div> 179 </div>
180 <div class="col-auto p-0 mt-2 ml-auto h-20"> 180 <div class="col-auto p-0 mt-2 ml-auto h-20">
181 <div 181 <div
182 class="btn-effect col-auto align-self-center px-0 bg-white" 182 class="btn-effect col-auto align-self-center px-0 bg-white"
183 [routerLink]="['/carrito']"> 183 [routerLink]="['/carrito']">
184 <div class="row mx-0 bg-light"> 184 <div class="row mx-0 bg-light">
185 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 185 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
186 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 186 <div class="col-auto p-0 bg-primary d-none d-sm-block">
187 <img 187 <img
188 draggable="false" 188 draggable="false"
189 ondragstart="return false;" 189 ondragstart="return false;"
190 (contextmenu)="false" 190 (contextmenu)="false"
191 class="p-2 icon-40" 191 class="p-2 icon-40"
192 src="assets/img/carrito.svg"> 192 src="assets/img/carrito.svg">
193 </div> 193 </div>
194 </div> 194 </div>
195 </div> 195 </div>
196 </div> 196 </div>
197 </div> 197 </div>
198 </div> 198 </div>
199 199
200 </div> 200 </div>
201 201
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 14a144e
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from "@angular/core";
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 3 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
4 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 import { IArticulo } from 'src/app/interfaces/IArticulo'; 5 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 import { APP_SETTINGS } from 'src/etc/AppSettings'; 6 import { APP_SETTINGS } from 'src/etc/AppSettings';
7 import { ICategoria } from 'src/app/interfaces/ICategoria'; 7 import { ICategoria } from 'src/app/interfaces/ICategoria';
8 8
9 @Component({ 9 @Component({
10 selector: "app-seleccion-articulos", 10 selector: "app-seleccion-articulos",
11 templateUrl: "./seleccion-articulos.component.html", 11 templateUrl: "./seleccion-articulos.component.html",
12 styleUrls: ["./seleccion-articulos.component.scss"] 12 styleUrls: ["./seleccion-articulos.component.scss"]
13 }) 13 })
14 export class SeleccionArticulosComponent implements OnInit { 14 export class SeleccionArticulosComponent implements OnInit {
15 showSpinner = true; 15 showSpinner = true;
16 timeoutHandler: any; 16 timeoutHandler: any;
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 articulos: IArticulo[] = []; 18 articulos: IArticulo[] = [];
19 auxArticulos: IArticulo[] = []; 19 auxArticulos: IArticulo[] = [];
20 showQuantity = 100; 20 showQuantity = 100;
21 queMostrar = 'todos'; 21 queMostrar = 'todos';
22 categoriaActive: number = null; 22 categoriaActive: number = null;
23 categorias: ICategoria[] = []; 23 categorias: ICategoria[] = [];
24 searchTerm = ''; 24 searchTerm = '';
25 ordenandoByVendidos = true; 25 ordenandoByVendidos = true;
26 allActive = true; 26 allActive = true;
27 modalRef: BsModalRef; 27 modalRef: BsModalRef;
28 28
29 constructor( 29 constructor(
30 private modalService: BsModalService, 30 private modalService: BsModalService,
31 private articuloService: ArticuloService, 31 private articuloService: ArticuloService,
32 ) { } 32 ) { }
33 33
34 ngOnInit() { 34 ngOnInit() {
35 this.getCategorias(); 35 this.getCategorias();
36 this.articuloService.getAll() 36 this.articuloService.getAll()
37 .subscribe((res: IArticulo[]) => { 37 .subscribe((res: IArticulo[]) => {
38 this.articuloService.setArticulosSinImagen(res); 38 this.articuloService.setArticulosSinImagen(res);
39 localStorage.setItem('productos', JSON.stringify(res)); 39 localStorage.setItem('articulos', JSON.stringify(res));
40 this.setProductos(); 40 this.setProductos();
41 this.articulos = res; 41 this.articulos = res;
42 }, err => console.error(err)); 42 }, err => console.error(err));
43 } 43 }
44 44
45 getCategorias() { 45 getCategorias() {
46 this.articuloService.getCategorias() 46 this.articuloService.getCategorias()
47 .subscribe((categorias: ICategoria[]) => { 47 .subscribe((categorias: ICategoria[]) => {
48 switch (this.queMostrar) { 48 switch (this.queMostrar) {
49 case 'todos': 49 case 'todos':
50 this.categorias = categorias; 50 this.categorias = categorias;
51 this.categoriaActive = 0; 51 this.categoriaActive = 0;
52 break; 52 break;
53 case 'promociones': 53 case 'promociones':
54 this.categorias = categorias; 54 this.categorias = categorias;
55 this.categoriaActive = 19; 55 this.categoriaActive = 19;
56 break; 56 break;
57 case 'ordenar': 57 case 'ordenar':
58 this.categorias = categorias.filter((categoria: ICategoria) => { 58 this.categorias = categorias.filter((categoria: ICategoria) => {
59 return categoria.ES_PEDIDO; 59 return categoria.ES_PEDIDO;
60 }); 60 });
61 this.categoriaActive = 4; 61 this.categoriaActive = 4;
62 break; 62 break;
63 default: 63 default:
64 this.categorias = categorias; 64 this.categorias = categorias;
65 this.categoriaActive = 0; 65 this.categoriaActive = 0;
66 break; 66 break;
67 } 67 }
68 !localStorage.getItem('productos') ? 68 !localStorage.getItem('articulos') ?
69 this.getProductos() : 69 this.getProductos() :
70 this.setProductos(); 70 this.setProductos();
71 }); 71 });
72 } 72 }
73 73
74 getProductos() { 74 getProductos() {
75 this.articuloService.getAll() 75 this.articuloService.getAll()
76 .subscribe((result: IArticulo[]) => { 76 .subscribe((result: IArticulo[]) => {
77 this.articuloService.setArticulosSinImagen(result); 77 this.articuloService.setArticulosSinImagen(result);
78 if (this.queMostrar == 'ordenar') { 78 if (this.queMostrar == 'ordenar') {
79 this.categorias.forEach((categoria: ICategoria) => { 79 this.categorias.forEach((categoria: ICategoria) => {
80 let tempArticulos = result.filter((articulo: IArticulo) => { 80 let tempArticulos = result.filter((articulo: IArticulo) => {
81 return articulo.categoria_selfservice == categoria.id; 81 return articulo.categoria_selfservice == categoria.id;
82 }); 82 });
83 result = tempArticulos; 83 result = tempArticulos;
84 }); 84 });
85 } 85 }
86 localStorage.setItem('productos', JSON.stringify(result)); 86 localStorage.setItem('articulos', JSON.stringify(result));
87 this.setProductos(); 87 this.setProductos();
88 }, (error) => { 88 }, (error) => {
89 this.showSpinner = false; 89 this.showSpinner = false;
90 console.error(error); 90 console.error(error);
91 }); 91 });
92 } 92 }
93 93
94 setProductos() { 94 setProductos() {
95 this.articulos = JSON.parse(localStorage.getItem('productos')); 95 this.articulos = JSON.parse(localStorage.getItem('articulos'));
96 this.filterItems(); 96 this.filterItems();
97 } 97 }
98 98
99 filterItems() { 99 filterItems() {
100 if (this.categoriaActive == 0) { 100 if (this.categoriaActive == 0) {
101 this.auxArticulos = this.articulos; 101 this.auxArticulos = this.articulos;
102 return; 102 return;
103 } 103 }
104 this.auxArticulos = this.articulos.filter(x => { 104 this.auxArticulos = this.articulos.filter(x => {
105 return x.categoria_selfservice === this.categoriaActive; 105 return x.categoria_selfservice === this.categoriaActive;
106 }); 106 });
107 this.ordenar(); 107 this.ordenar();
108 } 108 }
109 109
110 ordenar() { 110 ordenar() {
111 if (this.ordenandoByVendidos) { 111 if (this.ordenandoByVendidos) {
112 this.auxArticulos.sort((a, b) => { 112 this.auxArticulos.sort((a, b) => {
113 return b.cantidadVendida - a.cantidadVendida; 113 return b.cantidadVendida - a.cantidadVendida;
114 }); 114 });
115 } 115 }
116 } 116 }
117 117
118 selectCategoria(index: number, idCategoria?: number) { 118 selectCategoria(index: number, idCategoria?: number) {
119 if (this.categoriaActive == idCategoria) return; 119 if (this.categoriaActive == idCategoria) return;
120 this.categoriaActive = idCategoria; 120 this.categoriaActive = idCategoria;
121 this.allActive = idCategoria === 0 ? true : false; 121 this.allActive = idCategoria === 0 ? true : false;
122 this.categorias.forEach((categoria, i) => { 122 this.categorias.forEach((categoria, i) => {
123 categoria.selected = index === i ? true : false; 123 categoria.selected = index === i ? true : false;
124 }); 124 });
125 this.filterItems(); 125 this.filterItems();
126 } 126 }
127 127
128 elegirArticulo(articulo: any) { 128 elegirArticulo(articulo: any) {
129 if (articulo.promo) { 129 if (articulo.promo) {
130 this.modalRef = this.modalService.show(PromocionComponent, { 130 this.modalRef = this.modalService.show(PromocionComponent, {
131 class: 'custom-modal modal-dialog-centered', 131 class: 'custom-modal modal-dialog-centered',
132 ignoreBackdropClick: true, 132 ignoreBackdropClick: true,
133 }) 133 })
134 } 134 }
135 } 135 }
136 136
137 increaseShow() { 137 increaseShow() {
138 this.showQuantity += 100; 138 this.showQuantity += 100;
139 } 139 }
140 140
141 mouseup() { 141 mouseup() {
142 if (!this.timeoutHandler) return; 142 if (!this.timeoutHandler) return;
143 clearInterval(this.timeoutHandler); 143 clearInterval(this.timeoutHandler);
144 } 144 }
145 145
146 scrollY(el: HTMLElement, value) { 146 scrollY(el: HTMLElement, value) {
147 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 147 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
148 this.timeoutHandler = setInterval(() => { 148 this.timeoutHandler = setInterval(() => {
149 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 149 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
150 }, 500); 150 }, 500);
151 } 151 }
152 152
153 scrollX(el: HTMLElement, value) { 153 scrollX(el: HTMLElement, value) {
154 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 154 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
155 this.timeoutHandler = setInterval(() => { 155 this.timeoutHandler = setInterval(() => {
156 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 156 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
157 }, 500); 157 }, 500);
158 } 158 }
159 } 159 }
160 160
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "node_modules/bootstrap/scss/_variables.scss"; 6 @import "node_modules/bootstrap/scss/_variables.scss";
7 7
8 @font-face { 8 @font-face {
9 font-family: "Gotham"; 9 font-family: "Gotham";
10 font-style: normal; 10 font-style: normal;
11 font-weight: normal; 11 font-weight: normal;
12 src: url("assets/fonts/gotham-medium.woff") format("woff"); 12 src: url("assets/fonts/gotham-medium.woff") format("woff");
13 } 13 }
14 14
15 html, 15 html,
16 body { 16 body {
17 min-height: 100vh; 17 min-height: 100vh;
18 max-height: 100vh; 18 max-height: 100vh;
19 height: 100vh; 19 height: 100vh;
20 font-family: "Gotham"; 20 font-family: "Gotham";
21 overflow: hidden; 21 overflow: hidden;
22 user-select: none; 22 user-select: none;
23 } 23 }
24 24
25 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s; 26 transition: all 0.3s;
27 &:hover { 27 &:hover {
28 cursor: pointer; 28 cursor: pointer;
29 opacity: 0.7; 29 opacity: 0.7;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02); 32 transform: scale(1.02);
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .rotate-45 { 53 .rotate-45 {
54 transform: rotate(45deg); 54 transform: rotate(45deg);
55 } 55 }
56 56
57 .rotate-90 { 57 .rotate-90 {
58 transform: rotate(90deg); 58 transform: rotate(90deg);
59 } 59 }
60 60
61 .rotate-90-neg { 61 .rotate-90-neg {
62 transform: rotate(-90deg); 62 transform: rotate(-90deg);
63 } 63 }
64 64
65 .rotate-180-neg { 65 .rotate-180-neg {
66 transform: rotate(-180deg); 66 transform: rotate(-180deg);
67 } 67 }
68 68
69 .scroll-y { 69 .scroll-y {
70 overflow-y: auto; 70 overflow-y: auto;
71 scrollbar-width: none; 71 scrollbar-width: none;
72 &::-webkit-scrollbar { 72 &::-webkit-scrollbar {
73 display: none; 73 display: none;
74 } 74 }
75 } 75 }
76 76
77 .scroll-x { 77 .scroll-x {
78 overflow-x: auto; 78 overflow-x: auto;
79 scrollbar-width: none; 79 scrollbar-width: none;
80 &::-webkit-scrollbar { 80 &::-webkit-scrollbar {
81 display: none; 81 display: none;
82 } 82 }
83 } 83 }
84 84