Martin Macola / autoservicio

Browse Code »

Commit 62dcd0610776754b2ba24568210515a9593ae41c

Authored by Eric Fernandez 2019-09-02 12:34:13 -0300

2 parents b299c5cf8e f8485d30ee

Exists in master

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

Showing 6 changed files Show diff stats

src/app/app.module.ts

Diff comments View file @ 62dcd06

 //#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';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     AmbImagenesComponent,
     PagoComponent,
     CancelarCompraComponent,
     MensajeFinalComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot(),
     BrowserAnimationsModule,
     MatKeyboardModule,
     MatButtonModule,
-    CarouselModule.forRoot()
+    CarouselModule.forRoot(),
+    PaginationModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

Diff comments View file @ 62dcd06

1	<app-header></app-header>	1	<app-header></app-header>
2		2
3	<div class="container-fluid">	3	<div class="container-fluid">
4	<div class="row m-3">	4	<div class="row m-3">
5	<div class="col">	5	<div class="col">
6	<p class="h2">Configuración imágenes</p>	6	<p class="h2">Configuración de imágenes</p>
7	</div>	7	</div>
8	</div>	8	</div>
9		9
10	<div class="row search">	10	<div class="row mx-3 search">
11	<div class="col">	11	<div class="col">
12	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>	12	<span class="fa fa-search form-control-lg form-control-search pl-3"></span>
13	<input	13	<input
14	type="text"	14	type="text"
15	class="form-control form-control-lg shadow-sm rounded-pill px-5"	15	class="form-control form-control-lg shadow-sm rounded-pill px-5"
16	placeholder="Búsqueda productos"	16	placeholder="Búsqueda productos"
17	[(ngModel)]="searchTerm"	17	[(ngModel)]="searchTerm"
18	(ngModelChange)="filterItems()">	18	(ngModelChange)="filterItems()">
19	</div>	19	</div>
20	</div>	20	</div>
21		21
22	<div class="row m-3 vh-70 overflow-scroll">	22	<div class="row m-3 vh-60 overflow-scroll">
23	<div class="col">	23	<div class="col">
24	<h5>Productos</h5>	24	<h5>Productos</h5>
25	<table class="table">	25	<table class="table table-striped table-hover table-borderless shadow">
26	<thead>	26	<thead>
27	<tr class="text-center">	27	<tr class="bg-primary text-center text-white shadow-sm">
28	<th>Nombre</th>	28	<th>Nombre</th>
29	<th>Descripción</th>
30	<th colspan="2">Imagen</th>	29	<th colspan="2">Imagen</th>
31	</tr>	30	</tr>
32	</thead>	31	</thead>
33	<tbody>	32	<tbody>
34	<tr *ngFor="let articulo of auxProductos">	33	<tr class="shadow-sm" *ngFor="let articulo of auxProductos">
35	<td>{{articulo.DET_LAR}}</td>	34	<td class="align-middle">
36	<td>{{articulo.DET_LAR}}</td>	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>
37	<td>	40	<td>
38	<img *ngIf="articulo.imagenes.length" src="{{apiUrl}}/imagenes/{{articulo.imagenes[0].imagen}}">	41	<img
39	<img id="{{articulo.CodSec + articulo.CodArt}}" [hidden]="articulo.imagenes.length">	42	*ngIf="articulo.imagenes.length == 0"
		43	class="fade-in w-100 mx-auto img-fluid"
		44	src="{{apiUrl}}/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="{{apiUrl}}/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>
40	</td>	78	</td>
41	<td><input type="file" accept="image/*" (change)="onFileSelected($event, articulo)"></td>
42	</tr>	79	</tr>
43	</tbody>	80	</tbody>
44	</table>	81	</table>
45	</div>	82	</div>
46	</div>	83	</div>
47		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

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

Diff comments View file @ 62dcd06

 .search .form-control-search {
   position: absolute;
   z-index: 2;
   display: block;
   text-align: center;
   pointer-events: none;
   color: #aaa;
   line-height: inherit;
 }
+.custom-file-input:lang(es) ~ .custom-file-label::after {
+  content: "Elegir";
+}
+.btn-delete-image {
+  top: 0;
+  left: 95%;
+}

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

Diff comments View file @ 62dcd06

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

src/app/services/producto.service.ts

Diff comments View file @ 62dcd06

 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(): Observable<any> {
+  getAll(page: number = 1): Observable<any> {
-    return this.http.get(`${appSettings.apiUrl}/articulos`);
+    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);
   }
-  updateImages(body): Observable<any> {
+  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;
   }
 }

src/styles.scss

Diff comments View file @ 62dcd06

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
   font-family: bahnschrift;
   overflow: hidden !important;
 }
 .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: 1em;
   }
   &::-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 $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-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%);
 }
 .bg-primary-gradient-horizontal {
   background: linear-gradient(90deg, 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;
 }
 .vh-50 {
   min-height: auto !important;
   max-height: 50vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
 }
 .rounded-bottom-right {
   border-bottom-right-radius: 10rem;
   &:before {
     border-radius: 0 40px 40px 0;
     background-color: #fff;
   }
 }
 .rounded-top-left {
   border-top-left-radius: 10rem;
 }
 .bg-gray {
   background-color: #cccccc;
 }
 .cdk-overlay-container {
   position: absolute;
   top: 65%;
   width: 100%;
 }
 .min-h-40 {
   min-height: 40px;
 }
 .min-h-55 {
   min-height: 55px;
 }
+.pagination {
+  justify-content: center !important;
+  display: flex !important;
+}