Mauricio Cattafi / autoservicio

Browse Code »

Commit ceb40c2a7d06c691c64cca9dae6d96c31d4e03a2

Authored by Marcelo Puebla 2019-08-15 16:47:31 -0300

2 parents 8b9f12f433 4bc98d2cad

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

Diff comments View file @ ceb40c2

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
-      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
+      { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
+      { path: 'pago', component: PagoComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ ceb40c2

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
+import { PagoComponent } from './components/pago/pago.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
-    AmbImagenesComponent
+    AmbImagenesComponent,
+    PagoComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/busqueda-productos/busqueda-productos.component.html

Diff comments View file @ ceb40c2

 <div class="row m-0 fade-in">
   <div class="col-12 p-0">
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center">
           Búsqueda
           <i class="fa fa-search"></i>
         </p>
       </div>
     </div>
     <div class="row m-3 disable-user-select">
       <!-- FILTROS -->
       <div class="col-sm-2 p-1">
         <div class="text-center">
           <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
         </div>
         <ul class="list-group">
           <li
-            [ngClass]="{active: categoria == 1}"
+            *ngFor="let categoria of categorias"
-            (click)="categoria = 1"
+            [ngClass]="{active: categoriaActive == categoria.id}"
+            (click)="categoriaActive = categoria.id; filterItems()"
             class="list-group-item list-group-item-action text-center my-1 p-2 h6">
-            Combos y Promociones
+            {{categoria.detalle}}
-          </li>
-          <li
-            [ngClass]="{active: categoria == 2}"
-            (click)="categoria = 2"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Todos
-          </li>
-          <li
-            [ngClass]="{active: categoria == 3}"
-            (click)="categoria = 3"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Bebidas
-          </li>
-          <li
-            [ngClass]="{active: categoria == 4}"
-            (click)="categoria = 4"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Sandwichería
-          </li>
-          <li
-            [ngClass]="{active: categoria == 5}"
-            (click)="categoria = 5"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Panaderia
-          </li>
-          <li
-            [ngClass]="{active: categoria == 6}"
-            (click)="categoria = 6"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Golosinas
-          </li>
-          <li
-            [ngClass]="{active: categoria == 7}"
-            (click)="categoria = 7"
-            class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
-            Tabaqueria
           </li>
         </ul>
       </div>
       <!-- SEARCH INPUT -->
       <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
         <div class="form-group row search">
           <div class="col-sm-10">
             <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
             <input
               type="text"
               class="form-control form-control-lg shadow-sm rounded-pill px-5"
               placeholder="Búsqueda productos"
               [(ngModel)]="searchTerm"
               (ngModelChange)="filterItems()">
           </div>
           <!-- BOTON VOLVER -->
           <div class="col-sm-2">
             <button
               type="button"
               class="btn btn-light btn-lg shadow-sm"
               [routerLink]="['/inicio']">
               <span class="font-weight-normal h6 pr-2">Volver</span>
               <i class="fa fa-undo text-warning" aria-hidden="true"></i>
             </button>
           </div>
         </div>
         <!-- LISTA DE PRODUCTOS -->
         <div class="row align-items-start vh-60 overflow-scroll disable-user-select">
           <div
             class="col-4 p-2"
             *ngFor="let producto of auxProductos">
             <div
               class="card-effect bg-white rounded-sm shadow border-0"
               (click)="mostrarBotonCargar(producto)">
               <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
               <div class="p-2">
                 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
                 <div class="row justify-content-between m-0">
                   <div class="col-12 p-0">
                     <div class="text-left">
                       <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
                       <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
                     </div>
                   </div>
                   <div class="col-12 my-auto pt-2 pr-2 p-0">
                       <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
                   </div>
                 </div>
                 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom">
                   <div class="col-sm-12">
                     <button
                       type="button"
                       class="btn btn-block btn-outline-primary shadow"
                       (click)="elegirProducto(producto)">
                       Cargar Producto
                     </button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
       <!-- SPINNER -->
       <div *ngIf="productos.length === 0 && showSpinner"  class="col-sm-10 align-self-center">
           <div class="spinner-border spinner-lg text-secondary" role="status"></div>
           <span class="text-secondary m-2 h5">Cargando información.</span>
       </div>
     </div>
   </div>
 </div>

src/app/components/busqueda-productos/busqueda-productos.component.ts

Diff comments View file @ ceb40c2

 import { Component, OnInit, APP_BOOTSTRAP_LISTENER } from '@angular/core';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Producto } from 'src/app/wrappers/producto';
+import { Categoria } from 'src/app/wrappers/categoria';
 import { appSettings } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
 @Component({
   selector: 'app-busqueda-productos',
   templateUrl: './busqueda-productos.component.html',
   styleUrls: ['./busqueda-productos.component.scss']
 })
 export class BusquedaProductosComponent implements OnInit {
   private productos: Producto[] = [];
   private auxProductos: Producto[] = [];
   private searchTerm: string = '';
+  private categoriaActive: number = null;
   private showSpinner: boolean = true;
-  private categoria: Categorias = Categorias.todos;
   private apiUrl: string = appSettings.apiUrl;
   private showBtnCargarProducto: boolean = false;
+  private categorias: Categoria[] = [];
   constructor(
     private productoService: ProductoService,
     private router: Router) { }
   ngOnInit() {
+    this.productoService.getCategorias()
+      .subscribe((categorias: Categoria[]) => {
+        this.categorias = categorias;
+        this.categoriaActive = categorias[0].id;
+      });
     this.productoService.productoAcargar = undefined;
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.auxProductos = this.productos = data;
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     this.auxProductos = this.productos.filter(x => {
-      return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
+      return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
+        x.categoria_selfservice == this.categoriaActive;
     });
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
   }
   private mostrarBotonCargar(producto: Producto) {
     for (let i = 0; i < this.auxProductos.length; i++) {
       if (this.auxProductos[i].id !== producto.id)
         this.auxProductos[i].showCargarProducto = false;
       else if (producto.showCargarProducto) return;
     }
     producto.showCargarProducto = !producto.showCargarProducto
   }
   private elegirProducto(producto: Producto) {
     this.productoService.productoAcargar = producto;
     this.router.navigate(['inicio']);
   }
 }

src/app/components/pago/pago.component.html

Diff comments View file @ ceb40c2

File was created	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>
	37

src/app/components/pago/pago.component.scss

Diff comments View file @ ceb40c2

src/app/components/pago/pago.component.spec.ts

Diff comments View file @ ceb40c2

File was created	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	});
	26

