Martin Macola / autoservicio

Browse Code »

Commit 569a98e9faab563caa3ab019c0fa2047f5577119

Authored by Marcelo Puebla 2019-09-05 15:25:13 -0300

2 parents 74f83d906d 518aa41899

Exists in master

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

Showing 9 changed files Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 569a98e

 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 { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
 import { ComandaComponent } from './components/comanda/comanda.component';
+import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   { path: 'cancelar-compra', component: CancelarCompraComponent },
   { path: 'mensaje-final', component: MensajeFinalComponent },
   { path: 'comanda', component: ComandaComponent },
+  { path: 'pedidos-salientes', component: PedidosSalientesComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 569a98e

 //#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';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 //#endregion
 //#region Keyboard
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatKeyboardModule } from '@ngx-material-keyboard/core';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.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 { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
 import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component';
 import { ComandaComponent } from './components/comanda/comanda.component';
+import { PedidosSalientesComponent } from './components/pedidos-salientes/pedidos-salientes.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     CancelarCompraComponent,
     MensajeFinalComponent,
-    ComandaComponent
+    ComandaComponent,
+    PedidosSalientesComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot(),
     BrowserAnimationsModule,
     MatKeyboardModule,
     MatButtonModule,
     CarouselModule.forRoot(),
     PaginationModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

Diff comments View file @ 569a98e

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	{{title}}	8	{{title}}
9	<i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>	9	<i *ngIf="title === 'Búsqueda'" class="fa fa-search"></i>
10	</p>	10	</p>
11	</div>	11	</div>
12	</div>	12	</div>
13		13
14	<div class="row m-3 disable-user-select">	14	<div class="row m-3 disable-user-select">
15		15
16	<!-- FILTROS -->	16	<!-- FILTROS -->
17	<div *ngIf="queMostrar != 'promociones'" class="col-sm-2 p-1">	17	<div *ngIf="queMostrar != 'promociones'" 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: categoriaActive == 0}"	23	[ngClass]="{active: categoriaActive == 0}"
24	(click)="categoriaActive = 0; filterItems()"	24	(click)="categoriaActive = 0; filterItems()"
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	Todos	26	Todos
27	</li>	27	</li>
28	<li	28	<li
29	*ngFor="let categoria of categorias"	29	*ngFor="let categoria of categorias"
30	[ngClass]="{active: categoriaActive == categoria.id}"	30	[ngClass]="{active: categoriaActive == categoria.id}"
31	(click)="categoriaActive = categoria.id; filterItems()"	31	(click)="categoriaActive = categoria.id; filterItems()"
32	class="list-group-item list-group-item-action text-center my-1 p-2 h6">	32	class="list-group-item list-group-item-action text-center my-1 p-2 h6">
33	{{categoria.detalle}}	33	{{categoria.detalle}}
34	</li>	34	</li>
35	</ul>	35	</ul>
36	</div>	36	</div>
37		37
38	<!-- SEARCH INPUT -->	38	<!-- SEARCH INPUT -->
39	<div *ngIf="productos.length > 0" class="fade-in col">	39	<div *ngIf="productos.length > 0" class="fade-in col">
40		40
41	<div class="row search">	41	<div class="row search">
42	<div class="col-sm-10">	42	<div class="col-sm-10">
43	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>	43	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
44	<input	44	<input
45	[matKeyboard]="'spanish'"	45	[matKeyboard]="'spanish'"
46	type="text"	46	type="text"
47	class="form-control form-control-lg shadow-sm rounded-pill px-5"	47	class="form-control form-control-lg shadow-sm rounded-pill px-5"
48	placeholder="Búsqueda productos"	48	placeholder="Búsqueda productos"
49	[(ngModel)]="searchTerm"	49	[(ngModel)]="searchTerm"
50	(ngModelChange)="filterItems()">	50	(ngModelChange)="filterItems()">
51	</div>	51	</div>
52	<!-- BOTON VOLVER -->	52	<!-- BOTON VOLVER -->
53	<div class="col-sm-2">	53	<div class="col-sm-2">
54	<button	54	<button
55	type="button"	55	type="button"
56	class="btn btn-light btn-lg shadow-sm"	56	class="btn btn-light btn-lg shadow-sm"
57	[routerLink]="['/inicio']">	57	[routerLink]="['/inicio']">
58	<span class="font-weight-normal h6 pr-2">Volver</span>	58	<span class="font-weight-normal h6 pr-2">Volver</span>
59	<i class="fa fa-undo text-warning" aria-hidden="true"></i>	59	<i class="fa fa-undo text-warning" aria-hidden="true"></i>
60	</button>	60	</button>
61	</div>	61	</div>
62	<div class="col-sm-12 my-2 h5">	62	<div class="col-sm-12 my-2 h5">
63	<button	63	<button
64	class="btn btn-outline-primary badge badge-light px-2 shadow-sm"	64	class="btn btn-outline-primary badge badge-light px-2 shadow-sm"
65	[ngClass]="{'active': ordenandoByVendidos}"	65	[ngClass]="{'active': ordenandoByVendidos}"
66	(click)="ordenandoByVendidos = !ordenandoByVendidos; ordenar()"	66	(click)="ordenandoByVendidos = !ordenandoByVendidos; filterItems()"
67	>Más vendidos</button>	67	>Más vendidos</button>
68	</div>	68	</div>
69	</div>	69	</div>
70	<!-- LISTA DE PRODUCTOS -->	70	<!-- LISTA DE PRODUCTOS -->
71	<div class="row align-items-start vh-70 overflow-scroll disable-user-select">	71	<div class="row align-items-start vh-70 overflow-scroll disable-user-select">
72	<div	72	<div
73	class="col-4 p-2"	73	class="col-4 p-2"
74	*ngFor="let producto of auxProductos">	74	*ngFor="let producto of auxProductos">
75	<div	75	<div
76	class="card-effect bg-white rounded-sm shadow border-0"	76	class="card-effect bg-white rounded-sm shadow border-0"
77	(click)="elegirProducto(producto)">	77	(click)="elegirProducto(producto)">
78	<img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">	78	<img src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
79	<div class="p-2">	79	<div class="p-2">
80	<p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>	80	<p class="h6 min-h-40 text-left m-0"><small>{{producto.DET_LAR}}</small></p>
81	<div class="row m-0">	81	<div class="row m-0">
82	<div class="col-12 my-auto pt-2 pr-2 p-0">	82	<div class="col-12 my-auto pt-2 pr-2 p-0">
83	<p class="text-right m-0 h6">{{producto.PreVen \| currency}}</p>	83	<p class="text-right m-0 h6">{{producto.PreVen \| currency}}</p>
84	</div>	84	</div>
85	</div>	85	</div>
86	</div>	86	</div>
87	</div>	87	</div>
88	</div>	88	</div>
89	</div>	89	</div>
90	</div>	90	</div>
91		91
92	<!-- SPINNER -->	92	<!-- SPINNER -->
93	<div	93	<div
94	*ngIf="productos.length === 0 && showSpinner"	94	*ngIf="productos.length === 0 && showSpinner"
95	class="col-sm-10 p-0 align-self-center text-center">	95	class="col-sm-10 p-0 align-self-center text-center">
96	<div class="spinner-border spinner-lg text-secondary" role="status"></div>	96	<div class="spinner-border spinner-lg text-secondary" role="status"></div>
97	<span class="text-secondary m-2 h5">Cargando información.</span>	97	<span class="text-secondary m-2 h5">Cargando información.</span>
98	</div>	98	</div>
99		99
100	</div>	100	</div>
101		101
102	</div>	102	</div>
103		103
104	</div>	104	</div>
105		105

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

Diff comments View file @ 569a98e

 import { Component, OnInit, EventEmitter } 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 queMostrar: string = 'todos';
   private apiImagenes: string = appSettings.apiImagenes;
   private categorias: Categoria[] = [];
   private blurFocus = new EventEmitter();
   private ordenandoByVendidos = true;
   private title: string = 'Búsqueda'
   constructor(
     private productoService: ProductoService,
     private router: Router) { }
   ngOnInit() {
     this.queMostrar = this.productoService.mostrar;
     this.productoService.getCategorias()
       .subscribe((categorias: Categoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             this.title = 'Búsqueda';
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 1;
             this.title = 'Promociones';
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: Categoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 0;
             this.title = 'Ordenar';
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             this.title = 'Búsqueda';
             break;
         }
       });
     this.productoService.productoAcargar = undefined;
     this.productoService.getAll()
       .subscribe((data: Producto[]) => {
         this.setProductosSinImagen(data);
         if (this.queMostrar == 'ordenar') {
           this.categorias.forEach((categoria: Categoria) => {
             let tempProductos = data.filter((producto: Producto) => {
               return producto.categoria_selfservice == categoria.id;
             });
             this.productos = this.productos.concat(tempProductos);
           });
         } else {
           this.productos = data;
         }
         this.filterItems();
-        this.ordenar();
       }, (error) => {
         this.showSpinner = false;
         console.error(error);
       });
   }
   filterItems() {
     this.auxProductos = this.productos.filter(x => {
       if (this.categoriaActive === 0) {
         return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase());
       }
       else {
         return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) &&
           x.categoria_selfservice === this.categoriaActive;
       }
     });
