Martin Macola / autoservicio

Browse Code »

Commit c3031ecc9e7372bf96184fe0f98c08d2dc71c625

Authored by Marcelo Puebla 2019-09-03 11:30:19 -0300

1 parent ac964d0816

Exists in master

Borrado componente abm imagenes y los servicios que consumia.

Showing 7 changed files with 1 additions and 284 deletions Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ c3031ec

 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';
 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';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
-  { path: 'abm-imagenes', component: AmbImagenesComponent },
   { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   { path: 'pago', component: PagoComponent },
   { path: 'cancelar-compra', component: CancelarCompraComponent },
   { path: 'mensaje-final', component: MensajeFinalComponent },
   { path: 'comanda', component: ComandaComponent },
   {
     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 @ c3031ec

 //#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 { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.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';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
-    AmbImagenesComponent,
     PagoComponent,
     CancelarCompraComponent,
     MensajeFinalComponent,
     ComandaComponent
   ],
   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/amb-imagenes/amb-imagenes.component.html

View file @ c3031ec

1	<app-header></app-header>		File was deleted
2
3	<div class="container-fluid">
4	<div class="row m-3">
5	<div class="col">
6	<p class="h2">Configuración de imágenes</p>
7	</div>
8	</div>
9
10	<div class="row mx-3 search">
11	<div class="col">
12	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
13	<input
14	type="text"
15	class="form-control form-control-lg shadow-sm rounded-pill px-5"
16	placeholder="Búsqueda productos"
17	[(ngModel)]="searchTerm"
18	(ngModelChange)="filterItems()">
19	</div>
20	</div>
21
22	<div class="row m-3 vh-60 overflow-scroll">
23	<div class="col">
24	<h5>Productos</h5>
25	<table class="table table-striped table-hover table-borderless shadow">
26	<thead>
27	<tr class="bg-primary text-center text-white shadow-sm">
28	<th>Nombre</th>
29	<th colspan="2">Imagen</th>
30	</tr>
31	</thead>
32	<tbody>
33	<tr class="shadow-sm" *ngFor="let articulo of auxProductos">
34	<td class="align-middle">
35	<p class="m-0">{{articulo.DET_LAR}}</p>
36	<p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p>
37	<p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p>
38	<p class="m-0"><small>Código: {{articulo.CodArt}}</small></p>
39	</td>
40	<td>
41	<img
42	*ngIf="articulo.imagenes.length == 0"
43	class="fade-in w-100 mx-auto img-fluid"
44	src="{{apiImagenes}}/imagenes/noImage.jpg">
45	<carousel [interval]="false">
46	<slide *ngFor="let item of articulo.imagenes; let index = index">
47	<img
48	*ngIf="!item.fromGallery"
49	class="fade-in img-fluid w-100"
50	src="{{apiImagenes}}/imagenes/{{item.imagen}}">
51	<img
52	*ngIf="item.fromGallery"
53	class="fade-in img-fluid w-100"
54	src="{{item.base64}}">
55	<button
56	(click)="deleteImage(articulo.imagenes, index)"
57	type="button"
58	class="btn btn-light btn-delete-image position-absolute close">
59	<span aria-hidden="true">×</span>
60	</button>
61	</slide>
62	</carousel>
63	</td>
64	<td class="align-middle text-center">
65	<div class="custom-file">
66	<input
67	type="file"
68	class="custom-file-input"
69	id="customFileLang"
70	accept="image/*"
71	(change)="onFileSelected($event, articulo)"
72	lang="es"
73	multiple>
74	<label class="custom-file-label text-left pr-5" for="customFileLang">
75	<small>Seleccionar archivo</small>
76	</label>
77	</div>
78	</td>
79	</tr>
80	</tbody>
81	</table>
82	</div>
83	</div>
84
85	<div class="row" *ngIf="paginationData">
86	<div class="col">
87	<pagination
88	[rotate]="false"
89	[(ngModel)]="paginationData.page"
90	[totalItems]="paginationData.rowCount"
91	[maxSize]="paginationData.pageCount"
92	[itemsPerPage]="paginationData.pageSize"
93	(pageChanged)="pageChanged($event)"
94	[boundaryLinks]="true"
95	[disabled]="disabledPaginador"
96	previousText="&lsaquo;"
97	nextText="&rsaquo;"
98	firstText="«"
99	lastText="»"
100	></pagination>
101	</div>
102	</div>
103
104	</div>
105		1	<app-header></app-header>

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

View file @ c3031ec

1	.search .form-control-search {		File was deleted
2	position: absolute;
3	z-index: 2;
4	display: block;
5	text-align: center;
6	pointer-events: none;
7	color: #aaa;
8	line-height: inherit;
9	}
10
11	.custom-file-input:lang(es) ~ .custom-file-label::after {
12	content: "Elegir";
13	}
14
15	.btn-delete-image {
16	top: 0;
17	left: 95%;
18	}
19		1	.search .form-control-search {

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

View file @ c3031ec

1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';		File was deleted
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		1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';

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

View file @ c3031ec

1	import { Component, OnInit } from '@angular/core';		File was deleted
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.apiImagenes;
16	articulos: Producto[] = [];
17	private auxProductos: Producto[] = [];
18	private searchTerm: string = '';
19	private paginationData: any;
20	private disabledPaginador: boolean = false;
21
22	constructor(private productoService: ProductoService, private http: HttpClient) { }
23
24	ngOnInit() {
25
26	this.productoService.getAllWithPaginator()
27	.subscribe((res) => {
28
29	this.articulos = res.data;
30	this.paginationData = res.pagination;
31	this.filterItems();
32	}, error => console.error(error));
33	}
34
35	onFileSelected(event, articulo: Producto) {
36
37	let auxFiles: FileList = event.target.files;
38	Array.from(auxFiles).forEach(file => {
39
40	this.onLoad(file)
41	.then(result => {
42	// articulo.imagenes.push({
43	// name: file.name + articulo.CodArt + articulo.CodSec,
44	// fromGallery: true,
45	// imagen: result,
46	// id_articulo: articulo.id
47	// });
48	let imagenAguardar = {
49	imagen: {
50	name: `${articulo.CodSec}${articulo.CodArt}${file.name}`,
51	base64: result,
52	codigo: articulo.CodArt,
53	sector: articulo.CodSec,
54	id_articulo: articulo.id
55	},
56	articulo: articulo
57	};
58	this.saveInBase(imagenAguardar);
59	});
60	})
61	}
62
63	filterItems() {
64
65	this.auxProductos = this.articulos.filter(x => {
66	return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) \|\|
67	x.CodArt.toString().includes(this.searchTerm.toLowerCase()) \|\|
68	x.CodSec.toString().includes(this.searchTerm.toLowerCase());
69	});
70	}
71
72	saveInBase(imagenAguardar) {
73
74	this.productoService.saveInBase(imagenAguardar.imagen)
75	.subscribe(res => {
76	imagenAguardar.imagen['id'] = res[0];
77	imagenAguardar.imagen['fromGallery'] = true;
78	imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen);
79	}, error => console.error(error));
80	}
81
82	onLoad(file) {
83
84	return new Promise((resolve, reject) => {
85
86	var fr = new FileReader();
87
88	fr.onload = function () {
89
90	resolve(fr.result);
91	};
92
93	fr.readAsDataURL(file);
94	});
95
96	}
97
98	deleteImage(imagenes, index: number) {
99
100	if (!imagenes[index].name) {
101	imagenes[index].name = imagenes[index].imagen;
102	}
103
104	this.productoService.deleteImage(imagenes[index])
105	.subscribe(res => {
106
107	if (res) {
108	imagenes.splice(index, 1);
109	}
110	}, error => console.error(error));
111	}
112
113	pageChanged(event: any): void {
114	this.disabledPaginador = true;
115	this.productoService.getAllWithPaginator(event.page)
116	.subscribe((res) => {
117	this.disabledPaginador = false;
118	this.articulos = res.data;
119	this.paginationData = res.pagination;
120	this.filterItems();
121	}, error => console.error(error));
122	}
123
124	}
125		1	import { Component, OnInit } from '@angular/core';

