Martin Macola / autoservicio

Download as
Browse Code »

Commit c070e41e87e493a67b5244eaa05bac1eec48d8f2

Authored by Marcelo Puebla
1 parent 6787e86374
Exists in master

Agregada logica para mostrar boton cargar producto.

Showing 3 changed files with 18 additions and 3 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ c070e41
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-4 disable-user-select"> 14 <div class="row m-4 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div class="col-sm-2 p-1"> 17 <div 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: categoria == 1}" 23 [ngClass]="{active: categoria == 1}"
24 (click)="categoria = 1" 24 (click)="categoria = 1"
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 Combos y Promociones 26 Combos y Promociones
27 </li> 27 </li>
28 <li 28 <li
29 [ngClass]="{active: categoria == 2}" 29 [ngClass]="{active: categoria == 2}"
30 (click)="categoria = 2" 30 (click)="categoria = 2"
31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
32 Todos 32 Todos
33 </li> 33 </li>
34 <li 34 <li
35 [ngClass]="{active: categoria == 3}" 35 [ngClass]="{active: categoria == 3}"
36 (click)="categoria = 3" 36 (click)="categoria = 3"
37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
38 Bebidas 38 Bebidas
39 </li> 39 </li>
40 <li 40 <li
41 [ngClass]="{active: categoria == 4}" 41 [ngClass]="{active: categoria == 4}"
42 (click)="categoria = 4" 42 (click)="categoria = 4"
43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
44 Sandwichería 44 Sandwichería
45 </li> 45 </li>
46 <li 46 <li
47 [ngClass]="{active: categoria == 5}" 47 [ngClass]="{active: categoria == 5}"
48 (click)="categoria = 5" 48 (click)="categoria = 5"
49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
50 Panaderia 50 Panaderia
51 </li> 51 </li>
52 <li 52 <li
53 [ngClass]="{active: categoria == 6}" 53 [ngClass]="{active: categoria == 6}"
54 (click)="categoria = 6" 54 (click)="categoria = 6"
55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
56 Golosinas 56 Golosinas
57 </li> 57 </li>
58 <li 58 <li
59 [ngClass]="{active: categoria == 7}" 59 [ngClass]="{active: categoria == 7}"
60 (click)="categoria = 7" 60 (click)="categoria = 7"
61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
62 Tabaqueria 62 Tabaqueria
63 </li> 63 </li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 66
67 <!-- SEARCH INPUT --> 67 <!-- SEARCH INPUT -->
68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
69 69
70 <div class="form-group row search"> 70 <div class="form-group row search">
71 <div class="col-sm-10"> 71 <div class="col-sm-10">
72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
73 <input 73 <input
74 type="text" 74 type="text"
75 class="form-control form-control-lg shadow-sm rounded-pill px-5" 75 class="form-control form-control-lg shadow-sm rounded-pill px-5"
76 placeholder="Búsqueda productos" 76 placeholder="Búsqueda productos"
77 [(ngModel)]="searchTerm" 77 [(ngModel)]="searchTerm"
78 (ngModelChange)="filterItems()"> 78 (ngModelChange)="filterItems()">
79 </div> 79 </div>
80 <!-- BOTON VOLVER --> 80 <!-- BOTON VOLVER -->
81 <div class="col-sm-2"> 81 <div class="col-sm-2">
82 <button 82 <button
83 type="button" 83 type="button"
84 class="btn btn-light btn-lg shadow-sm" 84 class="btn btn-light btn-lg shadow-sm"
85 [routerLink]="['/inicio']"> 85 [routerLink]="['/inicio']">
86 <span class="font-weight-normal h6 pr-2">Volver</span> 86 <span class="font-weight-normal h6 pr-2">Volver</span>
87 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 87 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
88 </button> 88 </button>
89 </div> 89 </div>
90 </div> 90 </div>
91 <!-- LISTA DE PRODUCTOS --> 91 <!-- LISTA DE PRODUCTOS -->
92 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 92 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
93 <div 93 <div
94 class="col-4 p-2" 94 class="col-4 p-2"
95 *ngFor="let producto of auxProductos"> 95 *ngFor="let producto of auxProductos">
96 <div 96 <div
97 class="card-effect bg-white rounded-sm shadow border-0" 97 class="card-effect bg-white rounded-sm shadow border-0"
98 (click)="agregarAlCarrito(producto)"> 98 (click)="mostrarBotonCargar(producto)">
99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto"> 99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
100 <div class="p-2"> 100 <div class="p-2">
101 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
102 <div class="row justify-content-between m-0"> 102 <div class="row justify-content-between m-0">
103 <div class="col-12 p-0"> 103 <div class="col-12 p-0">
104 <div class="text-left"> 104 <div class="text-left">
105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="col-12 my-auto pt-2 pr-2 p-0"> 109 <div class="col-12 my-auto pt-2 pr-2 p-0">
110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
111 </div> 111 </div>
112 </div> 112 </div>
113 <div *ngIf="producto.showCargarProducto" class="row mt-2">
114 <div class="col-sm-12">
115 <div class="btn btn-block btn-outline-primary shadow">Cargar Producto</div>
116 </div>
117 </div>
113 </div> 118 </div>
114 </div> 119 </div>
115 </div> 120 </div>
116 </div> 121 </div>
117 </div> 122 </div>
118 123
119 <!-- SPINNER --> 124 <!-- SPINNER -->
120 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 125 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
121 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 126 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
122 <span class="text-secondary m-2 h5">Cargando información.</span> 127 <span class="text-secondary m-2 h5">Cargando información.</span>
123 </div> 128 </div>
124 129
125 </div> 130 </div>
126 131
127 </div> 132 </div>
128 133
129 </div> 134 </div>
130 135
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ c070e41
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } 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 { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 5
6 @Component({ 6 @Component({
7 selector: 'app-busqueda-productos', 7 selector: 'app-busqueda-productos',
8 templateUrl: './busqueda-productos.component.html', 8 templateUrl: './busqueda-productos.component.html',
9 styleUrls: ['./busqueda-productos.component.scss'] 9 styleUrls: ['./busqueda-productos.component.scss']
10 }) 10 })
11 export class BusquedaProductosComponent implements OnInit { 11 export class BusquedaProductosComponent implements OnInit {
12 12
13 private productos: Producto[] = []; 13 private productos: Producto[] = [];
14 private auxProductos: Producto[] = []; 14 private auxProductos: Producto[] = [];
15 private searchTerm: string = ''; 15 private searchTerm: string = '';
16 private showSpinner: boolean = true; 16 private showSpinner: boolean = true;
17 private categoria: Categorias = Categorias.todos; 17 private categoria: Categorias = Categorias.todos;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19 private showBtnCargarProducto: boolean = false;
20 20
21 constructor(private productoService: ProductoService) { } 21 constructor(private productoService: ProductoService) { }
22 22
23 ngOnInit() { 23 ngOnInit() {
24 24
25 this.productoService.getAll() 25 this.productoService.getAll()
26 .subscribe((data: Producto[]) => { 26 .subscribe((data: Producto[]) => {
27 27
28 this.auxProductos = this.productos = data; 28 this.auxProductos = this.productos = data;
29 }, (error) => { 29 }, (error) => {
30 this.showSpinner = false; 30 this.showSpinner = false;
31 console.error(error); 31 console.error(error);
32 }); 32 });
33 } 33 }
34 34
35 filterItems() { 35 filterItems() {
36 36
37 this.auxProductos = this.productos.filter(x => { 37 this.auxProductos = this.productos.filter(x => {
38 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 38 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
39 }); 39 });
40 } 40 }
41 41
42 agregarAlCarrito(producto: Producto) { 42 agregarAlCarrito(producto: Producto) {
43 43
44 producto.cantidad = 1; 44 producto.cantidad = 1;
45 this.productoService.productos.push(producto); 45 this.productoService.productos.push(producto);
46 } 46 }
47 47
48 mostrarBotonCargar(producto: Producto) {
49
50 for (let i = 0; i < this.auxProductos.length; i++) {
51 if (this.auxProductos[i].id !== producto.id)
52 this.auxProductos[i].showCargarProducto = false;
53 else if (producto.showCargarProducto) return;
54 }
55 producto.showCargarProducto = !producto.showCargarProducto
56 }
48 } 57 }
49 58
50 enum Categorias { 59 enum Categorias {
51 promosCombos = 1, 60 promosCombos = 1,
52 todos = 2, 61 todos = 2,
53 bebidas = 3, 62 bebidas = 3,
54 sandwicheria = 4, 63 sandwicheria = 4,
55 panaderia = 5, 64 panaderia = 5,
56 golosinas = 6, 65 golosinas = 6,
57 tabaqueria = 7, 66 tabaqueria = 7,
58 } 67 }
59 68
src/app/wrappers/producto.ts
Diff comments   View file @ c070e41
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 90
91 cantidad?:number; 91 cantidad?:number;
92 showCargarProducto?:boolean;
92 } 93 }
93 94