+    this.ordenar();
   }
   agregarAlCarrito(producto: Producto) {
     producto.cantidad = 1;
     this.productoService.productos.push(producto);
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxProductos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
-    } else {
-      this.filterItems();
     }
   }
   private elegirProducto(producto: Producto) {
     if (producto.PRO) {
       let imagenes = producto.imagenes;
       this.productoService.getPromocionByCodigos(producto.CodSec, producto.CodArt)
         .subscribe(res => {
           this.productoService.productoAcargar = res[0];
           this.productoService.productoAcargar.imagenes = imagenes;
           this.router.navigate(['inicio']);
         },
           error => { console.error(error); }
         );
     } else {
       this.productoService.productoAcargar = producto;
       this.router.navigate(['inicio']);
     }
   }
   private setProductosSinImagen(productos: Producto[]) {
     productos.forEach((producto: Producto) => {
       producto.imagenes = producto.imagenes.length == 0 ?
         [{ imagen: 'noImage.jpg' }] : producto.imagenes;
     })
   }

src/app/components/pedidos-salientes/pedidos-salientes.component.html

Diff comments View file @ 569a98e

File was created	1	<div class="bg-primary-gradient vh-100">
	2	<div class="d-flex justify-content-center">
	3	<div class="row my-5 text-white text-center">
	4	<h1 class="col-12">Su pedido ya esta listo.</h1>
	5	<h2 class="col-12 mt-3">Nº de Pedido</h2>
	6
	7	<h1 *ngIf="pedidosRecientes.length" class="col-12 border rounded">
	8	{{rellenar(pedidosRecientes[0].id, 2)}}
	9	</h1>
	10
	11	<h2 *ngFor="let pedido of pedidosRecientes; let i = index" [hidden]="i == 0" class="col-4 border rounded mx-0">
	12	{{rellenar(pedido.id, 2)}}
	13	</h2>
	14	</div>
	15	</div>
	16	</div>
	17

