Mauricio Cattafi / autoservicio

Commit 344c5a1549e30344e809269849faa0f401cc2f4d

Authored by Marcelo Puebla 2019-08-15 09:39:46 -0300

Merge branch 'master' into 'master'

Master(efernandez)

See merge request !23

Showing 10 changed files Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 344c5a1

 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';
 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: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 344c5a1

 //#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 { PopoverComponent } from './components/popover/popover.component';
+import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
-    PopoverComponent
+    PopoverComponent,
+    AmbImagenesComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/amb-imagenes/amb-imagenes.component.html

Diff comments View file @ 344c5a1

File was created	1	<app-header></app-header>
	2
	3	<h1>Configuración imágenes</h1>
	4	<br>
	5	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
	6	<input
	7	type="text"
	8	class="form-control form-control-lg shadow-sm rounded-pill px-5"
	9	placeholder="Búsqueda productos"
	10	[(ngModel)]="searchTerm"
	11	(ngModelChange)="filterItems()">
	12
	13	<div class="row px-5">
	14	<h5>Productos</h5>
	15	<table class="table">
	16	<thead>
	17	<tr>
	18	<th>Nombre</th>
	19	<th>Descripción</th>
	20	<th>Imagen</th>
	21	<th></th>
	22	</tr>
	23	</thead>
	24	<tbody>
	25	<tr *ngFor="let articulo of auxProductos">
	26	<td>{{articulo.DetArt}}</td>
	27	<td>{{articulo.DET_LAR}}</td>
	28	<td>
	29	<img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
	30	<img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
	31	</td>
	32	<td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
	33	</tr>
	34	</tbody>
	35	</table>
	36	</div>
	37

src/app/components/amb-imagenes/amb-imagenes.component.scss

Diff comments View file @ 344c5a1

src/app/components/amb-imagenes/amb-imagenes.component.spec.ts

Diff comments View file @ 344c5a1

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

src/app/components/amb-imagenes/amb-imagenes.component.ts

Diff comments View file @ 344c5a1

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { appSettings } from 'src/etc/AppSettings';
	3	import { ProductoService } from 'src/app/services/producto.service';
	4	import { Producto } from 'src/app/wrappers/producto';
	5	import { HttpClient } from '@angular/common/http';
	6
	7	@Component({
	8	selector: 'app-amb-imagenes',
	9	templateUrl: './amb-imagenes.component.html',
	10	styleUrls: ['./amb-imagenes.component.scss']
	11	})
	12
	13	export class AmbImagenesComponent implements OnInit {
	14
	15	apiUrl = appSettings.apiUrl;
	16	articulos: Producto[] = [];
	17	private auxProductos: Producto[] = [];
	18	private searchTerm: string = '';
	19
	20	constructor(private productoService: ProductoService, private http: HttpClient) {}
	21
	22	ngOnInit() {
	23
	24	this.productoService.getAll().subscribe((productos: Producto[]) => {
	25	this.articulos = productos;
	26	this.filterItems();
	27	});
	28	}
	29
	30	onFileSelected(event, articulo) {
	31
	32	let file: File = event.target.files[0];
	33
	34	this.onLoad(file)
	35	.then(result => {
	36
	37	articulo.imagenes = [];
	38
	39	document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result;
	40
	41	this.saveInBase({
	42	name: file.name,
	43	base64: result,
	44	codigo: articulo.CodArt,
	45	sector: articulo.CodSec
	46	});
	47	});
	48	}
	49
	50	filterItems() {
	51
	52	this.auxProductos = this.articulos.filter(x => {
	53	return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
	54	});
	55	}
	56
	57
	58	saveInBase(img) {
	59
	60	this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img)
	61	.subscribe(data => {
	62	console.log(data);
	63	});
	64	}
	65
	66	onLoad(file) {
	67
	68	return new Promise((resolve, reject) => {
	69
	70	var fr = new FileReader();
	71
	72	fr.onload = function() {
	73
	74	resolve(fr.result);
	75	};
	76
	77	fr.readAsDataURL(file);
	78	});
	79
	80	}
	81	}
	82

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 344c5a1

