Martin Macola / autoservicio

Download as
Browse Code »

Commit bd8d9956da7cebf322ace7d369fa3e4b3fa7c3fd

Authored by Marcelo Puebla
1 parent cfbb92b6f6
Exists in master

Cambio en seteo de informacion al sidebar.

Showing 4 changed files with 29 additions and 16 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ bd8d995
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">Volver&nbsp;&nbsp;</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)="agregarAlCarrito(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> 113 </div>
114 </div> 114 </div>
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 118
119 <!-- SPINNER --> 119 <!-- SPINNER -->
120 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 120 <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> 121 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
122 <span class="text-secondary m-2 h5">Cargando información.</span> 122 <span class="text-secondary m-2 h5">Cargando información.</span>
123 </div> 123 </div>
124 124
125 </div> 125 </div>
126 126
127 </div> 127 </div>
128 128
129 </div> 129 </div>
130 130
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ bd8d995
1 import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit } 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 import { SidebarComponent } from '../sidebar/sidebar.component';
6 5
7 @Component({ 6 @Component({
8 selector: 'app-busqueda-productos', 7 selector: 'app-busqueda-productos',
9 templateUrl: './busqueda-productos.component.html', 8 templateUrl: './busqueda-productos.component.html',
10 styleUrls: ['./busqueda-productos.component.scss'] 9 styleUrls: ['./busqueda-productos.component.scss']
11 }) 10 })
12 export class BusquedaProductosComponent implements OnInit { 11 export class BusquedaProductosComponent implements OnInit {
13 12
14 private productos: Producto[] = []; 13 private productos: Producto[] = [];
15 private auxProductos: Producto[] = []; 14 private auxProductos: Producto[] = [];
16 private searchTerm: string = ''; 15 private searchTerm: string = '';
17 private showSpinner: boolean = true; 16 private showSpinner: boolean = true;
18 private categoria: Categorias = Categorias.todos; 17 private categoria: Categorias = Categorias.todos;
19 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
20 19
21 productosParaCarrito : Producto[] = [];
22 20
23 constructor(private productoService: ProductoService) { } 21 constructor(private productoService: ProductoService) { }
24 22
25 // ngAfterViewInit() {
26 // this.sideBar.productos = [];
27 // }
28
29 ngOnInit() { 23 ngOnInit() {
30 24
31 this.productoService.getAll() 25 this.productoService.getAll()
32 .subscribe((data: Producto[]) => { 26 .subscribe((data: Producto[]) => {
33 27
34 this.auxProductos = this.productos = data; 28 this.auxProductos = this.productos = data;
35 }, (error) => { 29 }, (error) => {
36 this.showSpinner = false; 30 this.showSpinner = false;
37 console.error(error); 31 console.error(error);
38 }); 32 });
39 } 33 }
40 34
41 filterItems() { 35 filterItems() {
36
42 this.auxProductos = this.productos.filter(x => { 37 this.auxProductos = this.productos.filter(x => {
43 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) 38 return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
44 }); 39 });
45 } 40 }
46 41
47 agregarAlCarrito(producto: Producto) { 42 agregarAlCarrito(producto: Producto) {
48 producto.cantidad = 1; 43
49 this.productosParaCarrito.push(producto); 44 this.productoService.setProductos(producto);
50 } 45 }
51 46
52 } 47 }
53 48
54 enum Categorias { 49 enum Categorias {
55 promosCombos = 1, 50 promosCombos = 1,
56 todos = 2, 51 todos = 2,
57 bebidas = 3, 52 bebidas = 3,
58 sandwicheria = 4, 53 sandwicheria = 4,
59 panaderia = 5, 54 panaderia = 5,
60 golosinas = 6, 55 golosinas = 6,
61 tabaqueria = 7, 56 tabaqueria = 7,
62 } 57 }
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ bd8d995
1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service';
4 5
5 6
6 @Component({ 7 @Component({
7 selector: 'app-sidebar', 8 selector: 'app-sidebar',
8 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
9 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
10 inputs: ['productosCarrito']
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cont: number = 1; 14 private cont: number = 1;
15 private min: number = 1; 15 private min: number = 1;
16 private max: number = 50; 16 private max: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor() { } 22 constructor(private productoService: ProductoService) { }
23 23
24 ngOnInit() { } 24 ngOnInit() {
25
26 this.productoService.productosEvent
27 .subscribe((data: Producto[]) => {
28 this.productosCarrito = data;
29 }, (error) => { console.error(error); })
30 }
25 31
26 getCantidadProductos() { 32 getCantidadProductos() {
27 33
28 for (let i = 0; i < this.productosCarrito.length; i++) { 34 for (let i = 0; i < this.productosCarrito.length; i++) {
29 this.productosCarrito[i].cantidad = 1 35 this.productosCarrito[i].cantidad = 1
30 this.cont++; 36 this.cont++;
31 } 37 }
32 return this.cont; 38 return this.cont;
33 } 39 }
34 40
35 getTotal() { 41 getTotal() {
36 42
37 let subTotal = 0; 43 let subTotal = 0;
38 for (let i = 0; i < this.productosCarrito.length; i++) { 44 for (let i = 0; i < this.productosCarrito.length; i++) {
39 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 45 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
40 } 46 }
41 return this.total = subTotal; 47 return this.total = subTotal;
42 } 48 }
43 49
44 public aumentarContador(index) { 50 public aumentarContador(index) {
45 51
46 this.cont++; 52 this.cont++;
47 for (let i = 0; i < this.productosCarrito.length; i++) { 53 for (let i = 0; i < this.productosCarrito.length; i++) {
48 if (i === index) { 54 if (i === index) {
49 this.total = this.total + this.productosCarrito[i].PreVen; 55 this.total = this.total + this.productosCarrito[i].PreVen;
50 return (this.productosCarrito[i].cantidad === this.max) ? 56 return (this.productosCarrito[i].cantidad === this.max) ?
51 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++; 57 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
52 58
53 } 59 }
54 } 60 }
55 } 61 }
56 62
57 decrementarContador(index) { 63 decrementarContador(index) {
58 64
59 for (let i = 0; i < this.productosCarrito.length; i++) { 65 for (let i = 0; i < this.productosCarrito.length; i++) {
60 if (i === index && this.productosCarrito[i].cantidad > 1) { 66 if (i === index && this.productosCarrito[i].cantidad > this.min) {
61 this.productosCarrito[i].cantidad--; 67 this.productosCarrito[i].cantidad--;
62 this.cont--; 68 this.cont--;
63 break; 69 break;
64 } 70 }
65 } 71 }
66 72
67 this.getTotal() 73 this.getTotal()
68 } 74 }
69 75
70 setCantidadItems() { 76 setCantidadItems() {
71 77
72 this.cont = 0; 78 this.cont = 0;
73 for (let i = 0; i < this.productosCarrito.length; i++) { 79 for (let i = 0; i < this.productosCarrito.length; i++) {
74 this.cont += this.productosCarrito[i].cantidad; 80 this.cont += this.productosCarrito[i].cantidad;
75 } 81 }
76 } 82 }
77 83
78 deleteProducto(index) { 84 deleteProducto(index: number) {
79 85
80 for (let i = 0; i < this.productosCarrito.length; i++) { 86 for (let i = 0; i < this.productosCarrito.length; i++) {
81 if (i === index) { 87 if (i === index) {
82 this.cont -= this.productosCarrito[i].cantidad; 88 this.cont -= this.productosCarrito[i].cantidad;
83 //Elimina del total el PreVen de todo el item 89 //Elimina del total el PreVen de todo el item
84 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 90 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
85 this.productosCarrito.splice(i, 1); 91 this.productosCarrito.splice(i, 1);
86 return; 92 return;
87 } 93 }
88 } 94 }
89 } 95 }
90 96
91 cleanCarrito() { 97 cleanCarrito() {
92 98
93 this.productosCarrito = []; 99 this.productosCarrito = [];
94 this.total = 0; 100 this.total = 0;
95 this.cont = 0; 101 this.cont = 0;
96 } 102 }
97 } 103 }
src/app/services/producto.service.ts
Diff comments   View file @ bd8d995
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';
6 import { EventEmitter } from '@angular/core';
5 7
6 @Injectable({ 8 @Injectable({
7 providedIn: 'root' 9 providedIn: 'root'
8 }) 10 })
9 export class ProductoService { 11 export class ProductoService {
10 12
13 productos : Producto[] = [];
14 productosEvent: EventEmitter<Producto[]> = new EventEmitter();
15
11 constructor(private http: HttpClient) { } 16 constructor(private http: HttpClient) { }
12 17
13 getAll(): Observable<any> { 18 getAll(): Observable<any> {
19
14 return this.http.get(`${appSettings.apiUrl}/articulos`); 20 return this.http.get(`${appSettings.apiUrl}/articulos`);
15 } 21 }
16 22
23 setProductos(producto){
24
25 this.productos.push(producto);
26 this.productosEvent.emit(this.productos);
27 }
28
17 } 29 }
18 30