Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 04958db3f466f83dc3ab52e26b2e52ed1f915a92

Authored by Benjamin Rodriguez
2 parents 4d9b01ed20 5b34ba606e
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion

Showing 6 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 04958db
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="h-75 carrito-content"> 5 <div class="h-75 carrito-content">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- CARRITO --> 15 <!-- CARRITO -->
16 <div 16 <div
17 class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible" 17 class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
18 (scroll)="scrollEvent($event)"> 18 (scroll)="scrollEvent($event)">
19 <!-- MENSAJE DE ADVERTENCIA --> 19 <!-- MENSAJE DE ADVERTENCIA -->
20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> 20 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
21 <p class="h5 text-center">No hay artículos en el carrito</p> 21 <p class="h5 text-center">No hay artículos en el carrito</p>
22 </div> 22 </div>
23 <!-- ARTICULOS --> 23 <!-- ARTICULOS -->
24 <div 24 <div
25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo" 25 class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
26 *ngFor="let articulo of articuloService.carrito; let i = index;" 26 *ngFor="let articulo of articuloService.carrito; let i = index;"
27 @EnterLeave> 27 @EnterLeaveX>
28 <!-- ARTICULO --> 28 <!-- ARTICULO -->
29 <div class="h-100 border border-primary rounded-sm"> 29 <div class="h-100 border border-primary rounded-sm">
30 <div class="row align-items-center mx-0 h-100"> 30 <div class="row align-items-center mx-0 h-100">
31 <!-- NOMBRE E IMAGEN --> 31 <!-- NOMBRE E IMAGEN -->
32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 32 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
33 <img 33 <img
34 draggable="false" 34 draggable="false"
35 ondragstart="return false;" 35 ondragstart="return false;"
36 (contextmenu)="false" 36 (contextmenu)="false"
37 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm" 37 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 38 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
39 onerror="this.src='assets/img/image-not-found.jpg'"> 39 onerror="this.src='assets/img/image-not-found.jpg'">
40 <div class="row mx-0 h-100 h-md-45"> 40 <div class="row mx-0 h-100 h-md-45">
41 <p class="col text-primary text-truncate align-self-center"> 41 <p class="col text-primary text-truncate align-self-center">
42 <small>{{articulo.DetArt}}</small> 42 <small>{{articulo.DetArt}}</small>
43 </p> 43 </p>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- CANTIDAD --> 46 <!-- CANTIDAD -->
47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
48 <p class="h-40"><small>CANT</small></p> 48 <p class="h-40"><small>CANT</small></p>
49 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 49 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
50 </div> 50 </div>
51 <!-- PRECIO --> 51 <!-- PRECIO -->
52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> 52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
53 <p class="h-40"><small>PRECIO</small></p> 53 <p class="h-40"><small>PRECIO</small></p>
54 <div class="py-1 badge-pill bg-dark text-white"> 54 <div class="py-1 badge-pill bg-dark text-white">
55 <p><small>{{articulo.PreVen | currency}}</small></p> 55 <p><small>{{articulo.PreVen | currency}}</small></p>
56 </div> 56 </div>
57 </div> 57 </div>
58 <!-- ELIMINAR --> 58 <!-- ELIMINAR -->
59 <div class="col-6 col-md-3 align-self-center"> 59 <div class="col-6 col-md-3 align-self-center">
60 <div class="row mx-0 justify-content-center"> 60 <div class="row mx-0 justify-content-center">
61 <div 61 <div
62 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white" 62 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
63 (click)="deleteArticulo(i)"> 63 (click)="deleteArticulo(i)">
64 <span> 64 <span>
65 <small class="pr-2">ELIMINAR</small> 65 <small class="pr-2">ELIMINAR</small>
66 <img 66 <img
67 draggable="false" 67 draggable="false"
68 ondragstart="return false;" 68 ondragstart="return false;"
69 (contextmenu)="false" 69 (contextmenu)="false"
70 class="icon-20 rotate-45" 70 class="icon-20 rotate-45"
71 src="assets/img/mas-blanco.svg"> 71 src="assets/img/mas-blanco.svg">
72 </span> 72 </span>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 <!-- TOTAL --> 80 <!-- TOTAL -->
81 <div class="row mx-3 mt-2 h-auto justify-content-end"> 81 <div class="row mx-3 mt-2 h-auto justify-content-end">
82 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div> 82 <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
83 <div class="col-auto px-3 bg-primary badge-pill"> 83 <div class="col-auto px-3 bg-primary badge-pill">
84 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p> 84 <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
85 </div> 85 </div>
86 </div> 86 </div>
87 <!-- CONTINUAR --> 87 <!-- CONTINUAR -->
88 <div 88 <div
89 *ngIf="articuloService.carrito.length" 89 *ngIf="articuloService.carrito.length"
90 class="row mx-3 mt-4 h-auto justify-content-end"> 90 class="row mx-3 mt-4 h-auto justify-content-end">
91 <div 91 <div
92 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 92 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
93 [routerLink]="['/forma-pago']"> 93 [routerLink]="['/forma-pago']">
94 <span> 94 <span>
95 <small class="pr-2">CONTINUAR</small> 95 <small class="pr-2">CONTINUAR</small>
96 <img 96 <img
97 draggable="false" 97 draggable="false"
98 ondragstart="return false;" 98 ondragstart="return false;"
99 (contextmenu)="false" 99 (contextmenu)="false"
100 class="icon-20" 100 class="icon-20"
101 src="assets/img/ir.svg"> 101 src="assets/img/ir.svg">
102 </span> 102 </span>
103 </div> 103 </div>
104 </div> 104 </div>
105 </div> 105 </div>
106 106
107 </div> 107 </div>
108 108
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 04958db
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';
6 import { IArticulo } from 'src/app/interfaces/IArticulo';
7 import { Router } from '@angular/router'; 5 import { Router } from '@angular/router';
8 import { BsModalRef } from 'ngx-bootstrap/modal/public_api'; 6 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
9 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';
10 9
11 @Component({ 10 @Component({
12 selector: 'app-carrito', 11 selector: 'app-carrito',
13 templateUrl: './carrito.component.html', 12 templateUrl: './carrito.component.html',
14 styleUrls: ['./carrito.component.scss'], 13 styleUrls: ['./carrito.component.scss'],
15 animations: [ 14 animations: [ANIMATIONS.EnterLeaveX]
16 trigger('EnterLeave', [
17 state('flyIn', style({ transform: 'translateX(0)' })),
18 transition(':enter', [
19 style({ transform: 'translateX(-100%)' }),
20 animate('1s ease-in')
21 ]),
22 transition(':leave', [
23 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
24 ])
25 ])
26 ]
27 }) 15 })
28 export class CarritoComponent implements OnInit, OnDestroy { 16 export class CarritoComponent implements OnInit, OnDestroy {
29 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
30 maxCantidad = 50; 18 maxCantidad = 50;
31 modalRef: BsModalRef; 19 modalRef: BsModalRef;
32 20
33 constructor( 21 constructor(
34 public articuloService: ArticuloService, 22 public articuloService: ArticuloService,
35 private location: Location, 23 private location: Location,
36 private router: Router, 24 private router: Router,
37 private inactiveScreen: InactiveScreenService, 25 private inactiveScreen: InactiveScreenService,
38 ) { } 26 ) { }
39 27
40 ngOnInit() { 28 ngOnInit() {
41 if (!this.articuloService.carrito.length) { 29 if (!this.articuloService.carrito.length) {
42 this.router.navigate(['']); 30 this.router.navigate(['']);
43 return; 31 return;
44 } 32 }
45 this.mediaPantallaP(); 33 this.mediaPantallaP();
46 } 34 }
47 35
48 ngOnDestroy() { 36 ngOnDestroy() {
49 if (this.modalRef) this.modalRef.hide(); 37 if (this.modalRef) this.modalRef.hide();
50 } 38 }
51 39
52 deleteArticulo(index: number) { 40 deleteArticulo(index: number) {
53 this.articuloService.deleteArticulo(index); 41 this.articuloService.deleteArticulo(index);
54 } 42 }
55 43
56 goBack() { 44 goBack() {
57 this.location.back(); 45 this.location.back();
58 } 46 }
59 47
60 @HostListener('document:click', ['$event']) 48 @HostListener('document:click', ['$event'])
61 eventListener(event: Event) { 49 eventListener(event: Event) {
62 clearTimeout(this.inactiveScreen.timerReposo); 50 clearTimeout(this.inactiveScreen.timerReposo);
63 this.inactiveScreen.startTimeOutInactividad(); 51 this.inactiveScreen.startTimeOutInactividad();
64 } 52 }
65 53
66 @HostListener('scroll', ['$event']) 54 @HostListener('scroll', ['$event'])
67 scrollEvent(event: Event) { 55 scrollEvent(event: Event) {
68 clearTimeout(this.inactiveScreen.timerReposo); 56 clearTimeout(this.inactiveScreen.timerReposo);
69 this.inactiveScreen.startTimeOutInactividad(); 57 this.inactiveScreen.startTimeOutInactividad();
70 } 58 }
71 59
72 mediaPantallaP() { 60 mediaPantallaP() {
73 if ($('body').hasClass('media-pantalla')) { 61 if ($('body').hasClass('media-pantalla')) {
74 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 62 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
75 } 63 }
76 } 64 }
77 } 65 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 04958db
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 <app-filtro-categorias 18 <app-filtro-categorias
19 class="col-5 col-sm-3 col-xl-2 h-100" 19 class="col-5 col-sm-3 col-xl-2 h-100"
20 #filtroCategorias 20 #filtroCategorias
21 (getProductos)="getProductos()" 21 (getProductos)="getProductos()"
22 (setProductos)="setProductos()" 22 (setProductos)="setProductos()"
23 (filterItems)="filterItems()"> 23 (filterItems)="filterItems()">
24 </app-filtro-categorias> 24 </app-filtro-categorias>
25 <!-- LISTA DE ARTICULOS --> 25 <!-- LISTA DE ARTICULOS -->
26 <div 26 <div
27 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 27 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
28 (scroll)="scrollEvent($event)"> 28 (scroll)="scrollEvent($event)">
29 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 29 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
30 <!-- ARTICULO --> 30 <!-- ARTICULO -->
31 <div 31 <div
32 class="col px-2 my-1 my-md-3 h-auto" 32 class="col px-2 my-1 my-md-3 h-auto"
33 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 33 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
34 <div 34 <div
35 class="swing-in-top-fwd btn-effect card h-auto" 35 class="swing-in-top-fwd btn-effect card h-auto"
36 (click)="selectArticulo(articulo)"> 36 (click)="selectArticulo(articulo)">
37 <img 37 <img
38 draggable="false" 38 draggable="false"
39 ondragstart="return false;" 39 ondragstart="return false;"
40 (contextmenu)="false" 40 (contextmenu)="false"
41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
42 onerror="this.src='assets/img/image-not-found.jpg'" 42 onerror="this.src='assets/img/image-not-found.jpg'"
43 class="card-img-top h-30 h-md-55 rounded-sm"> 43 class="card-img-top h-30 h-md-55 rounded-sm">
44 <div class="row mx-0 py-1 h-auto justify-content-center"> 44 <div class="row mx-0 py-1 h-auto justify-content-center">
45 <p 45 <p
46 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 46 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
47 class="col-12 px-1 h6 h-auto text-center min-h-60"> 47 class="col-12 px-1 h6 h-auto text-center min-h-60">
48 {{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 48 {{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
49 </p> 49 </p>
50 <div class="col-12 px-1 align-self-end h-auto"> 50 <div class="col-12 px-1 align-self-end h-auto">
51 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 51 <div class="row mx-0 justify-content-between bg-primary badge-pill">
52 <div class="col px-0 align-self-center text-white text-right"> 52 <div class="col px-0 align-self-center text-white text-right">
53 {{articulo.PreVen | currency}} 53 {{articulo.PreVen | currency}}
54 </div> 54 </div>
55 <div class="col-5 px-0"> 55 <div class="col-5 px-0">
56 <img 56 <img
57 draggable="false" 57 draggable="false"
58 ondragstart="return false;" 58 ondragstart="return false;"
59 (contextmenu)="false" 59 (contextmenu)="false"
60 class="d-block ml-auto py-1 icon-30" 60 class="d-block ml-auto py-1 icon-30"
61 src="assets/img/ir.svg"> 61 src="assets/img/ir.svg">
62 </div> 62 </div>
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 <!-- BOTON VER MAS --> 69 <!-- BOTON VER MAS -->
70 <div class="row mx-0"> 70 <div class="row mx-0">
71 <div 71 <div
72 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 72 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
73 class="col-12 px-0 mb-2"> 73 class="col-12 px-0 mb-2">
74 <button 74 <button
75 (click)="increaseShow()" 75 (click)="increaseShow()"
76 class="btn btn-block btn-outline-primary"> 76 class="btn btn-block btn-outline-primary">
77 Ver Más 77 Ver Más
78 </button> 78 </button>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 <!-- FOOTER CARRITO DE COMPRAS --> 85 <!-- FOOTER CARRITO DE COMPRAS -->
86 <div class="row w-90 mx-auto h-auto justify-content-center"> 86 <div class="row w-90 mx-auto h-auto justify-content-center">
87 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 87 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
88 [ngClass]="boxCarrito.classList.contains('media-pantalla') 88 [ngClass]="boxCarrito.classList.contains('media-pantalla')
89 ? 'col-8' : 'col-12'" id="boxCarrito"> 89 ? 'col-8' : 'col-12'" id="boxCarrito">
90 <!-- CABECERA --> 90 <!-- CABECERA -->
91 <div class="row mx-0 h-15 border-bottom border-primary"> 91 <div class="row mx-0 h-15 border-bottom border-primary">
92 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 92 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
93 </div> 93 </div>
94 <!-- CUERPO --> 94 <!-- CUERPO -->
95 <div class="row h-85 mx-0 justify-content-around"> 95 <div class="row h-85 mx-0 justify-content-around">
96 <!-- BOTON SCROLL IZQUIERDA --> 96 <!-- BOTON SCROLL IZQUIERDA -->
97 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 97 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
98 <img 98 <img
99 draggable="false" 99 draggable="false"
100 ondragstart="return false;" 100 ondragstart="return false;"
101 (contextmenu)="false" 101 (contextmenu)="false"
102 class="icon-30 rotate-180-neg" 102 class="icon-30 rotate-180-neg"
103 src="assets/img/ir-fondo-color.svg" 103 src="assets/img/ir-fondo-color.svg"
104 (mousedown)="scrollX(templateCarrito, -100)" 104 (mousedown)="scrollX(templateCarrito, -100)"
105 (mouseup)="mouseup()" 105 (mouseup)="mouseup()"
106 (mouseleave)="mouseup()"> 106 (mouseleave)="mouseup()">
107 </div> 107 </div>
108 <!-- CARRITO --> 108 <!-- CARRITO -->
109 <div class="col-6 col-sm-8 col-lg-10 h-100"> 109 <div class="col-6 col-sm-8 col-lg-10 h-100">
110 <div 110 <div
111 #templateCarrito 111 #templateCarrito
112 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 112 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
113 (scroll)="scrollEvent($event)"> 113 (scroll)="scrollEvent($event)">
114 <!-- ARTICULOS --> 114 <!-- ARTICULOS -->
115 <div 115 <div
116 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 116 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
117 *ngFor="let articulo of articuloService.carrito; let i = index;" 117 *ngFor="let articulo of articuloService.carrito; let i = index;"
118 @EnterLeave> 118 @EnterLeaveY>
119 <img 119 <img
120 class="btn-effect icon-20 mr-2 position-absolute right-0" 120 class="btn-effect icon-20 mr-2 position-absolute right-0"
121 src="assets/img/icono-cancelar-color.svg" 121 src="assets/img/icono-cancelar-color.svg"
122 (click)="deleteArticulo(i)"> 122 (click)="deleteArticulo(i)">
123 <img 123 <img
124 draggable="false" 124 draggable="false"
125 ondragstart="return false;" 125 ondragstart="return false;"
126 (contextmenu)="false" 126 (contextmenu)="false"
127 class="d-block img-fluid p-2 mx-auto rounded" 127 class="d-block img-fluid p-2 mx-auto rounded"
128 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 128 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
129 onerror="this.src='assets/img/image-not-found.jpg'"> 129 onerror="this.src='assets/img/image-not-found.jpg'">
130 <p class="d-block mt-auto text-center text-primary text-truncate"> 130 <p class="d-block mt-auto text-center text-primary text-truncate">
131 <small>{{articulo.DetArt}}</small> 131 <small>{{articulo.DetArt}}</small>
132 </p> 132 </p>
133 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 133 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
134 </div> 134 </div>
135 <!-- MENSAJE DE ADVERTENCIA --> 135 <!-- MENSAJE DE ADVERTENCIA -->
136 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 136 <div *ngIf="!articuloService.carrito.length" class="col h-100">
137 <p class="text-center py-5">No hay articulos en el carrito</p> 137 <p class="text-center py-5">No hay articulos en el carrito</p>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 <!-- BOTON SCROLL DERECHA --> 141 <!-- BOTON SCROLL DERECHA -->
142 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 142 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
143 <img 143 <img
144 draggable="false" 144 draggable="false"
145 ondragstart="return false;" 145 ondragstart="return false;"
146 (contextmenu)="false" 146 (contextmenu)="false"
147 class="icon-30" 147 class="icon-30"
148 src="assets/img/ir-fondo-color.svg" 148 src="assets/img/ir-fondo-color.svg"
149 (mousedown)="scrollX(templateCarrito, 100)" 149 (mousedown)="scrollX(templateCarrito, 100)"
150 (mouseup)="mouseup()" 150 (mouseup)="mouseup()"
151 (mouseleave)="mouseup()"> 151 (mouseleave)="mouseup()">
152 </div> 152 </div>
153 </div> 153 </div>
154 </div> 154 </div>
155 <!-- TOTAL--> 155 <!-- TOTAL-->
156 <div 156 <div
157 class="col-auto mt-2 ml-auto h-20"> 157 class="col-auto mt-2 ml-auto h-20">
158 <div class="row mx-0"> 158 <div class="row mx-0">
159 <div class="col-auto align-self-center text-primary">TOTAL</div> 159 <div class="col-auto align-self-center text-primary">TOTAL</div>
160 <div class="col-auto bg-primary badge-pill"> 160 <div class="col-auto bg-primary badge-pill">
161 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 161 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
162 </div> 162 </div>
163 </div> 163 </div>
164 </div> 164 </div>
165 165
166 <!-- VER CARRITO --> 166 <!-- VER CARRITO -->
167 <div 167 <div
168 class="col-auto px-0 mt-2 h-20" 168 class="col-auto px-0 mt-2 h-20"
169 *ngIf="articuloService.carrito.length" 169 *ngIf="articuloService.carrito.length"
170 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 170 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
171 <div 171 <div
172 class="btn-effect col-auto px-0 align-self-center bg-white" 172 class="btn-effect col-auto px-0 align-self-center bg-white"
173 [routerLink]="['/carrito']"> 173 [routerLink]="['/carrito']">
174 <div class="row mx-0 bg-light"> 174 <div class="row mx-0 bg-light">
175 <div class="col-auto p-0 bg-primary"> 175 <div class="col-auto p-0 bg-primary">
176 <img 176 <img
177 draggable="false" 177 draggable="false"
178 ondragstart="return false;" 178 ondragstart="return false;"
179 (contextmenu)="false" 179 (contextmenu)="false"
180 class="p-2 icon-40" 180 class="p-2 icon-40"
181 src="assets/img/carrito.svg"> 181 src="assets/img/carrito.svg">
182 </div> 182 </div>
183 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 183 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
184 </div> 184 </div>
185 </div> 185 </div>
186 </div> 186 </div>
187 187
188 </div> 188 </div>
189 </div> 189 </div>
190 190
191 </div> 191 </div>
192 192
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 04958db
1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, 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 { CategoriaService } from 'src/app/services/categoria/categoria.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 9 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
13 import { trigger, state, style, transition, animate } from '@angular/animations';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
15 import * as _ from 'lodash'; 13 import * as _ from 'lodash';
14 import { ANIMATIONS } from 'src/app/utils/animations';
16 15
17 @Component({ 16 @Component({
18 selector: 'app-seleccion-articulos', 17 selector: 'app-seleccion-articulos',
19 templateUrl: './seleccion-articulos.component.html', 18 templateUrl: './seleccion-articulos.component.html',
20 styleUrls: ['./seleccion-articulos.component.scss'], 19 styleUrls: ['./seleccion-articulos.component.scss'],
21 animations: [ 20 animations: [ANIMATIONS.EnterLeaveY]
22 trigger('EnterLeave', [
23 state('flyIn', style({ transform: 'translateY(0)' })),
24 transition(':enter', [
25 style({ transform: 'translateY(-100%)' }),
26 animate('0.5s ease-in')
27 ]),
28 transition(':leave', [
29 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
30 ])
31 ])
32 ]
33 }) 21 })
34 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { 22 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
35 showSpinner = true; 23 showSpinner = true;
36 timeoutHandler: any; 24 timeoutHandler: any;
37 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 25 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
38 articulos: IArticulo[] = []; 26 articulos: IArticulo[] = [];
39 auxArticulos: IArticulo[] = []; 27 auxArticulos: IArticulo[] = [];
40 showQuantity = 100; 28 showQuantity = 100;
41 searchTerm = ''; 29 searchTerm = '';
42 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
43 modalRef: BsModalRef; 31 modalRef: BsModalRef;
44 total = 0; 32 total = 0;
45 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; 33 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
46 34
47 constructor( 35 constructor(
48 public articuloService: ArticuloService, 36 public articuloService: ArticuloService,
49 private categoriaService: CategoriaService,
50 private sinonimoService: SinonimoService, 37 private sinonimoService: SinonimoService,
51 private modalService: BsModalService, 38 private modalService: BsModalService,
52 private inactiveScreen: InactiveScreenService, 39 private inactiveScreen: InactiveScreenService,
53 ) { } 40 ) { }
54 41
55 ngOnInit() { } 42 ngOnInit() { }
56 43
57 ngAfterViewInit(): void { 44 ngAfterViewInit(): void {
58 this.filtroCategorias.getCategorias(); 45 this.filtroCategorias.getCategorias();
59 this.mediaPantalla(); 46 this.mediaPantalla();
60 } 47 }
61 48
62 ngOnDestroy() { 49 ngOnDestroy() {
63 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 50 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
64 this.modalService.hide(i); 51 this.modalService.hide(i);
65 } 52 }
66 } 53 }
67 54
68 getProductos() { 55 getProductos() {
69 this.articuloService.getAll() 56 this.articuloService.getAll()
70 .subscribe((result: IArticulo[]) => { 57 .subscribe((result: IArticulo[]) => {
71 this.articuloService.setArticulosSinImagen(result); 58 this.articuloService.setArticulosSinImagen(result);
72 if (this.filtroCategorias.queMostrar === 'ordenar') { 59 if (this.filtroCategorias.queMostrar === 'ordenar') {
73 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { 60 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
74 const tempArticulos = result.filter((articulo: IArticulo) => { 61 const tempArticulos = result.filter((articulo: IArticulo) => {
75 return articulo.categoria_selfservice === categoria.id; 62 return articulo.categoria_selfservice === categoria.id;
76 }); 63 });
77 result = tempArticulos; 64 result = tempArticulos;
78 }); 65 });
79 } 66 }
80 localStorage.setItem('articulos', JSON.stringify(result)); 67 localStorage.setItem('articulos', JSON.stringify(result));
81 this.setProductos(); 68 this.setProductos();
82 }, (error) => { 69 }, (error) => {
83 this.showSpinner = false; 70 this.showSpinner = false;
84 console.error(error); 71 console.error(error);
85 }); 72 });
86 } 73 }
87 74
88 setProductos() { 75 setProductos() {
89 this.articulos = JSON.parse(localStorage.getItem('articulos')); 76 this.articulos = JSON.parse(localStorage.getItem('articulos'));
90 this.filterItems(); 77 this.filterItems();
91 } 78 }
92 79
93 filterItems() { 80 filterItems() {
94 if (this.filtroCategorias.categoriaActive === 0) { 81 if (this.filtroCategorias.categoriaActive === 0) {
95 this.auxArticulos = this.articulos; 82 this.auxArticulos = this.articulos;
96 return; 83 return;
97 } 84 }
98 this.auxArticulos = this.articulos.filter(x => { 85 this.auxArticulos = this.articulos.filter(x => {
99 return x.categoria_selfservice === this.filtroCategorias.categoriaActive; 86 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
100 }); 87 });
101 this.ordenar(); 88 this.ordenar();
102 } 89 }
103 90
104 ordenar() { 91 ordenar() {
105 if (this.ordenandoByVendidos) { 92 if (this.ordenandoByVendidos) {
106 this.auxArticulos.sort((a, b) => { 93 this.auxArticulos.sort((a, b) => {
107 return b.cantidadVendida - a.cantidadVendida; 94 return b.cantidadVendida - a.cantidadVendida;
108 }); 95 });
109 } 96 }
110 } 97 }
111 98
112 selectArticulo(articulo: IArticulo) { 99 selectArticulo(articulo: IArticulo) {
113 this.getByID(articulo.id); 100 this.getByID(articulo.id);
114 } 101 }
115 102
116 getByID(id: number) { 103 getByID(id: number) {
117 this.articuloService.getById(id) 104 this.articuloService.getById(id)
118 .subscribe((res: IArticulo) => { 105 .subscribe((res: IArticulo) => {
119 if (res.FPP) { 106 if (res.FPP) {
120 this.openModalPromos(res); 107 this.openModalPromos(res);
121 } else { 108 } else {
122 this.getSinonimos(res); 109 this.getSinonimos(res);
123 } 110 }
124 }, err => console.error(err)); 111 }, err => console.error(err));
125 } 112 }
126 113
127 getSinonimos(articulo: IArticulo) { 114 getSinonimos(articulo: IArticulo) {
128 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 115 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
129 .subscribe((res: any[]) => { 116 .subscribe((res: any[]) => {
130 const sinonimos = [];
131 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
132 Object.keys(gruposArticulos).forEach(key => {
133 sinonimos.push({ productos: gruposArticulos[key] });
134 });
135 res = sinonimos;
136 if (res.length) { 117 if (res.length) {
118 const sinonimos = [];
119 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
120 Object.keys(gruposArticulos).forEach(key => {
121 sinonimos.push({ productos: gruposArticulos[key] });
122 });
123 res = sinonimos;
137 this.openModalSinonimos(res, articulo); 124 this.openModalSinonimos(res, articulo);
138 } else { 125 } else {
139 this.articuloService.setArticulo(articulo); 126 this.articuloService.setArticulo(articulo);
140 } 127 }
141 }); 128 });
142 } 129 }
143 130
144 openModalPromos(articulo: IArticulo) { 131 openModalPromos(articulo: IArticulo) {
145 this.modalRef = this.modalService.show(PromocionComponent, { 132 this.modalRef = this.modalService.show(PromocionComponent, {
146 initialState: { articulosPromo: [articulo] }, 133 initialState: { articulosPromo: [articulo] },
147 class: 'modal-promo modal-dialog-centered' 134 class: 'modal-promo modal-dialog-centered'
148 }); 135 });
149 } 136 }
150 137
151 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 138 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
152 this.modalRef = this.modalService.show(SinonimoComponent, { 139 this.modalRef = this.modalService.show(SinonimoComponent, {
153 initialState: { sinonimos: sinonimosData }, 140 initialState: { sinonimos: sinonimosData },
154 class: 'modal-promo modal-dialog-centered' 141 class: 'modal-promo modal-dialog-centered'
155 }); 142 });
156 143
157 this.modalRef.content.onClose 144 this.modalRef.content.onClose
158 .subscribe((res: any) => { 145 .subscribe((res: any) => {
159 for (const a of articulo.productos) { 146 for (const a of articulo.productos) {
160 for (const aRes of res.articulos) { 147 for (const aRes of res.articulos) {
161 if (a.idSinonimo === aRes.ID_SIN) { 148 if (a.idSinonimo === aRes.ID_SIN) {
162 a.CODA = aRes.CodArt; 149 a.CODA = aRes.CodArt;
163 a.CodArt = aRes.CodArt; 150 a.CodArt = aRes.CodArt;
164 a.SECA = aRes.CodSec; 151 a.SECA = aRes.CodSec;
165 aRes.CodSec = aRes.CodSec; 152 aRes.CodSec = aRes.CodSec;
166 a.PreVen = aRes.PreVen; 153 a.PreVen = aRes.PreVen;
167 a.id = aRes.id; 154 a.id = aRes.id;
168 a.DET_LAR = aRes.DET_LAR; 155 a.DET_LAR = aRes.DET_LAR;
169 a.DetArt = aRes.DetArt; 156 a.DetArt = aRes.DetArt;
170 } 157 }
171 } 158 }
172 } 159 }
173 this.articuloService.setArticulo(articulo); 160 this.articuloService.setArticulo(articulo);
174 }); 161 });
175 } 162 }
176 163
177 deleteArticulo(index: number) { 164 deleteArticulo(index: number) {
178 this.articuloService.deleteArticulo(index); 165 this.articuloService.deleteArticulo(index);
179 } 166 }
180 167
181 increaseShow() { 168 increaseShow() {
182 this.showQuantity += 100; 169 this.showQuantity += 100;
183 } 170 }
184 171
185 @HostListener('scroll', ['$event']) 172 @HostListener('scroll', ['$event'])
186 scrollEvent(event: Event) { 173 scrollEvent(event: Event) {
187 clearTimeout(this.inactiveScreen.timerReposo); 174 clearTimeout(this.inactiveScreen.timerReposo);
188 this.inactiveScreen.startTimeOutInactividad(); 175 this.inactiveScreen.startTimeOutInactividad();
189 } 176 }
190 177
191 mouseup() { 178 mouseup() {
192 if (!this.timeoutHandler) return; 179 if (!this.timeoutHandler) return;
193 clearInterval(this.timeoutHandler); 180 clearInterval(this.timeoutHandler);
194 } 181 }
195 182
196 scrollY(el: HTMLElement, value) { 183 scrollY(el: HTMLElement, value) {
197 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 184 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
198 this.timeoutHandler = setInterval(() => { 185 this.timeoutHandler = setInterval(() => {
199 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 186 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
200 }, 500); 187 }, 500);
201 } 188 }
202 189
203 scrollX(el: HTMLElement, value) { 190 scrollX(el: HTMLElement, value) {
204 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 191 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
205 this.timeoutHandler = setInterval(() => { 192 this.timeoutHandler = setInterval(() => {
206 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 193 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
207 }, 500); 194 }, 500);
208 } 195 }
209 196
210 mediaPantalla() { 197 mediaPantalla() {
211 if ($('body').hasClass('media-pantalla')) { 198 if ($('body').hasClass('media-pantalla')) {
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 04958db
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 13
13 @Component({ 14 @Component({
14 selector: 'app-promocion', 15 selector: 'app-promocion',
15 templateUrl: './promocion.component.html', 16 templateUrl: './promocion.component.html',
16 styleUrls: ['./promocion.component.scss'] 17 styleUrls: ['./promocion.component.scss']
17 }) 18 })
18 export class PromocionComponent implements OnInit { 19 export class PromocionComponent implements OnInit {
19 articulosPromo: IArticulo[] = []; 20 articulosPromo: IArticulo[] = [];
20 promociones: IArticulo[] = []; 21 promociones: IArticulo[] = [];
21 onClose: Subject<any>; 22 onClose: Subject<any>;
22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 23 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
23 24
24 constructor( 25 constructor(
25 public modalPromocion: BsModalRef, 26 public modalPromocion: BsModalRef,
26 private modalService: BsModalService, 27 private modalService: BsModalService,
27 private articuloService: ArticuloService, 28 private articuloService: ArticuloService,
28 private promocionService: PromocionService, 29 private promocionService: PromocionService,
29 private sinonimoService: SinonimoService, 30 private sinonimoService: SinonimoService,
30 private inactiveScreen: InactiveScreenService, 31 private inactiveScreen: InactiveScreenService,
31 ) { 32 ) {
32 this.onClose = new Subject(); 33 this.onClose = new Subject();
33 } 34 }
34 35
35 ngOnInit() { 36 ngOnInit() {
36 this.getPromociones(); 37 this.getPromociones();
37 } 38 }
38 39
39 selectPromo(promo: IArticulo) { 40 selectPromo(promo: IArticulo) {
40 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) 41 this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
41 .subscribe((res: ISinonimo[]) => { 42 .subscribe((res: ISinonimo[]) => {
42 if (res.length) { 43 if (res.length) {
44 const sinonimos = [];
45 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
46 Object.keys(gruposArticulos).forEach(key => {
47 sinonimos.push({ productos: gruposArticulos[key] });
48 });
49 res = sinonimos;
43 this.openModalSinonimos(res, promo); 50 this.openModalSinonimos(res, promo);
44 } else { 51 } else {
45 promo.cantidad = 1; 52 promo.cantidad = 1;
46 this.articuloService.setArticulo(promo); 53 this.articuloService.setArticulo(promo);
47 this.modalPromocion.hide(); 54 this.modalPromocion.hide();
48 } 55 }
49 }, err => console.error(err)); 56 }, err => console.error(err));
50 this.mediaPantalla(); 57 this.mediaPantalla();
51 } 58 }
52 59
53 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 60 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
54 const modalSinonimo = this.modalService.show(SinonimoComponent, { 61 const modalSinonimo = this.modalService.show(SinonimoComponent, {
55 initialState: { sinonimos: sinonimosData }, 62 initialState: { sinonimos: sinonimosData },
56 class: 'modal-promo modal-dialog-centered' 63 class: 'modal-promo modal-dialog-centered'
57 }); 64 });
58 65
59 modalSinonimo.content.onClose 66 modalSinonimo.content.onClose
60 .subscribe((res: any) => { 67 .subscribe((res: any) => {
61 for (const a of articulo.productos) { 68 for (const a of articulo.productos) {
62 for (const aRes of res.articulos) { 69 for (const aRes of res.articulos) {
63 if (a.idSinonimo === aRes.ID_SIN) { 70 if (a.idSinonimo === aRes.ID_SIN) {
64 a.CODA = aRes.CodArt; 71 a.CODA = aRes.CodArt;
65 a.CodArt = aRes.CodArt; 72 a.CodArt = aRes.CodArt;
66 a.SECA = aRes.CodSec; 73 a.SECA = aRes.CodSec;
67 aRes.CodSec = aRes.CodSec; 74 aRes.CodSec = aRes.CodSec;
68 a.PreVen = aRes.PreVen; 75 a.PreVen = aRes.PreVen;
69 a.id = aRes.id; 76 a.id = aRes.id;
70 a.DET_LAR = aRes.DET_LAR; 77 a.DET_LAR = aRes.DET_LAR;
71 a.DetArt = aRes.DetArt; 78 a.DetArt = aRes.DetArt;
72 } 79 }
73 } 80 }
74 } 81 }
75 this.articuloService.setArticulo(articulo); 82 this.articuloService.setArticulo(articulo);
76 this.modalPromocion.hide(); 83 this.modalPromocion.hide();
77 }); 84 });
78 } 85 }
79 86
80 getPromociones() { 87 getPromociones() {
81 const sector = this.articulosPromo[0].CodSec; 88 const sector = this.articulosPromo[0].CodSec;
82 const codigo = this.articulosPromo[0].CodArt; 89 const codigo = this.articulosPromo[0].CodArt;
83 this.promocionService.getPromociones(sector, codigo) 90 this.promocionService.getPromociones(sector, codigo)
84 .subscribe((res: IArticulo[]) => { 91 .subscribe((res: IArticulo[]) => {
85 this.promociones = res; 92 this.promociones = res;
86 }, error => { console.error(error); }); 93 }, error => { console.error(error); });
87 } 94 }
88 95
89 @HostListener('document:click', ['$event']) 96 @HostListener('document:click', ['$event'])
90 eventListener(event: Event) { 97 eventListener(event: Event) {
91 clearTimeout(this.inactiveScreen.timerReposo); 98 clearTimeout(this.inactiveScreen.timerReposo);
92 this.inactiveScreen.startTimeOutInactividad(); 99 this.inactiveScreen.startTimeOutInactividad();
93 } 100 }
94 101
95 @HostListener('scroll', ['$event']) 102 @HostListener('scroll', ['$event'])
96 scrollEvent(event: Event) { 103 scrollEvent(event: Event) {
97 clearTimeout(this.inactiveScreen.timerReposo); 104 clearTimeout(this.inactiveScreen.timerReposo);
98 this.inactiveScreen.startTimeOutInactividad(); 105 this.inactiveScreen.startTimeOutInactividad();
99 } 106 }
100 107
101 mediaPantalla() { 108 mediaPantalla() {
102 if ($('body').hasClass('media-pantalla')) { 109 if ($('body').hasClass('media-pantalla')) {
103 $('.modal-content').addClass('media-pantalla'); 110 $('.modal-content').addClass('media-pantalla');
104 } 111 }
105 } 112 }
106 } 113 }
107 114
src/app/utils/animations.ts
Diff comments   View file @ 04958db
File was created 1 import { trigger, state, style, transition, animate } from '@angular/animations';
2
3 export const ANIMATIONS = {
4 EnterLeaveY: trigger('EnterLeaveY', [
5 state('flyIn', style({ transform: 'translateY(0)' })),
6 transition(':enter', [
7 style({ transform: 'translateY(-100%)' }),
8 animate('0.5s ease-in')
9 ]),
10 transition(':leave', [
11 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
12 ])
13 ]),
14 EnterLeaveX: trigger('EnterLeaveX', [
15 state('flyIn', style({ transform: 'translateX(0)' })),
16 transition(':enter', [
17 style({ transform: 'translateX(-100%)' }),
18 animate('1s ease-in')
19 ]),
20 transition(':leave', [
21 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
22 ])
23 ])
24 };
25