Commit c3031ecc9e7372bf96184fe0f98c08d2dc71c625
1 parent
ac964d0816
Exists in
master
and in
1 other branch
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
| ... | ... | @@ -5,7 +5,6 @@ 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'; | |
| 9 | 8 | import { PagoComponent } from './components/pago/pago.component'; |
| 10 | 9 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
| 11 | 10 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
| ... | ... | @@ -14,7 +13,6 @@ import { ComandaComponent } from './components/comanda/comanda.component'; |
| 14 | 13 | const routes: Routes = [ |
| 15 | 14 | { path: '', component: HomeComponent }, |
| 16 | 15 | { path: 'home', component: HomeComponent }, |
| 17 | - { path: 'abm-imagenes', component: AmbImagenesComponent }, | |
| 18 | 16 | { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, |
| 19 | 17 | { path: 'pago', component: PagoComponent }, |
| 20 | 18 | { path: 'cancelar-compra', component: CancelarCompraComponent }, |
src/app/app.module.ts
| ... | ... | @@ -27,7 +27,6 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/ |
| 27 | 27 | import { MasterComponent } from './components/master/master.component'; |
| 28 | 28 | import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; |
| 29 | 29 | import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; |
| 30 | -import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; | |
| 31 | 30 | import { PagoComponent } from './components/pago/pago.component'; |
| 32 | 31 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
| 33 | 32 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
| ... | ... | @@ -46,7 +45,6 @@ import { ComandaComponent } from './components/comanda/comanda.component'; |
| 46 | 45 | MasterComponent, |
| 47 | 46 | PopoverPromosComponent, |
| 48 | 47 | PopoverSinonimosComponent, |
| 49 | - AmbImagenesComponent, | |
| 50 | 48 | PagoComponent, |
| 51 | 49 | CancelarCompraComponent, |
| 52 | 50 | MensajeFinalComponent, |
src/app/components/amb-imagenes/amb-imagenes.component.html
| ... | ... | @@ -1,104 +0,0 @@ |
| 1 | -<app-header></app-header> | |
| 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="‹" | |
| 97 | - nextText="›" | |
| 98 | - firstText="«" | |
| 99 | - lastText="»" | |
| 100 | - ></pagination> | |
| 101 | - </div> | |
| 102 | - </div> | |
| 103 | - | |
| 104 | -</div> |
src/app/components/amb-imagenes/amb-imagenes.component.scss
| ... | ... | @@ -1,18 +0,0 @@ |
| 1 | -.search .form-control-search { | |
| 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 | -} |
src/app/components/amb-imagenes/amb-imagenes.component.spec.ts
| ... | ... | @@ -1,25 +0,0 @@ |
| 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
| ... | ... | @@ -1,124 +0,0 @@ |
| 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.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 | -} |
src/app/services/producto.service.ts
| ... | ... | @@ -21,7 +21,7 @@ export class ProductoService { |
| 21 | 21 | return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); |
| 22 | 22 | } |
| 23 | 23 | |
| 24 | - getAll(page: number = 1): Observable<any> { | |
| 24 | + getAll(): Observable<any> { | |
| 25 | 25 | |
| 26 | 26 | return this.http.get(`${appSettings.apiUrl}/articulos/`); |
| 27 | 27 | } |
| ... | ... | @@ -74,14 +74,6 @@ export class ProductoService { |
| 74 | 74 | return this.http.get(url); |
| 75 | 75 | } |
| 76 | 76 | |
| 77 | - saveInBase(body): Observable<any> { | |
| 78 | - return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); | |
| 79 | - } | |
| 80 | - | |
| 81 | - deleteImage(body): Observable<any> { | |
| 82 | - return this.http.post(`${appSettings.apiUrl}/imagen/borrar`, body); | |
| 83 | - } | |
| 84 | - | |
| 85 | 77 | getCategorias() { |
| 86 | 78 | return this.http.get(`${appSettings.apiUrl}/categorias`); |
| 87 | 79 | } |