diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 395a646..788ffd3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,9 +1,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { SplitPipe } from './pipes/split.pipe'; import { AppComponent } from './app.component'; import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; -import { SplitPipe } from './pipes/split.pipe'; import { AdminComponent } from './modules/admin/admin.component'; import { FooterComponent } from './shared/footer/footer.component'; @@ -17,7 +19,11 @@ import { FooterComponent } from './shared/footer/footer.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule, + FormsModule, + ReactiveFormsModule, + ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/interfaces/ICategoria.ts b/src/app/interfaces/ICategoria.ts new file mode 100644 index 0000000..4360ca0 --- /dev/null +++ b/src/app/interfaces/ICategoria.ts @@ -0,0 +1,9 @@ +export interface ICategoria { + id: number; + detalle: string; + es_promocion: boolean; + vigencia_desde: Date; + vigencia_hasta: Date; + ES_PEDIDO: boolean; + selected?: boolean; +} diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html index 4c83bf6..24f4e65 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html @@ -19,7 +19,7 @@

CATEGORÍAS

-
+
+ + Todos +
+
- {{categoria.id}} + {{categoria.detalle}}
@@ -63,28 +75,30 @@
-
+
-
+ *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> +
+ src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" + class="card-img-top h-55 shadow-sm rounded-sm">
-

{{'CORTADO'}}

-

{{'Café con un poco de leche'}}

+

{{articulo.DetArt}}

+

+ {{articulo.DET_LAR}} +