src/app/components/pedidos-salientes/pedidos-salientes.component.scss

Diff comments View file @ 569a98e

src/app/components/pedidos-salientes/pedidos-salientes.component.spec.ts

Diff comments View file @ 569a98e

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { PedidosSalientesComponent } from './pedidos-salientes.component';
	4
	5	describe('PedidosSalientesComponent', () => {
	6	let component: PedidosSalientesComponent;
	7	let fixture: ComponentFixture<PedidosSalientesComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ PedidosSalientesComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(PedidosSalientesComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/components/pedidos-salientes/pedidos-salientes.component.ts

Diff comments View file @ 569a98e

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { ComandaService } from 'src/app/services/comanda.service';
	3
	4	@Component({
	5	selector: 'app-pedidos-salientes',
	6	templateUrl: './pedidos-salientes.component.html',
	7	styleUrls: ['./pedidos-salientes.component.scss']
	8	})
	9	export class PedidosSalientesComponent implements OnInit {
	10
	11	private pedidosRecientes = [];
	12	private ciclo;
	13
	14	constructor(private comandaService: ComandaService) { }
	15
	16	ngOnInit() {
	17	this.buscar();
	18
	19	this.ciclo = setTimeout(() => {
	20	this.buscar();
	21	}, 5000)
	22	}
	23
	24	ngOnDestroy() {
	25
	26	clearTimeout(this.ciclo);
	27	}
	28
	29	buscar() {
	30
	31	this.comandaService
	32	.getPendientesEntrega()
	33	.subscribe((pedidos: []) => {
	34
	35	this.pedidosRecientes = pedidos;
	36	}, console.log);
	37	}
	38
	39	rellenar(relleno, longitud) {
	40	relleno = '' + relleno;
	41	while (relleno.length < longitud) {
	42	relleno = '0' + relleno;
	43	}
	44	return relleno;
	45	}
	46	}
	47

src/app/services/comanda.service.ts

Diff comments View file @ 569a98e

 import { Injectable } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { appSettings } from "src/etc/AppSettings";
 import { Observable } from "rxjs";
 import { Comanda } from '../wrappers/comanda';
 @Injectable({
   providedIn: "root"
 })
 export class ComandaService {
   private apiUrl: string = appSettings.apiUrl;
   constructor(private http: HttpClient) { }
   getAll(): Observable<any> {
     return this.http.get(`${this.apiUrl}/comandas`);
   }
   updateComanda(id: number, estado: number, observacion: string): Observable<any> {
     return this.http.get(`${this.apiUrl}/comandas/update/${id}/${estado}/${observacion}`);
   }
+  getPendientesEntrega() {
+    return this.http.get(`${this.apiUrl}/comandas/pendientes-entrega`);
+  }
 }