Commit 18045edafd4d8ec7bcfaccaebb6976ad66bd8279
Exists in
develop
Merge conflicts
Showing
16 changed files
Show diff stats
src/app/modules/carrito/carrito.component.ts
1 | import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; |
2 | import { Location } from '@angular/common'; | 2 | import { Location } from '@angular/common'; |
3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
4 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 4 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
5 | import { Router } from '@angular/router'; | 5 | import { Router } from '@angular/router'; |
6 | import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; | 6 | import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; |
7 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 7 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
8 | import { ANIMATIONS } from 'src/app/utils/animations'; | 8 | import { ANIMATIONS } from 'src/app/utils/animations'; |
9 | 9 | ||
10 | @Component({ | 10 | @Component({ |
11 | selector: 'app-carrito', | 11 | selector: 'app-carrito', |
12 | templateUrl: './carrito.component.html', | 12 | templateUrl: './carrito.component.html', |
13 | styleUrls: ['./carrito.component.scss'], | 13 | styleUrls: ['./carrito.component.scss'], |
14 | animations: [ANIMATIONS.EnterLeaveX] | 14 | animations: [ANIMATIONS.EnterLeaveX] |
15 | }) | 15 | }) |
16 | export class CarritoComponent implements OnInit, OnDestroy { | 16 | export class CarritoComponent implements OnInit, OnDestroy { |
17 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 17 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
18 | maxCantidad = 50; | 18 | maxCantidad = 50; |
19 | modalRef: BsModalRef; | 19 | modalRef: BsModalRef; |
20 | 20 | ||
21 | constructor( | 21 | constructor( |
22 | public articuloService: ArticuloService, | 22 | public articuloService: ArticuloService, |
23 | private location: Location, | 23 | private location: Location, |
24 | private router: Router, | 24 | private router: Router, |
25 | private inactiveScreen: InactiveScreenService, | 25 | private inactiveScreen: InactiveScreenService, |
26 | ) { } | 26 | ) { } |
27 | 27 | ||
28 | ngOnInit() { | 28 | ngOnInit() { |
29 | if (!this.articuloService.carrito.length) { | 29 | if (!this.articuloService.carrito.length) { |
30 | this.router.navigate(['']); | 30 | this.router.navigate(['']); |
31 | return; | 31 | return; |
32 | } | 32 | } |
33 | this.mediaPantalla(); | 33 | this.mediaPantalla(); |
34 | } | 34 | } |
35 | 35 | ||
36 | ngOnDestroy() { | 36 | ngOnDestroy() { |
37 | if (this.modalRef) this.modalRef.hide(); | 37 | if (this.modalRef) this.modalRef.hide(); |
38 | } | 38 | } |
39 | 39 | ||
40 | deleteArticulo(index: number) { | 40 | deleteArticulo(index: number) { |
41 | this.articuloService.deleteArticulo(index); | 41 | this.articuloService.deleteArticulo(index); |
42 | } | 42 | } |
43 | 43 | ||
44 | goBack() { | 44 | goBack() { |
45 | this.location.back(); | 45 | this.location.back(); |
46 | } | 46 | } |
47 | 47 | ||
48 | @HostListener('document:click', ['$event']) | 48 | @HostListener('document:click', ['$event']) |
49 | eventListener(event: Event) { | 49 | eventListener(event: Event) { |
50 | clearTimeout(this.inactiveScreen.timerReposo); | 50 | clearTimeout(this.inactiveScreen.timerReposo); |
51 | this.inactiveScreen.startTimeOutInactividad(); | 51 | this.inactiveScreen.startTimeOutInactividad(); |
52 | } | 52 | } |
53 | 53 | ||
54 | @HostListener('scroll', ['$event']) | 54 | @HostListener('scroll', ['$event']) |
55 | scrollEvent(event: Event) { | 55 | scrollEvent(event: Event) { |
56 | clearTimeout(this.inactiveScreen.timerReposo); | 56 | clearTimeout(this.inactiveScreen.timerReposo); |
57 | this.inactiveScreen.startTimeOutInactividad(); | 57 | this.inactiveScreen.startTimeOutInactividad(); |
58 | } | 58 | } |
59 | 59 | ||
60 | mediaPantalla() { | 60 | mediaPantalla() { |
61 | if ($('body').hasClass('media-pantalla')) { | 61 | if ($('body').hasClass('media-pantalla')) { |
62 | $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla'); | 62 | $(`.carrito-content`).addClass('media-pantalla').addBack('media-pantalla'); |
63 | } | 63 | } |
64 | } | 64 | } |
65 | } | 65 | } |
66 | 66 |
src/app/modules/info-formas-pago/info-formas-pago.component.ts
1 | import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; | 1 | import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; |
2 | import { BsModalService } from 'ngx-bootstrap/modal'; | 2 | import { BsModalService } from 'ngx-bootstrap/modal'; |
3 | 3 | ||
4 | @Component({ | 4 | @Component({ |
5 | selector: 'app-formas-pago', | 5 | selector: 'app-formas-pago', |
6 | templateUrl: './info-formas-pago.component.html', | 6 | templateUrl: './info-formas-pago.component.html', |
7 | styleUrls: ['./info-formas-pago.component.scss'] | 7 | styleUrls: ['./info-formas-pago.component.scss'] |
8 | }) | 8 | }) |
9 | export class InfoFormasPagoComponent implements OnInit, OnDestroy { | 9 | export class InfoFormasPagoComponent implements OnInit, OnDestroy { |
10 | timer: any; | 10 | timer: any; |
11 | 11 | ||
12 | constructor( | 12 | constructor( |
13 | private modalService: BsModalService, | 13 | private modalService: BsModalService, |
14 | ) { } | 14 | ) { } |
15 | 15 | ||
16 | ngOnInit() { | 16 | ngOnInit() { |
17 | this.mediaPantalla(); | 17 | this.mediaPantalla(); |
18 | } | 18 | } |
19 | 19 | ||
20 | ngOnDestroy() { | 20 | ngOnDestroy() { |
21 | if (this.timer) clearTimeout(this.timer); | 21 | if (this.timer) clearTimeout(this.timer); |
22 | } | 22 | } |
23 | 23 | ||
24 | openGoCaja(templateRef: TemplateRef<any>) { | 24 | openGoCaja(templateRef: TemplateRef<any>) { |
25 | const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-dialog-centered' }); | 25 | const modalRef = this.modalService.show(templateRef, { class: 'modal-dialog-centered' }); |
26 | this.timer = setTimeout(() => { | 26 | this.timer = setTimeout(() => { |
27 | modalRef.hide(); | 27 | modalRef.hide(); |
28 | }, 3000); | 28 | }, 3000); |
29 | } | 29 | } |
30 | 30 | ||
31 | mediaPantalla() { | 31 | mediaPantalla() { |
32 | if ($('body').hasClass('media-pantalla')) { | 32 | if ($('body').hasClass('media-pantalla')) { |
33 | $('.reduce-card-1,.reduce-card-2') | 33 | $('.reduce-card-1,.reduce-card-2') |
34 | .addClass('media-pantalla') | 34 | .addClass('media-pantalla') |
35 | .addBack('media-pantalla'); | 35 | .addBack('media-pantalla'); |
36 | } | 36 | } |
37 | } | 37 | } |
38 | } | 38 | } |
39 | 39 |
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
1 | import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core'; | 1 | import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core'; |
2 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 2 | import { ICategoria } from 'src/app/interfaces/ICategoria'; |
3 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 3 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
4 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | 4 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; |
5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'app-filtro-categorias', | 8 | selector: 'app-filtro-categorias', |
9 | templateUrl: './filtro-categorias.component.html', | 9 | templateUrl: './filtro-categorias.component.html', |
10 | styleUrls: ['./filtro-categorias.component.scss'] | 10 | styleUrls: ['./filtro-categorias.component.scss'] |
11 | }) | 11 | }) |
12 | export class FiltroCategoriasComponent implements OnInit { | 12 | export class FiltroCategoriasComponent implements OnInit { |
13 | @Output() getProductos = new EventEmitter<any>(); | 13 | @Output() getProductos = new EventEmitter<any>(); |
14 | @Output() setProductos = new EventEmitter<any>(); | 14 | @Output() setProductos = new EventEmitter<any>(); |
15 | @Output() filterItems = new EventEmitter<any>(); | 15 | @Output() filterItems = new EventEmitter<any>(); |
16 | categorias: ICategoria[] = []; | 16 | categorias: ICategoria[] = []; |
17 | timeoutHandler: any; | 17 | timeoutHandler: any; |
18 | categoriaActive = null; | 18 | categoriaActive = null; |
19 | allActive = true; | 19 | allActive = true; |
20 | queMostrar = 'todos'; | 20 | queMostrar = 'todos'; |
21 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 21 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
22 | 22 | ||
23 | constructor( | 23 | constructor( |
24 | private categoriaService: CategoriaService, | 24 | private categoriaService: CategoriaService, |
25 | private inactiveScreen: InactiveScreenService, | 25 | private inactiveScreen: InactiveScreenService, |
26 | ) { } | 26 | ) { } |
27 | 27 | ||
28 | ngOnInit() { | 28 | ngOnInit() { |
29 | this.mediaPantalla(); | 29 | this.mediaPantalla(); |
30 | } | 30 | } |
31 | 31 | ||
32 | getCategorias() { | 32 | getCategorias() { |
33 | this.categoriaService.getAll() | 33 | this.categoriaService.getAll() |
34 | .subscribe((categorias: ICategoria[]) => { | 34 | .subscribe((categorias: ICategoria[]) => { |
35 | switch (this.queMostrar) { | 35 | switch (this.queMostrar) { |
36 | case 'todos': | 36 | case 'todos': |
37 | this.categorias = categorias; | 37 | this.categorias = categorias; |
38 | this.categoriaActive = 0; | 38 | this.categoriaActive = 0; |
39 | break; | 39 | break; |
40 | case 'promociones': | 40 | case 'promociones': |
41 | this.categorias = categorias; | 41 | this.categorias = categorias; |
42 | this.categoriaActive = 19; | 42 | this.categoriaActive = 19; |
43 | break; | 43 | break; |
44 | case 'ordenar': | 44 | case 'ordenar': |
45 | this.categorias = categorias.filter((categoria: ICategoria) => { | 45 | this.categorias = categorias.filter((categoria: ICategoria) => { |
46 | return categoria.ES_PEDIDO; | 46 | return categoria.ES_PEDIDO; |
47 | }); | 47 | }); |
48 | this.categoriaActive = 4; | 48 | this.categoriaActive = 4; |
49 | break; | 49 | break; |
50 | default: | 50 | default: |
51 | this.categorias = categorias; | 51 | this.categorias = categorias; |
52 | this.categoriaActive = 0; | 52 | this.categoriaActive = 0; |
53 | break; | 53 | break; |
54 | } | 54 | } |
55 | !localStorage.getItem('articulos') ? | 55 | !localStorage.getItem('articulos') ? |
56 | this.getProductos.emit() : | 56 | this.getProductos.emit() : |
57 | this.setProductos.emit(); | 57 | this.setProductos.emit(); |
58 | }); | 58 | }); |
59 | this.mediaPantalla(); | 59 | this.mediaPantalla(); |
60 | } | 60 | } |
61 | 61 | ||
62 | selectCategoria(index: number, idCategoria?: number) { | 62 | selectCategoria(index: number, idCategoria?: number) { |
63 | if (this.categoriaActive === idCategoria) return; | 63 | if (this.categoriaActive === idCategoria) return; |
64 | this.categoriaActive = idCategoria; | 64 | this.categoriaActive = idCategoria; |
65 | this.allActive = idCategoria === 0 ? true : false; | 65 | this.allActive = idCategoria === 0 ? true : false; |
66 | this.categorias.forEach((categoria, i) => { | 66 | this.categorias.forEach((categoria, i) => { |
67 | categoria.selected = index === i ? true : false; | 67 | categoria.selected = index === i ? true : false; |
68 | }); | 68 | }); |
69 | this.filterItems.emit(); | 69 | this.filterItems.emit(); |
70 | } | 70 | } |
71 | 71 | ||
72 | @HostListener('scroll', ['$event']) | 72 | @HostListener('scroll', ['$event']) |
73 | scrollEvent(event: Event) { | 73 | scrollEvent(event: Event) { |
74 | clearTimeout(this.inactiveScreen.timerReposo); | 74 | clearTimeout(this.inactiveScreen.timerReposo); |
75 | this.inactiveScreen.startTimeOutInactividad(); | 75 | this.inactiveScreen.startTimeOutInactividad(); |
76 | } | 76 | } |
77 | 77 | ||
78 | mouseup() { | 78 | mouseup() { |
79 | if (!this.timeoutHandler) return; | 79 | if (!this.timeoutHandler) return; |
80 | clearInterval(this.timeoutHandler); | 80 | clearInterval(this.timeoutHandler); |
81 | } | 81 | } |
82 | 82 | ||
83 | scrollY(el: HTMLElement, value) { | 83 | scrollY(el: HTMLElement, value) { |
84 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 84 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
85 | this.timeoutHandler = setInterval(() => { | 85 | this.timeoutHandler = setInterval(() => { |
86 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 86 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
87 | }, 500); | 87 | }, 500); |
88 | } | 88 | } |
89 | 89 | ||
90 | mediaPantalla() { | 90 | mediaPantalla() { |
91 | if ($('body').hasClass('media-pantalla')) { | 91 | if ($('body').hasClass('media-pantalla')) { |
92 | $('.cat-content,#cat-content') | 92 | $('.cat-content,#cat-content') |
93 | .addClass('media-pantalla') | 93 | .addClass('media-pantalla') |
94 | .addBack('media-pantalla'); | 94 | .addBack('media-pantalla'); |
95 | } | 95 | } |
96 | } | 96 | } |
97 | } | 97 | } |
98 | 98 |
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
1 | import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core'; | 1 | import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } 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 { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; | 8 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; |
9 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 9 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
10 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; | 10 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; |
11 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; | 11 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; |
12 | import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; | 12 | import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; |
13 | import * as _ from 'lodash'; | 13 | import * as _ from 'lodash'; |
14 | import { ANIMATIONS } from 'src/app/utils/animations'; | 14 | import { ANIMATIONS } from 'src/app/utils/animations'; |
15 | 15 | ||
16 | @Component({ | 16 | @Component({ |
17 | selector: 'app-seleccion-articulos', | 17 | selector: 'app-seleccion-articulos', |
18 | templateUrl: './seleccion-articulos.component.html', | 18 | templateUrl: './seleccion-articulos.component.html', |
19 | styleUrls: ['./seleccion-articulos.component.scss'], | 19 | styleUrls: ['./seleccion-articulos.component.scss'], |
20 | animations: [ANIMATIONS.EnterLeaveY] | 20 | animations: [ANIMATIONS.EnterLeaveY] |
21 | }) | 21 | }) |
22 | export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { | 22 | export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { |
23 | showSpinner = true; | 23 | showSpinner = true; |
24 | timeoutHandler: any; | 24 | timeoutHandler: any; |
25 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 25 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
26 | articulos: IArticulo[] = []; | 26 | articulos: IArticulo[] = []; |
27 | auxArticulos: IArticulo[] = []; | 27 | auxArticulos: IArticulo[] = []; |
28 | showQuantity = 100; | 28 | showQuantity = 100; |
29 | searchTerm = ''; | 29 | searchTerm = ''; |
30 | ordenandoByVendidos = true; | 30 | ordenandoByVendidos = true; |
31 | modalRef: BsModalRef; | 31 | modalRef: BsModalRef; |
32 | total = 0; | 32 | total = 0; |
33 | @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; | 33 | @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; |
34 | 34 | ||
35 | constructor( | 35 | constructor( |
36 | public articuloService: ArticuloService, | 36 | public articuloService: ArticuloService, |
37 | private sinonimoService: SinonimoService, | 37 | private sinonimoService: SinonimoService, |
38 | private modalService: BsModalService, | 38 | private modalService: BsModalService, |
39 | private inactiveScreen: InactiveScreenService, | 39 | private inactiveScreen: InactiveScreenService, |
40 | ) { } | 40 | ) { } |
41 | 41 | ||
42 | ngOnInit() { } | 42 | ngOnInit() { } |
43 | 43 | ||
44 | ngAfterViewInit(): void { | 44 | ngAfterViewInit(): void { |
45 | this.filtroCategorias.getCategorias(); | 45 | this.filtroCategorias.getCategorias(); |
46 | this.mediaPantalla(); | 46 | this.mediaPantalla(); |
47 | } | 47 | } |
48 | 48 | ||
49 | ngOnDestroy() { | 49 | ngOnDestroy() { |
50 | for (let i = 1; i <= this.modalService.getModalsCount(); i++) { | 50 | for (let i = 1; i <= this.modalService.getModalsCount(); i++) { |
51 | this.modalService.hide(i); | 51 | this.modalService.hide(i); |
52 | } | 52 | } |
53 | } | 53 | } |
54 | 54 | ||
55 | getProductos() { | 55 | getProductos() { |
56 | this.articuloService.getAll() | 56 | this.articuloService.getAll() |
57 | .subscribe((result: IArticulo[]) => { | 57 | .subscribe((result: IArticulo[]) => { |
58 | this.articuloService.setArticulosSinImagen(result); | 58 | this.articuloService.setArticulosSinImagen(result); |
59 | if (this.filtroCategorias.queMostrar === 'ordenar') { | 59 | if (this.filtroCategorias.queMostrar === 'ordenar') { |
60 | this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { | 60 | this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { |
61 | const tempArticulos = result.filter((articulo: IArticulo) => { | 61 | const tempArticulos = result.filter((articulo: IArticulo) => { |
62 | return articulo.categoria_selfservice === categoria.id; | 62 | return articulo.categoria_selfservice === categoria.id; |
63 | }); | 63 | }); |
64 | result = tempArticulos; | 64 | result = tempArticulos; |
65 | }); | 65 | }); |
66 | } | 66 | } |
67 | localStorage.setItem('articulos', JSON.stringify(result)); | 67 | localStorage.setItem('articulos', JSON.stringify(result)); |
68 | this.setProductos(); | 68 | this.setProductos(); |
69 | }, (error) => { | 69 | }, (error) => { |
70 | this.showSpinner = false; | 70 | this.showSpinner = false; |
71 | console.error(error); | 71 | console.error(error); |
72 | }); | 72 | }); |
73 | } | 73 | } |
74 | 74 | ||
75 | setProductos() { | 75 | setProductos() { |
76 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 76 | this.articulos = JSON.parse(localStorage.getItem('articulos')); |
77 | this.filterItems(); | 77 | this.filterItems(); |
78 | } | 78 | } |
79 | 79 | ||
80 | filterItems() { | 80 | filterItems() { |
81 | if (this.filtroCategorias.categoriaActive === 0) { | 81 | if (this.filtroCategorias.categoriaActive === 0) { |
82 | this.auxArticulos = this.articulos; | 82 | this.auxArticulos = this.articulos; |
83 | return; | 83 | return; |
84 | } | 84 | } |
85 | this.auxArticulos = this.articulos.filter(x => { | 85 | this.auxArticulos = this.articulos.filter(x => { |
86 | return x.categoria_selfservice === this.filtroCategorias.categoriaActive; | 86 | return x.categoria_selfservice === this.filtroCategorias.categoriaActive; |
87 | }); | 87 | }); |
88 | this.ordenar(); | 88 | this.ordenar(); |
89 | } | 89 | } |
90 | 90 | ||
91 | ordenar() { | 91 | ordenar() { |
92 | if (this.ordenandoByVendidos) { | 92 | if (this.ordenandoByVendidos) { |
93 | this.auxArticulos.sort((a, b) => { | 93 | this.auxArticulos.sort((a, b) => { |
94 | return b.cantidadVendida - a.cantidadVendida; | 94 | return b.cantidadVendida - a.cantidadVendida; |
95 | }); | 95 | }); |
96 | } | 96 | } |
97 | } | 97 | } |
98 | 98 | ||
99 | selectArticulo(articulo: IArticulo) { | 99 | selectArticulo(articulo: IArticulo) { |
100 | this.getByID(articulo.id); | 100 | this.getByID(articulo.id); |
101 | } | 101 | } |
102 | 102 | ||
103 | getByID(id: number) { | 103 | getByID(id: number) { |
104 | this.articuloService.getById(id) | 104 | this.articuloService.getById(id) |
105 | .subscribe((res: IArticulo) => { | 105 | .subscribe((res: IArticulo) => { |
106 | if (res.FPP) { | 106 | if (res.FPP) { |
107 | this.openModalPromos(res); | 107 | this.openModalPromos(res); |
108 | } else { | 108 | } else { |
109 | this.getSinonimos(res); | 109 | this.getSinonimos(res); |
110 | } | 110 | } |
111 | }, err => console.error(err)); | 111 | }, err => console.error(err)); |
112 | } | 112 | } |
113 | 113 | ||
114 | getSinonimos(articulo: IArticulo) { | 114 | getSinonimos(articulo: IArticulo) { |
115 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) | 115 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) |
116 | .subscribe((res: any[]) => { | 116 | .subscribe((res: any[]) => { |
117 | if (res.length) { | 117 | if (res.length) { |
118 | const sinonimos = []; | 118 | const sinonimos = []; |
119 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); | 119 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); |
120 | Object.keys(gruposArticulos).forEach(key => { | 120 | Object.keys(gruposArticulos).forEach(key => { |
121 | sinonimos.push({ productos: gruposArticulos[key] }); | 121 | sinonimos.push({ productos: gruposArticulos[key] }); |
122 | }); | 122 | }); |
123 | res = sinonimos; | 123 | res = sinonimos; |
124 | this.openModalSinonimos(res, articulo); | 124 | this.openModalSinonimos(res, articulo); |
125 | } else { | 125 | } else { |
126 | this.articuloService.setArticulo(articulo); | 126 | this.articuloService.setArticulo(articulo); |
127 | } | 127 | } |
128 | }); | 128 | }); |
129 | } | 129 | } |
130 | 130 | ||
131 | openModalPromos(articulo: IArticulo) { | 131 | openModalPromos(articulo: IArticulo) { |
132 | this.modalRef = this.modalService.show(PromocionComponent, { | 132 | this.modalRef = this.modalService.show(PromocionComponent, { |
133 | initialState: { articulosPromo: [articulo] }, | 133 | initialState: { articulosPromo: [articulo] }, |
134 | class: 'modal-promo modal-dialog-centered' | 134 | class: 'modal-dialog-centered' |
135 | }); | 135 | }); |
136 | this.mediaPantalla(); | 136 | this.mediaPantalla(); |
137 | } | 137 | } |
138 | 138 | ||
139 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { | 139 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { |
140 | this.modalRef = this.modalService.show(SinonimoComponent, { | 140 | this.modalRef = this.modalService.show(SinonimoComponent, { |
141 | initialState: { | 141 | initialState: { |
142 | sinonimos: sinonimosData, | 142 | sinonimos: sinonimosData, |
143 | articulo | 143 | articulo |
144 | }, | 144 | }, |
145 | class: 'modal-promo modal-dialog-centered' | 145 | class: 'modal-dialog-centered' |
146 | }); | 146 | }); |
147 | 147 | ||
148 | this.modalRef.content.onClose | 148 | this.modalRef.content.onClose |
149 | .subscribe((res: any) => { | 149 | .subscribe((res: any) => { |
150 | for (const a of articulo.productos) { | 150 | for (const a of articulo.productos) { |
151 | for (const aRes of res.articulos) { | 151 | for (const aRes of res.articulos) { |
152 | if (a.idSinonimo === aRes.ID_SIN) { | 152 | if (a.idSinonimo === aRes.ID_SIN) { |
153 | a.CODA = aRes.CodArt; | 153 | a.CODA = aRes.CodArt; |
154 | a.CodArt = aRes.CodArt; | 154 | a.CodArt = aRes.CodArt; |
155 | a.SECA = aRes.CodSec; | 155 | a.SECA = aRes.CodSec; |
156 | aRes.CodSec = aRes.CodSec; | 156 | aRes.CodSec = aRes.CodSec; |
157 | a.PreVen = aRes.PreVen; | 157 | a.PreVen = aRes.PreVen; |
158 | a.id = aRes.id; | 158 | a.id = aRes.id; |
159 | a.DET_LAR = aRes.DET_LAR; | 159 | a.DET_LAR = aRes.DET_LAR; |
160 | a.DetArt = aRes.DetArt; | 160 | a.DetArt = aRes.DetArt; |
161 | } | 161 | } |
162 | } | 162 | } |
163 | } | 163 | } |
164 | this.articuloService.setArticulo(articulo); | 164 | this.articuloService.setArticulo(articulo); |
165 | }); | 165 | }); |
166 | this.mediaPantalla(); | 166 | this.mediaPantalla(); |
167 | } | 167 | } |
168 | 168 | ||
169 | deleteArticulo(index: number) { | 169 | deleteArticulo(index: number) { |
170 | this.articuloService.deleteArticulo(index); | 170 | this.articuloService.deleteArticulo(index); |
171 | } | 171 | } |
172 | 172 | ||
173 | increaseShow() { | 173 | increaseShow() { |
174 | this.showQuantity += 100; | 174 | this.showQuantity += 100; |
175 | } | 175 | } |
176 | 176 | ||
177 | @HostListener('scroll', ['$event']) | 177 | @HostListener('scroll', ['$event']) |
178 | scrollEvent(event: Event) { | 178 | scrollEvent(event: Event) { |
179 | clearTimeout(this.inactiveScreen.timerReposo); | 179 | clearTimeout(this.inactiveScreen.timerReposo); |
180 | this.inactiveScreen.startTimeOutInactividad(); | 180 | this.inactiveScreen.startTimeOutInactividad(); |
181 | } | 181 | } |
182 | 182 | ||
183 | mouseup() { | 183 | mouseup() { |
184 | if (!this.timeoutHandler) return; | 184 | if (!this.timeoutHandler) return; |
185 | clearInterval(this.timeoutHandler); | 185 | clearInterval(this.timeoutHandler); |
186 | } | 186 | } |
187 | 187 | ||
188 | scrollY(el: HTMLElement, value) { | 188 | scrollY(el: HTMLElement, value) { |
189 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 189 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
190 | this.timeoutHandler = setInterval(() => { | 190 | this.timeoutHandler = setInterval(() => { |
191 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | 191 | el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); |
192 | }, 500); | 192 | }, 500); |
193 | } | 193 | } |
194 | 194 | ||
195 | scrollX(el: HTMLElement, value) { | 195 | scrollX(el: HTMLElement, value) { |
196 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 196 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); |
197 | this.timeoutHandler = setInterval(() => { | 197 | this.timeoutHandler = setInterval(() => { |
198 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); | 198 | el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); |
199 | }, 500); | 199 | }, 500); |
200 | } | 200 | } |
201 | 201 | ||
202 | mediaPantalla() { | 202 | mediaPantalla() { |
203 | if ($('body').hasClass('media-pantalla')) { | 203 | if ($('body').hasClass('media-pantalla')) { |
204 | $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, | 204 | $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, |
205 | .cat-box,.img-categoria, .modal-content`) | 205 | .cat-box,.img-categoria, .modal-content`) |
206 | .addClass('media-pantalla') | 206 | .addClass('media-pantalla') |
207 | .addBack('media-pantalla'); | 207 | .addBack('media-pantalla'); |
208 | } | 208 | } |
209 | } | 209 | } |
210 | } | 210 | } |
211 | 211 |
src/app/shared/confirmacion/confirmacion.component.html
1 | <div class="modal-header bg-primary rounded-top pt-4 px-2"> | 1 | <div class="bg-primary rounded"> |
2 | <img | 2 | <div class="modal-header"> |
3 | draggable="false" | ||
4 | ondragstart="return false;" | ||
5 | (contextmenu)="false" | ||
6 | (click)="close()" | ||
7 | class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0" | ||
8 | src="assets/img/icono-cancelar-blanco.svg"> | ||
9 | <div class="row mx-0 w-100 justify-content-between"> | ||
10 | <div class="col-8"> | ||
11 | <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p> | ||
12 | </div> | ||
13 | </div> | ||
14 | <div *ngIf="imagenPath" class="col-4 align-self-center"> | ||
15 | <img | 3 | <img |
16 | draggable="false" | 4 | draggable="false" |
17 | ondragstart="return false;" | 5 | ondragstart="return false;" |
18 | (contextmenu)="false" | 6 | (contextmenu)="false" |
19 | src="{{urlImagenes}}{{imagenPath}}" | 7 | (click)="close()" |
20 | onerror="this.src='assets/img/imagen-no-encontrada.jpg'" | 8 | class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index" |
21 | class="card-img-top img-fluid rounded-circle"> | 9 | src="assets/img/icono-cancelar-blanco.svg"> |
22 | </div> | 10 | <div class="row no-gutters w-100 justify-content-between"> |
23 | </div> | 11 | <div class="col align-self-center"> |
24 | <div class=" col-12 modal-body bg-primary rounded-bottom pb-3 px-2"> | 12 | <p *ngIf="titleMessage" class="h3 text-white">{{titleMessage}}</p> |
25 | <div class="row justify-content-between mx-0 w-100"> | 13 | </div> |
26 | <div class="col-8"> | 14 | <div *ngIf="imagenPath" class="col-4 px-3 pt-3 align-self-center"> |
27 | <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p > | 15 | <img |
28 | <h1 *ngIf="footerMessageSecond" class="text-white mb-4">{{footerMessageSecond}}</h1> | 16 | draggable="false" |
17 | ondragstart="return false;" | ||
18 | (contextmenu)="false" | ||
19 | src="{{urlImagenes}}{{imagenPath}}" | ||
20 | onerror="this.src='assets/img/imagen-no-encontrada.jpg'" | ||
21 | class="d-block mx-auto img-fluid rounded-circle"> | ||
22 | </div> | ||
29 | </div> | 23 | </div> |
30 | <div class="col-4"> | 24 | </div> |
31 | <div | 25 | <div class="modal-body"> |
32 | class="mx-0" | 26 | <div class="row justify-content-between mx-0 w-100"> |
33 | (click)="confirmarArticulo()"> | 27 | <div class="col-7 col-md-8 pl-0 align-self-center"> |
34 | <div class="col-auto bg-white badge-pill"> | 28 | <p *ngIf="footerMessageFirst" class="text-white"><small>{{footerMessageFirst}}</small></p > |
35 | <div class="row justify-content-between"> | 29 | <p *ngIf="footerMessageSecond" class="h1 text-white">{{footerMessageSecond}}</p> |
36 | <div *ngIf="footerConfirmation" class="col-auto px-0 align-self-center text-primary pl-3"> | 30 | </div> |
37 | <p class="font-weight-bold">{{footerConfirmation | currency}}</p> | 31 | <div class="col-5 col-md-4 align-self-center"> |
38 | </div> | 32 | <div |
39 | <div class="col-auto px-0"> | 33 | class="row justify-content-between bg-white badge-pill btn-effect" |
40 | <img | 34 | *ngIf="footerConfirmation" |
41 | draggable="false" | 35 | (click)="confirmar()"> |
42 | ondragstart="return false;" | 36 | <div class="col-auto px-0 align-self-center text-primary pl-3"> |
43 | (contextmenu)="false" | 37 | <p class="font-weight-bold">{{footerConfirmation | currency}}</p> |
44 | class="d-block ml-auto my-1 icon-30 pr-2" | 38 | </div> |
45 | src="assets/img/ir-color.svg"> | 39 | <div class="col-auto px-0"> |
46 | </div> | 40 | <img |
41 | draggable="false" | ||
42 | ondragstart="return false;" | ||
43 | (contextmenu)="false" | ||
44 | class="d-block ml-auto my-1 icon-20" | ||
45 | src="assets/img/ir-color.svg"> | ||
47 | </div> | 46 | </div> |
48 | </div> | 47 | </div> |
49 | </div> | 48 | <div |
50 | <div *ngIf="footerClose" class="bg-white badge-pill mt-2"> | 49 | *ngIf="footerClose" |
51 | <div class="row justify-content-between"> | 50 | class="row justify-content-center bg-white badge-pill btn-effect mt-2" |
52 | <div | 51 | (click)="close()"> |
src/app/shared/confirmacion/confirmacion.component.ts
1 | import { Component, OnInit, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, HostListener } from '@angular/core'; |
2 | import { BsModalRef } from 'ngx-bootstrap/modal'; | 2 | import { BsModalRef } from 'ngx-bootstrap/modal'; |
3 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 3 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
4 | import { Subject } from 'rxjs'; | 4 | import { Subject } from 'rxjs'; |
5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'app-confirmacion', | 8 | selector: 'app-confirmacion', |
9 | templateUrl: './confirmacion.component.html', | 9 | templateUrl: './confirmacion.component.html', |
10 | styleUrls: ['./confirmacion.component.scss'] | 10 | styleUrls: ['./confirmacion.component.scss'] |
11 | }) | 11 | }) |
12 | export class ConfirmacionComponent implements OnInit { | 12 | export class ConfirmacionComponent implements OnInit { |
13 | titleMessage: string; | 13 | titleMessage: string; |
14 | imagenPath: any; | 14 | imagenPath: any; |
15 | footerMessageFirst: string; | 15 | footerMessageFirst: string; |
16 | footerMessageSecond: string; | 16 | footerMessageSecond: string; |
17 | footerConfirmation: number; | 17 | footerConfirmation: number; |
18 | footerClose: string; | 18 | footerClose: string; |
19 | onClose: Subject<any>; | 19 | onClose: Subject<any>; |
20 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 20 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
21 | 21 | ||
22 | constructor( | 22 | constructor( |
23 | public modalRef: BsModalRef, | 23 | public modalRef: BsModalRef, |
24 | private inactiveScreen: InactiveScreenService, | 24 | private inactiveScreen: InactiveScreenService, |
25 | ) { | 25 | ) { |
26 | this.onClose = new Subject(); | 26 | this.onClose = new Subject(); |
27 | } | 27 | } |
28 | 28 | ||
29 | ngOnInit() { | 29 | ngOnInit() { |
30 | } | 30 | } |
31 | 31 | ||
32 | confirmarArticulo() { | 32 | confirmar() { |
33 | this.onClose.next(); | 33 | this.onClose.next(); |
34 | this.modalRef.hide(); | 34 | this.modalRef.hide(); |
35 | } | 35 | } |
36 | 36 | ||
37 | close() { | 37 | close() { |
38 | this.modalRef.hide(); | 38 | this.modalRef.hide(); |
39 | } | 39 | } |
40 | 40 | ||
41 | @HostListener('document:click', ['$event']) | 41 | @HostListener('document:click', ['$event']) |
42 | eventListener(event: Event) { | 42 | eventListener(event: Event) { |
43 | clearTimeout(this.inactiveScreen.timerReposo); | 43 | clearTimeout(this.inactiveScreen.timerReposo); |
44 | this.inactiveScreen.startTimeOutInactividad(); | 44 | this.inactiveScreen.startTimeOutInactividad(); |
45 | } | 45 | } |
46 | } | 46 | } |
47 | 47 |
src/app/shared/footer/footer.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { Location } from '@angular/common'; | 2 | import { Location } from '@angular/common'; |
3 | 3 | ||
4 | @Component({ | 4 | @Component({ |
5 | selector: 'app-footer', | 5 | selector: 'app-footer', |
6 | templateUrl: './footer.component.html', | 6 | templateUrl: './footer.component.html', |
7 | styleUrls: ['./footer.component.scss'] | 7 | styleUrls: ['./footer.component.scss'] |
8 | }) | 8 | }) |
9 | export class FooterComponent implements OnInit { | 9 | export class FooterComponent implements OnInit { |
10 | constructor(private location: Location) { } | 10 | constructor(private location: Location) { } |
11 | 11 | ||
12 | ngOnInit() { } | 12 | ngOnInit() { } |
13 | 13 | ||
14 | goBack() { | 14 | goBack() { |
15 | this.location.back(); | 15 | this.location.back(); |
16 | } | 16 | } |
17 | 17 | ||
18 | reducirPantalla() { | 18 | reducirPantalla() { |
19 | $(`body, | 19 | $(`body, |
20 | .reduce-card-1, | 20 | .reduce-card-1, |
21 | .reduce-card-2, | 21 | .reduce-card-2, |
22 | #content, | 22 | #content, |
23 | .cat-content, | 23 | .cat-content, |
24 | .cat-btn, | 24 | .cat-btn, |
25 | .cat-box, | 25 | .cat-box, |
26 | #boxCarrito, | 26 | #boxCarrito, |
27 | #headerPublicidad, | 27 | #headerPublicidad, |
28 | #headerPad, | 28 | #headerPad, |
29 | .img-categoria, | 29 | .img-categoria, |
30 | .carrito-articulo, | 30 | .carrito-articulo, |
31 | .carrito-content, | 31 | .carrito-content, |
32 | .pago-tarjeta, | 32 | .pago-tarjeta, |
33 | .modal-promo, | ||
34 | .modal-content, | 33 | .modal-content, |
35 | .qr-mt`) | 34 | .qr-mt`) |
36 | .toggleClass('media-pantalla'); | 35 | .toggleClass('media-pantalla'); |
37 | } | 36 | } |
38 | } | 37 | } |
39 | 38 |
src/app/shared/header-publicidad/header-publicidad.component.html
1 | <div class="row mx-0" id="headerPublicidad" #headerPublicidad | 1 | <div class="row mx-0 btn-effect" id="headerPublicidad" #headerPublicidad |
2 | [ngClass]="headerPublicidad.classList.contains('media-pantalla') | 2 | [ngClass]="headerPublicidad.classList.contains('media-pantalla') |
3 | ? 'h-31' : 'h-20'" id="boxCarrito"> | 3 | ? 'h-31' : 'h-20'" id="boxCarrito"> |
4 | <div class="col-12 p-3 h-100" id="headerPad"> | 4 | <div class="col-12 p-3 h-100" id="headerPad"> |
5 | <div class="h-100"> | 5 | <div class="h-100"> |
6 | <carousel [showIndicators]="false" [interval]="4000"> | 6 | <carousel [showIndicators]="false" [interval]="4000"> |
7 | <slide *ngFor="let p of publicidades"> | 7 | <slide *ngFor="let p of publicidades"> |
8 | <img | 8 | <img |
9 | class="h-100 w-100" | 9 | class="h-100 w-100" |
10 | draggable="false" | 10 | draggable="false" |
11 | ondragstart="return false;" | 11 | ondragstart="return false;" |
12 | (contextmenu)="false" | 12 | (contextmenu)="false" |
13 | src="{{urlImagenes}}{{p.imagen}}" | 13 | src="{{urlImagenes}}{{p.imagen}}" |
14 | (click)="elegirArticulo(p)"> | 14 | (click)="elegirArticulo(p)"> |
15 | </slide> | 15 | </slide> |
16 | </carousel> | 16 | </carousel> |
17 | </div> | 17 | </div> |
18 | </div> | 18 | </div> |
19 | </div> | 19 | </div> |
20 | 20 |
src/app/shared/header-publicidad/header-publicidad.component.ts
1 | import { Component, OnInit, TemplateRef } from '@angular/core'; | 1 | import { Component, OnInit, TemplateRef } from '@angular/core'; |
2 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 2 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
3 | import { IPublicidad } from 'src/app/interfaces/IPublicidad'; | 3 | import { IPublicidad } from 'src/app/interfaces/IPublicidad'; |
4 | import { PublicidadService } from 'src/app/services/publicidad/publicidad.service'; | 4 | import { PublicidadService } from 'src/app/services/publicidad/publicidad.service'; |
5 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 5 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
6 | import { PromocionComponent } from '../promocion/promocion.component'; | 6 | import { PromocionComponent } from '../promocion/promocion.component'; |
7 | import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; | 7 | import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; |
8 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 8 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
9 | import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; | 9 | import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; |
10 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; | 10 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; |
11 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; | 11 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; |
12 | import { SinonimoComponent } from '../sinonimo/sinonimo.component'; | 12 | import { SinonimoComponent } from '../sinonimo/sinonimo.component'; |
13 | import * as _ from 'lodash'; | 13 | import * as _ from 'lodash'; |
14 | 14 | ||
15 | @Component({ | 15 | @Component({ |
16 | selector: 'app-header-publicidad', | 16 | selector: 'app-header-publicidad', |
17 | templateUrl: './header-publicidad.component.html', | 17 | templateUrl: './header-publicidad.component.html', |
18 | styleUrls: ['./header-publicidad.component.scss'] | 18 | styleUrls: ['./header-publicidad.component.scss'] |
19 | }) | 19 | }) |
20 | export class HeaderPublicidadComponent implements OnInit { | 20 | export class HeaderPublicidadComponent implements OnInit { |
21 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 21 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
22 | publicidades: IPublicidad[] = []; | 22 | publicidades: IPublicidad[] = []; |
23 | modalRef: BsModalRef; | 23 | modalRef: BsModalRef; |
24 | 24 | ||
25 | constructor( | 25 | constructor( |
26 | private publicidadService: PublicidadService, | 26 | private publicidadService: PublicidadService, |
27 | private articuloService: ArticuloService, | 27 | private articuloService: ArticuloService, |
28 | private modalService: BsModalService, | 28 | private modalService: BsModalService, |
29 | private sinonimoService: SinonimoService | 29 | private sinonimoService: SinonimoService |
30 | ) { } | 30 | ) { } |
31 | 31 | ||
32 | ngOnInit() { | 32 | ngOnInit() { |
33 | this.getPublicidades(); | 33 | this.getPublicidades(); |
34 | this.mediaPantalla(); | 34 | this.mediaPantalla(); |
35 | } | 35 | } |
36 | 36 | ||
37 | getPublicidades() { | 37 | getPublicidades() { |
38 | this.publicidadService.getAll() | 38 | this.publicidadService.getAll() |
39 | .subscribe((res: IPublicidad[]) => { | 39 | .subscribe((res: IPublicidad[]) => { |
40 | this.publicidades = res; | 40 | this.publicidades = res; |
41 | }, err => console.error(err)); | 41 | }, err => console.error(err)); |
42 | } | 42 | } |
43 | 43 | ||
44 | elegirArticulo(publicidad: IPublicidad) { | 44 | elegirArticulo(publicidad: IPublicidad) { |
45 | if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); | 45 | if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); |
46 | } | 46 | } |
47 | 47 | ||
48 | getByID(id: number) { | 48 | getByID(id: number) { |
49 | this.articuloService.getById(id) | 49 | this.articuloService.getById(id) |
50 | .subscribe((res: IArticulo) => { | 50 | .subscribe((res: IArticulo) => { |
51 | if (res.FPP) { | 51 | if (res.FPP) { |
52 | this.openModalPromos(res); | 52 | this.openModalPromos(res); |
53 | return; | 53 | return; |
54 | } else { | 54 | } else { |
55 | this.openModalConfirmacion(res); | 55 | this.openModalConfirmacion(res); |
56 | return; | 56 | return; |
57 | } | 57 | } |
58 | }, err => console.error(err)); | 58 | }, err => console.error(err)); |
59 | } | 59 | } |
60 | 60 | ||
61 | openModalPromos(articulo: IArticulo) { | 61 | openModalPromos(articulo: IArticulo) { |
62 | this.modalRef = this.modalService.show(PromocionComponent, | 62 | this.modalRef = this.modalService.show(PromocionComponent, |
63 | { | 63 | { |
64 | initialState: { | 64 | initialState: { |
65 | idArticulo: articulo.id | 65 | idArticulo: articulo.id |
66 | }, | 66 | }, |
67 | class: 'modal-promo modal-dialog-centered' | 67 | class: 'modal-dialog-centered' |
68 | }); | 68 | }); |
69 | } | 69 | } |
70 | 70 | ||
71 | openModalConfirmacion(articulo: IArticulo) { | 71 | openModalConfirmacion(articulo: IArticulo) { |
72 | this.modalRef = this.modalService.show(ConfirmacionComponent, | 72 | this.modalRef = this.modalService.show(ConfirmacionComponent, |
73 | { | 73 | { |
74 | initialState: { | 74 | initialState: { |
75 | titleMessage: articulo.DET_LAR, | 75 | titleMessage: articulo.DET_LAR, |
76 | imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg', | 76 | imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/imagen-no-encontrada.jpg', |
77 | footerMessageFirst: `ยฟDESEA AGREGAR ESTE COMBO`, | 77 | footerMessageFirst: `ยฟDESEA AGREGAR ESTE COMBO`, |
78 | footerMessageSecond: `a su carrito?`, | 78 | footerMessageSecond: `a su carrito?`, |
79 | footerConfirmation: articulo.PreVen, | 79 | footerConfirmation: articulo.PreVen, |
80 | footerClose: `volver` | 80 | footerClose: `volver` |
81 | }, | 81 | }, |
82 | class: 'modal-promo modal-dialog-centered' | 82 | class: 'modal-dialog-centered' |
83 | }); | 83 | }); |
84 | this.modalRef.content.onClose.subscribe(() => { | 84 | this.modalRef.content.onClose.subscribe(() => { |
85 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) | 85 | this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) |
86 | .subscribe((res: ISinonimo[]) => { | 86 | .subscribe((res: ISinonimo[]) => { |
87 | if (res.length) { | 87 | if (res.length) { |
88 | const sinonimos = []; | 88 | const sinonimos = []; |
89 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); | 89 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); |
90 | Object.keys(gruposArticulos).forEach(key => { | 90 | Object.keys(gruposArticulos).forEach(key => { |
91 | sinonimos.push({ productos: gruposArticulos[key] }); | 91 | sinonimos.push({ productos: gruposArticulos[key] }); |
92 | }); | 92 | }); |
93 | res = sinonimos; | 93 | res = sinonimos; |
94 | this.openModalSinonimos(res, articulo); | 94 | this.openModalSinonimos(res, articulo); |
95 | } else { | 95 | } else { |
96 | articulo.cantidad = 1; | 96 | articulo.cantidad = 1; |
97 | this.articuloService.setArticulo(articulo); | 97 | this.articuloService.setArticulo(articulo); |
98 | } | 98 | } |
99 | }, err => console.error(err)); | 99 | }, err => console.error(err)); |
100 | }); | 100 | }); |
101 | this.mediaPantalla(); | 101 | this.mediaPantalla(); |
102 | } | 102 | } |
103 | 103 | ||
104 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { | 104 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { |
105 | const modalSinonimo = this.modalService.show(SinonimoComponent, { | 105 | const modalSinonimo = this.modalService.show(SinonimoComponent, { |
106 | initialState: { | 106 | initialState: { |
107 | sinonimos: sinonimosData, | 107 | sinonimos: sinonimosData, |
108 | articulo | 108 | articulo |
109 | }, | 109 | }, |
110 | class: 'modal-promo modal-dialog-centered' | 110 | class: 'modal-dialog-centered' |
111 | }); | 111 | }); |
112 | modalSinonimo.content.onClose | 112 | modalSinonimo.content.onClose |
113 | .subscribe((res: any) => { | 113 | .subscribe((res: any) => { |
114 | for (const a of articulo.productos) { | 114 | for (const a of articulo.productos) { |
115 | for (const aRes of res.articulos) { | 115 | for (const aRes of res.articulos) { |
116 | if (a.idSinonimo === aRes.ID_SIN) { | 116 | if (a.idSinonimo === aRes.ID_SIN) { |
117 | a.CODA = aRes.CodArt; | 117 | a.CODA = aRes.CodArt; |
118 | a.CodArt = aRes.CodArt; | 118 | a.CodArt = aRes.CodArt; |
119 | a.SECA = aRes.CodSec; | 119 | a.SECA = aRes.CodSec; |
120 | aRes.CodSec = aRes.CodSec; | 120 | aRes.CodSec = aRes.CodSec; |
121 | a.PreVen = aRes.PreVen; | 121 | a.PreVen = aRes.PreVen; |
122 | a.id = aRes.id; | 122 | a.id = aRes.id; |
123 | a.DET_LAR = aRes.DET_LAR; | 123 | a.DET_LAR = aRes.DET_LAR; |
124 | a.DetArt = aRes.DetArt; | 124 | a.DetArt = aRes.DetArt; |
125 | } | 125 | } |
126 | } | 126 | } |
127 | } | 127 | } |
128 | this.articuloService.setArticulo(articulo); | 128 | this.articuloService.setArticulo(articulo); |
129 | }); | 129 | }); |
130 | } | 130 | } |
131 | 131 | ||
132 | mediaPantalla() { | 132 | mediaPantalla() { |
133 | if ($('body').hasClass('media-pantalla')) { | 133 | if ($('body').hasClass('media-pantalla')) { |
134 | $('#headerPublicidad,#headerPad').addClass('media-pantalla'); | 134 | $('#headerPublicidad,#headerPad').addClass('media-pantalla'); |
135 | } | 135 | } |
136 | } | 136 | } |
137 | } | 137 | } |
138 | 138 |
src/app/shared/promocion/promocion.component.html
1 | <div class="modal-header bg-primary rounded-top pt-4 px-2" *ngIf="articulosPromo.length"> | 1 | <!-- <div class="d-flex justify-content-center" |
2 | <img | 2 | *ngIf="loading"> |
3 | draggable="false" | 3 | <div class="spinner-border text-primary" role="status"> |
4 | ondragstart="return false;" | 4 | <span class="sr-only">Loading...</span> |
5 | (contextmenu)="false" | 5 | </div> |
6 | (click)="selectPromo(articulosPromo[0])" | 6 | </div> --> |
7 | class="btn-effect mt-n3 icon-30 mr-2 position-absolute right-0" | 7 | <div class="bg-primary rounded"> |
8 | src="assets/img/icono-cancelar-blanco.svg"> | 8 | <div class="modal-header" *ngIf="articulosPromo.length"> |
9 | <div class="row mx-0 w-100 justify-content-between mt-3"> | 9 | <img |
10 | <div class="col-8"> | 10 | draggable="false" |
11 | <p class="h3 mt-n2 text-white">{{articulosPromo[0].DetArt}}</p> | 11 | ondragstart="return false;" |
12 | </div> | 12 | (contextmenu)="false" |
13 | <div class="col-4 align-self-center"> | 13 | (click)="selectPromo(articulosPromo[0])" |
14 | <div | 14 | class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index" |
15 | class="row mx-0 justify-content-between bg-white badge-pill" | 15 | src="assets/img/icono-cancelar-blanco.svg"> |
16 | (click)="selectPromo(articulosPromo[0])"> | 16 | <div class="row w-100 no-gutters justify-content-between"> |
17 | <div class="col px-0 align-self-center text-primary"> | 17 | <div class="col align-self-center"> |
18 | <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> | 18 | <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> |
19 | </div> | ||
20 | <div class="col-3 px-0"> | ||
21 | <img | ||
22 | draggable="false" | ||
23 | ondragstart="return false;" | ||
24 | (contextmenu)="false" | ||
25 | class="d-block ml-auto py-1 icon-30 mr-2 pt-2" | ||
26 | src="assets/img/ir-color.svg"> | ||
27 | </div> | ||
28 | </div> | ||
29 | </div> | ||
30 | </div> | ||
31 | </div> | ||
32 | <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length"> | ||
33 | <div class="row mx-0 w-100"> | ||
34 | <div class="col-9"> | 19 | </div> |
35 | <p class="text-white"><small>ยฟTE GUSTARรA LLEVAR ESTE ARTรCULO</small></p> | 20 | <div class="col-auto align-self-center mt-4 pl-2"> |
36 | <h1 class="text-white mb-4">en un combo?</h1> | ||
37 | </div> | ||
38 | <div class="col-3"> | ||
39 | <img | ||
40 | draggable="false" | ||
41 | ondragstart="return false;" | ||
42 | (contextmenu)="false" | ||
43 | src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" | ||
44 | onerror="this.src='assets/img/imagen-no-encontrada.jpg'" | ||
45 | class="card-img-top img-fluid rounded-circle"> | ||
46 | </div> | ||
47 | </div> | ||
48 | <div class="d-flex justify-content-center" | ||
49 | *ngIf="loading"> | ||
50 | <div class="spinner-border text-primary" role="status"> | ||
51 | <span class="sr-only">Loading...</span> | ||
52 | </div> | ||
53 | </div> | ||
54 | <div | ||
55 | class="row mx-0 lista-promociones scroll-y-visible" | ||
56 | (scroll)="scrollEvent($event)"> | ||
57 | <div class="col-12"> | ||
58 | <div *ngFor="let promo of promociones"> | ||
59 | <div | 21 | <div |
60 | class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary" | 22 | class="row mx-0 justify-content-between bg-white badge-pill btn-effect" |
61 | (click)="selectPromo(promo)"> | 23 | (click)="selectPromo(articulosPromo[0])"> |
62 | <div class="d-flex"> | 24 | <div class="col-auto align-self-center text-primary"> |
63 | <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> | 25 | <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> |
64 | <p class="font-weight-bold my-auto pr-2"> | 26 | </div> |
65 | <span>{{promo.PreVen | currency}}</span> | 27 | <div class="col-auto px-0"> |
66 | </p> | ||
67 | <img | 28 | <img |
68 | draggable="false" | 29 | draggable="false" |
69 | ondragstart="return false;" | 30 | ondragstart="return false;" |
70 | (contextmenu)="false" | 31 | (contextmenu)="false" |
71 | class="d-block ml-auto py-1 icon-30 mr-2 pt-2" | 32 | class="d-block ml-auto my-1 icon-20" |
72 | src="assets/img/ir-color.svg"> | 33 | src="assets/img/ir-color.svg"> |
73 | </div> | 34 | </div> |
74 | </div> | 35 | </div> |
75 | </div> | 36 | </div> |
76 | </div> | 37 | </div> |
77 | </div> | 38 | </div> |
39 | <div class="modal-body" *ngIf="articulosPromo.length"> | ||
40 | <div class="row no-gutters w-100"> | ||
41 | <div class="col-9 col-9 align-self-center"> | ||
42 | <p class="text-white"><small>ยฟTE GUSTARรA LLEVAR ESTE ARTรCULO</small></p> | ||
43 | <p class="h1 text-white">en un combo?</p> |
src/app/shared/promocion/promocion.component.ts
1 | import { Component, OnInit, HostListener } from '@angular/core'; | 1 | import { Component, OnInit, HostListener } from '@angular/core'; |
2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; | 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; |
3 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 3 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
4 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 4 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
5 | import { PromocionService } from 'src/app/services/promocion/promocion.service'; | 5 | import { PromocionService } from 'src/app/services/promocion/promocion.service'; |
6 | import { Subject } from 'rxjs'; | 6 | import { Subject } from 'rxjs'; |
7 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 7 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
8 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | 8 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
9 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; | 9 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; |
10 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; | 10 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; |
11 | import { SinonimoComponent } from '../sinonimo/sinonimo.component'; | 11 | import { SinonimoComponent } from '../sinonimo/sinonimo.component'; |
12 | import * as _ from 'lodash'; | 12 | import * as _ from 'lodash'; |
13 | 13 | ||
14 | @Component({ | 14 | @Component({ |
15 | selector: 'app-promocion', | 15 | selector: 'app-promocion', |
16 | templateUrl: './promocion.component.html', | 16 | templateUrl: './promocion.component.html', |
17 | styleUrls: ['./promocion.component.scss'] | 17 | styleUrls: ['./promocion.component.scss'] |
18 | }) | 18 | }) |
19 | export class PromocionComponent implements OnInit { | 19 | export class PromocionComponent implements OnInit { |
20 | articulosPromo: IArticulo[] = []; | 20 | articulosPromo: IArticulo[] = []; |
21 | promociones: IArticulo[] = []; | 21 | promociones: IArticulo[] = []; |
22 | onClose: Subject<any>; | 22 | onClose: Subject<any>; |
23 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 23 | urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; |
24 | 24 | ||
25 | constructor( | 25 | constructor( |
26 | public modalPromocion: BsModalRef, | 26 | public modalPromocion: BsModalRef, |
27 | private modalService: BsModalService, | 27 | private modalService: BsModalService, |
28 | private articuloService: ArticuloService, | 28 | private articuloService: ArticuloService, |
29 | private promocionService: PromocionService, | 29 | private promocionService: PromocionService, |
30 | private sinonimoService: SinonimoService, | 30 | private sinonimoService: SinonimoService, |
31 | private inactiveScreen: InactiveScreenService, | 31 | private inactiveScreen: InactiveScreenService, |
32 | ) { | 32 | ) { |
33 | this.onClose = new Subject(); | 33 | this.onClose = new Subject(); |
34 | } | 34 | } |
35 | 35 | ||
36 | ngOnInit() { | 36 | ngOnInit() { |
37 | this.getPromociones(); | 37 | this.getPromociones(); |
38 | } | 38 | } |
39 | 39 | ||
40 | selectPromo(promo: IArticulo) { | 40 | selectPromo(promo: IArticulo) { |
41 | this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) | 41 | this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) |
42 | .subscribe((res: ISinonimo[]) => { | 42 | .subscribe((res: ISinonimo[]) => { |
43 | if (res.length) { | 43 | if (res.length) { |
44 | const sinonimos = []; | 44 | const sinonimos = []; |
45 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); | 45 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); |
46 | Object.keys(gruposArticulos).forEach(key => { | 46 | Object.keys(gruposArticulos).forEach(key => { |
47 | sinonimos.push({ productos: gruposArticulos[key] }); | 47 | sinonimos.push({ productos: gruposArticulos[key] }); |
48 | }); | 48 | }); |
49 | res = sinonimos; | 49 | res = sinonimos; |
50 | this.openModalSinonimos(res, promo); | 50 | this.openModalSinonimos(res, promo); |
51 | } else { | 51 | } else { |
52 | promo.cantidad = 1; | 52 | promo.cantidad = 1; |
53 | this.articuloService.setArticulo(promo); | 53 | this.articuloService.setArticulo(promo); |
54 | this.modalPromocion.hide(); | 54 | this.modalPromocion.hide(); |
55 | } | 55 | } |
56 | }, err => console.error(err)); | 56 | }, err => console.error(err)); |
57 | this.mediaPantalla(); | 57 | this.mediaPantalla(); |
58 | } | 58 | } |
59 | 59 | ||
60 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { | 60 | openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { |
61 | const modalSinonimo = this.modalService.show(SinonimoComponent, { | 61 | const modalSinonimo = this.modalService.show(SinonimoComponent, { |
62 | initialState: { | 62 | initialState: { |
63 | sinonimos: sinonimosData, | 63 | sinonimos: sinonimosData, |
64 | articulo | 64 | articulo |
65 | }, | 65 | }, |
66 | class: 'modal-promo modal-dialog-centered' | 66 | class: 'modal-dialog-centered' |
67 | }); | 67 | }); |
68 | 68 | ||
69 | modalSinonimo.content.onClose | 69 | modalSinonimo.content.onClose |
70 | .subscribe((res: any) => { | 70 | .subscribe((res: any) => { |
71 | for (const a of articulo.productos) { | 71 | for (const a of articulo.productos) { |
72 | for (const aRes of res.articulos) { | 72 | for (const aRes of res.articulos) { |
73 | if (a.idSinonimo === aRes.ID_SIN) { | 73 | if (a.idSinonimo === aRes.ID_SIN) { |
74 | a.CODA = aRes.CodArt; | 74 | a.CODA = aRes.CodArt; |
75 | a.CodArt = aRes.CodArt; | 75 | a.CodArt = aRes.CodArt; |
76 | a.SECA = aRes.CodSec; | 76 | a.SECA = aRes.CodSec; |
77 | aRes.CodSec = aRes.CodSec; | 77 | aRes.CodSec = aRes.CodSec; |
78 | a.PreVen = aRes.PreVen; | 78 | a.PreVen = aRes.PreVen; |
79 | a.id = aRes.id; | 79 | a.id = aRes.id; |
80 | a.DET_LAR = aRes.DET_LAR; | 80 | a.DET_LAR = aRes.DET_LAR; |
81 | a.DetArt = aRes.DetArt; | 81 | a.DetArt = aRes.DetArt; |
82 | } | 82 | } |
83 | } | 83 | } |
84 | } | 84 | } |
85 | this.articuloService.setArticulo(articulo); | 85 | this.articuloService.setArticulo(articulo); |
86 | this.modalPromocion.hide(); | 86 | this.modalPromocion.hide(); |
87 | }); | 87 | }); |
88 | } | 88 | } |
89 | 89 | ||
90 | getPromociones() { | 90 | getPromociones() { |
91 | const sector = this.articulosPromo[0].CodSec; | 91 | const sector = this.articulosPromo[0].CodSec; |
92 | const codigo = this.articulosPromo[0].CodArt; | 92 | const codigo = this.articulosPromo[0].CodArt; |
93 | this.promocionService.getPromociones(sector, codigo) | 93 | this.promocionService.getPromociones(sector, codigo) |
94 | .subscribe((res: IArticulo[]) => { | 94 | .subscribe((res: IArticulo[]) => { |
95 | this.promociones = res; | 95 | this.promociones = res; |
96 | }, error => { console.error(error); }); | 96 | }, error => { console.error(error); }); |
97 | } | 97 | } |
98 | 98 | ||
99 | @HostListener('document:click', ['$event']) | 99 | @HostListener('document:click', ['$event']) |
100 | eventListener(event: Event) { | 100 | eventListener(event: Event) { |
101 | clearTimeout(this.inactiveScreen.timerReposo); | 101 | clearTimeout(this.inactiveScreen.timerReposo); |
102 | this.inactiveScreen.startTimeOutInactividad(); | 102 | this.inactiveScreen.startTimeOutInactividad(); |
103 | } | 103 | } |
104 | 104 | ||
105 | @HostListener('scroll', ['$event']) | 105 | @HostListener('scroll', ['$event']) |
106 | scrollEvent(event: Event) { | 106 | scrollEvent(event: Event) { |
107 | clearTimeout(this.inactiveScreen.timerReposo); | 107 | clearTimeout(this.inactiveScreen.timerReposo); |
108 | this.inactiveScreen.startTimeOutInactividad(); | 108 | this.inactiveScreen.startTimeOutInactividad(); |
109 | } | 109 | } |
110 | 110 | ||
111 | mediaPantalla() { | 111 | mediaPantalla() { |
112 | if ($('body').hasClass('media-pantalla')) { | 112 | if ($('body').hasClass('media-pantalla')) { |
113 | $('.modal-content').addClass('media-pantalla'); | 113 | $('.modal-content').addClass('media-pantalla'); |
114 | } | 114 | } |
115 | } | 115 | } |
116 | } | 116 | } |
117 | 117 |
src/app/shared/sinonimo/sinonimo.component.html
1 | <div class="bg-primary rounded text-white"> | 1 | <div class="bg-primary rounded text-white"> |
2 | <div class="modal-header"> | 2 | <div class="modal-header"> |
3 | <img | ||
4 | draggable="false" | ||
5 | ondragstart="return false;" | ||
6 | (contextmenu)="false" | ||
7 | (click)="close()" | ||
8 | class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index" | ||
9 | src="assets/img/icono-cancelar-blanco.svg"> | ||
3 | <p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p> | 10 | <p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p> |
4 | <div class="col-5 pr-0 text-right"> | 11 | <div class="col-5 pt-4 pr-0 text-right"> |
5 | <p *ngFor="let s of sinonimos; let i = index"> | 12 | <p *ngFor="let s of sinonimos; let i = index"> |
6 | <span | 13 | <span |
7 | class="btn-effect" | 14 | class="btn-effect" |
8 | (click)="scrollTo(i)"> | 15 | (click)="scrollTo(i)"> |
9 | Ir a opciรณn {{i+1}} | 16 | Ir a opciรณn {{i+1}} |
10 | <i class="far fa-hand-point-left"></i> | 17 | <i class="far fa-hand-point-left"></i> |
11 | </span> | 18 | </span> |
12 | </p> | 19 | </p> |
13 | </div> | 20 | </div> |
14 | </div> | 21 | </div> |
15 | 22 | ||
16 | <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2"> | 23 | <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2"> |
17 | <div *ngFor="let s of sinonimos; let i = index"> | 24 | <div *ngFor="let s of sinonimos; let i = index"> |
18 | <div [id]="i"></div> | 25 | <div [id]="i"></div> |
19 | <hr [hidden]="i === 0" class="bg-white"> | 26 | <hr [hidden]="i === 0" class="bg-white"> |
20 | <div *ngFor="let articulo of s.productos"> | 27 | <div *ngFor="let articulo of s.productos"> |
21 | <div class="custom-control custom-checkbox"> | 28 | <div class="custom-control custom-checkbox"> |
22 | <input | 29 | <input |
23 | type="checkbox" | 30 | type="checkbox" |
24 | class="custom-control-input" | 31 | class="custom-control-input" |
25 | [(ngModel)]="articulo.seleccionado" | 32 | [(ngModel)]="articulo.seleccionado" |
26 | (click)="selectSinonimo(i, articulo)" | 33 | (click)="selectSinonimo(i, articulo)" |
27 | [id]="articulo.id"> | 34 | [id]="articulo.id"> |
28 | <label | 35 | <label |
29 | class="custom-control-label" | 36 | class="custom-control-label" |
30 | [for]="articulo.id"> | 37 | [for]="articulo.id"> |
31 | {{articulo.DET_LAR.toUpperCase()}} | 38 | {{articulo.DET_LAR.toUpperCase()}} |
32 | </label> | 39 | </label> |
33 | </div> | 40 | </div> |
34 | </div> | 41 | </div> |
35 | </div> | 42 | </div> |
36 | </div> | 43 | </div> |
37 | 44 | ||
38 | <div class="modal-footer"> | 45 | <div class="modal-footer"> |
39 | <div | 46 | <div |
40 | [ngClass]="validate()" | 47 | [ngClass]="validate()" |
41 | class="d-inline-block py-1 bg-white badge-pill text-primary" | 48 | class="d-inline-block py-1 bg-white badge-pill text-primary" |
42 | (click)="continue()"> | 49 | (click)="continue()"> |
43 | CONTINUAR | 50 | CONTINUAR |
44 | <img | 51 | <img |
45 | draggable="false" | 52 | draggable="false" |
46 | ondragstart="return false;" | 53 | ondragstart="return false;" |
47 | (contextmenu)="false" | 54 | (contextmenu)="false" |
48 | class="icon-30" | 55 | class="icon-30" |
49 | src="assets/img/ir-color.svg"> | 56 | src="assets/img/ir-color.svg"> |
50 | </div> | 57 | </div> |
51 | </div> | 58 | </div> |
52 | </div> | 59 | </div> |
53 | 60 |
src/app/shared/sinonimo/sinonimo.component.ts
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; | 2 | import { ISinonimo } from 'src/app/interfaces/ISinonimo'; |
3 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 3 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
4 | import { BsModalRef } from 'ngx-bootstrap/modal'; | 4 | import { BsModalRef } from 'ngx-bootstrap/modal'; |
5 | import { Subject, forkJoin } from 'rxjs'; | 5 | import { Subject, forkJoin } from 'rxjs'; |
6 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 6 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
7 | import { element } from 'protractor'; | 7 | import { element } from 'protractor'; |
8 | 8 | ||
9 | @Component({ | 9 | @Component({ |
10 | selector: 'app-sinonimo', | 10 | selector: 'app-sinonimo', |
11 | templateUrl: './sinonimo.component.html', | 11 | templateUrl: './sinonimo.component.html', |
12 | styleUrls: ['./sinonimo.component.scss'] | 12 | styleUrls: ['./sinonimo.component.scss'] |
13 | }) | 13 | }) |
14 | export class SinonimoComponent implements OnInit { | 14 | export class SinonimoComponent implements OnInit { |
15 | sinonimos: ISinonimo[] = []; | 15 | sinonimos: ISinonimo[] = []; |
16 | isValid: boolean; | 16 | isValid: boolean; |
17 | onClose: Subject<any>; | 17 | onClose: Subject<any>; |
18 | articulosSelected: IArticulo[] = []; | 18 | articulosSelected: IArticulo[] = []; |
19 | articulo: IArticulo; | 19 | articulo: IArticulo; |
20 | 20 | ||
21 | constructor( | 21 | constructor( |
22 | private modalRef: BsModalRef, | 22 | private modalRef: BsModalRef, |
23 | private articuloService: ArticuloService, | 23 | private articuloService: ArticuloService, |
24 | ) { | 24 | ) { |
25 | this.onClose = new Subject(); | 25 | this.onClose = new Subject(); |
26 | this.articulosSelected.length = this.sinonimos.length; | 26 | this.articulosSelected.length = this.sinonimos.length; |
27 | } | 27 | } |
28 | 28 | ||
29 | ngOnInit() { } | 29 | ngOnInit() { } |
30 | 30 | ||
31 | selectSinonimo(index: number, articulo: IArticulo) { | 31 | selectSinonimo(index: number, articulo: IArticulo) { |
32 | for (const a of this.sinonimos[index].productos) { | 32 | for (const a of this.sinonimos[index].productos) { |
33 | a.seleccionado = false; | 33 | a.seleccionado = false; |
34 | } | 34 | } |
35 | articulo.seleccionado = true; | 35 | articulo.seleccionado = true; |
36 | this.articulosSelected[index] = articulo; | 36 | this.articulosSelected[index] = articulo; |
37 | } | 37 | } |
38 | 38 | ||
39 | validate() { | 39 | validate() { |
40 | this.isValid = true; | 40 | this.isValid = true; |
41 | for (const s of this.sinonimos) { | 41 | for (const s of this.sinonimos) { |
42 | for (const a of s.productos) { | 42 | for (const a of s.productos) { |
43 | this.isValid = (!a.seleccionado) ? false : true; | 43 | this.isValid = (!a.seleccionado) ? false : true; |
44 | if (this.isValid) break; | 44 | if (this.isValid) break; |
45 | } | 45 | } |
46 | if (!this.isValid) break; | 46 | if (!this.isValid) break; |
47 | } | 47 | } |
48 | return !this.isValid ? 'disabled' : 'btn-effect'; | 48 | return !this.isValid ? 'disabled' : 'btn-effect'; |
49 | } | 49 | } |
50 | 50 | ||
51 | continue() { | 51 | continue() { |
52 | if (!this.isValid) return; | 52 | if (!this.isValid) return; |
53 | const ID_SINS = []; | 53 | const ID_SINS = []; |
54 | const observables = []; | 54 | const observables = []; |
55 | 55 | ||
56 | for (const articulo of this.articulosSelected) { | 56 | for (const articulo of this.articulosSelected) { |
57 | ID_SINS.push(articulo.ID_SIN); | 57 | ID_SINS.push(articulo.ID_SIN); |
58 | } | 58 | } |
59 | 59 | ||
60 | for (const articulo of this.articulosSelected) { | 60 | for (const articulo of this.articulosSelected) { |
61 | observables.push(this.articuloService.getById(articulo.id)); | 61 | observables.push(this.articuloService.getById(articulo.id)); |
62 | } | 62 | } |
63 | 63 | ||
64 | forkJoin(observables) | 64 | forkJoin(observables) |
65 | .subscribe((res: IArticulo[]) => { | 65 | .subscribe((res: IArticulo[]) => { |
66 | for (const articulo of res) { | 66 | for (const articulo of res) { |
67 | for (const ID_SIN of ID_SINS) { | 67 | for (const ID_SIN of ID_SINS) { |
68 | articulo.ID_SIN = ID_SIN; | 68 | articulo.ID_SIN = ID_SIN; |
69 | } | 69 | } |
70 | } | 70 | } |
71 | this.modalRef.hide(); | 71 | this.modalRef.hide(); |
72 | this.onClose.next({ | 72 | this.onClose.next({ |
73 | articulos: res, | 73 | articulos: res, |
74 | }); | 74 | }); |
75 | }, err => console.error(err)); | 75 | }, err => console.error(err)); |
76 | } | 76 | } |
77 | 77 | ||
78 | scrollTo(index: number) { | 78 | scrollTo(index: number) { |
79 | const el = document.getElementById(index.toString()); | 79 | const el = document.getElementById(index.toString()); |
80 | el.scrollIntoView({ behavior: 'smooth', block: 'center' }); | 80 | el.scrollIntoView({ behavior: 'smooth' }); |
81 | } | ||
82 | |||
83 | close() { | ||
84 | this.modalRef.hide(); | ||
81 | } | 85 | } |
82 | 86 | ||
83 | } | 87 | } |
84 | 88 |
src/etc/AppSettings.ejemplo.ts
1 | // export const APP_SETTINGS = { | 1 | // export const APP_SETTINGS = { |
2 | // apiDeboSuite: 'http://localhost:1515', | 2 | // apiDeboSuite: 'http://localhost:1515', |
3 | // apiImagenes: 'http://10.231.45.220:1515', | ||
3 | // puntoVenta: 9998, | 4 | // puntoVenta: 9998, |
4 | // numeroPlanilla: 1111, | 5 | // numeroPlanilla: 1111, |
5 | // codigoP: 99996, | 6 | // codigoP: 99996, |
6 | // terminal: 101, | 7 | // terminal: 101, |
7 | // deploy: 'dev' | 8 | // deploy: 'dev' |
8 | // }; | 9 | // }; |
9 | 10 |
src/scss/styles-bootstrap.scss
1 | @import "node_modules/bootstrap/scss/functions"; | 1 | @import "node_modules/bootstrap/scss/functions"; |
2 | @import "node_modules/bootstrap/scss/variables"; | 2 | @import "node_modules/bootstrap/scss/variables"; |
3 | @import "node_modules/bootstrap/scss/mixins"; | 3 | @import "node_modules/bootstrap/scss/mixins"; |
4 | 4 | ||
5 | $primary: #aa006b; | 5 | $primary: #aa006b; |
6 | $secondary: #00acd8; | 6 | $secondary: #00acd8; |
7 | $info: #f4b223; | 7 | $info: #f4b223; |
8 | $light: #e6e7e9; | 8 | $light: #e6e7e9; |
9 | $dark: #61666c; | 9 | $dark: #61666c; |
10 | $theme-colors: ( | 10 | $theme-colors: ( |
11 | primary: $primary, | 11 | primary: $primary, |
12 | secondary: $secondary, | 12 | secondary: $secondary, |
13 | info: $info, | 13 | info: $info, |
14 | light: $light, | 14 | light: $light, |
15 | dark: $dark | 15 | dark: $dark |
16 | ); | 16 | ); |
17 | $border-radius: 1.5rem; | 17 | $border-radius: 1.5rem; |
18 | $border-radius-lg: 2.5rem; | 18 | $border-radius-lg: 2.5rem; |
19 | $border-radius-sm: 0.5rem; | 19 | $border-radius-sm: 0.5rem; |
20 | 20 | ||
21 | .custom-modal { | 21 | .custom-modal { |
22 | max-width: 90% !important; | 22 | max-width: 90% !important; |
23 | & > .modal-content { | 23 | & > .modal-content { |
24 | background-color: $primary !important; | 24 | background-color: $primary !important; |
25 | color: white; | 25 | color: white; |
26 | border: none !important; | 26 | border: none !important; |
27 | border-radius: $border-radius !important; | 27 | border-radius: $border-radius !important; |
28 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; | 28 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | .carousel-control { | 32 | .carousel-control { |
33 | visibility: hidden !important; | 33 | visibility: hidden !important; |
34 | } | 34 | } |
35 | 35 | ||
36 | .carousel, | 36 | .carousel, |
37 | .carousel-inner, | 37 | .carousel-inner, |
38 | .carousel-item, | 38 | .carousel-item, |
39 | .item { | 39 | .item { |
40 | height: 100% !important; | 40 | height: 100% !important; |
41 | } | 41 | } |
42 | 42 | ||
43 | .custom-checkbox .custom-control-label::before { | 43 | .custom-checkbox .custom-control-label::before { |
44 | border-radius: 50% !important; | 44 | border-radius: 50% !important; |
45 | } | 45 | } |
46 | 46 | ||
47 | .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { | 47 | .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { |
48 | background-color: $primary !important; | 48 | background-color: $primary !important; |
49 | } | 49 | } |
50 | 50 | ||
51 | .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before { | 51 | .custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before { |
52 | box-shadow: none !important; | 52 | box-shadow: none !important; |
53 | } | 53 | } |
54 | .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before { | 54 | .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before { |
55 | box-shadow: none !important; | 55 | box-shadow: none !important; |
56 | } | 56 | } |
57 | 57 | ||
58 | .custom-control-input:checked ~ .custom-control-label::before { | 58 | .custom-control-input:checked ~ .custom-control-label::before { |
59 | background-color: white !important; | 59 | background-color: white !important; |
60 | border-color: white !important; | 60 | border-color: white !important; |
61 | border-width: 2px; | 61 | border-width: 2px; |
62 | } | 62 | } |
63 | 63 | ||
64 | .custom-checkbox .custom-control-input:active ~ .custom-control-label::before { | 64 | .custom-checkbox .custom-control-input:active ~ .custom-control-label::before { |
65 | background-color: $primary !important; | 65 | background-color: $primary !important; |
66 | } | 66 | } |
67 | 67 | ||
68 | .modal { | 68 | .modal { |
69 | background-color: #0000004d; | 69 | background-color: #0000004d; |
70 | } | 70 | } |
71 | 71 | ||
72 | .modal-promo > div { | ||
73 | border: none !important; | ||
74 | border-radius: $border-radius; | ||
75 | margin-left: 10px !important; | ||
76 | } | ||
77 | |||
78 | .modal-content.media-pantalla { | 72 | .modal-content.media-pantalla { |
79 | margin-top: auto !important; | 73 | margin-top: auto !important; |
80 | margin-bottom: 50px !important; | 74 | margin-bottom: 50px !important; |
81 | } | 75 | } |
82 | 76 | ||
83 | .card { | 77 | .card { |
84 | border: none !important; | 78 | border: none !important; |
85 | } | 79 | } |
86 | 80 | ||
87 | @import "node_modules/bootstrap/scss/bootstrap"; | 81 | @import "node_modules/bootstrap/scss/bootstrap"; |
88 | 82 |
src/styles.scss
1 | @import "scss/styles-bootstrap.scss"; | 1 | @import "scss/styles-bootstrap.scss"; |
2 | @import "scss/typography.scss"; | 2 | @import "scss/typography.scss"; |
3 | @import "scss/height-width.scss"; | 3 | @import "scss/height-width.scss"; |
4 | @import "scss/animations.scss"; | 4 | @import "scss/animations.scss"; |
5 | @import "scss/icons.scss"; | 5 | @import "scss/icons.scss"; |
6 | @import "scss/scroll.scss"; | 6 | @import "scss/scroll.scss"; |
7 | @import "node_modules/bootstrap/scss/_variables.scss"; | 7 | @import "node_modules/bootstrap/scss/_variables.scss"; |
8 | 8 | ||
9 | @font-face { | 9 | @font-face { |
10 | font-family: "Gotham"; | 10 | font-family: "Gotham"; |
11 | font-style: normal; | 11 | font-style: normal; |
12 | font-weight: normal; | 12 | font-weight: normal; |
13 | src: url("assets/fonts/gotham-medium.woff") format("woff"); | 13 | src: url("assets/fonts/gotham-medium.woff") format("woff"); |
14 | } | 14 | } |
15 | 15 | ||
16 | html, | 16 | html, |
17 | body { | 17 | body { |
18 | max-height: 100vh; | 18 | max-height: 100vh; |
19 | height: 100%; | 19 | height: 100%; |
20 | font-family: "Gotham"; | 20 | font-family: "Gotham"; |
21 | overflow: hidden; | 21 | overflow: hidden; |
22 | user-select: none; | 22 | user-select: none; |
23 | } | 23 | } |
24 | 24 | ||
25 | body.media-pantalla { | 25 | body.media-pantalla { |
26 | height: calc(50%) !important; | 26 | height: calc(50%) !important; |
27 | position: absolute; | 27 | position: absolute; |
28 | bottom: 0; | 28 | bottom: 0; |
29 | width: 100%; | 29 | width: 100%; |
30 | background-color: #3d3d3d; | 30 | background-color: #3d3d3d; |
31 | } | 31 | } |
32 | 32 | ||
33 | .btn-effect { | 33 | .btn-effect { |
34 | transition: all 0.3s !important; | 34 | transition: all 0.3s !important; |
35 | &:hover { | 35 | &:hover { |
36 | cursor: pointer !important; | 36 | cursor: pointer !important; |
37 | opacity: 0.7 !important; | 37 | opacity: 0.7 !important; |
38 | } | 38 | } |
39 | &:active { | 39 | &:active { |
40 | transform: scale(1.02) !important; | 40 | transform: scale(1.02) !important; |
41 | } | 41 | } |
42 | } | 42 | } |
43 | 43 | ||
44 | .cursor-pointer { | 44 | .cursor-pointer { |
45 | cursor: pointer; | 45 | cursor: pointer; |
46 | } | 46 | } |
47 | 47 | ||
48 | p { | 48 | p { |
49 | margin: 0 !important; | 49 | margin: 0 !important; |
50 | } | 50 | } |
51 | 51 | ||
52 | .img-in-top { | 52 | .img-in-top { |
53 | position: absolute; | 53 | position: absolute; |
54 | top: -35px; | 54 | top: -35px; |
55 | left: 50%; | 55 | left: 50%; |
56 | height: 70px; | 56 | height: 70px; |
57 | -webkit-transform: translateX(-50%); | 57 | -webkit-transform: translateX(-50%); |
58 | transform: translateX(-50%); | 58 | transform: translateX(-50%); |
59 | } | 59 | } |
60 | 60 | ||
61 | .right-0 { | 61 | .right-0 { |
62 | right: 0; | 62 | right: 0; |
63 | } | 63 | } |
64 | 64 | ||
65 | .top-0 { | ||
66 | top: 0; | ||
67 | } | ||
68 | |||
65 | .left-0 { | 69 | .left-0 { |
66 | left: 0; | 70 | left: 0; |
67 | } | 71 | } |
68 | 72 | ||
69 | .rotate-45 { | 73 | .rotate-45 { |
70 | transform: rotate(45deg); | 74 | transform: rotate(45deg); |
71 | } | 75 | } |
72 | 76 | ||
73 | .rotate-90 { | 77 | .rotate-90 { |
74 | transform: rotate(90deg); | 78 | transform: rotate(90deg); |
75 | } | 79 | } |
76 | 80 | ||
77 | .rotate-90-neg { | 81 | .rotate-90-neg { |
78 | transform: rotate(-90deg); | 82 | transform: rotate(-90deg); |
79 | } | 83 | } |
80 | 84 | ||
81 | .rotate-180-neg { | 85 | .rotate-180-neg { |
82 | transform: rotate(-180deg); | 86 | transform: rotate(-180deg); |
83 | } | 87 | } |
84 | 88 | ||
85 | .disabled { | 89 | .disabled { |
86 | opacity: 0.5; | 90 | opacity: 0.5; |
87 | } | 91 | } |
88 | 92 | ||
89 | .modal-content.media-pantalla { | 93 | .modal-content.media-pantalla { |
90 | margin-top: auto !important; | 94 | margin-top: auto !important; |
91 | margin-bottom: 50px !important; | 95 | margin-bottom: 50px !important; |
92 | } | 96 | } |
93 | 97 | ||
94 | .modal-content { | 98 | .modal-content { |
95 | background: transparent !important; | 99 | background: transparent !important; |
96 | } | 100 | } |
101 | |||
102 | .z-index { | ||
103 | z-index: 1000; | ||
104 | } | ||
97 | 105 |