Martin Macola / autoservicio

Download as
Browse Code »

Commit 038a408bf4107371e875121a9b2fd86d7732f38f

Authored by Marcelo Puebla
2 parents 5b402809cd df84512cfa
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request !54
Showing 6 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ 038a408
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div *ngIf="verCategorias" class="col-sm-2 p-1"> 17 <div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 [ngClass]="{active: categoriaActive == 0}" 23 [ngClass]="{active: categoriaActive == 0}"
24 (click)="categoriaActive = 0; filterItems()" 24 (click)="categoriaActive = 0; filterItems()"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Todos 26 Todos
27 </li> 27 </li>
28 <li 28 <li
29 *ngFor="let categoria of categorias" 29 *ngFor="let categoria of categorias"
30 [ngClass]="{active: categoriaActive == categoria.id}" 30 [ngClass]="{active: categoriaActive == categoria.id}"
31 (click)="categoriaActive = categoria.id; filterItems()" 31 (click)="categoriaActive = categoria.id; filterItems()"
32 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 32 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
33 {{categoria.detalle}} 33 {{categoria.detalle}}
34 </li> 34 </li>
35 </ul> 35 </ul>
36 </div> 36 </div>
37 37
38 <!-- SEARCH INPUT --> 38 <!-- SEARCH INPUT -->
39 <div *ngIf="productos.length > 0" class="fade-in col"> 39 <div *ngIf="productos.length > 0" class="fade-in col">
40 40
41 <div class="row search"> 41 <div class="row search">
42 <div class="col-sm-10"> 42 <div class="col-sm-10">
43 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 43 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
44 <input 44 <input
45 [matKeyboard]="'spanish'" 45 [matKeyboard]="'spanish'"
46 type="text" 46 type="text"
47 class="form-control form-control-lg shadow-sm rounded-pill px-5" 47 class="form-control form-control-lg shadow-sm rounded-pill px-5"
48 placeholder="Búsqueda productos" 48 placeholder="Búsqueda productos"
49 [(ngModel)]="searchTerm" 49 [(ngModel)]="searchTerm"
50 (ngModelChange)="filterItems()"> 50 (ngModelChange)="filterItems()">
51 </div> 51 </div>
52 <!-- BOTON VOLVER --> 52 <!-- BOTON VOLVER -->
53 <div class="col-sm-2"> 53 <div class="col-sm-2">
54 <button 54 <button
55 type="button" 55 type="button"
56 class="btn btn-light btn-lg shadow-sm" 56 class="btn btn-light btn-lg shadow-sm"
57 [routerLink]="['/inicio']"> 57 [routerLink]="['/inicio']">
58 <span class="font-weight-normal h6 pr-2">Volver</span> 58 <span class="font-weight-normal h6 pr-2">Volver</span>
59 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 59 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
60 </button> 60 </button>
61 </div> 61 </div>
62 <div class="col-sm-12 my-2 h5"> 62 <div class="col-sm-12 my-2 h5">
63 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span> 63 <span class="badge badge-light px-2 text-muted shadow-sm">Más vendidos</span>
64 </div> 64 </div>
65 </div> 65 </div>
66 <!-- LISTA DE PRODUCTOS --> 66 <!-- LISTA DE PRODUCTOS -->
67 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 67 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
68 <div 68 <div
69 class="col-4 p-2" 69 class="col-4 p-2"
70 *ngFor="let producto of auxProductos"> 70 *ngFor="let producto of auxProductos">
71 <div 71 <div
72 class="card-effect bg-white rounded-sm shadow border-0" 72 class="card-effect bg-white rounded-sm shadow border-0"
73 (click)="elegirProducto(producto)"> 73 (click)="elegirProducto(producto)">
74 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 74 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
75 <div class="p-2"> 75 <div class="p-2">
76 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 76 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
77 <div class="row justify-content-between m-0"> 77 <div class="row justify-content-between m-0">
78 <div class="col-12 p-0"> 78 <div class="col-12 p-0">
79 <div class="text-left"> 79 <div class="text-left">
80 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 80 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
81 </div> 81 </div>
82 </div> 82 </div>
83 <div class="col-12 my-auto pt-2 pr-2 p-0"> 83 <div class="col-12 my-auto pt-2 pr-2 p-0">
84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 84 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
85 </div> 85 </div>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 92
93 <!-- SPINNER --> 93 <!-- SPINNER -->
94 <div 94 <div
95 *ngIf="productos.length === 0 && showSpinner" 95 *ngIf="productos.length === 0 && showSpinner"
96 class="col-sm-10 p-0 align-self-center text-center"> 96 class="col-sm-10 p-0 align-self-center text-center">
97 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 97 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
98 <span class="text-secondary m-2 h5">Cargando información.</span> 98 <span class="text-secondary m-2 h5">Cargando información.</span>
99 </div> 99 </div>
100 100
101 </div> 101 </div>
102 102
103 </div> 103 </div>
104 104
105 </div> 105 </div>
106 106
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ 038a408
1 import { Component, OnInit, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, EventEmitter } from '@angular/core';
2 import { ProductoService } from 'src/app/services/producto.service'; 2 import { ProductoService } from 'src/app/services/producto.service';
3 import { Producto } from 'src/app/wrappers/producto'; 3 import { Producto } from 'src/app/wrappers/producto';
4 import { Categoria } from 'src/app/wrappers/categoria'; 4 import { Categoria } from 'src/app/wrappers/categoria';
5 import { appSettings } from 'src/etc/AppSettings'; 5 import { appSettings } from 'src/etc/AppSettings';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-busqueda-productos', 9 selector: 'app-busqueda-productos',
10 templateUrl: './busqueda-productos.component.html', 10 templateUrl: './busqueda-productos.component.html',
11 styleUrls: ['./busqueda-productos.component.scss'] 11 styleUrls: ['./busqueda-productos.component.scss']
12 }) 12 })
13 export class BusquedaProductosComponent implements OnInit { 13 export class BusquedaProductosComponent implements OnInit {
14 14
15 private productos: Producto[] = []; 15 private productos: Producto[] = [];
16 private auxProductos: Producto[] = []; 16 private auxProductos: Producto[] = [];
17 private searchTerm: string = ''; 17 private searchTerm: string = '';
18 private categoriaActive: number = null; 18 private categoriaActive: number = null;
19 private showSpinner: boolean = true; 19 private showSpinner: boolean = true;
20 private verCategorias: boolean = true; 20 private queMostrar: string = 'todo';
21 private apiUrl: string = appSettings.apiUrl; 21 private apiUrl: string = appSettings.apiUrl;
22 private categorias: Categoria[] = []; 22 private categorias: Categoria[] = [];
23 private blurFocus = new EventEmitter(); 23 private blurFocus = new EventEmitter();
24 24
25 constructor( 25 constructor(
26 private productoService: ProductoService, 26 private productoService: ProductoService,
27 private router: Router) { } 27 private router: Router) { }
28 28
29 ngOnInit() { 29 ngOnInit() {
30 30
31 this.verCategorias = this.productoService.verCategoriasProductos; 31 this.queMostrar = this.productoService.mostrar;
32 32
33 this.productoService.getCategorias() 33 this.productoService.getCategorias()
34 .subscribe((categorias: Categoria[]) => { 34 .subscribe((categorias: Categoria[]) => {
35 this.categorias = categorias; 35 this.categorias = categorias;
36 this.categoriaActive = this.verCategorias ? 0 : categorias[0].id; 36
37 switch (this.queMostrar) {
38 case 'todos':
39 this.categoriaActive = 1;
40 break;
41 case 'promociones':
42 this.categoriaActive = 1;
43 break;
44 case 'ordenar':
45
46 this.categorias = this.categorias.filter((categoria: Categoria) => {
47 return categoria.ES_PEDIDO;
48 });
49
50 this.categoriaActive = this.categorias[0].id;
51
52 break;
53 default:
54 break;
55 }
56
37 }); 57 });
38 58
39 this.productoService.productoAcargar = undefined; 59 this.productoService.productoAcargar = undefined;
40 this.productoService.getAll() 60 this.productoService.getAll()
41 .subscribe((data: Producto[]) => { 61 .subscribe((data: Producto[]) => {
42 62
43 this.productos = data; 63 this.productos = data;
44 this.filterItems(); 64 this.filterItems();
45 }, (error) => { 65 }, (error) => {
46 this.showSpinner = false; 66 this.showSpinner = false;
47 console.error(error); 67 console.error(error);
48 }); 68 });
49 } 69 }
50 70
51 filterItems() { 71 filterItems() {
52 72
53 this.auxProductos = this.productos.filter(x => { 73 this.auxProductos = this.productos.filter(x => {
54 if (this.categoriaActive === 0) { 74 if (this.categoriaActive === 0) {
55 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 75 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
56 } 76 }
57 else { 77 else {
58 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 78 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
59 x.categoria_selfservice === this.categoriaActive; 79 x.categoria_selfservice === this.categoriaActive;
60 } 80 }
61 }); 81 });
62 } 82 }
63 83
64 agregarAlCarrito(producto: Producto) { 84 agregarAlCarrito(producto: Producto) {
65 85
66 producto.cantidad = 1; 86 producto.cantidad = 1;
67 this.productoService.productos.push(producto); 87 this.productoService.productos.push(producto);
68 } 88 }
69 89
70 lostBlur() { 90 lostBlur() {
71 this.blurFocus.emit(); 91 this.blurFocus.emit();
72 } 92 }
73 93
74 private elegirProducto(producto: Producto) { 94 private elegirProducto(producto: Producto) {
75 95
76 if (producto.PRO) { 96 if (producto.PRO) {
77 97
78 let imagenes = producto.imagenes; 98 let imagenes = producto.imagenes;
79 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 99 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
80 .subscribe(res => { 100 .subscribe(res => {
81 101
82 this.productoService.productoAcargar = res[0]; 102 this.productoService.productoAcargar = res[0];
83 this.productoService.productoAcargar.imagenes = imagenes; 103 this.productoService.productoAcargar.imagenes = imagenes;
84 this.router.navigate(['inicio']); 104 this.router.navigate(['inicio']);
85 }, 105 },
86 error => { console.error(error); } 106 error => { console.error(error); }
87 ); 107 );
88 } else { 108 } else {
89 109
90 this.productoService.productoAcargar = producto; 110 this.productoService.productoAcargar = producto;
91 this.router.navigate(['inicio']); 111 this.router.navigate(['inicio']);
92 } 112 }
93 113
94 } 114 }
95 } 115 }
96 116
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 038a408
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos(false)" 16 (click)="irBusquedaProductos('promociones')"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-auto"> 20 <div class="col-auto">
21 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-auto p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
39 </div> 39 </div>
40 <div class="carousel-item"> 40 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> 41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <!-- ORDENAR --> 47 <!-- ORDENAR -->
48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 48 <div (click)="irBusquedaProductos('ordenar')"
49 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
49 <div class="card-body text-left px-4 py-3"> 50 <div class="card-body text-left px-4 py-3">
50 <div class="row"> 51 <div class="row">
51 <div class="col-auto"> 52 <div class="col-auto">
52 <p class="h3 card-title">Ordenar Pedido</p> 53 <p class="h3 card-title">Ordenar Pedido</p>
53 </div> 54 </div>
54 <div class="col-auto p-0"> 55 <div class="col-auto p-0">
55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 56 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
56 </div> 57 </div>
57 </div> 58 </div>
58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 59 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
59 </div> 60 </div>
60 <img 61 <img
61 class="card-img-bottom d-block w-100 mx-auto rounded" 62 class="card-img-bottom d-block w-100 mx-auto rounded"
62 src="{{apiUrl}}/imagenes/cafe.jpg"> 63 src="{{apiUrl}}/imagenes/cafe.jpg">
63 </div> 64 </div>
64 </div> 65 </div>
65 66
66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 67 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
67 68
68 <!-- CARGAR PRODUCTOS --> 69 <!-- CARGAR PRODUCTOS -->
69 <ng-template #popTemplate> 70 <ng-template #popTemplate>
70 <app-popover-promos 71 <app-popover-promos
71 *ngIf="promociones.length > 0 && sinonimos.length === 0" 72 *ngIf="promociones.length > 0 && sinonimos.length === 0"
72 [popover]="popoverDirective" 73 [popover]="popoverDirective"
73 [popoverContent]="promociones" 74 [popoverContent]="promociones"
74 (promoSeleccionada)="promoSeleccionada($event)" 75 (promoSeleccionada)="promoSeleccionada($event)"
75 class="text-white rounded-sm border-0"> 76 class="text-white rounded-sm border-0">
76 </app-popover-promos> 77 </app-popover-promos>
77 <app-popover-sinonimos 78 <app-popover-sinonimos
78 *ngIf="sinonimos.length > 0" 79 *ngIf="sinonimos.length > 0"
79 [popover]="popoverDirective" 80 [popover]="popoverDirective"
80 [popoverContent]="sinonimos" 81 [popoverContent]="sinonimos"
81 (productosPersonalizados)="productosPersonalizados($event)" 82 (productosPersonalizados)="productosPersonalizados($event)"
82 class="text-white rounded-sm border-0"> 83 class="text-white rounded-sm border-0">
83 </app-popover-sinonimos> 84 </app-popover-sinonimos>
84 </ng-template> 85 </ng-template>
85 <div 86 <div
86 placement="left" 87 placement="left"
87 triggers="" 88 triggers=""
88 [popover]="popTemplate" 89 [popover]="popTemplate"
89 class="w-100" 90 class="w-100"
90 #pop="bs-popover"> 91 #pop="bs-popover">
91 <div class="card bg-white border-0 shadow rounded mb-auto"> 92 <div class="card bg-white border-0 shadow rounded mb-auto">
92 <div class="card-body text-left px-4 py-3"> 93 <div class="card-body text-left px-4 py-3">
93 <div class="row"> 94 <div class="row">
94 <div class="col-auto"> 95 <div class="col-auto">
95 <p class="h3 card-title">Cargar Productos</p> 96 <p class="h3 card-title">Cargar Productos</p>
96 </div> 97 </div>
97 <div class="col-auto p-0"> 98 <div class="col-auto p-0">
98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 99 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
99 </div> 100 </div>
100 </div> 101 </div>
101 <p class="h5 card-text text-muted font-weight-light"> 102 <p class="h5 card-text text-muted font-weight-light">
102 Coloque un producto frente<br> 103 Coloque un producto frente<br>
103 al lector de códigos o selecciónelo en pantalla 104 al lector de códigos o selecciónelo en pantalla
104 </p> 105 </p>
105 </div> 106 </div>
106 <div class="row m-4"> 107 <div class="row m-4">
107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 108 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
108 <!-- IMAGEN DE ESCANER --> 109 <!-- IMAGEN DE ESCANER -->
109 <img 110 <img
110 *ngIf="!productoAcargar" 111 *ngIf="!productoAcargar"
111 class="card-img-top d-block w-100 mx-auto rounded-sm" 112 class="card-img-top d-block w-100 mx-auto rounded-sm"
112 src="{{apiUrl}}/imagenes/escanner.jpg"> 113 src="{{apiUrl}}/imagenes/escanner.jpg">
113 114
114 <!-- PRODUCTO A CARGAR --> 115 <!-- PRODUCTO A CARGAR -->
115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 116 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
116 <img 117 <img
117 class="card-img-top d-block w-75 mx-auto rounded-sm" 118 class="card-img-top d-block w-75 mx-auto rounded-sm"
118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 119 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
119 120
120 <div class="row justify-content-between m-3"> 121 <div class="row justify-content-between m-3">
121 <div class="col-12 text-left px-1"> 122 <div class="col-12 text-left px-1">
122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 123 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
123 </div> 124 </div>
124 <div class="col-12 text-right mt-2"> 125 <div class="col-12 text-right mt-2">
125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 126 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
126 </div> 127 </div>
127 </div> 128 </div>
128 </div> 129 </div>
129 130
130 <!-- PROMO A CARGAR --> 131 <!-- PROMO A CARGAR -->
131 <div class="fade-in m-0" *ngIf="promoAcargar"> 132 <div class="fade-in m-0" *ngIf="promoAcargar">
132 <img 133 <img
133 class="card-img-top d-block w-100 mx-auto rounded-sm" 134 class="card-img-top d-block w-100 mx-auto rounded-sm"
134 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 135 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
135 136
136 <div class="row justify-content-between m-3"> 137 <div class="row justify-content-between m-3">
137 <div class="col-12 text-left px-1"> 138 <div class="col-12 text-left px-1">
138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p> 139 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
139 </div> 140 </div>
140 <div class="col-12 text-right mt-2 align-self-end"> 141 <div class="col-12 text-right mt-2 align-self-end">
141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 142 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
142 </div> 143 </div>
143 </div> 144 </div>
144 </div> 145 </div>
145 146
146 </div> 147 </div>
147 <!-- BOTONES DE CARGAR PRODUCTOS--> 148 <!-- BOTONES DE CARGAR PRODUCTOS-->
148 <div 149 <div
149 class="col-5 pr-0" 150 class="col-5 pr-0"
150 *ngIf="promociones.length > 0"> 151 *ngIf="promociones.length > 0">
151 <button 152 <button
152 *ngIf="!promoAcargar || sinonimos.length == 0" 153 *ngIf="!promoAcargar || sinonimos.length == 0"
153 type="button" 154 type="button"
154 class="btn btn-primary btn-block shadow-sm" 155 class="btn btn-primary btn-block shadow-sm"
155 (click)="pop.show()"> 156 (click)="pop.show()">
156 <span class="pr-2">Mostrar promociones</span> 157 <span class="pr-2">Mostrar promociones</span>
157 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 158 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
158 </button> 159 </button>
159 <button 160 <button
160 type="button" 161 type="button"
161 class="btn btn-light btn-block shadow-sm my-3" 162 class="btn btn-light btn-block shadow-sm my-3"
162 (click)="confirmarProducto()"> 163 (click)="confirmarProducto()">
163 <span class="pr-2 font-weight-bold">Confirmar</span> 164 <span class="pr-2 font-weight-bold">Confirmar</span>
164 <i class="fa fa-check text-success" aria-hidden="true"></i> 165 <i class="fa fa-check text-success" aria-hidden="true"></i>
165 </button> 166 </button>
166 <button 167 <button
167 type="button" 168 type="button"
168 class="btn btn-light btn-block shadow-sm" 169 class="btn btn-light btn-block shadow-sm"
169 (click)="deshacerCarga()"> 170 (click)="deshacerCarga()">
170 <span class="pr-2">Deshacer</span> 171 <span class="pr-2">Deshacer</span>
171 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 172 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
172 </button> 173 </button>
173 </div> 174 </div>
174 </div> 175 </div>
175 </div> 176 </div>
176 </div> 177 </div>
177 178
178 <!-- BUSCAR PRODUCTOS --> 179 <!-- BUSCAR PRODUCTOS -->
179 <div (click)="irBusquedaProductos(true)" 180 <div (click)="irBusquedaProductos('todos')"
180 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 181 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
181 <div class="card-body text-left px-4 py-3"> 182 <div class="card-body text-left px-4 py-3">
182 <div class="row"> 183 <div class="row">
183 <div class="col-auto"> 184 <div class="col-auto">
184 <p class="h3 card-title">Buscar Productos</p> 185 <p class="h3 card-title">Buscar Productos</p>
185 <p class="h5 card-text text-muted font-weight-light"> 186 <p class="h5 card-text text-muted font-weight-light">
186 Busque aquí los productos<br> 187 Busque aquí los productos<br>
187 que no tienen código </p> 188 que no tienen código </p>
188 </div> 189 </div>
189 <div class="col-auto p-0"> 190 <div class="col-auto p-0">
190 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 191 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
191 </div> 192 </div>
192 </div> 193 </div>
193 194
194 </div> 195 </div>
195 </div> 196 </div>
196 197
197 </div> 198 </div>
198 199
199 </div> 200 </div>
200 201
201 </div> 202 </div>
202 </div> 203 </div>
203 204
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 038a408
1 import { Component, OnInit, ViewChild, HostListener } from '@angular/core'; 1 import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Producto } from 'src/app/wrappers/producto'; 6 import { Producto } from 'src/app/wrappers/producto';
7 import { Sinonimo } from 'src/app/wrappers/sinonimo'; 7 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-inicio', 10 selector: 'app-inicio',
11 templateUrl: './inicio.component.html', 11 templateUrl: './inicio.component.html',
12 styleUrls: ['./inicio.component.scss'] 12 styleUrls: ['./inicio.component.scss']
13 }) 13 })
14 export class InicioComponent implements OnInit { 14 export class InicioComponent implements OnInit {
15 15
16 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) { 16 @HostListener('document:keypress', ["$event"]) catchInput(e: KeyboardEvent) {
17 17
18 if (e.keyCode == 13) { 18 if (e.keyCode == 13) {
19 this.buscarByCodigoBarras(this.busqueda); 19 this.buscarByCodigoBarras(this.busqueda);
20 this.busqueda = ''; 20 this.busqueda = '';
21 } else { 21 } else {
22 this.busqueda += e.key; 22 this.busqueda += e.key;
23 } 23 }
24 24
25 }; 25 };
26 26
27 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 27 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
28 private tienePromo = false; 28 private tienePromo = false;
29 private productoEsPromo = false; 29 private productoEsPromo = false;
30 private busqueda: string = ''; 30 private busqueda: string = '';
31 31
32 private productoAcargar: Producto; 32 private productoAcargar: Producto;
33 private promoAcargar: Producto; 33 private promoAcargar: Producto;
34 34
35 productos: Producto[] = []; 35 productos: Producto[] = [];
36 promociones: Producto[] = []; 36 promociones: Producto[] = [];
37 sinonimos: Sinonimo[] = []; 37 sinonimos: Sinonimo[] = [];
38 apiUrl: string = appSettings.apiUrl 38 apiUrl: string = appSettings.apiUrl
39 39
40 constructor( 40 constructor(
41 private router: Router, 41 private router: Router,
42 private productoService: ProductoService) { } 42 private productoService: ProductoService) { }
43 43
44 ngOnInit() { 44 ngOnInit() {
45 45
46 this.productoAcargar = this.productoService.productoAcargar; 46 this.productoAcargar = this.productoService.productoAcargar;
47 if (this.productoAcargar) { 47 if (this.productoAcargar) {
48 if (this.productoAcargar.PRO) { 48 if (this.productoAcargar.PRO) {
49 this.promociones.push(this.productoAcargar); 49 this.promociones.push(this.productoAcargar);
50 this.promoSeleccionada(this.productoAcargar); 50 this.promoSeleccionada(this.productoAcargar);
51 } 51 }
52 else 52 else
53 this.getPromociones(); 53 this.getPromociones();
54 } 54 }
55 this.getProductos(); 55 this.getProductos();
56 } 56 }
57 57
58 getPromociones() { 58 getPromociones() {
59 59
60 var sector = this.productoAcargar.CodSec; 60 var sector = this.productoAcargar.CodSec;
61 var codigo = this.productoAcargar.CodArt; 61 var codigo = this.productoAcargar.CodArt;
62 this.productoService.getPromociones(sector, codigo) 62 this.productoService.getPromociones(sector, codigo)
63 .subscribe((res: Producto[]) => { 63 .subscribe((res: Producto[]) => {
64 64
65 if (res.length === 0) { 65 if (res.length === 0) {
66 //Si no tiene promociones la cargará al carrito despues de un tiempo 66 //Si no tiene promociones la cargará al carrito despues de un tiempo
67 // setTimeout(() => { 67 // setTimeout(() => {
68 this.productoAcargar.cantidad = 1; 68 this.productoAcargar.cantidad = 1;
69 this.productoService.productos.push(this.productoAcargar); 69 this.productoService.productos.push(this.productoAcargar);
70 this.productoAcargar = this.productoService.productoAcargar = undefined; 70 this.productoAcargar = this.productoService.productoAcargar = undefined;
71 // }, 2000) 71 // }, 2000)
72 } else { 72 } else {
73 73
74 this.promociones = res; 74 this.promociones = res;
75 this.popoverDirective.show(); 75 this.popoverDirective.show();
76 } 76 }
77 }, error => { console.error(error); }) 77 }, error => { console.error(error); })
78 } 78 }
79 79
80 getProductos() { 80 getProductos() {
81 81
82 this.productoService.getAll() 82 this.productoService.getAll()
83 .subscribe((productos: Producto[]) => { 83 .subscribe((productos: Producto[]) => {
84 this.productos = productos; 84 this.productos = productos;
85 }); 85 });
86 } 86 }
87 87
88 irBusquedaProductos(verPromociones) { 88 irBusquedaProductos(value) {
89 89
90 this.productoService.verCategoriasProductos = verPromociones; 90 this.productoService.mostrar = value;
91 this.router.navigate(['busqueda-productos']); 91 this.router.navigate(['busqueda-productos']);
92 } 92 }
93 93
94 confirmarProducto() { 94 confirmarProducto() {
95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar; 95 var producto = this.promoAcargar ? this.promoAcargar : this.productoAcargar;
96 producto.cantidad = 1; 96 producto.cantidad = 1;
97 this.productoService.productos.push(producto); 97 this.productoService.productos.push(producto);
98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined; 98 this.productoService.productoAcargar = this.promoAcargar = this.productoAcargar = undefined;
99 this.promociones = []; 99 this.promociones = [];
100 this.popoverDirective.hide(); 100 this.popoverDirective.hide();
101 } 101 }
102 102
103 deshacerCarga() { 103 deshacerCarga() {
104 104
105 if (this.sinonimos.length > 0) { 105 if (this.sinonimos.length > 0) {
106 this.sinonimos = []; 106 this.sinonimos = [];
107 this.popoverDirective.hide(); 107 this.popoverDirective.hide();
108 } 108 }
109 109
110 if (this.promoAcargar) { 110 if (this.promoAcargar) {
111 this.promoAcargar = undefined; 111 this.promoAcargar = undefined;
112 if (this.productoAcargar.PRO) { 112 if (this.productoAcargar.PRO) {
113 this.productoAcargar = undefined; 113 this.productoAcargar = undefined;
114 this.promociones = []; 114 this.promociones = [];
115 this.popoverDirective.hide(); 115 this.popoverDirective.hide();
116 } else { 116 } else {
117 this.popoverDirective.show(); 117 this.popoverDirective.show();
118 } 118 }
119 } else { 119 } else {
120 this.productoAcargar = undefined; 120 this.productoAcargar = undefined;
121 this.promociones = []; 121 this.promociones = [];
122 this.popoverDirective.hide(); 122 this.popoverDirective.hide();
123 } 123 }
124 } 124 }
125 125
126 promoSeleccionada($event: Producto) { 126 promoSeleccionada($event: Producto) {
127 127
128 if ($event.tieneSinonimos) { 128 if ($event.tieneSinonimos) {
129 129
130 this.productoService.getProductoById($event.id) 130 this.productoService.getProductoById($event.id)
131 .subscribe((res : Producto) => { 131 .subscribe((res : Producto) => {
132 132
133 $event.imagenes = res.imagenes; 133 $event.imagenes = res.imagenes;
134 this.promoAcargar = $event; 134 this.promoAcargar = $event;
135 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt); 135 this.getSinonimos(this.promoAcargar.CodSec, this.promoAcargar.CodArt);
136 }, 136 },
137 error => { console.log(error); }) 137 error => { console.log(error); })
138 138
139 139
140 } else if (this.popoverDirective) { 140 } else if (this.popoverDirective) {
141 this.popoverDirective.hide(); 141 this.popoverDirective.hide();
142 } 142 }
143 } 143 }
144 144
145 getSinonimos(sector, codigo) { 145 getSinonimos(sector, codigo) {
146 146
147 this.productoService.getPromocionSinonimos(sector, codigo) 147 this.productoService.getPromocionSinonimos(sector, codigo)
148 .subscribe((res: Sinonimo[]) => { 148 .subscribe((res: Sinonimo[]) => {
149 149
150 res.forEach(sinonimo => { 150 res.forEach(sinonimo => {
151 151
152 sinonimo.productos.forEach(productoSinonimo => { 152 sinonimo.productos.forEach(productoSinonimo => {
153 153
154 this.promoAcargar.productos.forEach(productoPromo => { 154 this.promoAcargar.productos.forEach(productoPromo => {
155 155
156 if (productoSinonimo.id === productoPromo.id) { 156 if (productoSinonimo.id === productoPromo.id) {
157 sinonimo.cantidad = productoPromo.cantidad; 157 sinonimo.cantidad = productoPromo.cantidad;
158 sinonimo.productoPadre = productoPromo.id; 158 sinonimo.productoPadre = productoPromo.id;
159 } 159 }
160 }) 160 })
161 }) 161 })
162 }) 162 })
163 163
164 this.sinonimos = res; 164 this.sinonimos = res;
165 if (res.length > 0) 165 if (res.length > 0)
166 this.popoverDirective.show(); 166 this.popoverDirective.show();
167 else 167 else
168 this.popoverDirective.hide(); 168 this.popoverDirective.hide();
169 }) 169 })
170 } 170 }
171 171
172 productosPersonalizados($event: Producto[]) { 172 productosPersonalizados($event: Producto[]) {
173 173
174 var productosPersonalizados = $event; 174 var productosPersonalizados = $event;
175 175
176 this.promoAcargar.productos.forEach(productoPromo => { 176 this.promoAcargar.productos.forEach(productoPromo => {
177 177
178 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo); 178 if (!productoPromo.idSinonimo) productosPersonalizados.push(productoPromo);
179 }) 179 })
180 180
181 this.promoAcargar.productos = productosPersonalizados; 181 this.promoAcargar.productos = productosPersonalizados;
182 this.confirmarProducto(); 182 this.confirmarProducto();
183 } 183 }
184 184
185 buscarByCodigoBarras(busqueda) { 185 buscarByCodigoBarras(busqueda) {
186 186
187 let producto = this.productos.filter(producto => { 187 let producto = this.productos.filter(producto => {
188 return producto.codigoBarra == busqueda; 188 return producto.codigoBarra == busqueda;
189 }); 189 });
190 190
191 if (producto.length) { 191 if (producto.length) {
192 192
193 this.productoAcargar = producto[0]; 193 this.productoAcargar = producto[0];
194 this.getPromociones(); 194 this.getPromociones();
195 195
196 } else { 196 } else {
197 alert('No se encuentra el producto'); 197 alert('No se encuentra el producto');
198 } 198 }
199 199
200 } 200 }
201 201
202 } 202 }
203 203
src/app/services/producto.service.ts
Diff comments   View file @ 038a408
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 { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 promoAcargar: Producto; 14 promoAcargar: Producto;
15 verCategoriasProductos: boolean = true; 15 mostrar: string;
16 16
17 constructor(private http: HttpClient) { } 17 constructor(private http: HttpClient) { }
18 18
19 getProductoById(id): Observable<any> { 19 getProductoById(id): Observable<any> {
20 20
21 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); 21 return this.http.get(`${appSettings.apiUrl}/articulos/${id}`);
22 } 22 }
23 23
24 getAll(): Observable<any> { 24 getAll(): Observable<any> {
25 25
26 return this.http.get(`${appSettings.apiUrl}/articulos`); 26 return this.http.get(`${appSettings.apiUrl}/articulos`);
27 } 27 }
28 28
29 setProductos(producto: Producto) { 29 setProductos(producto: Producto) {
30 30
31 this.productos.push(producto); 31 this.productos.push(producto);
32 } 32 }
33 33
34 getPromocionByCodigos(sector, codigo): Observable<any> { 34 getPromocionByCodigos(sector, codigo): Observable<any> {
35 35
36 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`; 36 var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`;
37 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`; 37 // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
38 return this.http.get(url); 38 return this.http.get(url);
39 } 39 }
40 40
41 getPromociones(sector, codigo): Observable<any> { 41 getPromociones(sector, codigo): Observable<any> {
42 42
43 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 43 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
44 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`; 44 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
45 return this.http.get(url); 45 return this.http.get(url);
46 } 46 }
47 47
48 getPromocionSinonimos(sector, codigo): Observable<any> { 48 getPromocionSinonimos(sector, codigo): Observable<any> {
49 49
50 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`; 50 var url = `${appSettings.apiUrl}/sinonimos/promo/${sector}/${codigo}`;
51 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`; 51 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
52 return this.http.get(url); 52 return this.http.get(url);
53 } 53 }
54 54
55 updateImages(body): Observable<any> { 55 updateImages(body): Observable<any> {
56 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); 56 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
57 } 57 }
58 58
59 getCategorias() { 59 getCategorias() {
60 return this.http.get(`${appSettings.apiUrl}/categorias`); 60 return this.http.get(`${appSettings.apiUrl}/categorias`);
61 } 61 }
62 62
63 pagar() { 63 pagar() {
64 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, { 64 return this.http.post(`${appSettings.apiUrl}/comprobante/guardar`, {
65 productos: this.productos 65 productos: this.productos
66 }); 66 });
67 } 67 }
68 68
69 } 69 }
70 70
src/app/wrappers/categoria.ts
Diff comments   View file @ 038a408
1 export interface Categoria { 1 export interface Categoria {
2 id: number, 2 id: number,
3 detalle: string, 3 detalle: string,
4 es_promocion: boolean, 4 es_promocion: boolean,
5 vigencia_desde: Date, 5 vigencia_desde: Date,
6 vigencia_hasta: Date
7 }
6 vigencia_hasta: Date,
7 ES_PEDIDO: boolean