Commit ceb40c2a7d06c691c64cca9dae6d96c31d4e03a2
Exists in
master
and in
1 other branch
Merge branch 'master' of git.focasoftware.com:angular/autoservicio
Showing
11 changed files
Show diff stats
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