src/app/components/pago/pago.component.ts

Diff comments View file @ ceb40c2

File was created	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	}
	19

src/app/services/producto.service.ts

Diff comments View file @ ceb40c2

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { appSettings } from 'src/etc/AppSettings';
 import { Producto } from '../wrappers/producto';
 @Injectable({
   providedIn: 'root'
 })
 export class ProductoService {
   productos: Producto[] = [];
   productoAcargar: Producto;
   constructor(private http: HttpClient) { }
   getAll(): Observable<any> {
     return this.http.get(`${appSettings.apiUrl}/articulos`);
   }
   setProductos(producto: Producto) {
     this.productos.push(producto);
   }
   getPromocion(sector, codigo): Observable<any> {
     var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
     // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
     return this.http.get(url);
   }
   getPromocionSinonimos(sector, codigo): Observable<any> {
     var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
     // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
     return this.http.get(url);
   }
   updateImages(body): Observable<any> {
     return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
   }
+  getCategorias() {
+    return this.http.get(`${appSettings.apiUrl}/categorias`);
+  }
 }

src/app/wrappers/categoria.ts

Diff comments View file @ ceb40c2

File was created	1	export interface Categoria {
	2	id: number,
	3	detalle: string,
	4	es_promocion: boolean,
	5	vigencia_desde: Date,
	6	vigencia_hasta: Date
	7	}

src/app/wrappers/producto.ts

Diff comments View file @ ceb40c2

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	categoria_selfservice: number;
91	cantidad?: number;	91	cantidad?: number;
92	showCargarProducto?: boolean;	92	showCargarProducto?: boolean;
93	esPadre?: boolean;	93	esPadre?: boolean;
94	}	94	}
95		95