Merge branch 'master' into 'master'

Master(efernandez) See merge request !23

Merge branch 'master' into 'master'
Master(efernandez) See merge request !23
Marcelo Puebla
2 parents 597bbe4795 3a8323a55e
Showing 10 changed files Show diff stats
src/app/app-routing.module.ts
src/app/app.module.ts
src/app/components/amb-imagenes/amb-imagenes.component.html
src/app/components/amb-imagenes/amb-imagenes.component.scss
src/app/components/amb-imagenes/amb-imagenes.component.spec.ts
src/app/components/amb-imagenes/amb-imagenes.component.ts
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
src/app/components/sidebar/sidebar.component.html
src/app/services/producto.service.ts
src/styles.scss
@@ -5,17 +5,19 @@ import { InicioComponent } from &#39;./components/inicio/inicio.component&#39;;
 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' },
@@ -19,6 +19,7 @@ import { BusquedaProductosComponent } from &#39;./components/busqueda-productos/busq
 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({
@@ -32,7 +33,8 @@ import { PopoverComponent } from &#39;./components/popover/popover.component&#39;;
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
-    PopoverComponent
+    PopoverComponent,
+    AmbImagenesComponent
   ],
   imports: [
     BrowserModule,
@@ -0,0 +1,36 @@
+<app-header></app-header>
+
+<h1>Configuración imágenes</h1>
+<br>
+<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 class="row px-5">
+  <h5>Productos</h5>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Nombre</th>
+        <th>Descripción</th>
+        <th>Imagen</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let articulo of auxProductos">
+        <td>{{articulo.DetArt}}</td>
+        <td>{{articulo.DET_LAR}}</td>
+        <td>
+          <img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">
+          <img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">
+        </td>
+        <td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AmbImagenesComponent } from './amb-imagenes.component';
+
+describe('AmbImagenesComponent', () => {
+  let component: AmbImagenesComponent;
+  let fixture: ComponentFixture<AmbImagenesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AmbImagenesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AmbImagenesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { appSettings } from 'src/etc/AppSettings';
+import { ProductoService } from 'src/app/services/producto.service';
+import { Producto } from 'src/app/wrappers/producto';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-amb-imagenes',
+  templateUrl: './amb-imagenes.component.html',
+  styleUrls: ['./amb-imagenes.component.scss']
+})
+
+export class AmbImagenesComponent implements OnInit {
+
+  apiUrl = appSettings.apiUrl;
+  articulos: Producto[] = [];
+  private auxProductos: Producto[] = [];
+  private searchTerm: string = '';
+
+  constructor(private productoService: ProductoService, private http: HttpClient) {}
+
+  ngOnInit() {
+
+    this.productoService.getAll().subscribe((productos: Producto[]) => {
+      this.articulos = productos;
+      this.filterItems();
+    });
+  }
+
+  onFileSelected(event, articulo) {
+
+    let file: File = event.target.files[0];
+
+    this.onLoad(file)
+      .then(result => {
+
+        articulo.imagenes = [];
+
+        document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result;
+
+        this.saveInBase({
+          name: file.name,
+          base64: result,
+          codigo: articulo.CodArt,
+          sector: articulo.CodSec
+        });
+      });
+  }
+
+  filterItems() {
+
+    this.auxProductos = this.articulos.filter(x => {
+      return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
+    });
+  }
+
+
+  saveInBase(img) {
+
+    this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img)
+      .subscribe(data => {
+        console.log(data);
+      });
+  }
+
+  onLoad(file) {
+
+    return new Promise((resolve, reject) => {
+
+      var fr = new FileReader();
+
+      fr.onload = function() {
+
+        resolve(fr.result);
+      };
+
+      fr.readAsDataURL(file);
+    });
+
+  }
+}
@@ -21,7 +21,7 @@
         <div class="row pr-3 vh-50 overflow-scroll">
           <div class="col-4 p-2" *ngFor="let producto of productos">
             <div class="card card-effect bg-white rounded-sm shadow border-0">
-              <img src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}" class="card-img-top w-75 m-auto">
+              <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="card-img-top w-75 m-auto">
               <div class="card-body">
                 <p class="h5 text-left m-0">{{producto.variable}}</p>
                 <div class="text-left">
@@ -8,7 +8,7 @@
   <div class="overflow-auto overflow-scroll mb-2 w-100">
     <!-- PRODUCTOS CARRITO -->
     <div class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index">
-      <img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}">
+      <img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
       <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
         <div class="col-12 p-0 pt-2 text-left my-auto">
           <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
@@ -25,9 +25,13 @@ export class ProductoService {
   }
  
   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);
+  }
+
 }
@@ -5,7 +5,6 @@
 html,
 body {
   background-color: #f0f0f0;
-  overflow: hidden;
 }
  
 .blur {
...	...	@@ -5,17 +5,19 @@ import { InicioComponent } from './components/inicio/inicio.component';
5	5	import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6	6	import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7	7	import { MasterComponent } from './components/master/master.component';
	8	+import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
8	9
9	10	const routes: Routes = [
10	11	{ path: '', component: HomeComponent },
11	12	{ path: 'home', component: HomeComponent },
	13	+ { path: 'abm-imagenes', component: AmbImagenesComponent },
12	14	{
13	15	path: '',
14	16	component: MasterComponent,
15	17	children: [
16	18	{ path: 'inicio', component: InicioComponent },
17	19	{ path: 'busqueda-productos', component: BusquedaProductosComponent },
18		- { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
	20	+ { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }
19	21	]
20	22	},
21	23	{ path: '**', redirectTo: '/home', pathMatch: 'full' },
...	...	@@ -19,6 +19,7 @@ import { BusquedaProductosComponent } from './components/busqueda-productos/busq
19	19	import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
20	20	import { MasterComponent } from './components/master/master.component';
21	21	import { PopoverComponent } from './components/popover/popover.component';
	22	+import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
22	23	//#endregion
23	24
24	25	@NgModule({
...	...	@@ -32,7 +33,8 @@ import { PopoverComponent } from './components/popover/popover.component';
32	33	BusquedaProductosComponent,
33	34	ConfirmacionCarritoComponent,
34	35	MasterComponent,
35		- PopoverComponent
	36	+ PopoverComponent,
	37	+ AmbImagenesComponent
36	38	],
37	39	imports: [
38	40	BrowserModule,
...	...	@@ -0,0 +1,36 @@
	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>
...	...	@@ -0,0 +1,25 @@
	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	+});
...	...	@@ -0,0 +1,81 @@
	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	+}
...	...	@@ -21,7 +21,7 @@
21	21	<div class="row pr-3 vh-50 overflow-scroll">
22	22	<div class="col-4 p-2" *ngFor="let producto of productos">
23	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	25	<div class="card-body">
26	26	<p class="h5 text-left m-0">{{producto.variable}}</p>
27	27	<div class="text-left">
...	...	@@ -8,7 +8,7 @@
8	8	<div class="overflow-auto overflow-scroll mb-2 w-100">
9	9	<!-- PRODUCTOS CARRITO -->
10	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	12	<div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
13	13	<div class="col-12 p-0 pt-2 text-left my-auto">
14	14	<p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
...	...	@@ -25,9 +25,13 @@ 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	return this.http.get(url);
31	31	}
32	32
	33	+ updateImages(body): Observable<any> {
	34	+ return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
	35	+ }
	36	+
33	37	}
...	...	@@ -5,7 +5,6 @@
5	5	html,
6	6	body {
7	7	background-color: #f0f0f0;
8		- overflow: hidden;
9	8	}
10	9
11	10	.blur {