1	<div class="row">	1	<div class="row">
2	<div class="col-12">	2	<div class="col-12">
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">Pago <i class="fa fa-usd"></i></p>	7	<p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
8	</div>	8	</div>
9	</div>	9	</div>
10		10
11	<div class="row m-3 d-flex align-items-center">	11	<div class="row m-3 d-flex align-items-center">
12	<div class="col-4">	12	<div class="col-4">
13	<h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>	13	<h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
14	</div>	14	</div>
15	<div class="col-8">	15	<div class="col-8">
16	<h2>¿Desea finalizar su compra?</h2>	16	<h2>¿Desea finalizar su compra?</h2>
17	<h3>Por favor, controle y confirme su compra.</h3>	17	<h3>Por favor, controle y confirme su compra.</h3>
18	</div>	18	</div>
19	<div class="col-sm-7">	19	<div class="col-sm-7">
20		20
21	<div class="row pr-3 vh-50 overflow-scroll">	21	<div class="row pr-3 vh-50 overflow-scroll">
22	<div class="col-4 p-2" *ngFor="let producto of productos">	22	<div class="col-4 p-2" *ngFor="let producto of productos">
23	<div class="card card-effect bg-white rounded-sm shadow border-0">	23	<div class="card card-effect bg-white rounded-sm shadow border-0">
24	<img src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}" class="card-img-top w-75 m-auto">	24	<img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">
25	<div class="card-body">	25	<div class="card-body">
26	<p class="h5 text-left m-0">{{producto.variable}}</p>	26	<p class="h5 text-left m-0">{{producto.variable}}</p>
27	<div class="text-left">	27	<div class="text-left">
28	<p class="m-0"><small>ASDASDSADASDSA</small></p>	28	<p class="m-0"><small>ASDASDSADASDSA</small></p>
29	<p class="m-0"><small>COD. 1222</small></p>	29	<p class="m-0"><small>COD. 1222</small></p>
30	<p class="m-0"><strong>$ 563</strong></p>	30	<p class="m-0"><strong>$ 563</strong></p>
31	</div>	31	</div>
32	</div>	32	</div>
33	</div>	33	</div>
34	</div>	34	</div>
35	</div>	35	</div>
36	</div>	36	</div>
37	<div class="col-sm-5">	37	<div class="col-sm-5">
38	<h3>TOTAL: $553</h3>	38	<h3>TOTAL: $553</h3>
39	</div>	39	</div>
40	</div>	40	</div>
41	</div>	41	</div>
42	</div>	42	</div>
43		43

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 344c5a1