src/app/services/producto.service.ts

Diff comments View file @ c3031ec

 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;
   promoAcargar: Producto;
   mostrar: string;
   constructor(private http: HttpClient) { }
   getProductoById(id): Observable<any> {
     return this.http.get(`${appSettings.apiUrl}/articulos/${id}`);
   }
-  getAll(page: number = 1): Observable<any> {
+  getAll(): Observable<any> {
     return this.http.get(`${appSettings.apiUrl}/articulos/`);
   }
   getAllWithPaginator(page: number = 1): Observable<any> {
     return this.http.get(`${appSettings.apiUrl}/articulos/${page}`);
   }
   setProductos(producto: Producto) {
     for (let i = 0; i < this.productos.length; i++) {
       if (this.productos[i].id === producto.id) {
         if (producto.PRO) {
           if (this.promosIdenticas(this.productos[i], producto)) {
             this.productos[i].cantidad++;
             return;
           } else {
             break;
           }
         }
         this.productos[i].cantidad++;
         return;
       }
     }
     this.productos.push(producto);
   }
   getPromocionByCodigos(sector, codigo): Observable<any> {
     var url = `${appSettings.apiUrl}/promociones/by-codigos/${sector}/${codigo}`;
     // var url = `${appSettings.apiUrl}/promociones/by-codigos/${2}/${7}`;
     return this.http.get(url);
   }
   getPromociones(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}/sinonimos/promo/${sector}/${codigo}`;
     // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
     return this.http.get(url);
   }
-  saveInBase(body): Observable<any> {
-    return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
-  }
-  deleteImage(body): Observable<any> {
-    return this.http.post(`${appSettings.apiUrl}/imagen/borrar`, body);
-  }
   getCategorias() {
     return this.http.get(`${appSettings.apiUrl}/categorias`);
   }
   pagar(medioPago: string) {
     return this.http.post(`${appSettings.apiUrl}/comprobante/guardar/${medioPago}`, {
       productos: this.productos
     });
   }
   private promosIdenticas(promoEnCarrito: Producto, promo: Producto) {
     var sonIdenticas = true;
     var productosPromoCarrito = promoEnCarrito.productos;
     var productosPromoAcargar = promo.productos;
     if (productosPromoCarrito.length !== productosPromoAcargar.length) {
       return false;
     }
     for (let i = 0; i < productosPromoCarrito.length; i++) {
       if (productosPromoCarrito[i].id !== productosPromoAcargar[i].id) {
         return false;
       }
     }
     return sonIdenticas;
   }
 }