- {{55 | currency}} + {{articulo.PreVen | currency}}
+ +
+
+ +
+
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss index 9f85166..15a4aa9 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss @@ -34,3 +34,7 @@ $primary: #aa006b; .card { border: none; } + +.line-height-sm { + line-height: 1.2; +} \ No newline at end of file diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts index 2b16854..20398f4 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts @@ -1,6 +1,10 @@ import { Component, OnInit } from "@angular/core"; import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; +import { IArticulo } from 'src/app/interfaces/IArticulo'; +import { APP_SETTINGS } from 'src/etc/AppSettings'; +import { ICategoria } from 'src/app/interfaces/ICategoria'; @Component({ selector: "app-seleccion-articulos", @@ -8,27 +12,117 @@ import { PromocionComponent } from 'src/app/shared/promocion/promocion.component styleUrls: ["./seleccion-articulos.component.scss"] }) export class SeleccionArticulosComponent implements OnInit { + showSpinner = true; timeoutHandler: any; - categorias = [ - { id: 1, selected: false }, - { id: 2, selected: false }, - { id: 3, selected: false }, - { id: 4, selected: false }, - { id: 5, selected: false }, - { id: 6, selected: false } - ]; + urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; + articulos: IArticulo[] = []; + auxArticulos: IArticulo[] = []; + showQuantity = 100; + queMostrar = 'todos'; + categoriaActive: number = null; + categorias: ICategoria[] = []; + searchTerm = ''; + ordenandoByVendidos = true; + allActive = true; modalRef: BsModalRef; constructor( private modalService: BsModalService, + private articuloService: ArticuloService, ) { } - ngOnInit() { } + ngOnInit() { + this.getCategorias(); + this.articuloService.getAll() + .subscribe((res: IArticulo[]) => { + this.articuloService.setArticulosSinImagen(res); + localStorage.setItem('productos', JSON.stringify(res)); + this.setProductos(); + this.articulos = res; + }, err => console.error(err)); + } + + getCategorias() { + this.articuloService.getCategorias() + .subscribe((categorias: ICategoria[]) => { + switch (this.queMostrar) { + case 'todos': + this.categorias = categorias; + this.categoriaActive = 0; + break; + case 'promociones': + this.categorias = categorias; + this.categoriaActive = 19; + break; + case 'ordenar': + this.categorias = categorias.filter((categoria: ICategoria) => { + return categoria.ES_PEDIDO; + }); + this.categoriaActive = 4; + break; + default: + this.categorias = categorias; + this.categoriaActive = 0; + break; + } + !localStorage.getItem('productos') ? + this.getProductos() : + this.setProductos(); + }); + } + + getProductos() { + this.articuloService.getAll() + .subscribe((result: IArticulo[]) => { + this.articuloService.setArticulosSinImagen(result); + if (this.queMostrar == 'ordenar') { + this.categorias.forEach((categoria: ICategoria) => { + let tempArticulos = result.filter((articulo: IArticulo) => { + return articulo.categoria_selfservice == categoria.id; + }); + result = tempArticulos; + }); + } + localStorage.setItem('productos', JSON.stringify(result)); + this.setProductos(); + }, (error) => { + this.showSpinner = false; + console.error(error); + }); + } + + setProductos() { + this.articulos = JSON.parse(localStorage.getItem('productos')); + this.filterItems(); + } + + filterItems() { + if (this.categoriaActive == 0) { + this.auxArticulos = this.articulos; + return; + } + this.auxArticulos = this.articulos.filter(x => { + return x.categoria_selfservice === this.categoriaActive; + }); + this.ordenar(); + } + + ordenar() { + if (this.ordenandoByVendidos) { + this.auxArticulos.sort((a, b) => { + return b.cantidadVendida - a.cantidadVendida; + }); + } + } - selectCategoria(index: number) { + selectCategoria(index: number, idCategoria?: number) { + if (this.categoriaActive == idCategoria) return; + this.categoriaActive = idCategoria; + this.allActive = idCategoria === 0 ? true : false; this.categorias.forEach((categoria, i) => { categoria.selected = index === i ? true : false; }); + this.filterItems(); } elegirArticulo(articulo: any) { @@ -40,6 +134,10 @@ export class SeleccionArticulosComponent implements OnInit { } } + increaseShow() { + this.showQuantity += 100; + } + mouseup() { if (!this.timeoutHandler) return; clearInterval(this.timeoutHandler); diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts index 0e2b047..446d10d 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts @@ -5,6 +5,7 @@ import { SeleccionArticulosComponent } from './seleccion-articulos.component'; import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; import { ModalModule } from 'ngx-bootstrap/modal'; import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; @NgModule({ declarations: [ @@ -18,6 +19,7 @@ import { PromocionComponent } from 'src/app/shared/promocion/promocion.component ModalModule.forRoot(), ], exports: [HeaderPublicidadComponent], + providers: [ArticuloService], entryComponents: [PromocionComponent] }) export class SeleccionArticulosModule { } diff --git a/src/app/services/articulo/articulo.service.ts b/src/app/services/articulo/articulo.service.ts index e113995..ec994ed 100644 --- a/src/app/services/articulo/articulo.service.ts +++ b/src/app/services/articulo/articulo.service.ts @@ -14,24 +14,23 @@ export class ArticuloService { promoAcargar: IArticulo; mostrar: string; esPromoPersonalizada: boolean = false; - urlArticulos = `${APP_SETTINGS.apiDeboSuite}/articulos`; - urlPromociones = `${APP_SETTINGS.apiDeboSuite}/promociones`; - urlSinonimos = `${APP_SETTINGS.apiDeboSuite}/sinonimos`; - urlCategorias = `${APP_SETTINGS.apiDeboSuite}/categorias`; - urlComprobante = `${APP_SETTINGS.apiDeboSuite}/comprobante`; + urlDeboSuite = APP_SETTINGS.apiDeboSuite; - constructor(private http: HttpClient, private clienteService: ClienteService) { } + constructor( + private http: HttpClient, + private clienteService: ClienteService, + ) { } getById(id) { - return this.http.get(`${this.urlArticulos}/${id}`); + return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); } getAll() { - return this.http.get(`${this.urlArticulos}`); + return this.http.get(`${this.urlDeboSuite}/articulos/`); } getAllWithPaginator(page: number = 1) { - return this.http.get(`${this.urlArticulos}/${page}`); + return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); } setArticulos(articulo: IArticulo) { @@ -46,23 +45,23 @@ export class ArticuloService { } getPromocionByCodigos(sector, codigo) { - return this.http.get(`${this.urlPromociones}/by-codigos/${sector}/${codigo}`); + return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`); } getPromociones(sector, codigo) { - return this.http.get(`${this.urlPromociones}/in-articulo/${sector}/${codigo}`); + return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`); } getPromocionSinonimos(sector, codigo) { - return this.http.get(`${this.urlSinonimos}/promo/${sector}/${codigo}`); + return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); } getCategorias() { - return this.http.get(`${this.urlCategorias}`); + return this.http.get(`${this.urlDeboSuite}/categorias`); } getComponentes(sector, codigo) { - return this.http.get(`${this.urlPromociones}/articulos/${sector}/${codigo}`); + return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`); } pay(dataPago: any) { @@ -71,7 +70,7 @@ export class ArticuloService { .subscribe(cliente => { let puntoVenta = parseInt(localStorage.getItem('impresoraPVE')); this.markArticuloInPromoAsRemoved(); - this.http.post(`${this.urlComprobante}/guardar/${dataPago.medioPago}`, { + this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, { productos: this.articulos, cliente: cliente, origen: 'autoservicio', diff --git a/src/scss/animations.scss b/src/scss/animations.scss index b651aea..91027c2 100644 --- a/src/scss/animations.scss +++ b/src/scss/animations.scss @@ -122,3 +122,44 @@ opacity: 1; } } + +/* + * animation swing-in-top-fwd + */ +.swing-in-top-fwd { + -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; + animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; +} + +@-webkit-keyframes swing-in-top-fwd { + 0% { + -webkit-transform: rotateX(-100deg); + transform: rotateX(-100deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 1; + } +} +@keyframes swing-in-top-fwd { + 0% { + -webkit-transform: rotateX(-100deg); + transform: rotateX(-100deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 0; + } + 100% { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + -webkit-transform-origin: top; + transform-origin: top; + opacity: 1; + } +}