1	<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">	1	<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2		2
3	<p class="h4 border-bottom border-white text-white mt-4 pb-2">	3	<p class="h4 border-bottom border-white text-white mt-4 pb-2">
4	Mi compra	4	Mi compra
5	<i class="fa fa-shopping-cart" aria-hidden="true"></i>	5	<i class="fa fa-shopping-cart" aria-hidden="true"></i>
6	</p>	6	</p>
7		7
8	<div class="overflow-auto overflow-scroll mb-2 w-100">	8	<div class="overflow-auto overflow-scroll mb-2 w-100">
9	<!-- PRODUCTOS CARRITO -->	9	<!-- PRODUCTOS CARRITO -->
10	<div class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index">	10	<div class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index">
11	<img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}">	11	<img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
12	<div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">	12	<div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
13	<div class="col-12 p-0 pt-2 text-left my-auto">	13	<div class="col-12 p-0 pt-2 text-left my-auto">
14	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>	14	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
15	<p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>	15	<p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
16	</div>	16	</div>
17	<div class="col-12 pr-1 text-right h6 my-auto ">	17	<div class="col-12 pr-1 text-right h6 my-auto ">
18	<p class="m-0">{{producto.PreVen \| currency}}</p>	18	<p class="m-0">{{producto.PreVen \| currency}}</p>
19	</div>	19	</div>
20	</div>	20	</div>
21	<div class="row m-0 p-0">	21	<div class="row m-0 p-0">
22	<div class="col-6 px-2 my-2">	22	<div class="col-6 px-2 my-2">
23	<div class="btn-group-sm btn-group float-left my-auto" role="group">	23	<div class="btn-group-sm btn-group float-left my-auto" role="group">
24	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">	24	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
25	<i class="fa fa-plus" aria-hidden="true"></i>	25	<i class="fa fa-plus" aria-hidden="true"></i>
26	</button>	26	</button>
27	<div class="bg-white border border-white px-3 my-auto text-dark h5">	27	<div class="bg-white border border-white px-3 my-auto text-dark h5">
28	<small>{{producto.cantidad}}</small>	28	<small>{{producto.cantidad}}</small>
29	</div>	29	</div>
30	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">	30	<button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
31	<i class="fa fa-minus" aria-hidden="true"></i>	31	<i class="fa fa-minus" aria-hidden="true"></i>
32	</button>	32	</button>
33	</div>	33	</div>
34	</div>	34	</div>
35	<div class="col-6 px-2 my-2">	35	<div class="col-6 px-2 my-2">
36	<div class="btn-group-sm btn-group float-right my-auto" role="group">	36	<div class="btn-group-sm btn-group float-right my-auto" role="group">
37	<button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">	37	<button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
38	<i class="fa fa-hand-o-up" aria-hidden="true"></i>	38	<i class="fa fa-hand-o-up" aria-hidden="true"></i>
39	</button>	39	</button>
40	<button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">	40	<button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
41	<i class="fa fa-times" aria-hidden="true"></i>	41	<i class="fa fa-times" aria-hidden="true"></i>
42	</button>	42	</button>
43	</div>	43	</div>
44	</div>	44	</div>
45	</div>	45	</div>
46	</div>	46	</div>
47	</div>	47	</div>
48		48
49	<!-- TOTAL -->	49	<!-- TOTAL -->
50	<div class="card rounded-top-sm mt-auto blue-gradient border-0">	50	<div class="card rounded-top-sm mt-auto blue-gradient border-0">
51	<div class="card-body row">	51	<div class="card-body row">
52	<div class="col-12">	52	<div class="col-12">
53	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>	53	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
54	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>	54	<p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
55	<p class="h3 text-secondary">Total</p>	55	<p class="h3 text-secondary">Total</p>
56	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>	56	<p class="h3 font-weight-bold">{{getTotal() \| currency}}</p>
57	</div>	57	</div>
58	<div class="col-12">	58	<div class="col-12">
59	<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">	59	<button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
60	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>	60	<span class="font-weight-bold pr-1">Finalizar y Pagar</span>
61	<i class="fa fa-check text-success" aria-hidden="true"></i>	61	<i class="fa fa-check text-success" aria-hidden="true"></i>
62	</button>	62	</button>
63	<button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()">	63	<button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()">
64	<span class="pr-1">Cancelar</span>	64	<span class="pr-1">Cancelar</span>
65	<i class="fa fa-times text-danger" aria-hidden="true"></i>	65	<i class="fa fa-times text-danger" aria-hidden="true"></i>
66	</button>	66	</button>
67	</div>	67	</div>
68	</div>	68	</div>
69	</div>	69	</div>
70	</div>	70	</div>
71		71

src/app/services/producto.service.ts

Diff comments View file @ 344c5a1

 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}`;
     return this.http.get(url);
   }
+  updateImages(body): Observable<any> {
+    return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
+  }
 }

src/styles.scss

Diff comments View file @ 344c5a1

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
-  overflow: hidden;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
     width: 0.5em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
       -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
   background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }