Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 6877b1afabb0331da524a83d12700a7030e991eb

Authored by Marcelo Puebla
2 parents 5ac86e32f0 5ecbcd777d
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !46
Showing 23 changed files   Show diff stats
src/app/interfaces/IArticulo.ts
Diff comments   View file @ 6877b1a
1 export interface IArticulo { 1 export interface IArticulo {
2 cantidad?: number; 2 cantidad?: number;
3 cantidadAdicionada?: number; 3 cantidadAdicionada?: number;
4 cantidadVendida?: number; 4 cantidadVendida?: number;
5 categoria_selfservice?: number; 5 categoria_selfservice?: number;
6 CodArt: number; 6 CodArt: number;
7 codigoBarra?: ICodigoBarra[]; 7 codigoBarra?: ICodigoBarra[];
8 CodSec: number; 8 CodSec: number;
9 DetArt: string; 9 DetArt: string;
10 DET_LAR: string; 10 DET_LAR: string;
11 ELBPRO: string; 11 ELBPRO: string;
12 esAdicionable?: boolean; 12 esAdicionable?: boolean;
13 esSustraible?: boolean; 13 esSustraible?: boolean;
14 FPP?: boolean; 14 FPP?: boolean;
15 id: number; 15 id: number;
16 idSinonimo?: number; 16 idSinonimo?: number;
17 ID_SIN?: number;
17 imagenes?: any[]; 18 imagenes?: any[];
18 ImpInt: number; 19 ImpInt: number;
19 ImpInt2: number; 20 ImpInt2: number;
20 ImpInt3: number; 21 ImpInt3: number;
21 importeValorExtra?: number; 22 importeValorExtra?: number;
22 PreVen: number; 23 PreVen: number;
23 PRO: boolean; 24 PRO: boolean;
24 productos?: IArticulo[]; 25 productos?: IArticulo[];
25 seleccionado?: boolean; 26 seleccionado?: boolean;
26 tieneSinonimo?: boolean; 27 tieneSinonimo?: boolean;
27 tipo_articulo?: number; 28 tipo_articulo?: number;
28 comentario?: string; 29 CODA?: number;
30 CODP?: number;
31 SECA?: number;
32 SECP?: number;
29 } 33 }
30 34
31 export interface ICodigoBarra { 35 export interface ICodigoBarra {
32 CodBar: string; 36 CodBar: string;
33 CodArt: number; 37 CodArt: number;
34 CodSec: string; 38 CodSec: string;
35 } 39 }
36 40
src/app/interfaces/ISinonimo.ts
Diff comments   View file @ 6877b1a
File was created 1 import { IArticulo } from './IArticulo';
2
3 export interface ISinonimo {
4 ID_SIN: number;
5 descripcion: string;
6 productos: IArticulo[];
7 productoPadre?: number;
8 cantidad?: number;
9 }
10
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 6877b1a
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 { trigger, state, style, transition, animate } from '@angular/animations'; 5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo'; 6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router'; 7 import { Router } from '@angular/router';
8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; 8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
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 10
11 @Component({ 11 @Component({
12 selector: 'app-carrito', 12 selector: 'app-carrito',
13 templateUrl: './carrito.component.html', 13 templateUrl: './carrito.component.html',
14 styleUrls: ['./carrito.component.scss'], 14 styleUrls: ['./carrito.component.scss'],
15 animations: [ 15 animations: [
16 trigger('EnterLeave', [ 16 trigger('EnterLeave', [
17 state('flyIn', style({ transform: 'translateX(0)' })), 17 state('flyIn', style({ transform: 'translateX(0)' })),
18 transition(':enter', [ 18 transition(':enter', [
19 style({ transform: 'translateX(-100%)' }), 19 style({ transform: 'translateX(-100%)' }),
20 animate('1s ease-in') 20 animate('1s ease-in')
21 ]), 21 ]),
22 transition(':leave', [ 22 transition(':leave', [
23 animate('1s ease-out', style({ transform: 'translateX(-100%)' })) 23 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
24 ]) 24 ])
25 ]) 25 ])
26 ] 26 ]
27 }) 27 })
28 export class CarritoComponent implements OnInit, OnDestroy { 28 export class CarritoComponent implements OnInit, OnDestroy {
29 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 29 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
30 maxCantidad = 50; 30 maxCantidad = 50;
31 modalRef: BsModalRef; 31 modalRef: BsModalRef;
32 32
33 constructor( 33 constructor(
34 public articuloService: ArticuloService, 34 public articuloService: ArticuloService,
35 private location: Location, 35 private location: Location,
36 private router: Router, 36 private router: Router,
37 private inactiveScreen: InactiveScreenService, 37 private inactiveScreen: InactiveScreenService,
38 ) { } 38 ) { }
39 39
40 ngOnInit() { 40 ngOnInit() {
41 if (!this.articuloService.carrito.length) { 41 if (!this.articuloService.carrito.length) {
42 this.router.navigate(['']); 42 this.router.navigate(['']);
43 return; 43 return;
44 } 44 }
45 this.mediaPantallaP() 45 this.mediaPantallaP();
46 } 46 }
47 47
48 ngOnDestroy() { 48 ngOnDestroy() {
49 if (this.modalRef) this.modalRef.hide(); 49 if (this.modalRef) this.modalRef.hide();
50 } 50 }
51 51
52 deleteArticulo(index: number) { 52 deleteArticulo(index: number) {
53 this.articuloService.carrito.splice(index, 1); 53 this.articuloService.deleteArticulo(index);
54 this.articuloService.calcularTotal();
55 } 54 }
56 55
57 substractCant(articulo: IArticulo) { 56 substractCant(articulo: IArticulo) {
58 if (articulo.cantidad === 1) return; 57 if (articulo.cantidad === 1) return;
59 articulo.cantidad--; 58 articulo.cantidad--;
60 this.articuloService.calcularTotal(); 59 this.articuloService.calcularTotal();
61 } 60 }
62 61
63 addCant(articulo: IArticulo) { 62 addCant(articulo: IArticulo) {
64 if (articulo.cantidad >= this.maxCantidad) return; 63 if (articulo.cantidad >= this.maxCantidad) return;
65 articulo.cantidad++; 64 articulo.cantidad++;
66 this.articuloService.calcularTotal(); 65 this.articuloService.calcularTotal();
67 } 66 }
68 67
69 goBack() { 68 goBack() {
70 this.location.back(); 69 this.location.back();
71 } 70 }
72 71
73 @HostListener('document:click', ['$event']) 72 @HostListener('document:click', ['$event'])
74 eventListener(event: Event) { 73 eventListener(event: Event) {
75 clearTimeout(this.inactiveScreen.timerReposo); 74 clearTimeout(this.inactiveScreen.timerReposo);
76 this.inactiveScreen.startTimeOutInactividad(); 75 this.inactiveScreen.startTimeOutInactividad();
77 } 76 }
78 77
78 @HostListener('scroll', ['$event'])
79 scrollEvent(event: Event) {
80 clearTimeout(this.inactiveScreen.timerReposo);
81 this.inactiveScreen.startTimeOutInactividad();
82 }
83
79 mediaPantallaP() { 84 mediaPantallaP() {
80 if ($('body').hasClass('media-pantalla')) { 85 if ($('body').hasClass('media-pantalla')) {
81 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 86 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
82 } 87 }
83 } 88 }
84 } 89 }
src/app/modules/forma-pago/forma-pago.component.ts
Diff comments   View file @ 6877b1a
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from '@angular/core';
2 import { ArticuloService } from "src/app/services/articulo/articulo.service"; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { Router } from "@angular/router"; 3 import { Router } from '@angular/router';
4 4
5 @Component({ 5 @Component({
6 selector: "app-forma-pago", 6 selector: 'app-forma-pago',
7 templateUrl: "./forma-pago.component.html", 7 templateUrl: './forma-pago.component.html',
8 styleUrls: ["./forma-pago.component.scss"] 8 styleUrls: ['./forma-pago.component.scss']
9 }) 9 })
10 export class FormaPagoComponent implements OnInit { 10 export class FormaPagoComponent implements OnInit {
11 constructor( 11 constructor(
12 private articuloService: ArticuloService, 12 private articuloService: ArticuloService,
13 private router: Router 13 private router: Router
14 ) {} 14 ) {}
15 15
16 ngOnInit() { 16 ngOnInit() {
17 if (!this.articuloService.carrito.length) { 17 if (!this.articuloService.carrito.length) {
18 this.router.navigate([""]); 18 this.router.navigate(['']);
19 return; 19 return;
20 } 20 }
21 this.mediaPantalla(); 21 this.mediaPantalla();
22 } 22 }
23 23
24 medioPago(medioPago: number) { 24 medioPago(medioPago: number) {
25 this.articuloService.medioPago = medioPago; 25 this.articuloService.medioPago = medioPago;
26 switch (medioPago) { 26 switch (medioPago) {
27 case 4: 27 case 4:
28 this.router.navigate(["pago-tarjeta"]); 28 this.router.navigate(['pago-tarjeta']);
29 break; 29 break;
30 case 9: 30 case 9:
31 this.router.navigate(["pago-electronico"]); 31 this.router.navigate(['pago-electronico']);
32 break; 32 break;
33 } 33 }
34 } 34 }
35 35
36 mediaPantalla() { 36 mediaPantalla() {
37 if ($('body').hasClass('media-pantalla')) { 37 if ($('body').hasClass('media-pantalla')) {
38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 38 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
39 } 39 }
40 } 40 }
41 } 41 }
42 42
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 6877b1a
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-formas-pago', 4 selector: 'app-formas-pago',
5 templateUrl: './info-formas-pago.component.html', 5 templateUrl: './info-formas-pago.component.html',
6 styleUrls: ['./info-formas-pago.component.scss'] 6 styleUrls: ['./info-formas-pago.component.scss']
7 }) 7 })
8 export class InfoFormasPagoComponent implements OnInit { 8 export class InfoFormasPagoComponent implements OnInit {
9 mediaPantalla = false; 9 mediaPantalla = false;
10 10
11 constructor() {} 11 constructor() { }
12 12
13 ngOnInit() { 13 ngOnInit() {
14 this.reducirPantalla(); 14 this.reducirPantalla();
15 } 15 }
16 16
17 reducirPantalla() { 17 reducirPantalla() {
18 if ($('body').hasClass('media-pantalla')) { 18 if ($('body').hasClass('media-pantalla')) {
19 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 19 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
20 } 20 }
21 } 21 }
22 } 22 }
23 23
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 6877b1a
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 15 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary 36 class="col-12 px-0 box-categorias border border-primary
37 border-left-0 rounded-right scroll-y cat-box" 37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)"> 38 (scroll)="scrollEvent($event)">
39 <div 39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive, 41 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)"> 43 (click)="selectCategoria(-1, 0)">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg"> 49 src="assets/img/logo-spot.svg">
50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 </div> 51 </div>
52 <div 52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected, 54 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)" 56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;"> 57 *ngFor="let categoria of categorias; let i = index;">
58 <img 58 <img
59 draggable="false" 59 draggable="false"
60 ondragstart="return false;" 60 ondragstart="return false;"
61 (contextmenu)="false" 61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" 62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}" 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}" 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'"> 65 onerror="this.src='assets/img/image-not-found.jpg'">
66 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 66 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
67 </div> 67 </div>
68 </div> 68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn"> 69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90" 74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg" 75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)" 76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()" 77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()"> 78 (mouseleave)="mouseup()">
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 <!-- LISTA DE ARTICULOS --> 82 <!-- LISTA DE ARTICULOS -->
83 <div 83 <div
84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
85 (scroll)="scrollEvent($event)"> 85 (scroll)="scrollEvent($event)">
86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
87 <!-- ARTICULO --> 87 <!-- ARTICULO -->
88 <div 88 <div
89 class="col px-2 my-1 my-md-3 h-auto" 89 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 91 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 92 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="elegirArticulo(articulo)"> 93 (click)="selectArticulo(articulo)">
94 <img 94 <img
95 draggable="false" 95 draggable="false"
96 ondragstart="return false;" 96 ondragstart="return false;"
97 (contextmenu)="false" 97 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 99 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 100 class="card-img-top h-30 h-md-55 rounded-sm">
101 <div class="row mx-0 py-1 h-auto justify-content-center"> 101 <div class="row mx-0 py-1 h-auto justify-content-center">
102 <p 102 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 class="col-12 px-1 h6 h-auto text-center min-h-60"> 104 class="col-12 px-1 h6 h-auto text-center min-h-60">
105 {{articulo.DetArt}} 105 {{articulo.DetArt}}
106 </p> 106 </p>
107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50"> 107 <p class="col-12 px-1 h-auto text-center line-height-sm min-h-50">
108 <small>{{articulo.DET_LAR}}</small> 108 <small>{{articulo.DET_LAR}}</small>
109 </p> 109 </p>
110 <div class="col-12 px-1 align-self-end h-auto"> 110 <div class="col-12 px-1 align-self-end h-auto">
111 <div 111 <div
112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 112 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
113 class="row mx-0 justify-content-between badge-pill"> 113 class="row mx-0 justify-content-between badge-pill">
114 <div class="col px-0 align-self-center text-white text-right"> 114 <div class="col px-0 align-self-center text-white text-right">
115 {{articulo.PreVen | currency}} 115 {{articulo.PreVen | currency}}
116 </div> 116 </div>
117 <div class="col-5 px-0"> 117 <div class="col-5 px-0">
118 <img 118 <img
119 draggable="false" 119 draggable="false"
120 ondragstart="return false;" 120 ondragstart="return false;"
121 (contextmenu)="false" 121 (contextmenu)="false"
122 class="d-block ml-auto py-1 icon-30" 122 class="d-block ml-auto py-1 icon-30"
123 src="assets/img/ir.svg"> 123 src="assets/img/ir.svg">
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131 <!-- BOTON VER MAS --> 131 <!-- BOTON VER MAS -->
132 <div class="row mx-0"> 132 <div class="row mx-0">
133 <div 133 <div
134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 134 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
135 class="col-12 px-0 mb-2"> 135 class="col-12 px-0 mb-2">
136 <button 136 <button
137 (click)="increaseShow()" 137 (click)="increaseShow()"
138 class="btn btn-block btn-outline-primary"> 138 class="btn btn-block btn-outline-primary">
139 Ver Más 139 Ver Más
140 </button> 140 </button>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 </div> 145 </div>
146 </div> 146 </div>
147 <!-- FOOTER CARRITO DE COMPRAS --> 147 <!-- FOOTER CARRITO DE COMPRAS -->
148 <div class="row w-90 mx-auto h-auto justify-content-center"> 148 <div class="row w-90 mx-auto h-auto justify-content-center">
149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 149 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
150 [ngClass]="boxCarrito.classList.contains('media-pantalla') 150 [ngClass]="boxCarrito.classList.contains('media-pantalla')
151 ? 'col-8' : 'col-12'" id="boxCarrito"> 151 ? 'col-8' : 'col-12'" id="boxCarrito">
152 <!-- CABECERA --> 152 <!-- CABECERA -->
153 <div class="row mx-0 h-15 border-bottom border-primary"> 153 <div class="row mx-0 h-15 border-bottom border-primary">
154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 154 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
155 </div> 155 </div>
156 <!-- CUERPO --> 156 <!-- CUERPO -->
157 <div class="row h-85 mx-0 justify-content-around"> 157 <div class="row h-85 mx-0 justify-content-around">
158 <!-- BOTON SCROLL IZQUIERDA --> 158 <!-- BOTON SCROLL IZQUIERDA -->
159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 159 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
160 <img 160 <img
161 draggable="false" 161 draggable="false"
162 ondragstart="return false;" 162 ondragstart="return false;"
163 (contextmenu)="false" 163 (contextmenu)="false"
164 class="icon-30 rotate-180-neg" 164 class="icon-30 rotate-180-neg"
165 src="assets/img/ir-fondo-color.svg" 165 src="assets/img/ir-fondo-color.svg"
166 (mousedown)="scrollX(templateCarrito, -100)" 166 (mousedown)="scrollX(templateCarrito, -100)"
167 (mouseup)="mouseup()" 167 (mouseup)="mouseup()"
168 (mouseleave)="mouseup()"> 168 (mouseleave)="mouseup()">
169 </div> 169 </div>
170 <!-- CARRITO --> 170 <!-- CARRITO -->
171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 171 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
172 <div 172 <div
173 #templateCarrito 173 #templateCarrito
174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 174 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
175 (scroll)="scrollEvent($event)"> 175 (scroll)="scrollEvent($event)">
176 <!-- MENSAJE DE ADVERTENCIA --> 176 <!-- MENSAJE DE ADVERTENCIA -->
177 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 177 <div *ngIf="!articuloService.carrito.length" class="col h-100">
178 <p class="text-center py-5">No hay articulos en el carrito</p> 178 <p class="text-center py-5">No hay articulos en el carrito</p>
179 </div> 179 </div>
180 <!-- ARTICULOS --> 180 <!-- ARTICULOS -->
181 <div 181 <div
182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 182 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
183 *ngFor="let articulo of articuloService.carrito; let i = index;"> 183 *ngFor="let articulo of articuloService.carrito; let i = index;">
184 <div class="swing-in-top-fwd"> 184 <div class="swing-in-top-fwd">
185 <img 185 <img
186 class="btn-effect icon-20 position-absolute right-0" 186 class="btn-effect icon-20 position-absolute right-0"
187 src="assets/img/icono-cancelar-color.svg" 187 src="assets/img/icono-cancelar-color.svg"
188 (click)="deleteArticulo(i)"> 188 (click)="deleteArticulo(i)">
189 <img 189 <img
190 draggable="false" 190 draggable="false"
191 ondragstart="return false;" 191 ondragstart="return false;"
192 (contextmenu)="false" 192 (contextmenu)="false"
193 class="d-block img-fluid p-2 mx-auto rounded" 193 class="d-block img-fluid p-2 mx-auto rounded"
194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 194 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
195 onerror="this.src='assets/img/image-not-found.jpg'"> 195 onerror="this.src='assets/img/image-not-found.jpg'">
196 <p class="d-block mt-auto text-center text-primary text-truncate"> 196 <p class="d-block mt-auto text-center text-primary text-truncate">
197 <small>{{articulo.DetArt}}</small> 197 <small>{{articulo.DetArt}}</small>
198 </p> 198 </p>
199 </div> 199 </div>
200 </div> 200 </div>
201 </div> 201 </div>
202 </div> 202 </div>
203 <!-- BOTON SCROLL DERECHA --> 203 <!-- BOTON SCROLL DERECHA -->
204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 204 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
205 <img 205 <img
206 draggable="false" 206 draggable="false"
207 ondragstart="return false;" 207 ondragstart="return false;"
208 (contextmenu)="false" 208 (contextmenu)="false"
209 class="icon-30" 209 class="icon-30"
210 src="assets/img/ir-fondo-color.svg" 210 src="assets/img/ir-fondo-color.svg"
211 (mousedown)="scrollX(templateCarrito, 100)" 211 (mousedown)="scrollX(templateCarrito, 100)"
212 (mouseup)="mouseup()" 212 (mouseup)="mouseup()"
213 (mouseleave)="mouseup()"> 213 (mouseleave)="mouseup()">
214 </div> 214 </div>
215 </div> 215 </div>
216 </div> 216 </div>
217 <!-- TOTAL--> 217 <!-- TOTAL-->
218 <div 218 <div
219 class="col-auto mt-2 ml-auto h-20"> 219 class="col-auto mt-2 ml-auto h-20">
220 <div class="row mx-0"> 220 <div class="row mx-0">
221 <div class="col-auto align-self-center text-primary">TOTAL</div> 221 <div class="col-auto align-self-center text-primary">TOTAL</div>
222 <div class="col-auto bg-primary badge-pill"> 222 <div class="col-auto bg-primary badge-pill">
223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 223 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
224 </div> 224 </div>
225 </div> 225 </div>
226 </div> 226 </div>
227 227
228 <!-- VER CARRITO --> 228 <!-- VER CARRITO -->
229 <div 229 <div
230 class="col-auto px-0 mt-2 h-20" 230 class="col-auto px-0 mt-2 h-20"
231 *ngIf="articuloService.carrito.length" 231 *ngIf="articuloService.carrito.length"
232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 232 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
233 <div 233 <div
234 class="btn-effect col-auto px-0 align-self-center bg-white" 234 class="btn-effect col-auto px-0 align-self-center bg-white"
235 [routerLink]="['/carrito']"> 235 [routerLink]="['/carrito']">
236 <div class="row mx-0 bg-light"> 236 <div class="row mx-0 bg-light">
237 <div class="col-auto p-0 bg-primary"> 237 <div class="col-auto p-0 bg-primary">
238 <img 238 <img
239 draggable="false" 239 draggable="false"
240 ondragstart="return false;" 240 ondragstart="return false;"
241 (contextmenu)="false" 241 (contextmenu)="false"
242 class="p-2 icon-40" 242 class="p-2 icon-40"
243 src="assets/img/carrito.svg"> 243 src="assets/img/carrito.svg">
244 </div> 244 </div>
245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 245 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
246 </div> 246 </div>
247 </div> 247 </div>
248 </div> 248 </div>
249 249
250 </div> 250 </div>
251 </div> 251 </div>
252 252
253 </div> 253 </div>
254 254
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 6877b1a
1 import { Component, OnInit, TemplateRef, 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 { CategoriaService } from 'src/app/services/categoria/categoria.service'; 8 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 import { PromocionService } from 'src/app/services/promocion/promocion.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';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 13
12 @Component({ 14 @Component({
13 selector: 'app-seleccion-articulos', 15 selector: 'app-seleccion-articulos',
14 templateUrl: './seleccion-articulos.component.html', 16 templateUrl: './seleccion-articulos.component.html',
15 styleUrls: ['./seleccion-articulos.component.scss'] 17 styleUrls: ['./seleccion-articulos.component.scss']
16 }) 18 })
17 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 19 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
18 showSpinner = true; 20 showSpinner = true;
19 timeoutHandler: any; 21 timeoutHandler: any;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 articulos: IArticulo[] = []; 23 articulos: IArticulo[] = [];
22 auxArticulos: IArticulo[] = []; 24 auxArticulos: IArticulo[] = [];
23 showQuantity = 100; 25 showQuantity = 100;
24 queMostrar = 'todos'; 26 queMostrar = 'todos';
25 categoriaActive = null; 27 categoriaActive = null;
26 categorias: ICategoria[] = []; 28 categorias: ICategoria[] = [];
27 searchTerm = ''; 29 searchTerm = '';
28 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
29 allActive = true; 31 allActive = true;
30 modalRef: BsModalRef; 32 modalRef: BsModalRef;
31 total = 0; 33 total = 0;
32 34
33 constructor( 35 constructor(
34 public articuloService: ArticuloService, 36 public articuloService: ArticuloService,
35 private categoriaService: CategoriaService, 37 private categoriaService: CategoriaService,
38 private sinonimoService: SinonimoService,
36 private modalService: BsModalService, 39 private modalService: BsModalService,
37 private inactiveScreen: InactiveScreenService, 40 private inactiveScreen: InactiveScreenService,
38 ) { } 41 ) { }
39 42
40 ngOnInit() { 43 ngOnInit() {
41 this.getCategorias(); 44 this.getCategorias();
42 this.mediaPantalla(); 45 this.mediaPantalla();
43 } 46 }
44 47
45 ngOnDestroy() { 48 ngOnDestroy() {
46 if (this.modalRef) this.modalRef.hide(); 49 if (this.modalRef) this.modalRef.hide();
47 } 50 }
48 51
49 getCategorias() { 52 getCategorias() {
50 this.categoriaService.getAll() 53 this.categoriaService.getAll()
51 .subscribe((categorias: ICategoria[]) => { 54 .subscribe((categorias: ICategoria[]) => {
52 switch (this.queMostrar) { 55 switch (this.queMostrar) {
53 case 'todos': 56 case 'todos':
54 this.categorias = categorias; 57 this.categorias = categorias;
55 this.categoriaActive = 0; 58 this.categoriaActive = 0;
56 break; 59 break;
57 case 'promociones': 60 case 'promociones':
58 this.categorias = categorias; 61 this.categorias = categorias;
59 this.categoriaActive = 19; 62 this.categoriaActive = 19;
60 break; 63 break;
61 case 'ordenar': 64 case 'ordenar':
62 this.categorias = categorias.filter((categoria: ICategoria) => { 65 this.categorias = categorias.filter((categoria: ICategoria) => {
63 return categoria.ES_PEDIDO; 66 return categoria.ES_PEDIDO;
64 }); 67 });
65 this.categoriaActive = 4; 68 this.categoriaActive = 4;
66 break; 69 break;
67 default: 70 default:
68 this.categorias = categorias; 71 this.categorias = categorias;
69 this.categoriaActive = 0; 72 this.categoriaActive = 0;
70 break; 73 break;
71 } 74 }
72 !localStorage.getItem('articulos') ? 75 !localStorage.getItem('articulos') ?
73 this.getProductos() : 76 this.getProductos() :
74 this.setProductos(); 77 this.setProductos();
75 }); 78 });
76 } 79 }
77 80
78 getProductos() { 81 getProductos() {
79 this.articuloService.getAll() 82 this.articuloService.getAll()
80 .subscribe((result: IArticulo[]) => { 83 .subscribe((result: IArticulo[]) => {
81 this.articuloService.setArticulosSinImagen(result); 84 this.articuloService.setArticulosSinImagen(result);
82 if (this.queMostrar === 'ordenar') { 85 if (this.queMostrar === 'ordenar') {
83 this.categorias.forEach((categoria: ICategoria) => { 86 this.categorias.forEach((categoria: ICategoria) => {
84 const tempArticulos = result.filter((articulo: IArticulo) => { 87 const tempArticulos = result.filter((articulo: IArticulo) => {
85 return articulo.categoria_selfservice === categoria.id; 88 return articulo.categoria_selfservice === categoria.id;
86 }); 89 });
87 result = tempArticulos; 90 result = tempArticulos;
88 }); 91 });
89 } 92 }
90 localStorage.setItem('articulos', JSON.stringify(result)); 93 localStorage.setItem('articulos', JSON.stringify(result));
91 this.setProductos(); 94 this.setProductos();
92 }, (error) => { 95 }, (error) => {
93 this.showSpinner = false; 96 this.showSpinner = false;
94 console.error(error); 97 console.error(error);
95 }); 98 });
96 } 99 }
97 100
98 setProductos() { 101 setProductos() {
99 this.articulos = JSON.parse(localStorage.getItem('articulos')); 102 this.articulos = JSON.parse(localStorage.getItem('articulos'));
100 this.filterItems(); 103 this.filterItems();
101 } 104 }
102 105
103 filterItems() { 106 filterItems() {
104 if (this.categoriaActive === 0) { 107 if (this.categoriaActive === 0) {
105 this.auxArticulos = this.articulos; 108 this.auxArticulos = this.articulos;
106 return; 109 return;
107 } 110 }
108 this.auxArticulos = this.articulos.filter(x => { 111 this.auxArticulos = this.articulos.filter(x => {
109 return x.categoria_selfservice === this.categoriaActive; 112 return x.categoria_selfservice === this.categoriaActive;
110 }); 113 });
111 this.ordenar(); 114 this.ordenar();
112 } 115 }
113 116
114 ordenar() { 117 ordenar() {
115 if (this.ordenandoByVendidos) { 118 if (this.ordenandoByVendidos) {
116 this.auxArticulos.sort((a, b) => { 119 this.auxArticulos.sort((a, b) => {
117 return b.cantidadVendida - a.cantidadVendida; 120 return b.cantidadVendida - a.cantidadVendida;
118 }); 121 });
119 } 122 }
120 } 123 }
121 124
122 selectCategoria(index: number, idCategoria?: number) { 125 selectCategoria(index: number, idCategoria?: number) {
123 if (this.categoriaActive === idCategoria) return; 126 if (this.categoriaActive === idCategoria) return;
124 this.categoriaActive = idCategoria; 127 this.categoriaActive = idCategoria;
125 this.allActive = idCategoria === 0 ? true : false; 128 this.allActive = idCategoria === 0 ? true : false;
126 this.categorias.forEach((categoria, i) => { 129 this.categorias.forEach((categoria, i) => {
127 categoria.selected = index === i ? true : false; 130 categoria.selected = index === i ? true : false;
128 }); 131 });
129 this.filterItems(); 132 this.filterItems();
130 } 133 }
131 134
132 elegirArticulo(articulo: IArticulo) { 135 selectArticulo(articulo: IArticulo) {
133 if (!articulo.FPP) { 136 this.getByID(articulo.id);
134 this.getByID(articulo.id);
135 } else {
136 this.openModalPromos(articulo);
137 }
138 } 137 }
139 138
140 getByID(id: number) { 139 getByID(id: number) {
141 this.articuloService.getById(id) 140 this.articuloService.getById(id)
142 .subscribe((res: IArticulo) => { 141 .subscribe((res: IArticulo) => {
143 res.cantidad = 1; 142 if (res.FPP) {
144 this.articuloService.setArticulo(res); 143 this.openModalPromos(res);
144 } else {
145 this.getSinonimos(res);
146 }
145 }, err => console.error(err)); 147 }, err => console.error(err));
146 } 148 }
147 149
150 getSinonimos(articulo: IArticulo) {
151 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
152 .subscribe((res: ISinonimo[]) => {
153 if (res.length) {
154 this.openModalSinonimos(res, articulo);
155 } else {
156 this.articuloService.setArticulo(articulo);
157 }
158 });
159 }
160
148 openModalPromos(articulo: IArticulo) { 161 openModalPromos(articulo: IArticulo) {
149 this.modalRef = this.modalService.show(PromocionComponent, 162 this.modalRef = this.modalService.show(PromocionComponent, {
150 { 163 initialState: { articulosPromo: [articulo] },
151 initialState: { 164 class: 'modal-promo modal-dialog-centered'
152 idArticulo: articulo.id 165 });
153 }, 166 }
154 class: 'modal-promo modal-dialog-centered' 167
168 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
169 this.modalRef = this.modalService.show(SinonimoComponent, {
170 initialState: { sinonimos: sinonimosData },
171 class: 'modal-promo modal-dialog-centered'
172 });
173
174 this.modalRef.content.onClose
175 .subscribe((res: any) => {
176 for (const a of articulo.productos) {
177 if (a.idSinonimo === res.ID_SIN) {
178 a.CODA = res.articulo.CodArt;
179 a.CodArt = res.articulo.CodArt;
180 a.SECA = res.articulo.CodSec;
181 a.CodSec = res.articulo.CodSec;
182 a.PreVen = res.articulo.PreVen;
183 a.id = res.articulo.id;
184 a.DET_LAR = res.articulo.DET_LAR;
185 a.DetArt = res.articulo.DetArt;
186 }
187 }
188 this.articuloService.setArticulo(articulo);
155 }); 189 });
156 } 190 }
157 191
158 deleteArticulo(index: number) { 192 deleteArticulo(index: number) {
159 this.articuloService.carrito.splice(index, 1); 193 this.articuloService.deleteArticulo(index);
160 this.articuloService.calcularTotal();
161 } 194 }
162 195
163 increaseShow() { 196 increaseShow() {
164 this.showQuantity += 100; 197 this.showQuantity += 100;
165 } 198 }
166 199
167 @HostListener('scroll', ['$event']) 200 @HostListener('scroll', ['$event'])
168 scrollEvent(event: Event) { 201 scrollEvent(event: Event) {
169 clearTimeout(this.inactiveScreen.timerReposo); 202 clearTimeout(this.inactiveScreen.timerReposo);
170 this.inactiveScreen.startTimeOutInactividad(); 203 this.inactiveScreen.startTimeOutInactividad();
171 } 204 }
172 205
173 mouseup() { 206 mouseup() {
174 if (!this.timeoutHandler) return; 207 if (!this.timeoutHandler) return;
175 clearInterval(this.timeoutHandler); 208 clearInterval(this.timeoutHandler);
176 } 209 }
177 210
178 scrollY(el: HTMLElement, value) { 211 scrollY(el: HTMLElement, value) {
179 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 212 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
180 this.timeoutHandler = setInterval(() => { 213 this.timeoutHandler = setInterval(() => {
181 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 214 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
182 }, 500); 215 }, 500);
183 } 216 }
184 217
185 scrollX(el: HTMLElement, value) { 218 scrollX(el: HTMLElement, value) {
186 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 219 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
187 this.timeoutHandler = setInterval(() => { 220 this.timeoutHandler = setInterval(() => {
188 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 221 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
189 }, 500); 222 }, 500);
190 } 223 }
191 224
192 mediaPantalla() { 225 mediaPantalla() {
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 6877b1a
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { CommonModule } from '@angular/common'; 2 import { CommonModule } from '@angular/common';
3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module'; 3 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
4 import { SeleccionArticulosComponent } from './seleccion-articulos.component'; 4 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; 5 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
6 import { ModalModule } from 'ngx-bootstrap/modal'; 6 import { ModalModule } from 'ngx-bootstrap/modal';
7 import { CarouselModule } from 'ngx-bootstrap/carousel'; 7 import { CarouselModule } from 'ngx-bootstrap/carousel';
8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 import { SharedModule } from '../shared/shared.module'; 9 import { SharedModule } from '../shared/shared.module';
10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 import { FormsModule } from '@angular/forms';
10 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
11 13
12 @NgModule({ 14 @NgModule({
13 declarations: [ 15 declarations: [
14 SeleccionArticulosComponent, 16 SeleccionArticulosComponent,
15 HeaderPublicidadComponent, 17 HeaderPublicidadComponent,
16 PromocionComponent, 18 PromocionComponent,
19 SinonimoComponent,
17 ConfirmacionComponent 20 ConfirmacionComponent
18 ], 21 ],
19 imports: [ 22 imports: [
20 CommonModule, 23 CommonModule,
21 SeleccionArticulosRoutingModule, 24 SeleccionArticulosRoutingModule,
25 FormsModule,
22 ModalModule.forRoot(), 26 ModalModule.forRoot(),
23 CarouselModule.forRoot(), 27 CarouselModule.forRoot(),
24 SharedModule 28 SharedModule
25 ], 29 ],
26 exports: [HeaderPublicidadComponent], 30 exports: [HeaderPublicidadComponent],
27 entryComponents: [PromocionComponent, ConfirmacionComponent] 31 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
28 }) 32 })
29 export class SeleccionArticulosModule { } 33 export class SeleccionArticulosModule { }
30 34
src/app/modules/shared/shared.module.ts
Diff comments   View file @ 6877b1a
1 import { NgModule, ModuleWithProviders } from '@angular/core'; 1 import { NgModule, ModuleWithProviders } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 3 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
4 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
4 5
5 @NgModule({}) 6 @NgModule({})
6 export class SharedModule { 7 export class SharedModule {
7 static forRoot(): ModuleWithProviders { 8 static forRoot(): ModuleWithProviders {
8 return { 9 return {
9 ngModule: SharedModule, 10 ngModule: SharedModule,
10 providers: [ 11 providers: [
11 ArticuloService, 12 ArticuloService,
12 CategoriaService 13 CategoriaService,
14 SinonimoService
13 ] 15 ]
14 }; 16 };
15 } 17 }
16 } 18 }
17 19
src/app/modules/splash-screen/splash-screen.component.ts
Diff comments   View file @ 6877b1a
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: "app-splash-screen", 4 selector: 'app-splash-screen',
5 templateUrl: "./splash-screen.component.html", 5 templateUrl: './splash-screen.component.html',
6 styleUrls: ["./splash-screen.component.scss"] 6 styleUrls: ['./splash-screen.component.scss']
7 }) 7 })
8 export class SplashScreenComponent implements OnInit { 8 export class SplashScreenComponent implements OnInit {
9 timerSplashScreen = 2000; 9 timerSplashScreen = 2000;
10 showSplashScreen = true; 10 showSplashScreen = true;
11 textWelcome = "BIENVENIDO A SPOT!"; 11 textWelcome = 'BIENVENIDO A SPOT!';
12 textComoEstas = "¿cómo estás?"; 12 textComoEstas = '¿cómo estás?';
13 textInvitamos = "TE INVITAMOS A HACER"; 13 textInvitamos = 'TE INVITAMOS A HACER';
14 textTuPedido = "tu pedido acá"; 14 textTuPedido = 'tu pedido acá';
15 15
16 constructor() {} 16 constructor() {}
17 17
18 ngOnInit() { 18 ngOnInit() {
19 localStorage.clear(); 19 localStorage.clear();
20 setTimeout(() => { 20 setTimeout(() => {
21 this.showSplashScreen = false; 21 this.showSplashScreen = false;
22 }, this.timerSplashScreen); 22 }, this.timerSplashScreen);
23 $('body').removeClass('media-pantalla'); 23 $('body').removeClass('media-pantalla');
24 } 24 }
25 } 25 }
26 26
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 6877b1a
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http'; 2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings'; 3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo'; 4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service'; 5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs'; 6 import { Observable } from 'rxjs';
7 7
8 @Injectable() 8 @Injectable()
9 export class ArticuloService { 9 export class ArticuloService {
10 carrito: IArticulo[] = []; 10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo; 11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo; 12 promoAcargar: IArticulo;
13 mostrar: string; 13 mostrar: string;
14 esPromoPersonalizada = false; 14 esPromoPersonalizada = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16 medioPago: number; 16 medioPago: number;
17 idComanda: number; 17 idComanda: number;
18 subTotal = 0; 18 subTotal = 0;
19 19
20 constructor( 20 constructor(
21 private http: HttpClient, 21 private http: HttpClient,
22 private clienteService: ClienteService, 22 private clienteService: ClienteService,
23 ) { } 23 ) { }
24 24
25 getById(id) { 25 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 27 }
28 28
29 getAll() { 29 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 30 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 31 }
32 32
33 getAllWithPaginator(page: number = 1) { 33 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 35 }
36 36
37 calcularTotal() { 37 calcularTotal() {
38 this.subTotal = 0; 38 this.subTotal = 0;
39 this.carrito.forEach(articulo => { 39 this.carrito.forEach(articulo => {
40 this.subTotal += (articulo.PreVen * articulo.cantidad); 40 this.subTotal += (articulo.PreVen * articulo.cantidad);
41 }); 41 });
42 } 42 }
43 43
44 setArticulo(articulo: IArticulo) { 44 setArticulo(articulo: IArticulo) {
45 articulo.cantidad = 1;
45 for (const articuloCarrito of this.carrito) { 46 for (const articuloCarrito of this.carrito) {
46 if (articuloCarrito.id === articulo.id) { 47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
47 articuloCarrito.cantidad++; 48 articuloCarrito.cantidad++;
48 this.calcularTotal(); 49 this.calcularTotal();
49 return; 50 return;
50 } 51 }
51 } 52 }
52 this.setArticulosSinImagen([articulo]); 53 this.setArticulosSinImagen([articulo]);
53 this.carrito.unshift(articulo); 54 this.carrito.unshift(articulo);
54 this.calcularTotal(); 55 this.calcularTotal();
55 } 56 }
56 57
58 deleteArticulo(index: number) {
59 this.carrito.splice(index, 1);
60 this.calcularTotal();
61 }
62
57 pay(dataPago: any) { 63 pay(dataPago: any) {
58 return new Observable((observer) => { 64 return new Observable((observer) => {
59 this.clienteService.getById(-1) 65 this.clienteService.getById(-1)
60 .subscribe(cliente => { 66 .subscribe(cliente => {
61 this.markArticuloInPromoAsRemoved(); 67 this.markArticuloInPromoAsRemoved();
62 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
63 productos: this.carrito, 69 productos: this.carrito,
64 cliente, 70 cliente,
65 origen: 'autoservicio', 71 origen: 'autoservicio',
66 codigoVendedor: 5, 72 codigoVendedor: 5,
67 puntoVenta: APP_SETTINGS.puntoVenta, 73 puntoVenta: APP_SETTINGS.puntoVenta,
68 pedidoAnombreDe: dataPago.pedidoAnombreDe, 74 pedidoAnombreDe: dataPago.pedidoAnombreDe,
69 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 75 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
70 }) 76 })
71 .subscribe((data) => { 77 .subscribe((data) => {
72 observer.next(data); 78 observer.next(data);
73 observer.complete(); 79 observer.complete();
74 }); 80 });
75 }); 81 });
76 }); 82 });
77 } 83 }
78 84
79 cleanShoppingCar() { 85 cleanShoppingCar() {
80 this.articuloAcargar = undefined; 86 this.articuloAcargar = undefined;
81 this.promoAcargar = undefined; 87 this.promoAcargar = undefined;
82 this.carrito = []; 88 this.carrito = [];
83 } 89 }
84 90
85 setArticulosSinImagen(articulos: IArticulo[]) { 91 setArticulosSinImagen(articulos: IArticulo[]) {
86 articulos.forEach((articulo: IArticulo) => { 92 articulos.forEach((articulo: IArticulo) => {
87 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 93 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
88 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 94 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
89 }); 95 });
90 } 96 }
91 97
92 markArticuloInPromoAsRemoved() { 98 markArticuloInPromoAsRemoved() {
93 this.carrito.forEach((articuloCarrito: IArticulo) => { 99 this.carrito.forEach((articuloCarrito: IArticulo) => {
94 if (articuloCarrito.PRO) { 100 if (articuloCarrito.PRO) {
95 articuloCarrito.productos.forEach((articulo: IArticulo) => { 101 articuloCarrito.productos.forEach((articulo: IArticulo) => {
96 if (articulo.cantidadAdicionada === 0) { 102 if (articulo.cantidadAdicionada === 0) {
97 articulo.cantidad = 0; 103 articulo.cantidad = 0;
98 articulo.importeValorExtra = 0; 104 articulo.importeValorExtra = 0;
99 } 105 }
100 }); 106 });
101 } 107 }
102 }); 108 });
103 } 109 }
104 } 110 }
105 111
src/app/services/sinonimo/sinonimo.service.ts
Diff comments   View file @ 6877b1a
1 import { Injectable } from '@angular/core'; 1 import { Injectable } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings'; 2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { HttpClient } from '@angular/common/http'; 3 import { HttpClient } from '@angular/common/http';
4 4
5 @Injectable({ 5 @Injectable({
6 providedIn: 'root' 6 providedIn: 'root'
7 }) 7 })
8 export class SinonimoService { 8 export class SinonimoService {
9 urlDeboSuite = APP_SETTINGS.apiDeboSuite; 9 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
10 10
11 constructor( 11 constructor(
12 private http: HttpClient, 12 private http: HttpClient,
13 ) { } 13 ) { }
14 14
15 getPromocionSinonimos(sector, codigo) { 15 getSinonimos(sector, codigo) {
16 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); 16 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
17 } 17 }
18 } 18 }
19 19
src/app/shared/confirmacion/confirmacion.component.ts
Diff comments   View file @ 6877b1a
1 import { Component, OnInit, HostListener } from '@angular/core'; 1 import { Component, OnInit, HostListener } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 2 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
6 import { Subject } from 'rxjs'; 4 import { Subject } from 'rxjs';
5 import { APP_SETTINGS } from 'src/etc/AppSettings';
7 6
8 @Component({ 7 @Component({
9 selector: 'app-confirmacion', 8 selector: 'app-confirmacion',
10 templateUrl: './confirmacion.component.html', 9 templateUrl: './confirmacion.component.html',
11 styleUrls: ['./confirmacion.component.scss'] 10 styleUrls: ['./confirmacion.component.scss']
12 }) 11 })
13 export class ConfirmacionComponent implements OnInit { 12 export class ConfirmacionComponent implements OnInit {
14 idArticulo: number; 13 titleMessage: string;
15 imagenArticulo: any; 14 imagenPath: any;
16 detLarArticulo: string; 15 footerMessageFirst: string;
17 preVenArticulo: any; 16 footerMessageSecond: string;
17 footerConfirmation: number;
18 footerClose: string;
18 onClose: Subject<any>; 19 onClose: Subject<any>;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
19 21
20 constructor( 22 constructor(
21 public modalRef: BsModalRef, 23 public modalRef: BsModalRef,
22 private inactiveScreen: InactiveScreenService, 24 private inactiveScreen: InactiveScreenService,
23 ) { 25 ) {
24 this.onClose = new Subject(); 26 this.onClose = new Subject();
25 } 27 }
26 28
27 ngOnInit() { 29 ngOnInit() {
28 } 30 }
29 31
30 confirmarArticulo() { 32 confirmarArticulo() {
31 this.onClose.next(); 33 this.onClose.next();
32 this.modalRef.hide(); 34 this.modalRef.hide();
33 } 35 }
34 36
35 close() { 37 close() {
36 this.modalRef.hide(); 38 this.modalRef.hide();
37 } 39 }
38 40
39 @HostListener('document:click', ['$event']) 41 @HostListener('document:click', ['$event'])
40 eventListener(event: Event) { 42 eventListener(event: Event) {
41 clearTimeout(this.inactiveScreen.timerReposo); 43 clearTimeout(this.inactiveScreen.timerReposo);
42 this.inactiveScreen.startTimeOutInactividad(); 44 this.inactiveScreen.startTimeOutInactividad();
43 } 45 }
src/app/shared/footer/footer.component.ts
Diff comments   View file @ 6877b1a
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,.reduce-card-1,.reduce-card-2,#content,.cat-content,.cat-btn,.cat-box,#boxCarrito,#headerPublicidad,#headerPad,.img-categoria,.carrito-articulo,.carrito-content,.pago-tarjeta,.modal-promo').toggleClass('media-pantalla'); 19 $(`
20 body,
21 .reduce-card-1,
22 .reduce-card-2,
23 #content,
24 .cat-content,
25 .cat-btn,
26 .cat-box,
27 #boxCarrito,
28 #headerPublicidad,
29 #headerPad,
30 .img-categoria,
31 .carrito-articulo,
32 .carrito-content,
33 .pago-tarjeta,
34 .modal-promo`)
35 .toggleClass('media-pantalla');
20 } 36 }
21 } 37 }
22 38
src/app/shared/header-publicidad/header-publicidad.component.ts
Diff comments   View file @ 6877b1a
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 10
11 @Component({ 11 @Component({
12 selector: 'app-header-publicidad', 12 selector: 'app-header-publicidad',
13 templateUrl: './header-publicidad.component.html', 13 templateUrl: './header-publicidad.component.html',
14 styleUrls: ['./header-publicidad.component.scss'] 14 styleUrls: ['./header-publicidad.component.scss']
15 }) 15 })
16 export class HeaderPublicidadComponent implements OnInit { 16 export class HeaderPublicidadComponent implements OnInit {
17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
18 publicidades: IPublicidad[] = []; 18 publicidades: IPublicidad[] = [];
19 modalRef: BsModalRef; 19 modalRef: BsModalRef;
20 20
21 constructor( 21 constructor(
22 private publicidadService: PublicidadService, 22 private publicidadService: PublicidadService,
23 private articuloService: ArticuloService, 23 private articuloService: ArticuloService,
24 private modalService: BsModalService, 24 private modalService: BsModalService,
25 ) { } 25 ) { }
26 26
27 ngOnInit() { 27 ngOnInit() {
28 this.getPublicidades(); 28 this.getPublicidades();
29 this.mediaPantalla(); 29 this.mediaPantalla();
30 } 30 }
31 31
32 getPublicidades() { 32 getPublicidades() {
33 this.publicidadService.getAll() 33 this.publicidadService.getAll()
34 .subscribe((res: IPublicidad[]) => { 34 .subscribe((res: IPublicidad[]) => {
35 this.publicidades = res; 35 this.publicidades = res;
36 }, err => console.error(err)); 36 }, err => console.error(err));
37 } 37 }
38 38
39 elegirArticulo(publicidad: IPublicidad) { 39 elegirArticulo(publicidad: IPublicidad) {
40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo); 40 if (publicidad.id_articulo) this.getByID(publicidad.id_articulo);
41 } 41 }
42 42
43 getByID(id: number) { 43 getByID(id: number) {
44 this.articuloService.getById(id) 44 this.articuloService.getById(id)
45 .subscribe((res: IArticulo) => { 45 .subscribe((res: IArticulo) => {
46 if (res.FPP) { 46 if (res.FPP) {
47 this.openModalPromos(res); 47 this.openModalPromos(res);
48 return; 48 return;
49 } else { 49 } else {
50 this.openModalConfirmacion(res); 50 this.openModalConfirmacion(res);
51 return; 51 return;
52 } 52 }
53 }, err => console.error(err)); 53 }, err => console.error(err));
54 } 54 }
55 55
56 openModalPromos(articulo: IArticulo) { 56 openModalPromos(articulo: IArticulo) {
57 this.modalRef = this.modalService.show(PromocionComponent, 57 this.modalRef = this.modalService.show(PromocionComponent,
58 { 58 {
59 initialState: { 59 initialState: {
60 idArticulo: articulo.id 60 idArticulo: articulo.id
61 }, 61 },
62 class: 'modal-promo modal-dialog-centered' 62 class: 'modal-promo modal-dialog-centered'
63 }); 63 });
64 } 64 }
65 65
66 openModalConfirmacion(articulo: IArticulo) { 66 openModalConfirmacion(articulo: IArticulo) {
67 this.modalRef = this.modalService.show(ConfirmacionComponent, 67 this.modalRef = this.modalService.show(ConfirmacionComponent,
68 { 68 {
69 initialState: { 69 initialState: {
70 titleMessage: articulo.DET_LAR, 70 titleMessage: articulo.DET_LAR,
71 imagenPath: articulo.imagenes, 71 imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '',
72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`, 72 footerMessageFirst: `¿DESEA AGREGAR ESTE ARTÍCULO`,
73 footerMessageSecond: `a su carrito?`, 73 footerMessageSecond: `a su carrito?`,
74 footerConfirmation: articulo.PreVen, 74 footerConfirmation: articulo.PreVen,
75 footerClose: `volver` 75 footerClose: `volver`
76 }, 76 },
77 class: 'modal-promo modal-dialog-centered' 77 class: 'modal-promo modal-dialog-centered'
78 }); 78 });
79 this.modalRef.content.onClose.subscribe(() => { 79 this.modalRef.content.onClose.subscribe(() => {
80 articulo.cantidad = 1;
81 this.articuloService.setArticulo(articulo); 80 this.articuloService.setArticulo(articulo);
82 }); 81 });
83 } 82 }
84 83
85 mediaPantalla() { 84 mediaPantalla() {
86 if ($('body').hasClass('media-pantalla')) { 85 if ($('body').hasClass('media-pantalla')) {
87 $('#headerPublicidad,#headerPad').addClass('media-pantalla'); 86 $('#headerPublicidad,#headerPad').addClass('media-pantalla');
88 } 87 }
89 } 88 }
90 } 89 }
91 90
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 6877b1a
1 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 1 <div class="modal-header bg-primary rounded-top pt-4 px-2">
2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length"> 2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3 <div class="col-8"> 3 <div class="col-8">
4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5 </div> 5 </div>
6 <div class="col-4 align-self-center"> 6 <div class="col-4 align-self-center">
7 <div 7 <div
8 class="row mx-0 justify-content-between bg-white badge-pill" 8 class="row mx-0 justify-content-between bg-white badge-pill"
9 (click)="elegirPromo(articulosPromo[0])"> 9 (click)="selectPromo(articulosPromo[0])">
10 <div class="col px-0 align-self-center text-primary"> 10 <div class="col px-0 align-self-center text-primary">
11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 </div> 12 </div>
13 <div class="col-3 px-0"> 13 <div class="col-3 px-0">
14 <img 14 <img
15 draggable="false" 15 draggable="false"
16 ondragstart="return false;" 16 ondragstart="return false;"
17 (contextmenu)="false" 17 (contextmenu)="false"
18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 src="assets/img/ir-color.svg"> 19 src="assets/img/ir-color.svg">
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length"> 25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26 <div class="row mx-0 w-100"> 26 <div class="row mx-0 w-100">
27 <div class="col-9"> 27 <div class="col-9">
28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29 <h1 class="text-white mb-4">en un combo?</h1> 29 <h1 class="text-white mb-4">en un combo?</h1>
30 </div> 30 </div>
31 <div class="col-3"> 31 <div class="col-3">
32 <img 32 <img
33 draggable="false" 33 draggable="false"
34 ondragstart="return false;" 34 ondragstart="return false;"
35 (contextmenu)="false" 35 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'" 37 onerror="this.src='assets/img/image-not-found.jpg'"
38 class="card-img-top img-fluid rounded-circle"> 38 class="card-img-top img-fluid rounded-circle">
39 </div> 39 </div>
40 </div> 40 </div>
41 <div 41 <div
42 class="row mx-0 lista-promociones scroll-y-visible" 42 class="row mx-0 lista-promociones scroll-y-visible"
43 (scroll)="scrollEvent($event)"> 43 (scroll)="scrollEvent($event)">
44 <div class="col-12"> 44 <div class="col-12">
45 <div *ngFor="let promo of promociones"> 45 <div *ngFor="let promo of promociones">
46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)"> 46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)">
47 <div class="d-flex"> 47 <div class="d-flex">
48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49 <p class="font-weight-bold my-auto pr-2"> 49 <p class="font-weight-bold my-auto pr-2">
50 <span>{{promo.PreVen | currency}}</span> 50 <span>{{promo.PreVen | currency}}</span>
51 </p> 51 </p>
52 <img 52 <img
53 draggable="false" 53 draggable="false"
54 ondragstart="return false;" 54 ondragstart="return false;"
55 (contextmenu)="false" 55 (contextmenu)="false"
56 class="d-block icon-30 py-1" 56 class="d-block icon-30 py-1"
57 src="assets/img/ir-color.svg"> 57 src="assets/img/ir-color.svg">
58 </div> 58 </div>
59 </div> 59 </div>
60 </div> 60 </div>
61 </div> 61 </div>
62 </div> 62 </div>
63 </div> 63 </div>
64 64
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 6877b1a
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, 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';
10 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
11 import { SinonimoComponent } from '../sinonimo/sinonimo.component';
9 12
10 @Component({ 13 @Component({
11 selector: 'app-promocion', 14 selector: 'app-promocion',
12 templateUrl: './promocion.component.html', 15 templateUrl: './promocion.component.html',
13 styleUrls: ['./promocion.component.scss'] 16 styleUrls: ['./promocion.component.scss']
14 }) 17 })
15 export class PromocionComponent implements OnInit { 18 export class PromocionComponent implements OnInit {
16 idArticulo: number;
17 articulosPromo: IArticulo[] = []; 19 articulosPromo: IArticulo[] = [];
18 promociones: IArticulo[] = []; 20 promociones: IArticulo[] = [];
19 onClose: Subject<any>; 21 onClose: Subject<any>;
20 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
21 23
22 constructor( 24 constructor(
23 public modalRef: BsModalRef, 25 public modalPromocion: BsModalRef,
26 private modalService: BsModalService,
24 private articuloService: ArticuloService, 27 private articuloService: ArticuloService,
25 private promocionService: PromocionService, 28 private promocionService: PromocionService,
29 private sinonimoService: SinonimoService,
26 private inactiveScreen: InactiveScreenService, 30 private inactiveScreen: InactiveScreenService,
27 ) { 31 ) {
28 this.onClose = new Subject(); 32 this.onClose = new Subject();
29 } 33 }
30 34
31 ngOnInit() { 35 ngOnInit() {
32 this.articuloService.getById(this.idArticulo) 36 this.getPromociones();
33 .subscribe((res: IArticulo) => { 37 }
34 this.articulosPromo[0] = res; 38
35 this.getPromociones(); 39 selectPromo(promo: IArticulo) {
40 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
41 .subscribe((res: ISinonimo[]) => {
42 if (res.length) {
43 this.openModalSinonimos(res, promo);
44 } else {
45 promo.cantidad = 1;
46 this.articuloService.setArticulo(promo);
47 this.modalPromocion.hide();
48 }
36 }, err => console.error(err)); 49 }, err => console.error(err));
37 this.mediaPantalla(); 50 this.mediaPantalla();
38 } 51 }
39 52
40 elegirPromo(promo: IArticulo) { 53 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
41 promo.cantidad = 1; 54 const modalSinonimo = this.modalService.show(SinonimoComponent, {
42 this.articuloService.setArticulo(promo); 55 initialState: { sinonimos: sinonimosData },
43 this.modalRef.hide(); 56 class: 'modal-promo modal-dialog-centered'
57 });
58
59 modalSinonimo.content.onClose
60 .subscribe((res: any) => {
61 for (const a of articulo.productos) {
62 if (a.idSinonimo === res.ID_SIN) {
63 a.CODA = res.articulo.CodArt;
64 a.CodArt = res.articulo.CodArt;
65 a.SECA = res.articulo.CodSec;
66 a.CodSec = res.articulo.CodSec;
67 a.PreVen = res.articulo.PreVen;
68 a.id = res.articulo.id;
69 a.DET_LAR = res.articulo.DET_LAR;
70 a.DetArt = res.articulo.DetArt;
71 }
72 }
73 this.articuloService.setArticulo(articulo);
74 this.modalPromocion.hide();
75 });
44 } 76 }
45 77
46 getPromociones() { 78 getPromociones() {
47 const sector = this.articulosPromo[0].CodSec; 79 const sector = this.articulosPromo[0].CodSec;
48 const codigo = this.articulosPromo[0].CodArt; 80 const codigo = this.articulosPromo[0].CodArt;
49 this.promocionService.getPromociones(sector, codigo) 81 this.promocionService.getPromociones(sector, codigo)
50 .subscribe((res: IArticulo[]) => { 82 .subscribe((res: IArticulo[]) => {
51 this.promociones = res; 83 this.promociones = res;
52 }, error => { console.error(error); }); 84 }, error => { console.error(error); });
53 } 85 }
54 86
55 @HostListener('document:click', ['$event']) 87 @HostListener('document:click', ['$event'])
56 eventListener(event: Event) { 88 eventListener(event: Event) {
57 clearTimeout(this.inactiveScreen.timerReposo); 89 clearTimeout(this.inactiveScreen.timerReposo);
58 this.inactiveScreen.startTimeOutInactividad(); 90 this.inactiveScreen.startTimeOutInactividad();
59 } 91 }
60 92
93 @HostListener('scroll', ['$event'])
94 scrollEvent(event: Event) {
95 clearTimeout(this.inactiveScreen.timerReposo);
96 this.inactiveScreen.startTimeOutInactividad();
97 }
98
61 mediaPantalla() { 99 mediaPantalla() {
62 if($('body').hasClass('media-pantalla')) { 100 if ($('body').hasClass('media-pantalla')) {
63 $('.modal-content').addClass('media-pantalla'); 101 $('.modal-content').addClass('media-pantalla');
64 } 102 }
65 } 103 }
66 } 104 }
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 6877b1a
File was created 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header">
3 <p class="h4">Seleccione sinonimos</p>
4 </div>
5
6 <div class="modal-body">
7 <div
8 class="lista-sinonimos scroll-y-visible"
9 *ngFor="let s of sinonimos">
10 <div *ngFor="let articulo of s.productos">
11 <div class="custom-control custom-checkbox">
12 <input
13 type="checkbox"
14 class="custom-control-input"
15 [(ngModel)]="articulo.seleccionado"
16 (click)="selectArticulo(articulo)"
17 [id]="articulo.id">
18 <label
19 class="custom-control-label"
20 [for]="articulo.id">
21 {{articulo.DET_LAR}}
22 </label>
23 </div>
24 </div>
25 </div>
26 </div>
27
28 <div class="modal-footer">
29 <div
30 [ngClass]="validate()"
31 class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary"
32 (click)="continue()">
33 CONTINUAR
34 <img
35 draggable="false"
36 ondragstart="return false;"
37 (contextmenu)="false"
38 class="icon-30"
39 src="assets/img/ir-color.svg">
40 </div>
41 </div>
42 </div>
43
src/app/shared/sinonimo/sinonimo.component.scss
Diff comments   View file @ 6877b1a
File was created 1 .lista-sinonimos {
2 min-height: auto;
3 max-height: 25vh;
4 }
5
src/app/shared/sinonimo/sinonimo.component.spec.ts
Diff comments   View file @ 6877b1a
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { SinonimoComponent } from './sinonimo.component';
4
5 describe('SinonimoComponent', () => {
6 let component: SinonimoComponent;
7 let fixture: ComponentFixture<SinonimoComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ SinonimoComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(SinonimoComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 6877b1a
File was created 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7
8 @Component({
9 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss']
12 })
13 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = [];
15 isValid: boolean;
16 onClose: Subject<any>;
17 articuloSelected: IArticulo;
18
19 constructor(
20 private modalRef: BsModalRef,
21 private articuloService: ArticuloService,
22 ) {
23 this.onClose = new Subject();
24 }
25
26 ngOnInit() {
27 }
28
29 selectArticulo(articulo: IArticulo) {
30 for (const s of this.sinonimos) {
31 for (const a of s.productos) {
32 a.seleccionado = false;
33 }
34 }
35 articulo.seleccionado = true;
36 this.articuloSelected = articulo;
37 }
38
39 validate() {
40 this.isValid = false;
41 for (const s of this.sinonimos) {
42 for (const articulo of s.productos) {
43 if (articulo.seleccionado) {
44 this.isValid = true;
45 }
46 }
47 }
48 return !this.isValid ? 'disabled' : '';
49 }
50
51 continue() {
52 if (!this.isValid) return;
53 const ID_SIN = this.articuloSelected.ID_SIN;
54 this.articuloService.getById(this.articuloSelected.id)
55 .subscribe((res: IArticulo) => {
56 this.modalRef.hide();
57 this.onClose.next({
58 articulo: res,
59 ID_SIN
60 });
61 }, err => console.error(err));
62 }
63
64 }
65
src/scss/styles-bootstrap.scss
Diff comments   View file @ 6877b1a
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-input:checked ~ .custom-control-label::before {
44 background-color: $primary !important;
45 }
46
47 .custom-control-input:checked ~ .custom-control-label::before {
48 border-color: $primary !important;
49 background-color: $primary !important;
50 }
51
52 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff;
54 border-color: $primary !important;
55 background-color: $primary !important;
56 }
57
43 .modal-promo > div { 58 .modal-promo > div {
44 border: none !important; 59 border: none !important;
45 border-radius: 10rem; 60 border-radius: $border-radius;
46 margin-left: 10px !important; 61 margin-left: 10px !important;
47 } 62 }
48 63
49 @import "node_modules/bootstrap/scss/bootstrap"; 64 @import "node_modules/bootstrap/scss/bootstrap";
50 65
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 .btn-effect { 25 .btn-effect {
26 transition: all 0.3s !important; 26 transition: all 0.3s !important;
27 &:hover { 27 &:hover {
28 cursor: pointer !important; 28 cursor: pointer !important;
29 opacity: 0.7 !important; 29 opacity: 0.7 !important;
30 } 30 }
31 &:active { 31 &:active {
32 transform: scale(1.02) !important; 32 transform: scale(1.02) !important;
33 } 33 }
34 } 34 }
35 35
36 .cursor-pointer { 36 .cursor-pointer {
37 cursor: pointer; 37 cursor: pointer;
38 } 38 }
39 39
40 p { 40 p {
41 margin: 0 !important; 41 margin: 0 !important;
42 } 42 }
43 43
44 .img-in-top { 44 .img-in-top {
45 position: absolute; 45 position: absolute;
46 top: -35px; 46 top: -35px;
47 left: 50%; 47 left: 50%;
48 height: 70px; 48 height: 70px;
49 -webkit-transform: translateX(-50%); 49 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 50 transform: translateX(-50%);
51 } 51 }
52 52
53 .right-0 { 53 .right-0 {
54 right: 0; 54 right: 0;
55 } 55 }
56 56
57 .left-0 { 57 .left-0 {
58 left: 0; 58 left: 0;
59 } 59 }
60 60
61 .rotate-45 { 61 .rotate-45 {
62 transform: rotate(45deg); 62 transform: rotate(45deg);
63 } 63 }
64 64
65 .rotate-90 { 65 .rotate-90 {
66 transform: rotate(90deg); 66 transform: rotate(90deg);
67 } 67 }
68 68
69 .rotate-90-neg { 69 .rotate-90-neg {
70 transform: rotate(-90deg); 70 transform: rotate(-90deg);
71 } 71 }
72 72
73 .rotate-180-neg { 73 .rotate-180-neg {
74 transform: rotate(-180deg); 74 transform: rotate(-180deg);
75 } 75 }
76 76
77 .disabled {
78 opacity: 0.5;
79 }
80
77 body.media-pantalla { 81 body.media-pantalla {
78 height: 50% !important; 82 height: 50% !important;
79 position: absolute; 83 position: absolute;
80 bottom: 0; 84 bottom: 0;
81 width: 100%; 85 width: 100%;
82 } 86 }
83 87
84 .modal-content.media-pantalla { 88 .modal-content.media-pantalla {
85 margin-top: auto !important; 89 margin-top: auto !important;
86 margin-bottom: 50px !important; 90 margin-bottom: 50px !important;
87 } 91 }
88 92