Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit ca54b5e448add4e2cd14b1dc0979aa230afd4f9b

Authored by Eric Fernandez
1 parent eaba826af9
Exists in master and in 1 other branch validar_pve

ordenar

Showing 6 changed files with 33 additions and 11 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ ca54b5e
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 *ngFor="let categoria of categorias" 23 *ngFor="let categoria of categorias"
24 [ngClass]="{active: categoriaActive == categoria.id}" 24 [ngClass]="{active: categoriaActive == categoria.id}"
25 (click)="categoriaActive = categoria.id; filterItems()" 25 (click)="categoriaActive = categoria.id; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 {{categoria.detalle}} 27 {{categoria.detalle}}
28 </li> 28 </li>
29 </ul> 29 </ul>
30 </div> 30 </div>
31 31
32 <!-- SEARCH INPUT --> 32 <!-- SEARCH INPUT -->
33 <div *ngIf="productos.length > 0" class="fade-in col"> 33 <div *ngIf="productos.length > 0" class="fade-in col">
34 34
35 <div class="row search"> 35 <div class="row search">
36 <div class="col-sm-10"> 36 <div class="col-sm-10">
37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
38 <input 38 <input
39 [matKeyboard]="'spanish'" 39 [matKeyboard]="'spanish'"
40 type="text" 40 type="text"
41 class="form-control form-control-lg shadow-sm rounded-pill px-5" 41 class="form-control form-control-lg shadow-sm rounded-pill px-5"
42 placeholder="Búsqueda productos" 42 placeholder="Búsqueda productos"
43 [(ngModel)]="searchTerm" 43 [(ngModel)]="searchTerm"
44 (ngModelChange)="filterItems()"> 44 (ngModelChange)="filterItems()">
45 </div> 45 </div>
46 <!-- BOTON VOLVER --> 46 <!-- BOTON VOLVER -->
47 <div class="col-sm-2"> 47 <div class="col-sm-2">
48 <button 48 <button
49 type="button" 49 type="button"
50 class="btn btn-light btn-lg shadow-sm" 50 class="btn btn-light btn-lg shadow-sm"
51 [routerLink]="['/inicio']"> 51 [routerLink]="['/inicio']">
52 <span class="font-weight-normal h6 pr-2">Volver</span> 52 <span class="font-weight-normal h6 pr-2">Volver</span>
53 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 53 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
54 </button> 54 </button>
55 </div> 55 </div>
56 <div class="col-sm-12 my-2"> 56 <div class="col-sm-12 my-2">
57 <span class="badge badge-light px-2">Más vendidos</span> 57 <span class="badge badge-light px-2">Más vendidos</span>
58 </div> 58 </div>
59 </div> 59 </div>
60 <!-- LISTA DE PRODUCTOS --> 60 <!-- LISTA DE PRODUCTOS -->
61 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 61 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
62 <div 62 <div
63 class="col-4 p-2" 63 class="col-4 p-2"
64 *ngFor="let producto of auxProductos"> 64 *ngFor="let producto of auxProductos">
65 <div 65 <div
66 class="card-effect bg-white rounded-sm shadow border-0" 66 class="card-effect bg-white rounded-sm shadow border-0"
67 (click)="elegirProducto(producto)"> 67 (click)="elegirProducto(producto)">
68 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 68 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
69 <div class="p-2"> 69 <div class="p-2">
70 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 70 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
71 <div class="row justify-content-between m-0"> 71 <div class="row justify-content-between m-0">
72 <div class="col-12 p-0"> 72 <div class="col-12 p-0">
73 <div class="text-left"> 73 <div class="text-left">
74 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p> 74 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
75 </div> 75 </div>
76 </div> 76 </div>
77 <div class="col-12 my-auto pt-2 pr-2 p-0"> 77 <div class="col-12 my-auto pt-2 pr-2 p-0">
78 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 78 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 86
87 <!-- SPINNER --> 87 <!-- SPINNER -->
88 <div 88 <div
89 *ngIf="productos.length === 0 && showSpinner" 89 *ngIf="productos.length === 0 && showSpinner"
90 class="col-sm-10 p-0 align-self-center text-center"> 90 class="col-sm-10 p-0 align-self-center text-center">
91 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 91 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
92 <span class="text-secondary m-2 h5">Cargando información.</span> 92 <span class="text-secondary m-2 h5">Cargando información.</span>
93 </div> 93 </div>
94 94
95 </div> 95 </div>
96 96
97 </div> 97 </div>
98 98
99 </div> 99 </div>
100 100
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ ca54b5e
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 ? 1 : 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 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) && 74 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
55 x.categoria_selfservice == this.categoriaActive; 75 x.categoria_selfservice == this.categoriaActive;
56 }); 76 });
57 } 77 }
58 78
59 agregarAlCarrito(producto: Producto) { 79 agregarAlCarrito(producto: Producto) {
60 80
61 producto.cantidad = 1; 81 producto.cantidad = 1;
62 this.productoService.productos.push(producto); 82 this.productoService.productos.push(producto);
63 } 83 }
64 84
65 lostBlur() { 85 lostBlur() {
66 this.blurFocus.emit(); 86 this.blurFocus.emit();
67 } 87 }
68 88
69 private elegirProducto(producto: Producto) { 89 private elegirProducto(producto: Producto) {
70 90
71 if (producto.PRO) { 91 if (producto.PRO) {
72 92
73 let imagenes = producto.imagenes; 93 let imagenes = producto.imagenes;
74 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt) 94 this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
75 .subscribe(res => { 95 .subscribe(res => {
76 96
77 this.productoService.productoAcargar = res[0]; 97 this.productoService.productoAcargar = res[0];
78 this.productoService.productoAcargar.imagenes = imagenes; 98 this.productoService.productoAcargar.imagenes = imagenes;
79 this.router.navigate(['inicio']); 99 this.router.navigate(['inicio']);
80 }, 100 },
81 error => { console.error(error); } 101 error => { console.error(error); }
82 ); 102 );
83 }else { 103 }else {
84 104
85 this.productoService.productoAcargar = producto; 105 this.productoService.productoAcargar = producto;
86 this.router.navigate(['inicio']); 106 this.router.navigate(['inicio']);
87 } 107 }
88 108
89 } 109 }
90 } 110 }
91 111
src/app/components/inicio/inicio.component.html
Diff comments   View file @ ca54b5e
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="sinonimos.length > 0" 153 *ngIf="sinonimos.length > 0"
153 type="button" 154 type="button"
154 class="btn btn-light btn-block shadow-sm" 155 class="btn btn-light btn-block shadow-sm"
155 (click)="pop.show()"> 156 (click)="pop.show()">
156 <span class="pr-2">Personalizar</span> 157 <span class="pr-2">Personalizar</span>
157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 158 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
158 </button> 159 </button>
159 <button 160 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 161 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 162 type="button"
162 class="btn btn-primary btn-block shadow-sm" 163 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 164 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 165 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 166 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 167 </button>
167 <button 168 <button
168 type="button" 169 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 170 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 171 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 172 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 173 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 174 </button>
174 <button 175 <button
175 type="button" 176 type="button"
176 class="btn btn-light btn-block shadow-sm" 177 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 178 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 179 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 180 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 181 </button>
181 </div> 182 </div>
182 </div> 183 </div>
183 </div> 184 </div>
184 </div> 185 </div>
185 186
186 <!-- BUSCAR PRODUCTOS --> 187 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos(true)" 188 <div (click)="irBusquedaProductos('todos')"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 189 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
189 <div class="card-body text-left px-4 py-3"> 190 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 191 <div class="row">
191 <div class="col-auto"> 192 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 193 <p class="h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 194 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 195 Busque aquí los productos<br>
195 que no tienen código </p> 196 que no tienen código </p>
196 </div> 197 </div>
197 <div class="col-auto p-0"> 198 <div class="col-auto p-0">
198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 199 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
199 </div> 200 </div>
200 </div> 201 </div>
201 202
202 </div> 203 </div>
203 </div> 204 </div>
204 205
205 </div> 206 </div>
206 207
207 </div> 208 </div>
208 209
209 </div> 210 </div>
210 </div> 211 </div>
211 212
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ ca54b5e
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 @ ca54b5e
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 @ ca54b5e
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 6 vigencia_hasta: Date,
7 ES_PEDIDO: boolean
7 } 8 }