Martin Macola / autoservicio

Download as
Browse Code »

Commit f74633474c0b3fbe81c61301ed02979f7c4f0a4f

Authored by Eric Fernandez
1 parent 597bbe4795
Exists in master

imagenes

Showing 10 changed files with 153 additions and 6 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ f746334
... ... @@ -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' },
src/app/app.module.ts
Diff comments   View file @ f746334
... ... @@ -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,
src/app/components/amb-imagenes/amb-imagenes.component.html
Diff comments   View file @ f746334
... ... @@ -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}}" *ngIf="!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>
src/app/components/amb-imagenes/amb-imagenes.component.scss
Diff comments   View file @ f746334
src/app/components/amb-imagenes/amb-imagenes.component.spec.ts
Diff comments   View file @ f746334
... ... @@ -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 +});
src/app/components/amb-imagenes/amb-imagenes.component.ts
Diff comments   View file @ f746334
... ... @@ -0,0 +1,79 @@
  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 + document.getElementById(articulo.CodSec + articulo.CodArt)['src'] = result;
  38 +
  39 + this.saveInBase({
  40 + name: file.name,
  41 + base64: result,
  42 + codigo: articulo.CodArt,
  43 + sector: articulo.CodSec
  44 + });
  45 + });
  46 + }
  47 +
  48 + filterItems() {
  49 +
  50 + this.auxProductos = this.articulos.filter(x => {
  51 + return x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase())
  52 + });
  53 + }
  54 +
  55 +
  56 + saveInBase(img) {
  57 +
  58 + this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, img)
  59 + .subscribe(data => {
  60 + console.log(data);
  61 + });
  62 + }
  63 +
  64 + onLoad(file) {
  65 +
  66 + return new Promise((resolve, reject) => {
  67 +
  68 + var fr = new FileReader();
  69 +
  70 + fr.onload = function() {
  71 +
  72 + resolve(fr.result);
  73 + };
  74 +
  75 + fr.readAsDataURL(file);
  76 + });
  77 +
  78 + }
  79 +}
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ f746334
... ... @@ -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">
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ f746334
... ... @@ -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>
src/app/services/producto.service.ts
Diff comments   View file @ f746334
... ... @@ -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 {