Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 0a1cad4bbc0f88747441d827dc92038fd153a60f

Authored by Marcelo Puebla
1 parent aa492da523
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Agregado get de articulos y get de categorias

Showing 8 changed files with 223 additions and 38 deletions   Show diff stats
src/app/app.module.ts
Diff comments   View file @ 0a1cad4
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { NgModule } from '@angular/core'; 2 import { NgModule } from '@angular/core';
3 import { AppRoutingModule } from './app-routing.module'; 3 import { AppRoutingModule } from './app-routing.module';
4 import { HttpClientModule } from '@angular/common/http';
5 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
6 import { SplitPipe } from './pipes/split.pipe';
4 import { AppComponent } from './app.component'; 7 import { AppComponent } from './app.component';
5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 8 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
6 import { SplitPipe } from './pipes/split.pipe';
7 import { AdminComponent } from './modules/admin/admin.component'; 9 import { AdminComponent } from './modules/admin/admin.component';
8 import { FooterComponent } from './shared/footer/footer.component'; 10 import { FooterComponent } from './shared/footer/footer.component';
9 11
10 @NgModule({ 12 @NgModule({
11 declarations: [ 13 declarations: [
12 AppComponent, 14 AppComponent,
13 SplashScreenComponent, 15 SplashScreenComponent,
14 SplitPipe, 16 SplitPipe,
15 AdminComponent, 17 AdminComponent,
16 FooterComponent, 18 FooterComponent,
17 ], 19 ],
18 imports: [ 20 imports: [
19 BrowserModule, 21 BrowserModule,
20 AppRoutingModule 22 AppRoutingModule,
23 HttpClientModule,
24 FormsModule,
25 ReactiveFormsModule,
26 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
21 ], 27 ],
22 providers: [], 28 providers: [],
23 bootstrap: [AppComponent] 29 bootstrap: [AppComponent]
24 }) 30 })
25 export class AppModule { } 31 export class AppModule { }
src/app/interfaces/ICategoria.ts
Diff comments   View file @ 0a1cad4
File was created 1 export interface ICategoria {
2 id: number;
3 detalle: string;
4 es_promocion: boolean;
5 vigencia_desde: Date;
6 vigencia_hasta: Date;
7 ES_PEDIDO: boolean;
8 selected?: boolean;
9 }
10
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 0a1cad4
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 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, -80)"
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 }"
40 (click)="selectCategoria(-1, 0)">
41 <img
42 draggable="false"
43 ondragstart="return false;"
44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
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>
48 </div>
49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40 (click)="selectCategoria(i)" 52 (click)="selectCategoria(i, categoria.id)"
41 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
42 <img 54 <img
43 draggable="false" 55 draggable="false"
44 ondragstart="return false;" 56 ondragstart="return false;"
45 (contextmenu)="false" 57 (contextmenu)="false"
46 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"
47 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
49 </div> 61 </div>
50 </div> 62 </div>
51 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
52 <img 64 <img
53 draggable="false" 65 draggable="false"
54 ondragstart="return false;" 66 ondragstart="return false;"
55 (contextmenu)="false" 67 (contextmenu)="false"
56 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
57 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
58 (mousedown)="scrollY(templateCategorias, 80)" 70 (mousedown)="scrollY(templateCategorias, 80)"
59 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
60 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
61 </div> 73 </div>
62 </div> 74 </div>
63 </div> 75 </div>
64 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
65 <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">
66 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
67 <!-- ARTICULO --> 79 <!-- ARTICULO -->
68 <div 80 <div
69 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
70 *ngFor="let articulo of [{},{},{promo: true},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
71 <div class="card h-100"> 83 <div class="swing-in-top-fwd card h-auto">
72 <img 84 <img
73 draggable="false" 85 draggable="false"
74 ondragstart="return false;" 86 ondragstart="return false;"
75 (contextmenu)="false" 87 (contextmenu)="false"
76 src="assets/img/icono-volver.svg" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
77 class="card-img-top h-55"> 89 class="card-img-top h-55 shadow-sm rounded-sm">
78 <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">
79 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
80 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 92 <p class="col-12 px-1 h-auto text-center line-height-sm">
93 <small>{{articulo.DET_LAR}}</small>
94 </p>
81 <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">
82 <div 96 <div
83 [ngClass]="{'bg-secondary': articulo.promo}" 97 [ngClass]="{'bg-secondary': articulo.promo}"
84 class="row mx-0 justify-content-between bg-primary badge-pill" 98 class="row mx-0 justify-content-between bg-primary badge-pill"
85 (click)="elegirArticulo(articulo)"> 99 (click)="elegirArticulo(articulo)">
86 <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">
87 {{55 | currency}} 101 {{articulo.PreVen | currency}}
88 </div> 102 </div>
89 <div class="col-5 px-0"> 103 <div class="col-5 px-0">
90 <img 104 <img
91 draggable="false" 105 draggable="false"
92 ondragstart="return false;" 106 ondragstart="return false;"
93 (contextmenu)="false" 107 (contextmenu)="false"
94 class="d-block ml-auto py-1 icon-30" 108 class="d-block ml-auto py-1 icon-30"
95 src="assets/img/ir.svg"> 109 src="assets/img/ir.svg">
96 </div> 110 </div>
97 </div> 111 </div>
98 </div> 112 </div>
99 </div> 113 </div>
100 </div> 114 </div>
101 </div> 115 </div>
102 </div> 116 </div>
117 <!-- BOTON VER MAS -->
118 <div class="row mx-0">
119 <div
120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
121 class="col-12 px-0 mb-2">
122 <button
123 (click)="increaseShow()"
124 class="btn btn-block btn-outline-primary">
125 Ver Más
126 </button>
127 </div>
128 </div>
103 </div> 129 </div>
104 </div> 130 </div>
105 </div> 131 </div>
106 </div> 132 </div>
107 <!-- FOOTER CARRITO DE COMPRAS --> 133 <!-- FOOTER CARRITO DE COMPRAS -->
108 <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">
109 <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">
110 <div class="row mx-0 h-15 border-bottom border-primary"> 136 <div class="row mx-0 h-15 border-bottom border-primary">
111 <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>
112 </div> 138 </div>
113 <div class="row h-85 mx-0 justify-content-between"> 139 <div class="row h-85 mx-0 justify-content-between">
114 <div class="col-auto btn-effect h-20 align-self-center"> 140 <div class="col-auto btn-effect h-20 align-self-center">
115 <img 141 <img
116 draggable="false" 142 draggable="false"
117 ondragstart="return false;" 143 ondragstart="return false;"
118 (contextmenu)="false" 144 (contextmenu)="false"
119 class="icon-30 rotate-180-neg" 145 class="icon-30 rotate-180-neg"
120 src="assets/img/ir-fondo-color.svg" 146 src="assets/img/ir-fondo-color.svg"
121 (mousedown)="scrollX(templateCarrito, -100)" 147 (mousedown)="scrollX(templateCarrito, -100)"
122 (mouseup)="mouseup()" 148 (mouseup)="mouseup()"
123 (mouseleave)="mouseup()"> 149 (mouseleave)="mouseup()">
124 </div> 150 </div>
125 <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">
126 <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">
127 <div 153 <div
128 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"
129 (click)="selectCategoria(i)" 155 (click)="selectCategoria(i)"
130 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 156 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
131 <img 157 <img
132 draggable="false" 158 draggable="false"
133 ondragstart="return false;" 159 ondragstart="return false;"
134 (contextmenu)="false" 160 (contextmenu)="false"
135 class="d-block h-55 p-2 mx-auto" 161 class="d-block h-55 p-2 mx-auto"
136 src="assets/img/ir-color.svg"> 162 src="assets/img/ir-color.svg">
137 <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>
138 </div> 164 </div>
139 </div> 165 </div>
140 </div> 166 </div>
141 <div class="col-auto btn-effect h-20 align-self-center"> 167 <div class="col-auto btn-effect h-20 align-self-center">
142 <img 168 <img
143 draggable="false" 169 draggable="false"
144 ondragstart="return false;" 170 ondragstart="return false;"
145 (contextmenu)="false" 171 (contextmenu)="false"
146 class="icon-30" 172 class="icon-30"
147 src="assets/img/ir-fondo-color.svg" 173 src="assets/img/ir-fondo-color.svg"
148 (mousedown)="scrollX(templateCarrito, 100)" 174 (mousedown)="scrollX(templateCarrito, 100)"
149 (mouseup)="mouseup()" 175 (mouseup)="mouseup()"
150 (mouseleave)="mouseup()"> 176 (mouseleave)="mouseup()">
151 </div> 177 </div>
152 </div> 178 </div>
153 </div> 179 </div>
154 <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">
155 <div 181 <div
156 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"
157 [routerLink]="['/carrito']"> 183 [routerLink]="['/carrito']">
158 <div class="row mx-0 bg-light"> 184 <div class="row mx-0 bg-light">
159 <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>
160 <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">
161 <img 187 <img
162 draggable="false" 188 draggable="false"
163 ondragstart="return false;" 189 ondragstart="return false;"
164 (contextmenu)="false" 190 (contextmenu)="false"
165 class="p-2 icon-40" 191 class="p-2 icon-40"
166 src="assets/img/carrito.svg"> 192 src="assets/img/carrito.svg">
167 </div> 193 </div>
168 </div> 194 </div>
169 </div> 195 </div>
170 </div> 196 </div>
171 </div> 197 </div>
172 </div> 198 </div>
173 199
174 </div> 200 </div>
175 201
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 0a1cad4
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 } 10 }
11 11
12 .border-bottom-effect { 12 .border-bottom-effect {
13 border: none; 13 border: none;
14 position: relative; 14 position: relative;
15 &:hover { 15 &:hover {
16 border: none; 16 border: none;
17 } 17 }
18 &::after { 18 &::after {
19 content: ""; 19 content: "";
20 position: absolute; 20 position: absolute;
21 width: 0px; 21 width: 0px;
22 height: 3px; 22 height: 3px;
23 left: 50%; 23 left: 50%;
24 bottom: 0; 24 bottom: 0;
25 background-color: $primary; 25 background-color: $primary;
26 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
27 } 27 }
28 &:hover::after { 28 &:hover::after {
29 width: 100%; 29 width: 100%;
30 left: 0; 30 left: 0;
31 } 31 }
32 } 32 }
33 33
34 .card { 34 .card {
35 border: none; 35 border: none;
36 } 36 }
37
38 .line-height-sm {
39 line-height: 1.2;
40 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 0a1cad4
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';
5 import { IArticulo } from 'src/app/interfaces/IArticulo';
6 import { APP_SETTINGS } from 'src/etc/AppSettings';
7 import { ICategoria } from 'src/app/interfaces/ICategoria';
4 8
5 @Component({ 9 @Component({
6 selector: "app-seleccion-articulos", 10 selector: "app-seleccion-articulos",
7 templateUrl: "./seleccion-articulos.component.html", 11 templateUrl: "./seleccion-articulos.component.html",
8 styleUrls: ["./seleccion-articulos.component.scss"] 12 styleUrls: ["./seleccion-articulos.component.scss"]
9 }) 13 })
10 export class SeleccionArticulosComponent implements OnInit { 14 export class SeleccionArticulosComponent implements OnInit {
15 showSpinner = true;
11 timeoutHandler: any; 16 timeoutHandler: any;
12 categorias = [ 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
13 { id: 1, selected: false }, 18 articulos: IArticulo[] = [];
14 { id: 2, selected: false }, 19 auxArticulos: IArticulo[] = [];
15 { id: 3, selected: false }, 20 showQuantity = 100;
16 { id: 4, selected: false }, 21 queMostrar = 'todos';
17 { id: 5, selected: false }, 22 categoriaActive: number = null;
18 { id: 6, selected: false } 23 categorias: ICategoria[] = [];
19 ]; 24 searchTerm = '';
25 ordenandoByVendidos = true;
26 allActive = true;
20 modalRef: BsModalRef; 27 modalRef: BsModalRef;
21 28
22 constructor( 29 constructor(
23 private modalService: BsModalService, 30 private modalService: BsModalService,
31 private articuloService: ArticuloService,
24 ) { } 32 ) { }
25 33
26 ngOnInit() { } 34 ngOnInit() {
35 this.getCategorias();
36 this.articuloService.getAll()
37 .subscribe((res: IArticulo[]) => {
38 this.articuloService.setArticulosSinImagen(res);
39 localStorage.setItem('productos', JSON.stringify(res));
40 this.setProductos();
41 this.articulos = res;
42 }, err => console.error(err));
43 }
44
45 getCategorias() {
46 this.articuloService.getCategorias()
47 .subscribe((categorias: ICategoria[]) => {
48 switch (this.queMostrar) {
49 case 'todos':
50 this.categorias = categorias;
51 this.categoriaActive = 0;
52 break;
53 case 'promociones':
54 this.categorias = categorias;
55 this.categoriaActive = 19;
56 break;
57 case 'ordenar':
58 this.categorias = categorias.filter((categoria: ICategoria) => {
59 return categoria.ES_PEDIDO;
60 });
61 this.categoriaActive = 4;
62 break;
63 default:
64 this.categorias = categorias;
65 this.categoriaActive = 0;
66 break;
67 }
68 !localStorage.getItem('productos') ?
69 this.getProductos() :
70 this.setProductos();
71 });
72 }
73
74 getProductos() {
75 this.articuloService.getAll()
76 .subscribe((result: IArticulo[]) => {
77 this.articuloService.setArticulosSinImagen(result);
78 if (this.queMostrar == 'ordenar') {
79 this.categorias.forEach((categoria: ICategoria) => {
80 let tempArticulos = result.filter((articulo: IArticulo) => {
81 return articulo.categoria_selfservice == categoria.id;
82 });
83 result = tempArticulos;
84 });
85 }
86 localStorage.setItem('productos', JSON.stringify(result));
87 this.setProductos();
88 }, (error) => {
89 this.showSpinner = false;
90 console.error(error);
91 });
92 }
93
94 setProductos() {
95 this.articulos = JSON.parse(localStorage.getItem('productos'));
96 this.filterItems();
97 }
98
99 filterItems() {
100 if (this.categoriaActive == 0) {
101 this.auxArticulos = this.articulos;
102 return;
103 }
104 this.auxArticulos = this.articulos.filter(x => {
105 return x.categoria_selfservice === this.categoriaActive;
106 });
107 this.ordenar();
108 }
109
110 ordenar() {
111 if (this.ordenandoByVendidos) {
112 this.auxArticulos.sort((a, b) => {
113 return b.cantidadVendida - a.cantidadVendida;
114 });
115 }
116 }
27 117
28 selectCategoria(index: number) { 118 selectCategoria(index: number, idCategoria?: number) {
119 if (this.categoriaActive == idCategoria) return;
120 this.categoriaActive = idCategoria;
121 this.allActive = idCategoria === 0 ? true : false;
29 this.categorias.forEach((categoria, i) => { 122 this.categorias.forEach((categoria, i) => {
30 categoria.selected = index === i ? true : false; 123 categoria.selected = index === i ? true : false;
31 }); 124 });
125 this.filterItems();
32 } 126 }
33 127
34 elegirArticulo(articulo: any) { 128 elegirArticulo(articulo: any) {
35 if (articulo.promo) { 129 if (articulo.promo) {
36 this.modalRef = this.modalService.show(PromocionComponent, { 130 this.modalRef = this.modalService.show(PromocionComponent, {
37 class: 'custom-modal modal-dialog-centered', 131 class: 'custom-modal modal-dialog-centered',
38 ignoreBackdropClick: true, 132 ignoreBackdropClick: true,
39 }) 133 })
40 } 134 }
41 } 135 }
42 136
137 increaseShow() {
138 this.showQuantity += 100;
139 }
140
43 mouseup() { 141 mouseup() {
44 if (!this.timeoutHandler) return; 142 if (!this.timeoutHandler) return;
45 clearInterval(this.timeoutHandler); 143 clearInterval(this.timeoutHandler);
46 } 144 }
47 145
48 scrollY(el: HTMLElement, value) { 146 scrollY(el: HTMLElement, value) {
49 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 147 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
50 this.timeoutHandler = setInterval(() => { 148 this.timeoutHandler = setInterval(() => {
51 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 149 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
52 }, 500); 150 }, 500);
53 } 151 }
54 152
55 scrollX(el: HTMLElement, value) { 153 scrollX(el: HTMLElement, value) {
56 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 154 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
57 this.timeoutHandler = setInterval(() => { 155 this.timeoutHandler = setInterval(() => {
58 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 156 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
59 }, 500); 157 }, 500);
60 } 158 }
61 } 159 }
62 160
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 0a1cad4
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common'; 2 import { CommonModule } from '@angular/common';
3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; 3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
4 import { SeleccionArticulosComponent } from './seleccion-articulos.component'; 4 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; 5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
6 import { ModalModule } from 'ngx-bootstrap/modal'; 6 import { ModalModule } from 'ngx-bootstrap/modal';
7 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 7 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
8 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
8 9
9 @NgModule({ 10 @NgModule({
10 declarations: [ 11 declarations: [
11 SeleccionArticulosComponent, 12 SeleccionArticulosComponent,
12 HeaderPublicidadComponent, 13 HeaderPublicidadComponent,
13 PromocionComponent 14 PromocionComponent
14 ], 15 ],
15 imports: [ 16 imports: [
16 CommonModule, 17 CommonModule,
17 SeleccionArticulosRoutingModule, 18 SeleccionArticulosRoutingModule,
18 ModalModule.forRoot(), 19 ModalModule.forRoot(),
19 ], 20 ],
20 exports: [HeaderPublicidadComponent], 21 exports: [HeaderPublicidadComponent],
22 providers: [ArticuloService],
21 entryComponents: [PromocionComponent] 23 entryComponents: [PromocionComponent]
22 }) 24 })
23 export class SeleccionArticulosModule { } 25 export class SeleccionArticulosModule { }
24 26
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 0a1cad4
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable({ 8 @Injectable({
9 providedIn: 'root' 9 providedIn: 'root'
10 }) 10 })
11 export class ArticuloService { 11 export class ArticuloService {
12 articulos: IArticulo[] = []; 12 articulos: IArticulo[] = [];
13 articuloAcargar: IArticulo; 13 articuloAcargar: IArticulo;
14 promoAcargar: IArticulo; 14 promoAcargar: IArticulo;
15 mostrar: string; 15 mostrar: string;
16 esPromoPersonalizada: boolean = false; 16 esPromoPersonalizada: boolean = false;
17 urlArticulos = `${APP_SETTINGS.apiDeboSuite}/articulos`; 17 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
18 urlPromociones = `${APP_SETTINGS.apiDeboSuite}/promociones`;
19 urlSinonimos = `${APP_SETTINGS.apiDeboSuite}/sinonimos`;
20 urlCategorias = `${APP_SETTINGS.apiDeboSuite}/categorias`;
21 urlComprobante = `${APP_SETTINGS.apiDeboSuite}/comprobante`;
22 18
23 constructor(private http: HttpClient, private clienteService: ClienteService) { } 19 constructor(
20 private http: HttpClient,
21 private clienteService: ClienteService,
22 ) { }
24 23
25 getById(id) { 24 getById(id) {
26 return this.http.get(`${this.urlArticulos}/${id}`); 25 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 26 }
28 27
29 getAll() { 28 getAll() {
30 return this.http.get(`${this.urlArticulos}`); 29 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 30 }
32 31
33 getAllWithPaginator(page: number = 1) { 32 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlArticulos}/${page}`); 33 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 34 }
36 35
37 setArticulos(articulo: IArticulo) { 36 setArticulos(articulo: IArticulo) {
38 for (let i = 0; i < this.articulos.length; i++) { 37 for (let i = 0; i < this.articulos.length; i++) {
39 if (this.articulos[i].id === articulo.id) { 38 if (this.articulos[i].id === articulo.id) {
40 if (articulo.PRO) break; 39 if (articulo.PRO) break;
41 this.articulos[i].cantidad++; 40 this.articulos[i].cantidad++;
42 return; 41 return;
43 } 42 }
44 } 43 }
45 this.articulos.unshift(articulo); 44 this.articulos.unshift(articulo);
46 } 45 }
47 46
48 getPromocionByCodigos(sector, codigo) { 47 getPromocionByCodigos(sector, codigo) {
49 return this.http.get(`${this.urlPromociones}/by-codigos/${sector}/${codigo}`); 48 return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`);
50 } 49 }
51 50
52 getPromociones(sector, codigo) { 51 getPromociones(sector, codigo) {
53 return this.http.get(`${this.urlPromociones}/in-articulo/${sector}/${codigo}`); 52 return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`);
54 } 53 }
55 54
56 getPromocionSinonimos(sector, codigo) { 55 getPromocionSinonimos(sector, codigo) {
57 return this.http.get(`${this.urlSinonimos}/promo/${sector}/${codigo}`); 56 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
58 } 57 }
59 58
60 getCategorias() { 59 getCategorias() {
61 return this.http.get(`${this.urlCategorias}`); 60 return this.http.get(`${this.urlDeboSuite}/categorias`);
62 } 61 }
63 62
64 getComponentes(sector, codigo) { 63 getComponentes(sector, codigo) {
65 return this.http.get(`${this.urlPromociones}/articulos/${sector}/${codigo}`); 64 return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`);
66 } 65 }
67 66
68 pay(dataPago: any) { 67 pay(dataPago: any) {
69 return new Observable((observer) => { 68 return new Observable((observer) => {
70 this.clienteService.getById(-1) 69 this.clienteService.getById(-1)
71 .subscribe(cliente => { 70 .subscribe(cliente => {
72 let puntoVenta = parseInt(localStorage.getItem('impresoraPVE')); 71 let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
73 this.markArticuloInPromoAsRemoved(); 72 this.markArticuloInPromoAsRemoved();
74 this.http.post(`${this.urlComprobante}/guardar/${dataPago.medioPago}`, { 73 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
75 productos: this.articulos, 74 productos: this.articulos,
76 cliente: cliente, 75 cliente: cliente,
77 origen: 'autoservicio', 76 origen: 'autoservicio',
78 codigoVendedor: 5, 77 codigoVendedor: 5,
79 puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta, 78 puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
80 pedidoAnombreDe: dataPago.pedidoAnombreDe, 79 pedidoAnombreDe: dataPago.pedidoAnombreDe,
81 numeroPlanilla: '11111', 80 numeroPlanilla: '11111',
82 }) 81 })
83 .subscribe((data) => { 82 .subscribe((data) => {
84 observer.next(data); 83 observer.next(data);
85 observer.complete(); 84 observer.complete();
86 }); 85 });
87 }); 86 });
88 }); 87 });
89 } 88 }
90 89
91 cleanShoppingCar() { 90 cleanShoppingCar() {
92 this.articuloAcargar = undefined; 91 this.articuloAcargar = undefined;
93 this.promoAcargar = undefined; 92 this.promoAcargar = undefined;
94 this.articulos = []; 93 this.articulos = [];
95 } 94 }
96 95
97 setArticulosSinImagen(articulos: IArticulo[]) { 96 setArticulosSinImagen(articulos: IArticulo[]) {
98 articulos.forEach((articulo: IArticulo) => { 97 articulos.forEach((articulo: IArticulo) => {
99 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 98 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
100 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 99 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
101 }); 100 });
102 } 101 }
103 102
104 markArticuloInPromoAsRemoved() { 103 markArticuloInPromoAsRemoved() {
105 this.articulos.forEach((articulo: IArticulo) => { 104 this.articulos.forEach((articulo: IArticulo) => {
106 if (articulo.PRO) { 105 if (articulo.PRO) {
107 articulo.productos.forEach((articulo: IArticulo) => { 106 articulo.productos.forEach((articulo: IArticulo) => {
108 if (articulo.cantidadAdicionada === 0) { 107 if (articulo.cantidadAdicionada === 0) {
109 articulo.cantidad = 0; 108 articulo.cantidad = 0;
110 articulo.importeValorExtra = 0; 109 articulo.importeValorExtra = 0;
111 } 110 }
112 }); 111 });
113 } 112 }
114 }); 113 });
src/scss/animations.scss
Diff comments   View file @ 0a1cad4
1 /* 1 /*
2 * animation focus-in-blur 2 * animation focus-in-blur
3 */ 3 */
4 .focus-in-blur { 4 .focus-in-blur {
5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
7 } 7 }
8 8
9 @-webkit-keyframes focus-in-blur { 9 @-webkit-keyframes focus-in-blur {
10 0% { 10 0% {
11 -webkit-filter: blur(12px); 11 -webkit-filter: blur(12px);
12 filter: blur(12px); 12 filter: blur(12px);
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 100% { 15 100% {
16 -webkit-filter: blur(0px); 16 -webkit-filter: blur(0px);
17 filter: blur(0px); 17 filter: blur(0px);
18 opacity: 1; 18 opacity: 1;
19 } 19 }
20 } 20 }
21 21
22 @keyframes focus-in-blur { 22 @keyframes focus-in-blur {
23 0% { 23 0% {
24 -webkit-filter: blur(12px); 24 -webkit-filter: blur(12px);
25 filter: blur(12px); 25 filter: blur(12px);
26 opacity: 0; 26 opacity: 0;
27 } 27 }
28 100% { 28 100% {
29 -webkit-filter: blur(0px); 29 -webkit-filter: blur(0px);
30 filter: blur(0px); 30 filter: blur(0px);
31 opacity: 1; 31 opacity: 1;
32 } 32 }
33 } 33 }
34 34
35 /* 35 /*
36 * animation fade-in 36 * animation fade-in
37 */ 37 */
38 .fade-in { 38 .fade-in {
39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
41 } 41 }
42 42
43 @-webkit-keyframes fade-in { 43 @-webkit-keyframes fade-in {
44 0% { 44 0% {
45 opacity: 0; 45 opacity: 0;
46 } 46 }
47 100% { 47 100% {
48 opacity: 1; 48 opacity: 1;
49 } 49 }
50 } 50 }
51 51
52 @keyframes fade-in { 52 @keyframes fade-in {
53 0% { 53 0% {
54 opacity: 0; 54 opacity: 0;
55 } 55 }
56 100% { 56 100% {
57 opacity: 1; 57 opacity: 1;
58 } 58 }
59 } 59 }
60 60
61 /* 61 /*
62 * animation fade-in 62 * animation fade-in
63 */ 63 */
64 .loop-color { 64 .loop-color {
65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
67 } 67 }
68 68
69 @-webkit-keyframes loop-color { 69 @-webkit-keyframes loop-color {
70 0% { 70 0% {
71 background-color: #f4b223; 71 background-color: #f4b223;
72 } 72 }
73 50% { 73 50% {
74 background-color: #ba8b29; 74 background-color: #ba8b29;
75 } 75 }
76 100% { 76 100% {
77 background-color: #f4b223; 77 background-color: #f4b223;
78 } 78 }
79 } 79 }
80 80
81 @keyframes loop-color { 81 @keyframes loop-color {
82 0% { 82 0% {
83 background-color: #f4b223; 83 background-color: #f4b223;
84 } 84 }
85 50% { 85 50% {
86 background-color: #ba8b29; 86 background-color: #ba8b29;
87 } 87 }
88 100% { 88 100% {
89 background-color: #f4b223; 89 background-color: #f4b223;
90 } 90 }
91 } 91 }
92 92
93 /* 93 /*
94 * animation fade-in-left 94 * animation fade-in-left
95 */ 95 */
96 .fade-in-left { 96 .fade-in-left {
97 -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 97 -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
98 animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 98 animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
99 } 99 }
100 100
101 @-webkit-keyframes fade-in-left { 101 @-webkit-keyframes fade-in-left {
102 0% { 102 0% {
103 -webkit-transform: translateX(-50px); 103 -webkit-transform: translateX(-50px);
104 transform: translateX(-50px); 104 transform: translateX(-50px);
105 opacity: 0; 105 opacity: 0;
106 } 106 }
107 100% { 107 100% {
108 -webkit-transform: translateX(0); 108 -webkit-transform: translateX(0);
109 transform: translateX(0); 109 transform: translateX(0);
110 opacity: 1; 110 opacity: 1;
111 } 111 }
112 } 112 }
113 @keyframes fade-in-left { 113 @keyframes fade-in-left {
114 0% { 114 0% {
115 -webkit-transform: translateX(-50px); 115 -webkit-transform: translateX(-50px);
116 transform: translateX(-50px); 116 transform: translateX(-50px);
117 opacity: 0; 117 opacity: 0;
118 } 118 }
119 100% { 119 100% {
120 -webkit-transform: translateX(0); 120 -webkit-transform: translateX(0);
121 transform: translateX(0); 121 transform: translateX(0);
122 opacity: 1; 122 opacity: 1;
123 } 123 }
124 } 124 }
125
126 /*
127 * animation swing-in-top-fwd
128 */
129 .swing-in-top-fwd {
130 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
131 animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
132 }
133
134 @-webkit-keyframes swing-in-top-fwd {
135 0% {
136 -webkit-transform: rotateX(-100deg);
137 transform: rotateX(-100deg);
138 -webkit-transform-origin: top;
139 transform-origin: top;
140 opacity: 0;
141 }
142 100% {
143 -webkit-transform: rotateX(0deg);
144 transform: rotateX(0deg);
145 -webkit-transform-origin: top;
146 transform-origin: top;
147 opacity: 1;
148 }
149 }
150 @keyframes swing-in-top-fwd {
151 0% {
152 -webkit-transform: rotateX(-100deg);
153 transform: rotateX(-100deg);
154 -webkit-transform-origin: top;
155 transform-origin: top;
156 opacity: 0;
157 }
158 100% {
159 -webkit-transform: rotateX(0deg);
160 transform: rotateX(0deg);
161 -webkit-transform-origin: top;
162 transform-origin: top;
163 opacity: 1;
164 }
165 }
125 166