Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit a12ccbf62d8098797bf826d6ea2bc0844e4d5c02

Authored by Marcelo Puebla
1 parent ab7cb335b7
Exists in develop

Change 

Animaciones de angular puestas en un archivo distinto
Showing 5 changed files with 31 additions and 32 deletions   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ a12ccbf
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 @ a12ccbf
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 @ a12ccbf
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.DetArt.toUpperCase()}} 48 {{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 51 <div
52 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 52 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
53 class="row mx-0 justify-content-between badge-pill"> 53 class="row mx-0 justify-content-between badge-pill">
54 <div class="col px-0 align-self-center text-white text-right"> 54 <div class="col px-0 align-self-center text-white text-right">
55 {{articulo.PreVen | currency}} 55 {{articulo.PreVen | currency}}
56 </div> 56 </div>
57 <div class="col-5 px-0"> 57 <div class="col-5 px-0">
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="d-block ml-auto py-1 icon-30" 62 class="d-block ml-auto py-1 icon-30"
63 src="assets/img/ir.svg"> 63 src="assets/img/ir.svg">
64 </div> 64 </div>
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 <!-- BOTON VER MAS --> 71 <!-- BOTON VER MAS -->
72 <div class="row mx-0"> 72 <div class="row mx-0">
73 <div 73 <div
74 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 74 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
75 class="col-12 px-0 mb-2"> 75 class="col-12 px-0 mb-2">
76 <button 76 <button
77 (click)="increaseShow()" 77 (click)="increaseShow()"
78 class="btn btn-block btn-outline-primary"> 78 class="btn btn-block btn-outline-primary">
79 Ver Más 79 Ver Más
80 </button> 80 </button>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 <!-- FOOTER CARRITO DE COMPRAS --> 87 <!-- FOOTER CARRITO DE COMPRAS -->
88 <div class="row w-90 mx-auto h-auto justify-content-center"> 88 <div class="row w-90 mx-auto h-auto justify-content-center">
89 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 89 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
90 [ngClass]="boxCarrito.classList.contains('media-pantalla') 90 [ngClass]="boxCarrito.classList.contains('media-pantalla')
91 ? 'col-8' : 'col-12'" id="boxCarrito"> 91 ? 'col-8' : 'col-12'" id="boxCarrito">
92 <!-- CABECERA --> 92 <!-- CABECERA -->
93 <div class="row mx-0 h-15 border-bottom border-primary"> 93 <div class="row mx-0 h-15 border-bottom border-primary">
94 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 94 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
95 </div> 95 </div>
96 <!-- CUERPO --> 96 <!-- CUERPO -->
97 <div class="row h-85 mx-0 justify-content-around"> 97 <div class="row h-85 mx-0 justify-content-around">
98 <!-- BOTON SCROLL IZQUIERDA --> 98 <!-- BOTON SCROLL IZQUIERDA -->
99 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 99 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
100 <img 100 <img
101 draggable="false" 101 draggable="false"
102 ondragstart="return false;" 102 ondragstart="return false;"
103 (contextmenu)="false" 103 (contextmenu)="false"
104 class="icon-30 rotate-180-neg" 104 class="icon-30 rotate-180-neg"
105 src="assets/img/ir-fondo-color.svg" 105 src="assets/img/ir-fondo-color.svg"
106 (mousedown)="scrollX(templateCarrito, -100)" 106 (mousedown)="scrollX(templateCarrito, -100)"
107 (mouseup)="mouseup()" 107 (mouseup)="mouseup()"
108 (mouseleave)="mouseup()"> 108 (mouseleave)="mouseup()">
109 </div> 109 </div>
110 <!-- CARRITO --> 110 <!-- CARRITO -->
111 <div class="col-6 col-sm-8 col-lg-10 h-100"> 111 <div class="col-6 col-sm-8 col-lg-10 h-100">
112 <div 112 <div
113 #templateCarrito 113 #templateCarrito
114 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 114 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
115 (scroll)="scrollEvent($event)"> 115 (scroll)="scrollEvent($event)">
116 <!-- ARTICULOS --> 116 <!-- ARTICULOS -->
117 <div 117 <div
118 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 118 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
119 *ngFor="let articulo of articuloService.carrito; let i = index;" 119 *ngFor="let articulo of articuloService.carrito; let i = index;"
120 @EnterLeave> 120 @EnterLeaveY>
121 <img 121 <img
122 class="btn-effect icon-20 mr-2 position-absolute right-0" 122 class="btn-effect icon-20 mr-2 position-absolute right-0"
123 src="assets/img/icono-cancelar-color.svg" 123 src="assets/img/icono-cancelar-color.svg"
124 (click)="deleteArticulo(i)"> 124 (click)="deleteArticulo(i)">
125 <img 125 <img
126 draggable="false" 126 draggable="false"
127 ondragstart="return false;" 127 ondragstart="return false;"
128 (contextmenu)="false" 128 (contextmenu)="false"
129 class="d-block img-fluid p-2 mx-auto rounded" 129 class="d-block img-fluid p-2 mx-auto rounded"
130 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 130 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
131 onerror="this.src='assets/img/image-not-found.jpg'"> 131 onerror="this.src='assets/img/image-not-found.jpg'">
132 <p class="d-block mt-auto text-center text-primary text-truncate"> 132 <p class="d-block mt-auto text-center text-primary text-truncate">
133 <small>{{articulo.DetArt}}</small> 133 <small>{{articulo.DetArt}}</small>
134 </p> 134 </p>
135 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 135 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
136 </div> 136 </div>
137 <!-- MENSAJE DE ADVERTENCIA --> 137 <!-- MENSAJE DE ADVERTENCIA -->
138 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 138 <div *ngIf="!articuloService.carrito.length" class="col h-100">
139 <p class="text-center py-5">No hay articulos en el carrito</p> 139 <p class="text-center py-5">No hay articulos en el carrito</p>
140 </div> 140 </div>
141 </div> 141 </div>
142 </div> 142 </div>
143 <!-- BOTON SCROLL DERECHA --> 143 <!-- BOTON SCROLL DERECHA -->
144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 144 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
145 <img 145 <img
146 draggable="false" 146 draggable="false"
147 ondragstart="return false;" 147 ondragstart="return false;"
148 (contextmenu)="false" 148 (contextmenu)="false"
149 class="icon-30" 149 class="icon-30"
150 src="assets/img/ir-fondo-color.svg" 150 src="assets/img/ir-fondo-color.svg"
151 (mousedown)="scrollX(templateCarrito, 100)" 151 (mousedown)="scrollX(templateCarrito, 100)"
152 (mouseup)="mouseup()" 152 (mouseup)="mouseup()"
153 (mouseleave)="mouseup()"> 153 (mouseleave)="mouseup()">
154 </div> 154 </div>
155 </div> 155 </div>
156 </div> 156 </div>
157 <!-- TOTAL--> 157 <!-- TOTAL-->
158 <div 158 <div
159 class="col-auto mt-2 ml-auto h-20"> 159 class="col-auto mt-2 ml-auto h-20">
160 <div class="row mx-0"> 160 <div class="row mx-0">
161 <div class="col-auto align-self-center text-primary">TOTAL</div> 161 <div class="col-auto align-self-center text-primary">TOTAL</div>
162 <div class="col-auto bg-primary badge-pill"> 162 <div class="col-auto bg-primary badge-pill">
163 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 163 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
164 </div> 164 </div>
165 </div> 165 </div>
166 </div> 166 </div>
167 167
168 <!-- VER CARRITO --> 168 <!-- VER CARRITO -->
169 <div 169 <div
170 class="col-auto px-0 mt-2 h-20" 170 class="col-auto px-0 mt-2 h-20"
171 *ngIf="articuloService.carrito.length" 171 *ngIf="articuloService.carrito.length"
172 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 172 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
173 <div 173 <div
174 class="btn-effect col-auto px-0 align-self-center bg-white" 174 class="btn-effect col-auto px-0 align-self-center bg-white"
175 [routerLink]="['/carrito']"> 175 [routerLink]="['/carrito']">
176 <div class="row mx-0 bg-light"> 176 <div class="row mx-0 bg-light">
177 <div class="col-auto p-0 bg-primary"> 177 <div class="col-auto p-0 bg-primary">
178 <img 178 <img
179 draggable="false" 179 draggable="false"
180 ondragstart="return false;" 180 ondragstart="return false;"
181 (contextmenu)="false" 181 (contextmenu)="false"
182 class="p-2 icon-40" 182 class="p-2 icon-40"
183 src="assets/img/carrito.svg"> 183 src="assets/img/carrito.svg">
184 </div> 184 </div>
185 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 185 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
186 </div> 186 </div>
187 </div> 187 </div>
188 </div> 188 </div>
189 189
190 </div> 190 </div>
191 </div> 191 </div>
192 192
193 </div> 193 </div>
194 194
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ a12ccbf
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 if (res.length) { 117 if (res.length) {
131 const sinonimos = []; 118 const sinonimos = [];
132 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); 119 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
133 Object.keys(gruposArticulos).forEach(key => { 120 Object.keys(gruposArticulos).forEach(key => {
134 sinonimos.push({ productos: gruposArticulos[key] }); 121 sinonimos.push({ productos: gruposArticulos[key] });
135 }); 122 });
136 res = sinonimos; 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')) {
212 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria') 199 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria')
213 .addClass('media-pantalla') 200 .addClass('media-pantalla')
214 .addBack('media-pantalla'); 201 .addBack('media-pantalla');
215 } 202 }
216 } 203 }
217 } 204 }
src/app/utils/animations.ts
Diff comments   View file @ a12ccbf
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