Commit d0a168ff81de02735ab4930d30d4e3a9585b1b1b
1 parent
4ed1161b9d
Exists in
develop
Fix
Cerrar modales
Showing
1 changed file
with
3 additions
and
1 deletions
Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
| 1 | import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; |
| 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; | 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; |
| 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
| 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
| 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
| 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; |
| 7 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; | 7 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; |
| 8 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | 8 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; |
| 9 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 9 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; |
| 10 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 10 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
| 11 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; | 11 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; |
| 12 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; | 12 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; |
| 13 | 13 | ||
| 14 | @Component({ | 14 | @Component({ |
| 15 | selector: 'app-seleccion-articulos', | 15 | selector: 'app-seleccion-articulos', |
| 16 | templateUrl: './seleccion-articulos.component.html', | 16 | templateUrl: './seleccion-articulos.component.html', |
| 17 | styleUrls: ['./seleccion-articulos.component.scss'] | 17 | styleUrls: ['./seleccion-articulos.component.scss'] |
| 18 | }) | 18 | }) |
| 19 | export class SeleccionArticulosComponent implements OnInit, OnDestroy { | 19 | export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
| 20 | showSpinner = true; | 20 | showSpinner = true; |
| 21 | timeoutHandler: any; | 21 | timeoutHandler: any; |
| 22 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 22 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; |
| 23 | articulos: IArticulo[] = []; | 23 | articulos: IArticulo[] = []; |
| 24 | auxArticulos: IArticulo[] = []; | 24 | auxArticulos: IArticulo[] = []; |
| 25 | showQuantity = 100; | 25 | showQuantity = 100; |
| 26 | queMostrar = 'todos'; | 26 | queMostrar = 'todos'; |
| 27 | categoriaActive = null; | 27 | categoriaActive = null; |
| 28 | categorias: ICategoria[] = []; | 28 | categorias: ICategoria[] = []; |
| 29 | searchTerm = ''; | 29 | searchTerm = ''; |
| 30 | ordenandoByVendidos = true; | 30 | ordenandoByVendidos = true; |
| 31 | allActive = true; | 31 | allActive = true; |
| 32 | modalRef: BsModalRef; | 32 | modalRef: BsModalRef; |
| 33 | total = 0; | 33 | total = 0; |
| 34 | 34 | ||
| 35 | constructor( | 35 | constructor( |
| 36 | public articuloService: ArticuloService, | 36 | public articuloService: ArticuloService, |
| 37 | private categoriaService: CategoriaService, | 37 | private categoriaService: CategoriaService, |
| 38 | private sinonimoService: SinonimoService, | 38 | private sinonimoService: SinonimoService, |
| 39 | private modalService: BsModalService, | 39 | private modalService: BsModalService, |
| 40 | private inactiveScreen: InactiveScreenService, | 40 | private inactiveScreen: InactiveScreenService, |
| 41 | ) { } | 41 | ) { } |
| 42 | 42 | ||
| 43 | ngOnInit() { | 43 | ngOnInit() { |
| 44 | this.getCategorias(); | 44 | this.getCategorias(); |
| 45 | this.mediaPantalla(); | 45 | this.mediaPantalla(); |
| 46 | } | 46 | } |
| 47 | 47 | ||
| 48 | ngOnDestroy() { | 48 | ngOnDestroy() { |
| 49 | if (this.modalRef) this.modalRef.hide(); | 49 | for (let i = 1; i <= this.modalService.getModalsCount(); i++) { |
| 50 | this.modalService.hide(i); | ||
| 51 | } | ||
| 50 | } | 52 | } |
| 51 | 53 | ||
| 52 | getCategorias() { | 54 | getCategorias() { |
| 53 | this.categoriaService.getAll() | 55 | this.categoriaService.getAll() |
| 54 | .subscribe((categorias: ICategoria[]) => { | 56 | .subscribe((categorias: ICategoria[]) => { |
| 55 | switch (this.queMostrar) { | 57 | switch (this.queMostrar) { |
| 56 | case 'todos': | 58 | case 'todos': |
| 57 | this.categorias = categorias; | 59 | this.categorias = categorias; |
| 58 | this.categoriaActive = 0; | 60 | this.categoriaActive = 0; |
| 59 | break; | 61 | break; |
| 60 | case 'promociones': | 62 | case 'promociones': |
| 61 | this.categorias = categorias; | 63 | this.categorias = categorias; |
| 62 | this.categoriaActive = 19; | 64 | this.categoriaActive = 19; |
| 63 | break; | 65 | break; |
| 64 | case 'ordenar': | 66 | case 'ordenar': |
| 65 | this.categorias = categorias.filter((categoria: ICategoria) => { | 67 | this.categorias = categorias.filter((categoria: ICategoria) => { |
| 66 | return categoria.ES_PEDIDO; | 68 | return categoria.ES_PEDIDO; |
| 67 | }); | 69 | }); |
| 68 | this.categoriaActive = 4; | 70 | this.categoriaActive = 4; |
| 69 | break; | 71 | break; |
| 70 | default: | 72 | default: |
| 71 | this.categorias = categorias; | 73 | this.categorias = categorias; |
| 72 | this.categoriaActive = 0; | 74 | this.categoriaActive = 0; |
| 73 | break; | 75 | break; |
| 74 | } | 76 | } |
| 75 | !localStorage.getItem('articulos') ? | 77 | !localStorage.getItem('articulos') ? |
| 76 | this.getProductos() : | 78 | this.getProductos() : |
| 77 | this.setProductos(); | 79 | this.setProductos(); |
| 78 | }); | 80 | }); |
| 79 | } | 81 | } |
| 80 | 82 | ||
| 81 | getProductos() { | 83 | getProductos() { |
| 82 | this.articuloService.getAll() | 84 | this.articuloService.getAll() |
| 83 | .subscribe((result: IArticulo[]) => { | 85 | .subscribe((result: IArticulo[]) => { |
| 84 | this.articuloService.setArticulosSinImagen(result); | 86 | this.articuloService.setArticulosSinImagen(result); |
| 85 | if (this.queMostrar === 'ordenar') { | 87 | if (this.queMostrar === 'ordenar') { |
| 86 | this.categorias.forEach((categoria: ICategoria) => { | 88 | this.categorias.forEach((categoria: ICategoria) => { |
| 87 | const tempArticulos = result.filter((articulo: IArticulo) => { | 89 | const tempArticulos = result.filter((articulo: IArticulo) => { |
| 88 | return articulo.categoria_selfservice === categoria.id; | 90 | return articulo.categoria_selfservice === categoria.id; |
| 89 | }); | 91 | }); |
| 90 | result = tempArticulos; | 92 | result = tempArticulos; |
| 91 | }); | 93 | }); |
| 92 | } | 94 | } |
| 93 | localStorage.setItem('articulos', JSON.stringify(result)); | 95 | localStorage.setItem('articulos', JSON.stringify(result)); |
| 94 | this.setProductos(); | 96 | this.setProductos(); |
| 95 | }, (error) => { | 97 | }, (error) => { |
| 96 | this.showSpinner = false; | 98 | this.showSpinner = false; |
| 97 | console.error(error); | 99 | console.error(error); |
| 98 | }); | 100 | }); |
| 99 | } | 101 | } |
| 100 | 102 | ||
| 101 | setProductos() { | 103 | setProductos() { |
| 102 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 104 | this.articulos = JSON.parse(localStorage.getItem('articulos')); |
| 103 | this.filterItems(); | 105 | this.filterItems(); |
| 104 | } | 106 | } |
| 105 | 107 | ||
| 106 | filterItems() { | 108 | filterItems() { |
| 107 | if (this.categoriaActive === 0) { | 109 | if (this.categoriaActive === 0) { |
| 108 | this.auxArticulos = this.articulos; | 110 | this.auxArticulos = this.articulos; |
| 109 | return; | 111 | return; |
| 110 | } | 112 | } |
| 111 | this.auxArticulos = this.articulos.filter(x => { | 113 | this.auxArticulos = this.articulos.filter(x => { |
| 112 | return x.categoria_selfservice === this.categoriaActive; | 114 | return x.categoria_selfservice === this.categoriaActive; |
| 113 | }); | 115 | }); |
| 114 | this.ordenar(); | 116 | this.ordenar(); |
| 115 | } | 117 | } |
| 116 | 118 | ||
| 117 | ordenar() { | 119 | ordenar() { |
| 118 | if (this.ordenandoByVendidos) { | 120 | if (this.ordenandoByVendidos) { |
| 119 | this.auxArticulos.sort((a, b) => { | 121 | this.auxArticulos.sort((a, b) => { |
| 120 | return b.cantidadVendida - a.cantidadVendida; | 122 | return b.cantidadVendida - a.cantidadVendida; |
| 121 | }); | 123 | }); |
| 122 | } | 124 | } |
| 123 | } | 125 | } |
| 124 | 126 | ||
| 125 | selectCategoria(index: number, idCategoria?: number) { | 127 | selectCategoria(index: number, idCategoria?: number) { |
| 126 | if (this.categoriaActive === idCategoria) return; | 128 | if (this.categoriaActive === idCategoria) return; |
| 127 | this.categoriaActive = idCategoria; | 129 | this.categoriaActive = idCategoria; |
| 128 | this.allActive = idCategoria === 0 ? true : false; | 130 | this.allActive = idCategoria === 0 ? true : false; |
| 129 | this.categorias.forEach((categoria, i) => { | 131 | this.categorias.forEach((categoria, i) => { |
| 130 | categoria.selected = index === i ? true : false; | 132 | categoria.selected = index === i ? true : false; |
| 131 | }); | 133 | }); |
| 132 | this.filterItems(); | 134 | this.filterItems(); |
| 133 | } | 135 | } |
| 134 | 136 | ||
| 135 | selectArticulo(articulo: IArticulo) { | 137 | selectArticulo(articulo: IArticulo) { |
| 136 | this.getByID(articulo.id); | 138 | this.getByID(articulo.id); |
| 137 | } | 139 | } |
| 138 | 140 | ||
| 139 | getByID(id: number) { | 141 | getByID(id: number) { |
| 140 | this.articuloService.getById(id) | 142 | this.articuloService.getById(id) |
| 141 | .subscribe((res: IArticulo) => { | 143 | .subscribe((res: IArticulo) => { |
| 142 | if (res.FPP) { | 144 | if (res.FPP) { |
| 143 | this.openModalPromos(res); | 145 | this.openModalPromos(res); |
| 144 | } else { | 146 | } else { |
| 145 | this.getSinonimos(res); | 147 | this.getSinonimos(res); |
| 146 | } | 148 | } |
| 147 | }, err => console.error(err)); | 149 | }, err => console.error(err)); |
| 148 | } | 150 | } |
| 149 | 151 | ||
| 150 | getSinonimos(articulo: IArticulo) { | 152 | getSinonimos(articulo: IArticulo) { |
| 151 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) | 153 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) |
| 152 | .subscribe((res: ISinonimo[]) => { | 154 | .subscribe((res: ISinonimo[]) => { |
| 153 | if (res.length) { | 155 | if (res.length) { |
| 154 | this.openModalSinonimos(res, articulo); | 156 | this.openModalSinonimos(res, articulo); |
| 155 | } else { | 157 | } else { |
| 156 | this.articuloService.setArticulo(articulo); | 158 | this.articuloService.setArticulo(articulo); |
| 157 | } | 159 | } |
| 158 | }); | 160 | }); |
| 159 | } | 161 | } |
| 160 | 162 | ||
| 161 | openModalPromos(articulo: IArticulo) { | 163 | openModalPromos(articulo: IArticulo) { |
| 162 | this.modalRef = this.modalService.show(PromocionComponent, { | 164 | this.modalRef = this.modalService.show(PromocionComponent, { |
| 163 | initialState: { articulosPromo: [articulo] }, | 165 | initialState: { articulosPromo: [articulo] }, |
| 164 | class: 'modal-promo modal-dialog-centered' | 166 | class: 'modal-promo modal-dialog-centered' |
| 165 | }); | 167 | }); |
| 166 | } | 168 | } |
| 167 | 169 | ||
| 168 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { | 170 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { |
| 169 | this.modalRef = this.modalService.show(SinonimoComponent, { | 171 | this.modalRef = this.modalService.show(SinonimoComponent, { |
| 170 | initialState: { sinonimos: sinonimosData }, | 172 | initialState: { sinonimos: sinonimosData }, |
| 171 | class: 'modal-promo modal-dialog-centered' | 173 | class: 'modal-promo modal-dialog-centered' |
| 172 | }); | 174 | }); |
| 173 | 175 | ||
| 174 | this.modalRef.content.onClose | 176 | this.modalRef.content.onClose |
| 175 | .subscribe((res: any) => { | 177 | .subscribe((res: any) => { |
| 176 | for (const a of articulo.productos) { | 178 | for (const a of articulo.productos) { |
| 177 | if (a.idSinonimo === res.ID_SIN) { | 179 | if (a.idSinonimo === res.ID_SIN) { |
| 178 | a.CODA = res.articulo.CodArt; | 180 | a.CODA = res.articulo.CodArt; |
| 179 | a.CodArt = res.articulo.CodArt; | 181 | a.CodArt = res.articulo.CodArt; |
| 180 | a.SECA = res.articulo.CodSec; | 182 | a.SECA = res.articulo.CodSec; |
| 181 | a.CodSec = res.articulo.CodSec; | 183 | a.CodSec = res.articulo.CodSec; |
| 182 | a.PreVen = res.articulo.PreVen; | 184 | a.PreVen = res.articulo.PreVen; |
| 183 | a.id = res.articulo.id; | 185 | a.id = res.articulo.id; |
| 184 | a.DET_LAR = res.articulo.DET_LAR; | 186 | a.DET_LAR = res.articulo.DET_LAR; |
| 185 | a.DetArt = res.articulo.DetArt; | 187 | a.DetArt = res.articulo.DetArt; |
| 186 | } | 188 | } |
| 187 | } | 189 | } |
| 188 | this.articuloService.setArticulo(articulo); | 190 | this.articuloService.setArticulo(articulo); |
| 189 | }); | 191 | }); |
| 190 | } | 192 | } |
| 191 | 193 | ||
| 192 | deleteArticulo(index: number) { | 194 | deleteArticulo(index: number) { |
| 193 | this.articuloService.deleteArticulo(index); | 195 | this.articuloService.deleteArticulo(index); |
| 194 | } | 196 | } |
| 195 | 197 | ||
| 196 | increaseShow() { | 198 | increaseShow() { |
| 197 | this.showQuantity += 100; | 199 | this.showQuantity += 100; |
| 198 | } | 200 | } |
| 199 | 201 | ||
| 200 | @HostListener('scroll', ['$event']) | 202 | @HostListener('scroll', ['$event']) |
| 201 | scrollEvent(event: Event) { | 203 | scrollEvent(event: Event) { |
| 202 | clearTimeout(this.inactiveScreen.timerReposo); | 204 | clearTimeout(this.inactiveScreen.timerReposo); |
| 203 | this.inactiveScreen.startTimeOutInactividad(); | 205 | this.inactiveScreen.startTimeOutInactividad(); |
| 204 | } | 206 | } |
| 205 | 207 | ||
| 206 | mouseup() { | 208 | mouseup() { |
| 207 | if (!this.timeoutHandler) return; | 209 | if (!this.timeoutHandler) return; |
| 208 | clearInterval(this.timeoutHandler); | 210 | clearInterval(this.timeoutHandler); |
| 209 | } | 211 | } |
| 210 | 212 | ||
| 211 | scrollY(el: HTMLElement, value) { | 213 | scrollY(el: HTMLElement, value) { |
| 212 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 214 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
| 213 | this.timeoutHandler = setInterval(() => { | 215 | this.timeoutHandler = setInterval(() => { |
| 214 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 216 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
| 215 | }, 500); | 217 | }, 500); |
| 216 | } | 218 | } |
| 217 | 219 | ||
| 218 | scrollX(el: HTMLElement, value) { | 220 | scrollX(el: HTMLElement, value) { |
| 219 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 221 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); |
| 220 | this.timeoutHandler = setInterval(() => { | 222 | this.timeoutHandler = setInterval(() => { |
| 221 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 223 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); |
| 222 | }, 500); | 224 | }, 500); |
| 223 | } | 225 | } |
| 224 | 226 | ||
| 225 | mediaPantalla() { | 227 | mediaPantalla() { |
| 226 | if ($('body').hasClass('media-pantalla')) { | 228 | if ($('body').hasClass('media-pantalla')) { |
| 227 | $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); | 229 | $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); |
| 228 | } | 230 | } |
| 229 | } | 231 | } |
| 230 | } | 232 | } |
| 231 | 233 |