Luis Suarez / autoservicio-axion

Browse Code »

Commit be7b891885e37a1288a01abe687432e91c09edce

Authored by Marcelo Puebla 2020-01-09 14:21:35 -0300

1 parent 14a144eb22

Exists in master and in 2 other branches

Agregada funcion para ingresar articulos al carrito

Showing 3 changed files with 21 additions and 22 deletions Show diff stats

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ be7b891

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-90 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-70">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/ir-color.svg">
                   <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div class="swing-in-top-fwd card h-auto">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     class="card-img-top h-55 shadow-sm rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
                     <p class="col-12 px-1 h-auto text-center line-height-sm">
                       <small>{{articulo.DET_LAR}}</small>
                     </p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
                       <div
                         [ngClass]="{'bg-secondary': articulo.promo}"
                         class="row mx-0 justify-content-between bg-primary badge-pill"
                         (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="col-12 h-75 px-0 border border-primary rounded">
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <div class="row h-85 mx-0 justify-content-between">
           <div class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
+              <div *ngIf="!articuloService.carrito.length" class="col h-100">
+                <p>No hay articulos en el carrito</p>
+              </div>
               <div
-                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"
+                class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary swing-in-top-fwd"
-                (click)="selectCategoria(i)"
+                *ngFor="let articulo of articuloService.carrito; let i = index;">
-                *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
-                  class="d-block h-55 p-2 mx-auto"
+                  class="d-block h-55 img-fluid p-2 mx-auto"
-                  src="assets/img/ir-color.svg">
+                  src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
-                <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p>
+                <p class="d-block mt-auto text-center text-primary text-truncate">
+                  <small>{{articulo.DetArt}}</small>
+                </p>
               </div>
             </div>
           </div>
           <div class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <div class="col-auto p-0 mt-2 ml-auto h-20">
         <div
           class="btn-effect col-auto align-self-center px-0 bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto align-self-center text-primary">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ be7b891

 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",
   templateUrl: "./seleccion-articulos.component.html",
   styleUrls: ["./seleccion-articulos.component.scss"]
 })
 export class SeleccionArticulosComponent implements OnInit {
   showSpinner = true;
   timeoutHandler: any;
   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() {
     this.getCategorias();
     this.articuloService.getAll()
       .subscribe((res: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(res);
         localStorage.setItem('articulos', 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('articulos') ?
           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('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     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, 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) {
+  elegirArticulo(articulo: IArticulo) {
-    if (articulo.promo) {
+    this.articuloService.setArticulo(articulo);
-      this.modalRef = this.modalService.show(PromocionComponent, {
-        class: 'custom-modal modal-dialog-centered',
-        ignoreBackdropClick: true,
-      })
-    }
   }
   increaseShow() {
     this.showQuantity += 100;
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
     }, 500);
   }
 }

src/app/services/articulo/articulo.service.ts

Diff comments View file @ be7b891

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	carrito: 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	urlDeboSuite = APP_SETTINGS.apiDeboSuite;	17	urlDeboSuite = APP_SETTINGS.apiDeboSuite;
18		18
19	constructor(	19	constructor(
20	private http: HttpClient,	20	private http: HttpClient,
21	private clienteService: ClienteService,	21	private clienteService: ClienteService,
22	) { }	22	) { }
23		23
24	getById(id) {	24	getById(id) {
25	return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);	25	return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
26	}	26	}
27		27
28	getAll() {	28	getAll() {
29	return this.http.get(`${this.urlDeboSuite}/articulos/`);	29	return this.http.get(`${this.urlDeboSuite}/articulos/`);
30	}	30	}
31		31
32	getAllWithPaginator(page: number = 1) {	32	getAllWithPaginator(page: number = 1) {
33	return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);	33	return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
34	}	34	}
35		35
36	setArticulos(articulo: IArticulo) {	36	setArticulo(articulo: IArticulo) {
37	for (let i = 0; i < this.articulos.length; i++) {	37	for (let i = 0; i < this.carrito.length; i++) {
38	if (this.articulos[i].id === articulo.id) {	38	if (this.carrito[i].id === articulo.id) {
39	if (articulo.PRO) break;	39	if (articulo.PRO) break;
40	this.articulos[i].cantidad++;	40	this.carrito[i].cantidad++;
41	return;	41	return;
42	}	42	}
43	}	43	}
44	this.articulos.unshift(articulo);	44	this.carrito.unshift(articulo);
45	}	45	}
46		46
47	getPromocionByCodigos(sector, codigo) {	47	getPromocionByCodigos(sector, codigo) {
48	return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`);	48	return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`);
49	}	49	}
50		50
51	getPromociones(sector, codigo) {	51	getPromociones(sector, codigo) {
52	return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`);	52	return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`);
53	}	53	}
54		54
55	getPromocionSinonimos(sector, codigo) {	55	getPromocionSinonimos(sector, codigo) {
56	return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);	56	return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
57	}	57	}
58		58
59	getCategorias() {	59	getCategorias() {
60	return this.http.get(`${this.urlDeboSuite}/categorias`);	60	return this.http.get(`${this.urlDeboSuite}/categorias`);
61	}	61	}
62		62
63	getComponentes(sector, codigo) {	63	getComponentes(sector, codigo) {
64	return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`);	64	return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`);
65	}	65	}
66		66
67	pay(dataPago: any) {	67	pay(dataPago: any) {
68	return new Observable((observer) => {	68	return new Observable((observer) => {
69	this.clienteService.getById(-1)	69	this.clienteService.getById(-1)
70	.subscribe(cliente => {	70	.subscribe(cliente => {
71	let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));	71	let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
72	this.markArticuloInPromoAsRemoved();	72	this.markArticuloInPromoAsRemoved();
73	this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {	73	this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
74	productos: this.articulos,	74	productos: this.carrito,
75	cliente: cliente,	75	cliente: cliente,
76	origen: 'autoservicio',	76	origen: 'autoservicio',
77	codigoVendedor: 5,	77	codigoVendedor: 5,
78	puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,	78	puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
79	pedidoAnombreDe: dataPago.pedidoAnombreDe,	79	pedidoAnombreDe: dataPago.pedidoAnombreDe,
80	numeroPlanilla: '11111',	80	numeroPlanilla: '11111',
81	})	81	})
82	.subscribe((data) => {	82	.subscribe((data) => {
83	observer.next(data);	83	observer.next(data);
84	observer.complete();	84	observer.complete();
85	});	85	});
86	});	86	});
87	});	87	});
88	}	88	}
89		89
90	cleanShoppingCar() {	90	cleanShoppingCar() {
91	this.articuloAcargar = undefined;	91	this.articuloAcargar = undefined;
92	this.promoAcargar = undefined;	92	this.promoAcargar = undefined;
93	this.articulos = [];	93	this.carrito = [];
94	}	94	}
95		95
96	setArticulosSinImagen(articulos: IArticulo[]) {	96	setArticulosSinImagen(articulos: IArticulo[]) {
97	articulos.forEach((articulo: IArticulo) => {	97	articulos.forEach((articulo: IArticulo) => {
98	articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :	98	articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
99	!articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;	99	!articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
100	});	100	});
101	}	101	}
102		102
103	markArticuloInPromoAsRemoved() {	103	markArticuloInPromoAsRemoved() {
104	this.articulos.forEach((articulo: IArticulo) => {	104	this.carrito.forEach((articulo: IArticulo) => {
105	if (articulo.PRO) {	105	if (articulo.PRO) {
106	articulo.productos.forEach((articulo: IArticulo) => {	106	articulo.productos.forEach((articulo: IArticulo) => {
107	if (articulo.cantidadAdicionada === 0) {	107	if (articulo.cantidadAdicionada === 0) {
108	articulo.cantidad = 0;	108	articulo.cantidad = 0;
109	articulo.importeValorExtra = 0;	109	articulo.importeValorExtra = 0;
110	}	110	}
111	});	111	});
112	}	112	}
113	});	113	});
114	}	114	}
115	}	115	}
116		116