Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 207a1ff0a8d86b95f5f5634a7675581f534a75cf

Authored by Marcelo Puebla
2 parents 2d44360e2e 1aea015d1c
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !55
Showing 15 changed files   Show diff stats
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 207a1ff
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 @EnterLeave>
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 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 49 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
50 <!-- BOTON MENOS -->
51 <div class="col-auto px-0 my-auto">
52 <img
53 draggable="false"
54 ondragstart="return false;"
55 (contextmenu)="false"
56 class="d-block ml-auto py-2 icon-20 btn-effect"
57 src="assets/img/menos-blanco.svg"
58 (click)="substractCant(articulo)">
59 </div>
60 <!-- CANTIDAD -->
61 <div class="col px-0 py-2 my-auto text-white">
62 <p><small>{{articulo.cantidad}}</small></p>
63 </div>
64 <!-- BOTON MAS -->
65 <div class="col-auto px-0 my-auto">
66 <img
67 draggable="false"
68 ondragstart="return false;"
69 (contextmenu)="false"
70 class="d-block ml-auto py-2 icon-20 btn-effect"
71 src="assets/img/mas-blanco.svg"
72 (click)="addCant(articulo)">
73 </div>
74 </div>
75 </div> 50 </div>
76 <!-- PRECIO --> 51 <!-- PRECIO -->
77 <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">
78 <p class="h-40"><small>PRECIO</small></p> 53 <p class="h-40"><small>PRECIO</small></p>
79 <div class="py-2 badge-pill bg-dark text-white"> 54 <div class="py-1 badge-pill bg-dark text-white">
80 <p><small>{{articulo.PreVen | currency}}</small></p> 55 <p><small>{{articulo.PreVen | currency}}</small></p>
81 </div> 56 </div>
82 </div> 57 </div>
83 <!-- ELIMINAR --> 58 <!-- ELIMINAR -->
84 <div class="col-6 col-md-3 align-self-center"> 59 <div class="col-6 col-md-3 align-self-center">
85 <div class="row mx-0 justify-content-center"> 60 <div class="row mx-0 justify-content-center">
86 <div 61 <div
87 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"
88 (click)="deleteArticulo(i)"> 63 (click)="deleteArticulo(i)">
89 <span> 64 <span>
90 <small class="pr-2">ELIMINAR</small> 65 <small class="pr-2">ELIMINAR</small>
91 <img 66 <img
92 draggable="false" 67 draggable="false"
93 ondragstart="return false;" 68 ondragstart="return false;"
94 (contextmenu)="false" 69 (contextmenu)="false"
95 class="icon-20 rotate-45" 70 class="icon-20 rotate-45"
96 src="assets/img/mas-blanco.svg"> 71 src="assets/img/mas-blanco.svg">
97 </span> 72 </span>
98 </div> 73 </div>
99 </div> 74 </div>
100 </div> 75 </div>
101 </div> 76 </div>
102 </div> 77 </div>
103 </div> 78 </div>
104 </div> 79 </div>
105 <!-- TOTAL --> 80 <!-- TOTAL -->
106 <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">
107 <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>
108 <div class="col-auto px-3 bg-primary badge-pill"> 83 <div class="col-auto px-3 bg-primary badge-pill">
109 <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>
110 </div> 85 </div>
111 </div> 86 </div>
112 <!-- CONTINUAR --> 87 <!-- CONTINUAR -->
113 <div 88 <div
114 *ngIf="articuloService.carrito.length" 89 *ngIf="articuloService.carrito.length"
115 class="row mx-3 mt-4 h-auto justify-content-end"> 90 class="row mx-3 mt-4 h-auto justify-content-end">
116 <div 91 <div
117 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"
118 [routerLink]="['/forma-pago']"> 93 [routerLink]="['/forma-pago']">
119 <span> 94 <span>
120 <small class="pr-2">CONTINUAR</small> 95 <small class="pr-2">CONTINUAR</small>
121 <img 96 <img
122 draggable="false" 97 draggable="false"
123 ondragstart="return false;" 98 ondragstart="return false;"
124 (contextmenu)="false" 99 (contextmenu)="false"
125 class="icon-20" 100 class="icon-20"
126 src="assets/img/ir.svg"> 101 src="assets/img/ir.svg">
127 </span> 102 </span>
128 </div> 103 </div>
129 </div> 104 </div>
130 </div> 105 </div>
131 106
132 </div> 107 </div>
133 108
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 207a1ff
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.deleteArticulo(index); 53 this.articuloService.deleteArticulo(index);
54 } 54 }
55 55
56 substractCant(articulo: IArticulo) { 56 substractCant(articulo: IArticulo) {
57 if (articulo.cantidad === 1) return; 57 this.articuloService.substractCant(articulo);
58 articulo.cantidad--;
59 this.articuloService.calcularTotal();
60 } 58 }
61 59
62 addCant(articulo: IArticulo) { 60 addCant(articulo: IArticulo) {
63 if (articulo.cantidad >= this.maxCantidad) return; 61 this.articuloService.addCant(articulo);
64 articulo.cantidad++;
65 this.articuloService.calcularTotal();
66 } 62 }
67 63
68 goBack() { 64 goBack() {
69 this.location.back(); 65 this.location.back();
70 } 66 }
71 67
72 @HostListener('document:click', ['$event']) 68 @HostListener('document:click', ['$event'])
73 eventListener(event: Event) { 69 eventListener(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo); 70 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad(); 71 this.inactiveScreen.startTimeOutInactividad();
76 } 72 }
77 73
78 @HostListener('scroll', ['$event']) 74 @HostListener('scroll', ['$event'])
79 scrollEvent(event: Event) { 75 scrollEvent(event: Event) {
80 clearTimeout(this.inactiveScreen.timerReposo); 76 clearTimeout(this.inactiveScreen.timerReposo);
81 this.inactiveScreen.startTimeOutInactividad(); 77 this.inactiveScreen.startTimeOutInactividad();
82 } 78 }
83 79
84 mediaPantallaP() { 80 mediaPantallaP() {
85 if ($('body').hasClass('media-pantalla')) { 81 if ($('body').hasClass('media-pantalla')) {
86 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 82 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
87 } 83 }
88 } 84 }
89 } 85 }
90 86
src/app/modules/info-formas-pago/info-formas-pago.component.ts
Diff comments   View file @ 207a1ff
1 import { Component, OnInit, TemplateRef } from '@angular/core'; 1 import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
2 import { BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalService } from 'ngx-bootstrap/modal';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-formas-pago', 5 selector: 'app-formas-pago',
6 templateUrl: './info-formas-pago.component.html', 6 templateUrl: './info-formas-pago.component.html',
7 styleUrls: ['./info-formas-pago.component.scss'] 7 styleUrls: ['./info-formas-pago.component.scss']
8 }) 8 })
9 export class InfoFormasPagoComponent implements OnInit { 9 export class InfoFormasPagoComponent implements OnInit, OnDestroy {
10 mediaPantalla = false; 10 mediaPantalla = false;
11 timer: any;
11 12
12 constructor( 13 constructor(
13 private modalService: BsModalService, 14 private modalService: BsModalService,
14 ) { } 15 ) { }
15 16
16 ngOnInit() { 17 ngOnInit() { }
18
19 ngOnDestroy() {
20 if (this.timer) clearTimeout(this.timer);
17 } 21 }
18 22
19 openGoCaja(templateRef: TemplateRef<any>) { 23 openGoCaja(templateRef: TemplateRef<any>) {
20 this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' }); 24 const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' });
25 this.timer = setTimeout(() => {
26 modalRef.hide();
27 }, 3000);
21 } 28 }
22 } 29 }
23 30
src/app/modules/opcion-pedido/opcion-pedido.component.ts
Diff comments   View file @ 207a1ff
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Router } from '@angular/router'; 2 import { Router } from '@angular/router';
3 3
4 @Component({ 4 @Component({
5 selector: 'app-opcion-pedido', 5 selector: 'app-opcion-pedido',
6 templateUrl: './opcion-pedido.component.html', 6 templateUrl: './opcion-pedido.component.html',
7 styleUrls: ['./opcion-pedido.component.scss'] 7 styleUrls: ['./opcion-pedido.component.scss']
8 }) 8 })
9 export class OpcionPedidoComponent implements OnInit { 9 export class OpcionPedidoComponent implements OnInit {
10 10
11 constructor( 11 constructor(
12 private router: Router, 12 private router: Router,
13 ) { } 13 ) { }
14 14
15 ngOnInit() { 15 ngOnInit() {
16 this.reducirPantalla(); 16 this.reducirPantalla();
17 } 17 }
18 18
19 goTo(path) { 19 goTo(path) {
20 this.router.navigate([path]); 20 this.router.navigate([path]);
21 } 21 }
22 22
23 seleccionPedido(lugar) { 23 seleccionPedido(lugar) {
24 lugar === 'true' ? lugar = true : false; 24 lugar = lugar === 'true' ? true : false;
25 localStorage.setItem('pedidoParaLlevar', lugar); 25 localStorage.setItem('pedidoParaLlevar', lugar);
26 } 26 }
27 27
28 reducirPantalla() { 28 reducirPantalla() {
29 if ($('body').hasClass('media-pantalla')) { 29 if ($('body').hasClass('media-pantalla')) {
30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); 30 $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla');
31 } 31 }
32 } 32 }
33 } 33 }
34 34
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 207a1ff
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 py-1 36 class="col-12 px-0 box-categorias border border-primary py-1
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 rounded-sm shadow': allActive, 'border-bottom-effect': !allActive, 41 [ngClass]="{ 'active rounded-sm shadow': 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 img-fluid 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 rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected, 54 [ngClass]="{ 'active rounded-sm shadow': 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 img-fluid align-self-end d-none d-sm-block rounded-circle"
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-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 66 <small class="col-12 px-1 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)="selectArticulo(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.toUpperCase()}} 105 {{articulo.DetArt.toUpperCase()}}
106 </p> 106 </p>
107 <div class="col-12 px-1 align-self-end h-auto"> 107 <div class="col-12 px-1 align-self-end h-auto">
108 <div 108 <div
109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
110 class="row mx-0 justify-content-between badge-pill"> 110 class="row mx-0 justify-content-between badge-pill">
111 <div class="col px-0 align-self-center text-white text-right"> 111 <div class="col px-0 align-self-center text-white text-right">
112 {{articulo.PreVen | currency}} 112 {{articulo.PreVen | currency}}
113 </div> 113 </div>
114 <div class="col-5 px-0"> 114 <div class="col-5 px-0">
115 <img 115 <img
116 draggable="false" 116 draggable="false"
117 ondragstart="return false;" 117 ondragstart="return false;"
118 (contextmenu)="false" 118 (contextmenu)="false"
119 class="d-block ml-auto py-1 icon-30" 119 class="d-block ml-auto py-1 icon-30"
120 src="assets/img/ir.svg"> 120 src="assets/img/ir.svg">
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 <!-- BOTON VER MAS --> 128 <!-- BOTON VER MAS -->
129 <div class="row mx-0"> 129 <div class="row mx-0">
130 <div 130 <div
131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
132 class="col-12 px-0 mb-2"> 132 class="col-12 px-0 mb-2">
133 <button 133 <button
134 (click)="increaseShow()" 134 (click)="increaseShow()"
135 class="btn btn-block btn-outline-primary"> 135 class="btn btn-block btn-outline-primary">
136 Ver Más 136 Ver Más
137 </button> 137 </button>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 <!-- FOOTER CARRITO DE COMPRAS --> 144 <!-- FOOTER CARRITO DE COMPRAS -->
145 <div class="row w-90 mx-auto h-auto justify-content-center"> 145 <div class="row w-90 mx-auto h-auto justify-content-center">
146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
147 [ngClass]="boxCarrito.classList.contains('media-pantalla') 147 [ngClass]="boxCarrito.classList.contains('media-pantalla')
148 ? 'col-8' : 'col-12'" id="boxCarrito"> 148 ? 'col-8' : 'col-12'" id="boxCarrito">
149 <!-- CABECERA --> 149 <!-- CABECERA -->
150 <div class="row mx-0 h-15 border-bottom border-primary"> 150 <div class="row mx-0 h-15 border-bottom border-primary">
151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
152 </div> 152 </div>
153 <!-- CUERPO --> 153 <!-- CUERPO -->
154 <div class="row h-85 mx-0 justify-content-around"> 154 <div class="row h-85 mx-0 justify-content-around">
155 <!-- BOTON SCROLL IZQUIERDA --> 155 <!-- BOTON SCROLL IZQUIERDA -->
156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
157 <img 157 <img
158 draggable="false" 158 draggable="false"
159 ondragstart="return false;" 159 ondragstart="return false;"
160 (contextmenu)="false" 160 (contextmenu)="false"
161 class="icon-30 rotate-180-neg" 161 class="icon-30 rotate-180-neg"
162 src="assets/img/ir-fondo-color.svg" 162 src="assets/img/ir-fondo-color.svg"
163 (mousedown)="scrollX(templateCarrito, -100)" 163 (mousedown)="scrollX(templateCarrito, -100)"
164 (mouseup)="mouseup()" 164 (mouseup)="mouseup()"
165 (mouseleave)="mouseup()"> 165 (mouseleave)="mouseup()">
166 </div> 166 </div>
167 <!-- CARRITO --> 167 <!-- CARRITO -->
168 <div class="col-6 col-sm-8 col-lg-10 h-100"> 168 <div class="col-6 col-sm-8 col-lg-10 h-100">
169 <div 169 <div
170 #templateCarrito 170 #templateCarrito
171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
172 (scroll)="scrollEvent($event)"> 172 (scroll)="scrollEvent($event)">
173 <!-- MENSAJE DE ADVERTENCIA -->
174 <div *ngIf="!articuloService.carrito.length" class="col h-100">
175 <p class="text-center py-5">No hay articulos en el carrito</p>
176 </div>
177 <!-- ARTICULOS --> 173 <!-- ARTICULOS -->
178 <div 174 <div
179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 175 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
180 *ngFor="let articulo of articuloService.carrito; let i = index;"> 176 *ngFor="let articulo of articuloService.carrito; let i = index;"
181 <div class="swing-in-top-fwd"> 177 @EnterLeave>
182 <img 178 <img
183 class="btn-effect icon-20 position-absolute right-0" 179 class="btn-effect icon-20 mr-2 position-absolute right-0"
184 src="assets/img/icono-cancelar-color.svg" 180 src="assets/img/icono-cancelar-color.svg"
185 (click)="deleteArticulo(i)"> 181 (click)="deleteArticulo(i)">
186 <img 182 <img
187 draggable="false" 183 draggable="false"
188 ondragstart="return false;" 184 ondragstart="return false;"
189 (contextmenu)="false" 185 (contextmenu)="false"
190 class="d-block img-fluid p-2 mx-auto rounded" 186 class="d-block img-fluid p-2 mx-auto rounded"
191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 187 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
192 onerror="this.src='assets/img/image-not-found.jpg'"> 188 onerror="this.src='assets/img/image-not-found.jpg'">
193 <p class="d-block mt-auto text-center text-primary text-truncate"> 189 <p class="d-block mt-auto text-center text-primary text-truncate">
194 <small>{{articulo.DetArt}}</small> 190 <small>{{articulo.DetArt}}</small>
195 </p> 191 </p>
196 </div> 192 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
193 </div>
194 <!-- MENSAJE DE ADVERTENCIA -->
195 <div *ngIf="!articuloService.carrito.length" class="col h-100">
196 <p class="text-center py-5">No hay articulos en el carrito</p>
197 </div> 197 </div>
198 </div> 198 </div>
199 </div> 199 </div>
200 <!-- BOTON SCROLL DERECHA --> 200 <!-- BOTON SCROLL DERECHA -->
201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
202 <img 202 <img
203 draggable="false" 203 draggable="false"
204 ondragstart="return false;" 204 ondragstart="return false;"
205 (contextmenu)="false" 205 (contextmenu)="false"
206 class="icon-30" 206 class="icon-30"
207 src="assets/img/ir-fondo-color.svg" 207 src="assets/img/ir-fondo-color.svg"
208 (mousedown)="scrollX(templateCarrito, 100)" 208 (mousedown)="scrollX(templateCarrito, 100)"
209 (mouseup)="mouseup()" 209 (mouseup)="mouseup()"
210 (mouseleave)="mouseup()"> 210 (mouseleave)="mouseup()">
211 </div> 211 </div>
212 </div> 212 </div>
213 </div> 213 </div>
214 <!-- TOTAL--> 214 <!-- TOTAL-->
215 <div 215 <div
216 class="col-auto mt-2 ml-auto h-20"> 216 class="col-auto mt-2 ml-auto h-20">
217 <div class="row mx-0"> 217 <div class="row mx-0">
218 <div class="col-auto align-self-center text-primary">TOTAL</div> 218 <div class="col-auto align-self-center text-primary">TOTAL</div>
219 <div class="col-auto bg-primary badge-pill"> 219 <div class="col-auto bg-primary badge-pill">
220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 224
225 <!-- VER CARRITO --> 225 <!-- VER CARRITO -->
226 <div 226 <div
227 class="col-auto px-0 mt-2 h-20" 227 class="col-auto px-0 mt-2 h-20"
228 *ngIf="articuloService.carrito.length" 228 *ngIf="articuloService.carrito.length"
229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
230 <div 230 <div
231 class="btn-effect col-auto px-0 align-self-center bg-white" 231 class="btn-effect col-auto px-0 align-self-center bg-white"
232 [routerLink]="['/carrito']"> 232 [routerLink]="['/carrito']">
233 <div class="row mx-0 bg-light"> 233 <div class="row mx-0 bg-light">
234 <div class="col-auto p-0 bg-primary"> 234 <div class="col-auto p-0 bg-primary">
235 <img 235 <img
236 draggable="false" 236 draggable="false"
237 ondragstart="return false;" 237 ondragstart="return false;"
238 (contextmenu)="false" 238 (contextmenu)="false"
239 class="p-2 icon-40" 239 class="p-2 icon-40"
240 src="assets/img/carrito.svg"> 240 src="assets/img/carrito.svg">
241 </div> 241 </div>
242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
243 </div> 243 </div>
244 </div> 244 </div>
245 </div> 245 </div>
246 246
247 </div> 247 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 207a1ff
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 border-top: 3px solid $primary !important; 10 border-top: 3px solid $primary !important;
11 border-left: 3px solid $primary !important; 11 border-left: 3px solid $primary !important;
12 border-right: 3px solid $primary !important; 12 border-right: 3px solid $primary !important;
13 } 13 }
14 14
15 .border-bottom-effect { 15 .border-bottom-effect {
16 border: none; 16 border: none;
17 position: relative; 17 position: relative;
18 &:hover { 18 &:hover {
19 border: none; 19 border: none;
20 } 20 }
21 &::after { 21 &::after {
22 content: ""; 22 content: "";
23 position: absolute; 23 position: absolute;
24 width: 0px; 24 width: 0px;
25 height: 3px; 25 height: 3px;
26 left: 50%; 26 left: 50%;
27 bottom: 0; 27 bottom: 0;
28 background-color: $primary; 28 background-color: $primary;
29 transition: all ease-in-out 0.2s; 29 transition: all ease-in-out 0.2s;
30 } 30 }
31 &:hover::after { 31 &:hover::after {
32 width: 100%; 32 width: 100%;
33 left: 0; 33 left: 0;
34 } 34 }
35 } 35 }
36 36
37 .card { 37 .card {
38 border: none; 38 border: none;
39 } 39 }
40 40
41 .line-height-sm { 41 .line-height-sm {
42 line-height: 1.2; 42 line-height: 1.2;
43 } 43 }
44 44
45 #content.media-pantalla,#boxCarrito.media-pantalla { 45 #content.media-pantalla,#boxCarrito.media-pantalla {
46 max-height: 60% !important; 46 max-height: 60% !important;
47 } 47 }
48 48
49 .cat-content.media-pantalla { 49 .cat-content.media-pantalla {
50 margin: 0.5rem 0.7rem !important; 50 margin: 0.5rem 0.7rem !important;
51 height: 76% !important; 51 height: 76% !important;
52 } 52 }
53 53
54 .cat-box.media-pantalla{ 54 .cat-box.media-pantalla{
55 height: calc(100% - 85px) !important; 55 height: calc(100% - 85px) !important;
56 } 56 }
57 57
58 .cat-btn.media-pantalla { 58 .cat-btn.media-pantalla {
59 height: 7% !important; 59 height: 7% !important;
60 } 60 }
61
62 .img-categoria.media-pantalla{
63 min-height: 40px !important;
64 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 207a1ff
1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 8 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
13 import { trigger, state, style, transition, animate } from '@angular/animations';
13 14
14 @Component({ 15 @Component({
15 selector: 'app-seleccion-articulos', 16 selector: 'app-seleccion-articulos',
16 templateUrl: './seleccion-articulos.component.html', 17 templateUrl: './seleccion-articulos.component.html',
17 styleUrls: ['./seleccion-articulos.component.scss'] 18 styleUrls: ['./seleccion-articulos.component.scss'],
19 animations: [
20 trigger('EnterLeave', [
21 state('flyIn', style({ transform: 'translateY(0)' })),
22 transition(':enter', [
23 style({ transform: 'translateY(-100%)' }),
24 animate('0.5s ease-in')
25 ]),
26 transition(':leave', [
27 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
28 ])
29 ])
30 ]
18 }) 31 })
19 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 32 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
20 showSpinner = true; 33 showSpinner = true;
21 timeoutHandler: any; 34 timeoutHandler: any;
22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 35 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
23 articulos: IArticulo[] = []; 36 articulos: IArticulo[] = [];
24 auxArticulos: IArticulo[] = []; 37 auxArticulos: IArticulo[] = [];
25 showQuantity = 100; 38 showQuantity = 100;
26 queMostrar = 'todos'; 39 queMostrar = 'todos';
27 categoriaActive = null; 40 categoriaActive = null;
28 categorias: ICategoria[] = []; 41 categorias: ICategoria[] = [];
29 searchTerm = ''; 42 searchTerm = '';
30 ordenandoByVendidos = true; 43 ordenandoByVendidos = true;
31 allActive = true; 44 allActive = true;
32 modalRef: BsModalRef; 45 modalRef: BsModalRef;
33 total = 0; 46 total = 0;
34 47
35 constructor( 48 constructor(
36 public articuloService: ArticuloService, 49 public articuloService: ArticuloService,
37 private categoriaService: CategoriaService, 50 private categoriaService: CategoriaService,
38 private sinonimoService: SinonimoService, 51 private sinonimoService: SinonimoService,
39 private modalService: BsModalService, 52 private modalService: BsModalService,
40 private inactiveScreen: InactiveScreenService, 53 private inactiveScreen: InactiveScreenService,
41 ) { } 54 ) { }
42 55
43 ngOnInit() { 56 ngOnInit() {
44 this.getCategorias(); 57 this.getCategorias();
45 this.mediaPantalla(); 58 this.mediaPantalla();
46 } 59 }
47 60
48 ngOnDestroy() { 61 ngOnDestroy() {
49 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 62 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
50 this.modalService.hide(i); 63 this.modalService.hide(i);
51 } 64 }
52 } 65 }
53 66
54 getCategorias() { 67 getCategorias() {
55 this.categoriaService.getAll() 68 this.categoriaService.getAll()
56 .subscribe((categorias: ICategoria[]) => { 69 .subscribe((categorias: ICategoria[]) => {
57 switch (this.queMostrar) { 70 switch (this.queMostrar) {
58 case 'todos': 71 case 'todos':
59 this.categorias = categorias; 72 this.categorias = categorias;
60 this.categoriaActive = 0; 73 this.categoriaActive = 0;
61 break; 74 break;
62 case 'promociones': 75 case 'promociones':
63 this.categorias = categorias; 76 this.categorias = categorias;
64 this.categoriaActive = 19; 77 this.categoriaActive = 19;
65 break; 78 break;
66 case 'ordenar': 79 case 'ordenar':
67 this.categorias = categorias.filter((categoria: ICategoria) => { 80 this.categorias = categorias.filter((categoria: ICategoria) => {
68 return categoria.ES_PEDIDO; 81 return categoria.ES_PEDIDO;
69 }); 82 });
70 this.categoriaActive = 4; 83 this.categoriaActive = 4;
71 break; 84 break;
72 default: 85 default:
73 this.categorias = categorias; 86 this.categorias = categorias;
74 this.categoriaActive = 0; 87 this.categoriaActive = 0;
75 break; 88 break;
76 } 89 }
77 !localStorage.getItem('articulos') ? 90 !localStorage.getItem('articulos') ?
78 this.getProductos() : 91 this.getProductos() :
79 this.setProductos(); 92 this.setProductos();
80 }); 93 });
81 } 94 }
82 95
83 getProductos() { 96 getProductos() {
84 this.articuloService.getAll() 97 this.articuloService.getAll()
85 .subscribe((result: IArticulo[]) => { 98 .subscribe((result: IArticulo[]) => {
86 this.articuloService.setArticulosSinImagen(result); 99 this.articuloService.setArticulosSinImagen(result);
87 if (this.queMostrar === 'ordenar') { 100 if (this.queMostrar === 'ordenar') {
88 this.categorias.forEach((categoria: ICategoria) => { 101 this.categorias.forEach((categoria: ICategoria) => {
89 const tempArticulos = result.filter((articulo: IArticulo) => { 102 const tempArticulos = result.filter((articulo: IArticulo) => {
90 return articulo.categoria_selfservice === categoria.id; 103 return articulo.categoria_selfservice === categoria.id;
91 }); 104 });
92 result = tempArticulos; 105 result = tempArticulos;
93 }); 106 });
94 } 107 }
95 localStorage.setItem('articulos', JSON.stringify(result)); 108 localStorage.setItem('articulos', JSON.stringify(result));
96 this.setProductos(); 109 this.setProductos();
97 }, (error) => { 110 }, (error) => {
98 this.showSpinner = false; 111 this.showSpinner = false;
99 console.error(error); 112 console.error(error);
100 }); 113 });
101 } 114 }
102 115
103 setProductos() { 116 setProductos() {
104 this.articulos = JSON.parse(localStorage.getItem('articulos')); 117 this.articulos = JSON.parse(localStorage.getItem('articulos'));
105 this.filterItems(); 118 this.filterItems();
106 } 119 }
107 120
108 filterItems() { 121 filterItems() {
109 if (this.categoriaActive === 0) { 122 if (this.categoriaActive === 0) {
110 this.auxArticulos = this.articulos; 123 this.auxArticulos = this.articulos;
111 return; 124 return;
112 } 125 }
113 this.auxArticulos = this.articulos.filter(x => { 126 this.auxArticulos = this.articulos.filter(x => {
114 return x.categoria_selfservice === this.categoriaActive; 127 return x.categoria_selfservice === this.categoriaActive;
115 }); 128 });
116 this.ordenar(); 129 this.ordenar();
117 } 130 }
118 131
119 ordenar() { 132 ordenar() {
120 if (this.ordenandoByVendidos) { 133 if (this.ordenandoByVendidos) {
121 this.auxArticulos.sort((a, b) => { 134 this.auxArticulos.sort((a, b) => {
122 return b.cantidadVendida - a.cantidadVendida; 135 return b.cantidadVendida - a.cantidadVendida;
123 }); 136 });
124 } 137 }
125 } 138 }
126 139
127 selectCategoria(index: number, idCategoria?: number) { 140 selectCategoria(index: number, idCategoria?: number) {
128 if (this.categoriaActive === idCategoria) return; 141 if (this.categoriaActive === idCategoria) return;
129 this.categoriaActive = idCategoria; 142 this.categoriaActive = idCategoria;
130 this.allActive = idCategoria === 0 ? true : false; 143 this.allActive = idCategoria === 0 ? true : false;
131 this.categorias.forEach((categoria, i) => { 144 this.categorias.forEach((categoria, i) => {
132 categoria.selected = index === i ? true : false; 145 categoria.selected = index === i ? true : false;
133 }); 146 });
134 this.filterItems(); 147 this.filterItems();
135 } 148 }
136 149
137 selectArticulo(articulo: IArticulo) { 150 selectArticulo(articulo: IArticulo) {
138 this.getByID(articulo.id); 151 this.getByID(articulo.id);
139 } 152 }
140 153
141 getByID(id: number) { 154 getByID(id: number) {
142 this.articuloService.getById(id) 155 this.articuloService.getById(id)
143 .subscribe((res: IArticulo) => { 156 .subscribe((res: IArticulo) => {
144 if (res.FPP) { 157 if (res.FPP) {
145 this.openModalPromos(res); 158 this.openModalPromos(res);
146 } else { 159 } else {
147 this.getSinonimos(res); 160 this.getSinonimos(res);
148 } 161 }
149 }, err => console.error(err)); 162 }, err => console.error(err));
150 } 163 }
151 164
152 getSinonimos(articulo: IArticulo) { 165 getSinonimos(articulo: IArticulo) {
153 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 166 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
154 .subscribe((res: ISinonimo[]) => { 167 .subscribe((res: ISinonimo[]) => {
155 if (res.length) { 168 if (res.length) {
156 this.openModalSinonimos(res, articulo); 169 this.openModalSinonimos(res, articulo);
157 } else { 170 } else {
158 this.articuloService.setArticulo(articulo); 171 this.articuloService.setArticulo(articulo);
159 } 172 }
160 }); 173 });
161 } 174 }
162 175
163 openModalPromos(articulo: IArticulo) { 176 openModalPromos(articulo: IArticulo) {
164 this.modalRef = this.modalService.show(PromocionComponent, { 177 this.modalRef = this.modalService.show(PromocionComponent, {
165 initialState: { articulosPromo: [articulo] }, 178 initialState: { articulosPromo: [articulo] },
166 class: 'modal-promo modal-dialog-centered' 179 class: 'modal-promo modal-dialog-centered'
167 }); 180 });
168 } 181 }
169 182
170 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 183 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
171 this.modalRef = this.modalService.show(SinonimoComponent, { 184 this.modalRef = this.modalService.show(SinonimoComponent, {
172 initialState: { sinonimos: sinonimosData }, 185 initialState: { sinonimos: sinonimosData },
173 class: 'modal-promo modal-dialog-centered' 186 class: 'modal-promo modal-dialog-centered'
174 }); 187 });
175 188
176 this.modalRef.content.onClose 189 this.modalRef.content.onClose
177 .subscribe((res: any) => { 190 .subscribe((res: any) => {
178 for (const a of articulo.productos) { 191 for (const a of articulo.productos) {
179 if (a.idSinonimo === res.ID_SIN) { 192 if (a.idSinonimo === res.ID_SIN) {
180 a.CODA = res.articulo.CodArt; 193 a.CODA = res.articulo.CodArt;
181 a.CodArt = res.articulo.CodArt; 194 a.CodArt = res.articulo.CodArt;
182 a.SECA = res.articulo.CodSec; 195 a.SECA = res.articulo.CodSec;
183 a.CodSec = res.articulo.CodSec; 196 a.CodSec = res.articulo.CodSec;
184 a.PreVen = res.articulo.PreVen; 197 a.PreVen = res.articulo.PreVen;
185 a.id = res.articulo.id; 198 a.id = res.articulo.id;
186 a.DET_LAR = res.articulo.DET_LAR; 199 a.DET_LAR = res.articulo.DET_LAR;
187 a.DetArt = res.articulo.DetArt; 200 a.DetArt = res.articulo.DetArt;
188 } 201 }
189 } 202 }
190 this.articuloService.setArticulo(articulo); 203 this.articuloService.setArticulo(articulo);
191 }); 204 });
192 } 205 }
193 206
194 deleteArticulo(index: number) { 207 deleteArticulo(index: number) {
195 this.articuloService.deleteArticulo(index); 208 this.articuloService.deleteArticulo(index);
196 } 209 }
197 210
211 substractCant(articulo: IArticulo) {
212 this.articuloService.substractCant(articulo);
213 }
214
215 addCant(articulo: IArticulo) {
216 this.articuloService.addCant(articulo);
217 }
218
198 increaseShow() { 219 increaseShow() {
199 this.showQuantity += 100; 220 this.showQuantity += 100;
200 } 221 }
201 222
202 @HostListener('scroll', ['$event']) 223 @HostListener('scroll', ['$event'])
203 scrollEvent(event: Event) { 224 scrollEvent(event: Event) {
204 clearTimeout(this.inactiveScreen.timerReposo); 225 clearTimeout(this.inactiveScreen.timerReposo);
205 this.inactiveScreen.startTimeOutInactividad(); 226 this.inactiveScreen.startTimeOutInactividad();
206 } 227 }
207 228
208 mouseup() { 229 mouseup() {
209 if (!this.timeoutHandler) return; 230 if (!this.timeoutHandler) return;
210 clearInterval(this.timeoutHandler); 231 clearInterval(this.timeoutHandler);
211 } 232 }
212 233
213 scrollY(el: HTMLElement, value) { 234 scrollY(el: HTMLElement, value) {
214 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 235 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
215 this.timeoutHandler = setInterval(() => { 236 this.timeoutHandler = setInterval(() => {
216 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 237 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
217 }, 500); 238 }, 500);
218 } 239 }
219 240
220 scrollX(el: HTMLElement, value) { 241 scrollX(el: HTMLElement, value) {
221 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 242 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
222 this.timeoutHandler = setInterval(() => { 243 this.timeoutHandler = setInterval(() => {
223 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 244 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
224 }, 500); 245 }, 500);
225 } 246 }
226 247
227 mediaPantalla() { 248 mediaPantalla() {
228 if ($('body').hasClass('media-pantalla')) { 249 if ($('body').hasClass('media-pantalla')) {
229 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); 250 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
230 } 251 }
231 } 252 }
232 } 253 }
233 254
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 207a1ff
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'; 10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 import { FormsModule } from '@angular/forms'; 11 import { FormsModule } from '@angular/forms';
12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
13 import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
13 14
14 @NgModule({ 15 @NgModule({
15 declarations: [ 16 declarations: [
16 SeleccionArticulosComponent, 17 SeleccionArticulosComponent,
17 HeaderPublicidadComponent, 18 HeaderPublicidadComponent,
18 PromocionComponent, 19 PromocionComponent,
19 SinonimoComponent, 20 SinonimoComponent,
20 ConfirmacionComponent 21 ConfirmacionComponent,
22 ArticuloCantidadComponent,
21 ], 23 ],
22 imports: [ 24 imports: [
23 CommonModule, 25 CommonModule,
24 SeleccionArticulosRoutingModule, 26 SeleccionArticulosRoutingModule,
25 FormsModule, 27 FormsModule,
26 ModalModule.forRoot(), 28 ModalModule.forRoot(),
27 CarouselModule.forRoot(), 29 CarouselModule.forRoot(),
28 SharedModule 30 SharedModule
29 ], 31 ],
30 exports: [HeaderPublicidadComponent], 32 exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
31 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent] 33 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
32 }) 34 })
33 export class SeleccionArticulosModule { } 35 export class SeleccionArticulosModule { }
34 36
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 207a1ff
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 maxCantidad = 50;
19 20
20 constructor( 21 constructor(
21 private http: HttpClient, 22 private http: HttpClient,
22 private clienteService: ClienteService, 23 private clienteService: ClienteService,
23 ) { } 24 ) { }
24 25
25 getById(id) { 26 getById(id) {
26 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 27 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 } 28 }
28 29
29 getAll() { 30 getAll() {
30 return this.http.get(`${this.urlDeboSuite}/articulos/`); 31 return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 } 32 }
32 33
33 getAllWithPaginator(page: number = 1) { 34 getAllWithPaginator(page: number = 1) {
34 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 35 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 } 36 }
36 37
38 substractCant(articulo: IArticulo) {
39 if (articulo.cantidad === 1) return;
40 articulo.cantidad--;
41 this.calcularTotal();
42 }
43
44 addCant(articulo: IArticulo) {
45 if (articulo.cantidad >= this.maxCantidad) return;
46 articulo.cantidad++;
47 this.calcularTotal();
48 }
49
37 calcularTotal() { 50 calcularTotal() {
38 this.subTotal = 0; 51 this.subTotal = 0;
39 this.carrito.forEach(articulo => { 52 this.carrito.forEach(articulo => {
40 this.subTotal += (articulo.PreVen * articulo.cantidad); 53 this.subTotal += (articulo.PreVen * articulo.cantidad);
41 }); 54 });
42 } 55 }
43 56
44 setArticulo(articulo: IArticulo) { 57 setArticulo(articulo: IArticulo) {
45 articulo.cantidad = 1; 58 articulo.cantidad = 1;
46 for (const articuloCarrito of this.carrito) { 59 for (const articuloCarrito of this.carrito) {
47 if (articuloCarrito.id === articulo.id && !articulo.productos.length) { 60 if (articuloCarrito.id === articulo.id && !articulo.productos.length) {
48 articuloCarrito.cantidad++; 61 articuloCarrito.cantidad++;
49 this.calcularTotal(); 62 this.calcularTotal();
50 return; 63 return;
51 } 64 }
52 } 65 }
53 this.setArticulosSinImagen([articulo]); 66 this.setArticulosSinImagen([articulo]);
54 this.carrito.unshift(articulo); 67 this.carrito.unshift(articulo);
55 this.calcularTotal(); 68 this.calcularTotal();
56 } 69 }
57 70
58 deleteArticulo(index: number) { 71 deleteArticulo(index: number) {
59 this.carrito.splice(index, 1); 72 this.carrito.splice(index, 1);
60 this.calcularTotal(); 73 this.calcularTotal();
61 } 74 }
62 75
63 pay(dataPago: any) { 76 pay(dataPago: any) {
64 return new Observable((observer) => { 77 return new Observable((observer) => {
65 this.clienteService.getById(-1) 78 this.clienteService.getById(-1)
66 .subscribe(cliente => { 79 .subscribe(cliente => {
67 this.markArticuloInPromoAsRemoved(); 80 this.markArticuloInPromoAsRemoved();
68 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 81 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
69 productos: this.carrito, 82 productos: this.carrito,
70 cliente, 83 cliente,
71 origen: 'autoservicio', 84 origen: 'autoservicio',
72 codigoVendedor: 5, 85 codigoVendedor: 5,
73 puntoVenta: APP_SETTINGS.puntoVenta, 86 puntoVenta: APP_SETTINGS.puntoVenta,
74 pedidoAnombreDe: dataPago.pedidoAnombreDe, 87 pedidoAnombreDe: dataPago.pedidoAnombreDe,
75 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 88 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
76 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'), 89 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
77 }) 90 })
78 .subscribe((data) => { 91 .subscribe((data) => {
79 observer.next(data); 92 observer.next(data);
80 observer.complete(); 93 observer.complete();
81 }); 94 });
82 }); 95 });
83 }); 96 });
84 } 97 }
85 98
86 cleanShoppingCar() { 99 cleanShoppingCar() {
87 this.articuloAcargar = undefined; 100 this.articuloAcargar = undefined;
88 this.promoAcargar = undefined; 101 this.promoAcargar = undefined;
89 this.carrito = []; 102 this.carrito = [];
90 } 103 }
91 104
92 setArticulosSinImagen(articulos: IArticulo[]) { 105 setArticulosSinImagen(articulos: IArticulo[]) {
93 articulos.forEach((articulo: IArticulo) => { 106 articulos.forEach((articulo: IArticulo) => {
94 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 107 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
95 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 108 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
96 }); 109 });
97 } 110 }
98 111
99 markArticuloInPromoAsRemoved() { 112 markArticuloInPromoAsRemoved() {
100 this.carrito.forEach((articuloCarrito: IArticulo) => { 113 this.carrito.forEach((articuloCarrito: IArticulo) => {
101 if (articuloCarrito.PRO) { 114 if (articuloCarrito.PRO) {
102 articuloCarrito.productos.forEach((articulo: IArticulo) => { 115 articuloCarrito.productos.forEach((articulo: IArticulo) => {
103 if (articulo.cantidadAdicionada === 0) { 116 if (articulo.cantidadAdicionada === 0) {
104 articulo.cantidad = 0; 117 articulo.cantidad = 0;
105 articulo.importeValorExtra = 0; 118 articulo.importeValorExtra = 0;
106 } 119 }
107 }); 120 });
108 } 121 }
109 }); 122 });
110 } 123 }
111 } 124 }
112 125
src/app/shared/articulo-cantidad/articulo-cantidad.component.html
Diff comments   View file @ 207a1ff
File was created 1 <div class="row mx-0 justify-content-between bg-primary badge-pill">
2 <!-- BOTON MENOS -->
3 <div class="col-auto px-0 my-auto">
4 <img
5 draggable="false"
6 ondragstart="return false;"
7 (contextmenu)="false"
8 class="d-block ml-auto py-2 icon-15 btn-effect"
9 src="assets/img/menos-blanco.svg"
10 (click)="substractCant(articulo)">
11 </div>
12 <!-- CANTIDAD -->
13 <div class="col px-0 my-auto text-white text-center">
14 <p><small>{{articulo.cantidad}}</small></p>
15 </div>
16 <!-- BOTON MAS -->
17 <div class="col-auto px-0 my-auto">
18 <img
19 draggable="false"
20 ondragstart="return false;"
21 (contextmenu)="false"
22 class="d-block ml-auto py-2 icon-15 btn-effect"
23 src="assets/img/mas-blanco.svg"
24 (click)="addCant(articulo)">
25 </div>
26 </div>
27
src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
Diff comments   View file @ 207a1ff
src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
Diff comments   View file @ 207a1ff
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { ArticuloCantidadComponent } from './articulo-cantidad.component';
4
5 describe('ArticuloCantidadComponent', () => {
6 let component: ArticuloCantidadComponent;
7 let fixture: ComponentFixture<ArticuloCantidadComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ ArticuloCantidadComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(ArticuloCantidadComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
Diff comments   View file @ 207a1ff
File was created 1 import { Component, OnInit, Input } from '@angular/core';
2 import { IArticulo } from 'src/app/interfaces/IArticulo';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4
5 @Component({
6 selector: 'app-articulo-cantidad',
7 templateUrl: './articulo-cantidad.component.html',
8 styleUrls: ['./articulo-cantidad.component.scss']
9 })
10 export class ArticuloCantidadComponent implements OnInit {
11 @Input() articulo: IArticulo;
12
13 constructor(private articuloService: ArticuloService) { }
14
15 ngOnInit() { }
16
17 substractCant(articulo: IArticulo) {
18 this.articuloService.substractCant(articulo);
19 }
20
21 addCant(articulo: IArticulo) {
22 this.articuloService.addCant(articulo);
23 }
24
25 }
26
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 207a1ff
1 <div class="bg-primary rounded text-white"> 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <p class="h4">Seleccione sinonimos</p> 3 <p class="h4">Elige una opción</p>
4 </div> 4 </div>
5 5
6 <div class="modal-body"> 6 <div class="modal-body">
7 <div 7 <div
8 class="lista-sinonimos scroll-y-visible" 8 class="lista-sinonimos scroll-y-visible"
9 *ngFor="let s of sinonimos"> 9 *ngFor="let s of sinonimos">
10 <div *ngFor="let articulo of s.productos"> 10 <div *ngFor="let articulo of s.productos">
11 <div class="custom-control custom-checkbox"> 11 <div class="custom-control custom-checkbox">
12 <input 12 <input
13 type="checkbox" 13 type="checkbox"
14 class="custom-control-input" 14 class="custom-control-input"
15 [(ngModel)]="articulo.seleccionado" 15 [(ngModel)]="articulo.seleccionado"
16 (click)="selectArticulo(articulo)" 16 (click)="selectArticulo(articulo)"
17 [id]="articulo.id"> 17 [id]="articulo.id">
18 <label 18 <label
19 class="custom-control-label" 19 class="custom-control-label"
20 [for]="articulo.id"> 20 [for]="articulo.id">
21 {{articulo.DET_LAR}} 21 {{articulo.DET_LAR}}
22 </label> 22 </label>
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="modal-footer"> 28 <div class="modal-footer">
29 <div 29 <div
30 [ngClass]="validate()" 30 [ngClass]="validate()"
31 class="d-inline-block py-1 bg-white badge-pill text-primary" 31 class="d-inline-block py-1 bg-white badge-pill text-primary"
32 (click)="continue()"> 32 (click)="continue()">
33 CONTINUAR 33 CONTINUAR
34 <img 34 <img
35 draggable="false" 35 draggable="false"
36 ondragstart="return false;" 36 ondragstart="return false;"
37 (contextmenu)="false" 37 (contextmenu)="false"
38 class="icon-30" 38 class="icon-30"
39 src="assets/img/ir-color.svg"> 39 src="assets/img/ir-color.svg">
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
1 .icon-15 {
2 width: 15px;
3 }
4
1 .icon-20 { 5 .icon-20 {
2 width: 20px; 6 width: 20px;
3 } 7 }
4 8
5 .icon-30 { 9 .icon-30 {
6 width: 30px; 10 width: 30px;
7 } 11 }
8 12
9 .icon-40 { 13 .icon-40 {
10 width: 40px; 14 width: 40px;
11 } 15 }
12 16
13 .icon-50 { 17 .icon-50 {
14 width: 50px; 18 width: 50px;
15 } 19 }
16 20
17 .icon-60 { 21 .icon-60 {
18 width: 60px; 22 width: 60px;
19 } 23 }
20 24
21 .icon-150 { 25 .icon-150 {
22 width: 150px; 26 width: 150px;
23 } 27 }
24 28