Commit ceb40c2a7d06c691c64cca9dae6d96c31d4e03a2

Authored by Marcelo Puebla
Exists in master and in 1 other branch validar_pve

Merge branch 'master' of git.focasoftware.com:angular/autoservicio

src/app/app-routing.module.ts
... ... @@ -6,6 +6,7 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
6 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 7 import { MasterComponent } from './components/master/master.component';
8 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
  9 +import { PagoComponent } from './components/pago/pago.component';
9 10  
10 11 const routes: Routes = [
11 12 { path: '', component: HomeComponent },
... ... @@ -17,7 +18,8 @@ const routes: Routes = [
17 18 children: [
18 19 { path: 'inicio', component: InicioComponent },
19 20 { path: 'busqueda-productos', component: BusquedaProductosComponent },
20   - { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
  21 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
  22 + { path: 'pago', component: PagoComponent }
21 23 ]
22 24 },
23 25 { path: '**', redirectTo: '/home', pathMatch: 'full' },
src/app/app.module.ts
... ... @@ -21,6 +21,7 @@ import { MasterComponent } from './components/master/master.component';
21 21 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
22 22 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
23 23 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
  24 +import { PagoComponent } from './components/pago/pago.component';
24 25 //#endregion
25 26  
26 27 @NgModule({
... ... @@ -36,7 +37,8 @@ import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.com
36 37 MasterComponent,
37 38 PopoverPromosComponent,
38 39 PopoverSinonimosComponent,
39   - AmbImagenesComponent
  40 + AmbImagenesComponent,
  41 + PagoComponent
40 42 ],
41 43 imports: [
42 44 BrowserModule,
src/app/components/busqueda-productos/busqueda-productos.component.html
... ... @@ -20,49 +20,14 @@
20 20 </div>
21 21 <ul class="list-group">
22 22 <li
23   - [ngClass]="{active: categoria == 1}"
24   - (click)="categoria = 1"
  23 + *ngFor="let categoria of categorias"
  24 + [ngClass]="{active: categoriaActive == categoria.id}"
  25 + (click)="categoriaActive = categoria.id; filterItems()"
25 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26   - Combos y Promociones
27   - </li>
28   - <li
29   - [ngClass]="{active: categoria == 2}"
30   - (click)="categoria = 2"
31   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
32   - Todos
33   - </li>
34   - <li
35   - [ngClass]="{active: categoria == 3}"
36   - (click)="categoria = 3"
37   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
38   - Bebidas
39   - </li>
40   - <li
41   - [ngClass]="{active: categoria == 4}"
42   - (click)="categoria = 4"
43   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
44   - Sandwicherรญa
45   - </li>
46   - <li
47   - [ngClass]="{active: categoria == 5}"
48   - (click)="categoria = 5"
49   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
50   - Panaderia
51   - </li>
52   - <li
53   - [ngClass]="{active: categoria == 6}"
54   - (click)="categoria = 6"
55   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
56   - Golosinas
57   - </li>
58   - <li
59   - [ngClass]="{active: categoria == 7}"
60   - (click)="categoria = 7"
61   - class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
62   - Tabaqueria
  27 + {{categoria.detalle}}
63 28 </li>
64 29 </ul>
65   - </div>
  30 + </div>
66 31  
67 32 <!-- SEARCH INPUT -->
68 33 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
src/app/components/busqueda-productos/busqueda-productos.component.ts
1 1 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
2 2 import { ProductoService } from 'src/app/services/producto.service';
3 3 import { Producto } from 'src/app/wrappers/producto';
  4 +import { Categoria } from 'src/app/wrappers/categoria';
4 5 import { appSettings } from 'src/etc/AppSettings';
5 6 import { Router } from '@angular/router';
6 7  
... ... @@ -14,17 +15,24 @@ export class BusquedaProductosComponent implements OnInit {
14 15 private productos: Producto[] = [];
15 16 private auxProductos: Producto[] = [];
16 17 private searchTerm: string = '';
  18 + private categoriaActive: number = null;
17 19 private showSpinner: boolean = true;
18   - private categoria: Categorias = Categorias.todos;
19 20 private apiUrl: string = appSettings.apiUrl;
20 21 private showBtnCargarProducto: boolean = false;
  22 + private categorias: Categoria[] = [];
21 23  
22 24 constructor(
23 25 private productoService: ProductoService,
24 26 private router: Router) { }
25 27  
26 28 ngOnInit() {
27   -
  29 +
  30 + this.productoService.getCategorias()
  31 + .subscribe((categorias: Categoria[]) => {
  32 + this.categorias = categorias;
  33 + this.categoriaActive = categorias[0].id;
  34 + });
  35 +
28 36 this.productoService.productoAcargar = undefined;
29 37 this.productoService.getAll()
30 38 .subscribe((data: Producto[]) => {
... ... @@ -39,7 +47,8 @@ export class BusquedaProductosComponent implements OnInit {
39 47 filterItems() {
40 48  
41 49 this.auxProductos = this.productos.filter(x => {
42   - return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
  50 + return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
  51 + x.categoria_selfservice == this.categoriaActive;
43 52 });
44 53 }
45 54  
... ... @@ -66,12 +75,3 @@ export class BusquedaProductosComponent implements OnInit {
66 75 }
67 76 }
68 77  
69   -enum Categorias {
70   - promosCombos = 1,
71   - todos = 2,
72   - bebidas = 3,
73   - sandwicheria = 4,
74   - panaderia = 5,
75   - golosinas = 6,
76   - tabaqueria = 7,
77   -}
src/app/components/pago/pago.component.html
... ... @@ -0,0 +1,36 @@
  1 +<div class="row">
  2 +
  3 + <div class="col-12">
  4 +
  5 + <!-- NOMBRE DE SECCION -->
  6 + <div class="row m-0">
  7 + <div class="col-12 p-0">
  8 + <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
  9 + </div>
  10 + </div>
  11 +
  12 + <div class="row m-3 d-flex align-items-center">
  13 + <div class="col-4">
  14 + <h1>Mi Compra <i class="fa fa-shopping-cart"></i></h1>
  15 + </div>
  16 + <div class="col-8">
  17 + <h2>Seleccione medio de pago</h2>
  18 + </div>
  19 + </div>
  20 +
  21 + </div>
  22 +
  23 + <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
  24 + <h3>Pago con tarjeta de dรฉbito/crรฉdito</h3>
  25 + <div class="card-body">
  26 + <img src="{{apiUrl}}/imagenes/posnet.jpg">
  27 + </div>
  28 + </div>
  29 +
  30 + <div class="col-6 card bg-white border-0 shadow rounded mb-auto">
  31 + <h3>Pago con QR mercado pago</h3>
  32 + <div class="card-body">
  33 + <img src="{{apiUrl}}/imagenes/qrmp.jpg" alt="">
  34 + </div>
  35 + </div>
  36 +</div>
src/app/components/pago/pago.component.scss
src/app/components/pago/pago.component.spec.ts
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { PagoComponent } from './pago.component';
  4 +
  5 +describe('PagoComponent', () => {
  6 + let component: PagoComponent;
  7 + let fixture: ComponentFixture<PagoComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ PagoComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(PagoComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/pago/pago.component.ts
... ... @@ -0,0 +1,18 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +import { appSettings } from 'src/etc/AppSettings';
  3 +
  4 +@Component({
  5 + selector: 'app-pago',
  6 + templateUrl: './pago.component.html',
  7 + styleUrls: ['./pago.component.scss']
  8 +})
  9 +export class PagoComponent implements OnInit {
  10 +
  11 + private apiUrl: string = appSettings.apiUrl;
  12 +
  13 + constructor() { }
  14 +
  15 + ngOnInit() {
  16 + }
  17 +
  18 +}
src/app/services/producto.service.ts
... ... @@ -25,14 +25,14 @@ export class ProductoService {
25 25 }
26 26  
27 27 getPromocion(sector, codigo): Observable<any> {
28   -
  28 +
29 29 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
30 30 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
31 31 return this.http.get(url);
32 32 }
33 33  
34 34 getPromocionSinonimos(sector, codigo): Observable<any> {
35   -
  35 +
36 36 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
37 37 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
38 38 return this.http.get(url);
... ... @@ -42,4 +42,8 @@ export class ProductoService {
42 42 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
43 43 }
44 44  
  45 + getCategorias() {
  46 + return this.http.get(`${appSettings.apiUrl}/categorias`);
  47 + }
  48 +
45 49 }
src/app/wrappers/categoria.ts
... ... @@ -0,0 +1,7 @@
  1 +export interface Categoria {
  2 + id: number,
  3 + detalle: string,
  4 + es_promocion: boolean,
  5 + vigencia_desde: Date,
  6 + vigencia_hasta: Date
  7 +}
0 8 \ No newline at end of file
src/app/wrappers/producto.ts
... ... @@ -87,7 +87,7 @@ export interface Producto {
87 87 IMP_IMP_INT: boolean;
88 88 id: number;
89 89 nombreImagen?: any;
90   -
  90 + categoria_selfservice: number;
91 91 cantidad?: number;
92 92 showCargarProducto?: boolean;
93 93 }