Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 879d5e46aebc682c39f670b6aa54e0b9ea10d03f

Authored by Marcelo Puebla
2 parents 16a7486b66 c21bb9f859
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !57
Showing 11 changed files   Show diff stats
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 879d5e4
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) {
57 this.articuloService.substractCant(articulo);
58 }
59
60 addCant(articulo: IArticulo) {
61 this.articuloService.addCant(articulo);
62 }
63
64 goBack() { 56 goBack() {
65 this.location.back(); 57 this.location.back();
66 } 58 }
67 59
68 @HostListener('document:click', ['$event']) 60 @HostListener('document:click', ['$event'])
69 eventListener(event: Event) { 61 eventListener(event: Event) {
70 clearTimeout(this.inactiveScreen.timerReposo); 62 clearTimeout(this.inactiveScreen.timerReposo);
71 this.inactiveScreen.startTimeOutInactividad(); 63 this.inactiveScreen.startTimeOutInactividad();
72 } 64 }
73 65
74 @HostListener('scroll', ['$event']) 66 @HostListener('scroll', ['$event'])
75 scrollEvent(event: Event) { 67 scrollEvent(event: Event) {
76 clearTimeout(this.inactiveScreen.timerReposo); 68 clearTimeout(this.inactiveScreen.timerReposo);
77 this.inactiveScreen.startTimeOutInactividad(); 69 this.inactiveScreen.startTimeOutInactividad();
78 } 70 }
79 71
80 mediaPantallaP() { 72 mediaPantallaP() {
81 if ($('body').hasClass('media-pantalla')) { 73 if ($('body').hasClass('media-pantalla')) {
82 $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); 74 $('.carrito-content,.carrito-articulo').addClass('media-pantalla');
83 } 75 }
84 } 76 }
85 } 77 }
86 78
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ 879d5e4
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 [routerLink]="['/opcion-pedido']" 15 [routerLink]="['/opcion-pedido']"
16 class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto 16 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto
17 btn-effect align-self-end border border-secondary rounded reduce-card-1"> 17 btn-effect align-self-end border border-secondary rounded reduce-card-1">
18 <img 18 <img
19 draggable="false" 19 draggable="false"
20 ondragstart="return false;" 20 ondragstart="return false;"
21 (contextmenu)="false" 21 (contextmenu)="false"
22 class="img-in-top px-4 bg-white" 22 class="img-in-top px-4 bg-white"
23 src="assets/img/icono-tarjetas.svg"> 23 src="assets/img/icono-tarjetas.svg">
24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
25 <p class="h2 mb-3 text-secondary"> 25 <p class="h2 mb-3 text-secondary">
26 tarjetas y 26 tarjetas y
27 <img 27 <img
28 draggable="false" 28 draggable="false"
29 ondragstart="return false;" 29 ondragstart="return false;"
30 (contextmenu)="false" 30 (contextmenu)="false"
31 class="icon-150" 31 class="icon-150"
32 src="assets/img/icono-mercado-pago.svg"> 32 src="assets/img/icono-mercado-pago.svg">
33 </p> 33 </p>
34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"> 34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
35 CONTINUAR 35 CONTINUAR
36 <img 36 <img
37 draggable="false" 37 draggable="false"
38 ondragstart="return false;" 38 ondragstart="return false;"
39 (contextmenu)="false" 39 (contextmenu)="false"
40 class="icon-30" 40 class="icon-30"
41 src="assets/img/ir.svg"> 41 src="assets/img/ir.svg">
42 </div> 42 </div>
43 </div> 43 </div>
44 <div 44 <div
45 class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center 45 class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center
46 btn-effect border border-primary rounded reduce-card-2" 46 btn-effect border border-primary rounded reduce-card-2"
47 (click)="openGoCaja(templateGoCaja)"> 47 (click)="openGoCaja(templateGoCaja)">
48 <img 48 <img
49 draggable="false" 49 draggable="false"
50 ondragstart="return false;" 50 ondragstart="return false;"
51 (contextmenu)="false" 51 (contextmenu)="false"
52 class="img-in-top px-4 bg-white" 52 class="img-in-top px-4 bg-white"
53 src="assets/img/icono-efectivo.svg"> 53 src="assets/img/icono-efectivo.svg">
54 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 54 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
55 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p> 55 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
56 </div> 56 </div>
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <ng-template #templateGoCaja> 61 <ng-template #templateGoCaja>
62 <div class="bg-primary rounded shadow text-white"> 62 <div class="bg-primary rounded shadow text-white">
63 <div class="modal-body text-center"> 63 <div class="modal-body text-center">
64 Por favor, hace tu pedido en la caja. 64 Por favor, hace tu pedido en la caja.
65 </div> 65 </div>
66 </div> 66 </div>
67 </ng-template> 67 </ng-template>
68 68
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
Diff comments   View file @ 879d5e4
File was created 1 <!-- FILTRO CATEGORIAS -->
2 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
3 <div class="row mx-0 h-94 justify-content-center align-items-center">
4 <div class="col-auto btn-effect h-5 cat-btn">
5 <img
6 draggable="false"
7 ondragstart="return false;"
8 (contextmenu)="false"
9 class="h-100 d-block mx-auto rotate-90-neg"
10 src="assets/img/ir-color.svg"
11 (mousedown)="scrollY(templateCategorias, -100)"
12 (mouseup)="mouseup()"
13 (mouseleave)="mouseup()">
14 </div>
15 <!-- CATEGORIAS -->
16 <div
17 #templateCategorias
18 class="col-12 px-0 mx-0 box-categorias border border-primary py-1
19 border-left-0 rounded-right scroll-y cat-box"
20 (scroll)="scrollEvent($event)">
21 <div
22 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
23 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }"
24 (click)="selectCategoria(-1, 0)">
25 <img
26 draggable="false"
27 ondragstart="return false;"
28 (contextmenu)="false"
29 class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
30 src="assets/img/logo-spot.svg">
31 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
32 </div>
33 <div
34 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
35 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }"
36 (click)="selectCategoria(i, categoria.id)"
37 *ngFor="let categoria of categorias; let i = index;">
38 <img
39 draggable="false"
40 ondragstart="return false;"
41 (contextmenu)="false"
42 class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
43 src="{{urlImagenes}}{{categoria.path_imagen}}"
44 onerror="this.src='assets/img/image-not-found.jpg'">
45 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
46 </div>
47 </div>
48 <div class="col-auto btn-effect h-5 cat-btn">
49 <img
50 draggable="false"
51 ondragstart="return false;"
52 (contextmenu)="false"
53 class="h-100 d-block mx-auto rotate-90"
54 src="assets/img/ir-color.svg"
55 (mousedown)="scrollY(templateCategorias, 100)"
56 (mouseup)="mouseup()"
57 (mouseleave)="mouseup()">
58 </div>
59 </div>
60
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
Diff comments   View file @ 879d5e4
File was created 1 $primary: #aa006b;
2
3 .box-categorias {
4 height: calc(100% - 100px) !important;
5 }
6
7 .active {
8 transition: 0.3s;
9 background-color: white;
10 border-bottom: 3px solid $primary !important;
11 border-top: 3px solid $primary !important;
12 border-left: 3px solid $primary !important;
13 border-right: 3px solid $primary !important;
14 }
15
16 .border-bottom-effect {
17 border: none;
18 position: relative;
19 &:hover {
20 border: none;
21 }
22 &::after {
23 content: "";
24 position: absolute;
25 width: 0px;
26 height: 3px;
27 left: 50%;
28 bottom: 0;
29 background-color: $primary;
30 transition: all ease-in-out 0.2s;
31 }
32 &:hover::after {
33 width: 100%;
34 left: 0;
35 }
36 }
37
38 .cat-content.media-pantalla {
39 margin: 0.5rem 0.7rem !important;
40 height: 76% !important;
41 }
42
43 .cat-box.media-pantalla {
44 height: calc(100% - 85px) !important;
45 }
46
47 .cat-btn.media-pantalla {
48 height: 7% !important;
49 }
50
51 #content.media-pantalla,
52 #boxCarrito.media-pantalla {
53 max-height: 60% !important;
54 }
55
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts
Diff comments   View file @ 879d5e4
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { FiltroCategoriasComponent } from './filtro-categorias.component';
4
5 describe('FiltroCategoriasComponent', () => {
6 let component: FiltroCategoriasComponent;
7 let fixture: ComponentFixture<FiltroCategoriasComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ FiltroCategoriasComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(FiltroCategoriasComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
Diff comments   View file @ 879d5e4
File was created 1 import { Component, OnInit, Input, HostListener, Output, EventEmitter } from '@angular/core';
2 import { ICategoria } from 'src/app/interfaces/ICategoria';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6
7 @Component({
8 selector: 'app-filtro-categorias',
9 templateUrl: './filtro-categorias.component.html',
10 styleUrls: ['./filtro-categorias.component.scss']
11 })
12 export class FiltroCategoriasComponent implements OnInit {
13 @Output() getProductos = new EventEmitter<any>();
14 @Output() setProductos = new EventEmitter<any>();
15 @Output() filterItems = new EventEmitter<any>();
16 categorias: ICategoria[] = [];
17 timeoutHandler: any;
18 categoriaActive = null;
19 allActive = true;
20 queMostrar = 'todos';
21 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
22
23 constructor(
24 private categoriaService: CategoriaService,
25 private inactiveScreen: InactiveScreenService,
26 ) { }
27
28 ngOnInit() { }
29
30 getCategorias() {
31 this.categoriaService.getAll()
32 .subscribe((categorias: ICategoria[]) => {
33 switch (this.queMostrar) {
34 case 'todos':
35 this.categorias = categorias;
36 this.categoriaActive = 0;
37 break;
38 case 'promociones':
39 this.categorias = categorias;
40 this.categoriaActive = 19;
41 break;
42 case 'ordenar':
43 this.categorias = categorias.filter((categoria: ICategoria) => {
44 return categoria.ES_PEDIDO;
45 });
46 this.categoriaActive = 4;
47 break;
48 default:
49 this.categorias = categorias;
50 this.categoriaActive = 0;
51 break;
52 }
53 !localStorage.getItem('articulos') ?
54 this.getProductos.emit() :
55 this.setProductos.emit();
56 });
57 }
58
59 selectCategoria(index: number, idCategoria?: number) {
60 if (this.categoriaActive === idCategoria) return;
61 this.categoriaActive = idCategoria;
62 this.allActive = idCategoria === 0 ? true : false;
63 this.categorias.forEach((categoria, i) => {
64 categoria.selected = index === i ? true : false;
65 });
66 this.filterItems.emit();
67 }
68
69 @HostListener('scroll', ['$event'])
70 scrollEvent(event: Event) {
71 clearTimeout(this.inactiveScreen.timerReposo);
72 this.inactiveScreen.startTimeOutInactividad();
73 }
74
75 mouseup() {
76 if (!this.timeoutHandler) return;
77 clearInterval(this.timeoutHandler);
78 }
79
80 scrollY(el: HTMLElement, value) {
81 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
82 this.timeoutHandler = setInterval(() => {
83 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
84 }, 500);
85 }
86 }
87
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 879d5e4
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 <app-filtro-categorias
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 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 #filtroCategorias
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 (getProductos)="getProductos()"
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 (setProductos)="setProductos()"
23 <img 23 (filterItems)="filterItems()">
24 draggable="false" 24 </app-filtro-categorias>
25 ondragstart="return false;"
26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()">
32 </div>
33 <!-- CATEGORIAS -->
34 <div
35 #templateCategorias
36 class="col-12 px-0 mx-0 box-categorias border border-primary py-1
37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)">
39 <div
40 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)">
44 <img
45 draggable="false"
46 ondragstart="return false;"
47 (contextmenu)="false"
48 class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
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>
51 </div>
52 <div
53 class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;">
58 <img
59 draggable="false"
60 ondragstart="return false;"
61 (contextmenu)="false"
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')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}"
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>
67 </div>
68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img
71 draggable="false"
72 ondragstart="return false;"
73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()">
79 </div>
80 </div>
81 </div>
82 <!-- LISTA DE ARTICULOS --> 25 <!-- LISTA DE ARTICULOS -->
83 <div 26 <div
84 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"
85 (scroll)="scrollEvent($event)"> 28 (scroll)="scrollEvent($event)">
86 <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">
87 <!-- ARTICULO --> 30 <!-- ARTICULO -->
88 <div 31 <div
89 class="col px-2 my-1 my-md-3 h-auto" 32 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 33 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 34 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 35 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 36 (click)="selectArticulo(articulo)">
94 <img 37 <img
95 draggable="false" 38 draggable="false"
96 ondragstart="return false;" 39 ondragstart="return false;"
97 (contextmenu)="false" 40 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 41 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 42 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 43 class="card-img-top h-30 h-md-55 rounded-sm">
101 <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">
102 <p 45 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 46 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 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">
105 {{articulo.DetArt.toUpperCase()}} 48 {{articulo.DetArt.toUpperCase()}}
106 </p> 49 </p>
107 <div class="col-12 px-1 align-self-end h-auto"> 50 <div class="col-12 px-1 align-self-end h-auto">
108 <div 51 <div
109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 52 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
110 class="row mx-0 justify-content-between badge-pill"> 53 class="row mx-0 justify-content-between badge-pill">
111 <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">
112 {{articulo.PreVen | currency}} 55 {{articulo.PreVen | currency}}
113 </div> 56 </div>
114 <div class="col-5 px-0"> 57 <div class="col-5 px-0">
115 <img 58 <img
116 draggable="false" 59 draggable="false"
117 ondragstart="return false;" 60 ondragstart="return false;"
118 (contextmenu)="false" 61 (contextmenu)="false"
119 class="d-block ml-auto py-1 icon-30" 62 class="d-block ml-auto py-1 icon-30"
120 src="assets/img/ir.svg"> 63 src="assets/img/ir.svg">
121 </div> 64 </div>
122 </div> 65 </div>
123 </div> 66 </div>
124 </div> 67 </div>
125 </div> 68 </div>
126 </div> 69 </div>
127 </div> 70 </div>
128 <!-- BOTON VER MAS --> 71 <!-- BOTON VER MAS -->
129 <div class="row mx-0"> 72 <div class="row mx-0">
130 <div 73 <div
131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 74 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
132 class="col-12 px-0 mb-2"> 75 class="col-12 px-0 mb-2">
133 <button 76 <button
134 (click)="increaseShow()" 77 (click)="increaseShow()"
135 class="btn btn-block btn-outline-primary"> 78 class="btn btn-block btn-outline-primary">
136 Ver Más 79 Ver Más
137 </button> 80 </button>
138 </div> 81 </div>
139 </div> 82 </div>
140 </div> 83 </div>
141 </div> 84 </div>
142 </div> 85 </div>
143 </div> 86 </div>
144 <!-- FOOTER CARRITO DE COMPRAS --> 87 <!-- FOOTER CARRITO DE COMPRAS -->
145 <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">
146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 89 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
147 [ngClass]="boxCarrito.classList.contains('media-pantalla') 90 [ngClass]="boxCarrito.classList.contains('media-pantalla')
148 ? 'col-8' : 'col-12'" id="boxCarrito"> 91 ? 'col-8' : 'col-12'" id="boxCarrito">
149 <!-- CABECERA --> 92 <!-- CABECERA -->
150 <div class="row mx-0 h-15 border-bottom border-primary"> 93 <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> 94 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
152 </div> 95 </div>
153 <!-- CUERPO --> 96 <!-- CUERPO -->
154 <div class="row h-85 mx-0 justify-content-around"> 97 <div class="row h-85 mx-0 justify-content-around">
155 <!-- BOTON SCROLL IZQUIERDA --> 98 <!-- BOTON SCROLL IZQUIERDA -->
156 <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">
157 <img 100 <img
158 draggable="false" 101 draggable="false"
159 ondragstart="return false;" 102 ondragstart="return false;"
160 (contextmenu)="false" 103 (contextmenu)="false"
161 class="icon-30 rotate-180-neg" 104 class="icon-30 rotate-180-neg"
162 src="assets/img/ir-fondo-color.svg" 105 src="assets/img/ir-fondo-color.svg"
163 (mousedown)="scrollX(templateCarrito, -100)" 106 (mousedown)="scrollX(templateCarrito, -100)"
164 (mouseup)="mouseup()" 107 (mouseup)="mouseup()"
165 (mouseleave)="mouseup()"> 108 (mouseleave)="mouseup()">
166 </div> 109 </div>
167 <!-- CARRITO --> 110 <!-- CARRITO -->
168 <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">
169 <div 112 <div
170 #templateCarrito 113 #templateCarrito
171 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"
172 (scroll)="scrollEvent($event)"> 115 (scroll)="scrollEvent($event)">
173 <!-- ARTICULOS --> 116 <!-- ARTICULOS -->
174 <div 117 <div
175 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"
176 *ngFor="let articulo of articuloService.carrito; let i = index;" 119 *ngFor="let articulo of articuloService.carrito; let i = index;"
177 @EnterLeave> 120 @EnterLeave>
178 <img 121 <img
179 class="btn-effect icon-20 mr-2 position-absolute right-0" 122 class="btn-effect icon-20 mr-2 position-absolute right-0"
180 src="assets/img/icono-cancelar-color.svg" 123 src="assets/img/icono-cancelar-color.svg"
181 (click)="deleteArticulo(i)"> 124 (click)="deleteArticulo(i)">
182 <img 125 <img
183 draggable="false" 126 draggable="false"
184 ondragstart="return false;" 127 ondragstart="return false;"
185 (contextmenu)="false" 128 (contextmenu)="false"
186 class="d-block img-fluid p-2 mx-auto rounded" 129 class="d-block img-fluid p-2 mx-auto rounded"
187 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 130 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
188 onerror="this.src='assets/img/image-not-found.jpg'"> 131 onerror="this.src='assets/img/image-not-found.jpg'">
189 <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">
190 <small>{{articulo.DetArt}}</small> 133 <small>{{articulo.DetArt}}</small>
191 </p> 134 </p>
192 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 135 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
193 </div> 136 </div>
194 <!-- MENSAJE DE ADVERTENCIA --> 137 <!-- MENSAJE DE ADVERTENCIA -->
195 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 138 <div *ngIf="!articuloService.carrito.length" class="col h-100">
196 <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>
197 </div> 140 </div>
198 </div> 141 </div>
199 </div> 142 </div>
200 <!-- BOTON SCROLL DERECHA --> 143 <!-- BOTON SCROLL DERECHA -->
201 <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">
202 <img 145 <img
203 draggable="false" 146 draggable="false"
204 ondragstart="return false;" 147 ondragstart="return false;"
205 (contextmenu)="false" 148 (contextmenu)="false"
206 class="icon-30" 149 class="icon-30"
207 src="assets/img/ir-fondo-color.svg" 150 src="assets/img/ir-fondo-color.svg"
208 (mousedown)="scrollX(templateCarrito, 100)" 151 (mousedown)="scrollX(templateCarrito, 100)"
209 (mouseup)="mouseup()" 152 (mouseup)="mouseup()"
210 (mouseleave)="mouseup()"> 153 (mouseleave)="mouseup()">
211 </div> 154 </div>
212 </div> 155 </div>
213 </div> 156 </div>
214 <!-- TOTAL--> 157 <!-- TOTAL-->
215 <div 158 <div
216 class="col-auto mt-2 ml-auto h-20"> 159 class="col-auto mt-2 ml-auto h-20">
217 <div class="row mx-0"> 160 <div class="row mx-0">
218 <div class="col-auto align-self-center text-primary">TOTAL</div> 161 <div class="col-auto align-self-center text-primary">TOTAL</div>
219 <div class="col-auto bg-primary badge-pill"> 162 <div class="col-auto bg-primary badge-pill">
220 <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>
221 </div> 164 </div>
222 </div> 165 </div>
223 </div> 166 </div>
224 167
225 <!-- VER CARRITO --> 168 <!-- VER CARRITO -->
226 <div 169 <div
227 class="col-auto px-0 mt-2 h-20" 170 class="col-auto px-0 mt-2 h-20"
228 *ngIf="articuloService.carrito.length" 171 *ngIf="articuloService.carrito.length"
229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 172 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
230 <div 173 <div
231 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"
232 [routerLink]="['/carrito']"> 175 [routerLink]="['/carrito']">
233 <div class="row mx-0 bg-light"> 176 <div class="row mx-0 bg-light">
234 <div class="col-auto p-0 bg-primary"> 177 <div class="col-auto p-0 bg-primary">
235 <img 178 <img
236 draggable="false" 179 draggable="false"
237 ondragstart="return false;" 180 ondragstart="return false;"
238 (contextmenu)="false" 181 (contextmenu)="false"
239 class="p-2 icon-40" 182 class="p-2 icon-40"
240 src="assets/img/carrito.svg"> 183 src="assets/img/carrito.svg">
241 </div> 184 </div>
242 <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>
243 </div> 186 </div>
244 </div> 187 </div>
245 </div> 188 </div>
246 189
247 </div> 190 </div>
248 </div> 191 </div>
249 192
250 </div> 193 </div>
251 194
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 879d5e4
1 $primary: #aa006b; 1 #content.media-pantalla,
2 2 #boxCarrito.media-pantalla {
3 .box-categorias {
4 height: calc(100% - 100px) !important;
5 }
6
7 .active {
8 background-color: white;
9 border-bottom: 3px solid $primary !important;
10 border-top: 3px solid $primary !important;
11 border-left: 3px solid $primary !important;
12 border-right: 3px solid $primary !important;
13 }
14
15 .border-bottom-effect {
16 border: none;
17 position: relative;
18 &:hover {
19 border: none;
20 }
21 &::after {
22 content: "";
23 position: absolute;
24 width: 0px;
25 height: 3px;
26 left: 50%;
27 bottom: 0;
28 background-color: $primary;
29 transition: all ease-in-out 0.2s;
30 }
31 &:hover::after {
32 width: 100%;
33 left: 0;
34 }
35 }
36
37 .card {
38 border: none;
39 }
40
41 .line-height-sm {
42 line-height: 1.2;
43 }
44
45 #content.media-pantalla,#boxCarrito.media-pantalla {
46 max-height: 60% !important; 3 max-height: 60% !important;
47 } 4 }
48
49 .cat-content.media-pantalla {
50 margin: 0.5rem 0.7rem !important;
51 height: 76% !important;
52 }
53
54 .cat-box.media-pantalla{
55 height: calc(100% - 85px) !important;
56 }
57
58 .cat-btn.media-pantalla {
59 height: 7% !important;
60 }
61 5
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 879d5e4
1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, 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'; 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 import { trigger, state, style, transition, animate } from '@angular/animations';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
14 15
15 @Component({ 16 @Component({
16 selector: 'app-seleccion-articulos', 17 selector: 'app-seleccion-articulos',
17 templateUrl: './seleccion-articulos.component.html', 18 templateUrl: './seleccion-articulos.component.html',
18 styleUrls: ['./seleccion-articulos.component.scss'], 19 styleUrls: ['./seleccion-articulos.component.scss'],
19 animations: [ 20 animations: [
20 trigger('EnterLeave', [ 21 trigger('EnterLeave', [
21 state('flyIn', style({ transform: 'translateY(0)' })), 22 state('flyIn', style({ transform: 'translateY(0)' })),
22 transition(':enter', [ 23 transition(':enter', [
23 style({ transform: 'translateY(-100%)' }), 24 style({ transform: 'translateY(-100%)' }),
24 animate('0.5s ease-in') 25 animate('0.5s ease-in')
25 ]), 26 ]),
26 transition(':leave', [ 27 transition(':leave', [
27 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' })) 28 animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
28 ]) 29 ])
29 ]) 30 ])
30 ] 31 ]
31 }) 32 })
32 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 33 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
33 showSpinner = true; 34 showSpinner = true;
34 timeoutHandler: any; 35 timeoutHandler: any;
35 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 36 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
36 articulos: IArticulo[] = []; 37 articulos: IArticulo[] = [];
37 auxArticulos: IArticulo[] = []; 38 auxArticulos: IArticulo[] = [];
38 showQuantity = 100; 39 showQuantity = 100;
39 queMostrar = 'todos';
40 categoriaActive = null;
41 categorias: ICategoria[] = [];
42 searchTerm = ''; 40 searchTerm = '';
43 ordenandoByVendidos = true; 41 ordenandoByVendidos = true;
44 allActive = true;
45 modalRef: BsModalRef; 42 modalRef: BsModalRef;
46 total = 0; 43 total = 0;
44 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
47 45
48 constructor( 46 constructor(
49 public articuloService: ArticuloService, 47 public articuloService: ArticuloService,
50 private categoriaService: CategoriaService, 48 private categoriaService: CategoriaService,
51 private sinonimoService: SinonimoService, 49 private sinonimoService: SinonimoService,
52 private modalService: BsModalService, 50 private modalService: BsModalService,
53 private inactiveScreen: InactiveScreenService, 51 private inactiveScreen: InactiveScreenService,
54 ) { } 52 ) { }
55 53
56 ngOnInit() { 54 ngOnInit() { }
57 this.getCategorias(); 55
56 ngAfterViewInit(): void {
57 this.filtroCategorias.getCategorias();
58 this.mediaPantalla(); 58 this.mediaPantalla();
59 } 59 }
60 60
61 ngOnDestroy() { 61 ngOnDestroy() {
62 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 62 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
63 this.modalService.hide(i); 63 this.modalService.hide(i);
64 } 64 }
65 } 65 }
66 66
67 getCategorias() {
68 this.categoriaService.getAll()
69 .subscribe((categorias: ICategoria[]) => {
70 switch (this.queMostrar) {
71 case 'todos':
72 this.categorias = categorias;
73 this.categoriaActive = 0;
74 break;
75 case 'promociones':
76 this.categorias = categorias;
77 this.categoriaActive = 19;
78 break;
79 case 'ordenar':
80 this.categorias = categorias.filter((categoria: ICategoria) => {
81 return categoria.ES_PEDIDO;
82 });
83 this.categoriaActive = 4;
84 break;
85 default:
86 this.categorias = categorias;
87 this.categoriaActive = 0;
88 break;
89 }
90 !localStorage.getItem('articulos') ?
91 this.getProductos() :
92 this.setProductos();
93 });
94 }
95
96 getProductos() { 67 getProductos() {
97 this.articuloService.getAll() 68 this.articuloService.getAll()
98 .subscribe((result: IArticulo[]) => { 69 .subscribe((result: IArticulo[]) => {
99 this.articuloService.setArticulosSinImagen(result); 70 this.articuloService.setArticulosSinImagen(result);
100 if (this.queMostrar === 'ordenar') { 71 if (this.filtroCategorias.queMostrar === 'ordenar') {
101 this.categorias.forEach((categoria: ICategoria) => { 72 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
102 const tempArticulos = result.filter((articulo: IArticulo) => { 73 const tempArticulos = result.filter((articulo: IArticulo) => {
103 return articulo.categoria_selfservice === categoria.id; 74 return articulo.categoria_selfservice === categoria.id;
104 }); 75 });
105 result = tempArticulos; 76 result = tempArticulos;
106 }); 77 });
107 } 78 }
108 localStorage.setItem('articulos', JSON.stringify(result)); 79 localStorage.setItem('articulos', JSON.stringify(result));
109 this.setProductos(); 80 this.setProductos();
110 }, (error) => { 81 }, (error) => {
111 this.showSpinner = false; 82 this.showSpinner = false;
112 console.error(error); 83 console.error(error);
113 }); 84 });
114 } 85 }
115 86
116 setProductos() { 87 setProductos() {
117 this.articulos = JSON.parse(localStorage.getItem('articulos')); 88 this.articulos = JSON.parse(localStorage.getItem('articulos'));
118 this.filterItems(); 89 this.filterItems();
119 } 90 }
120 91
121 filterItems() { 92 filterItems() {
122 if (this.categoriaActive === 0) { 93 if (this.filtroCategorias.categoriaActive === 0) {
123 this.auxArticulos = this.articulos; 94 this.auxArticulos = this.articulos;
124 return; 95 return;
125 } 96 }
126 this.auxArticulos = this.articulos.filter(x => { 97 this.auxArticulos = this.articulos.filter(x => {
127 return x.categoria_selfservice === this.categoriaActive; 98 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
128 }); 99 });
129 this.ordenar(); 100 this.ordenar();
130 } 101 }
131 102
132 ordenar() { 103 ordenar() {
133 if (this.ordenandoByVendidos) { 104 if (this.ordenandoByVendidos) {
134 this.auxArticulos.sort((a, b) => { 105 this.auxArticulos.sort((a, b) => {
135 return b.cantidadVendida - a.cantidadVendida; 106 return b.cantidadVendida - a.cantidadVendida;
136 }); 107 });
137 } 108 }
138 } 109 }
139 110
140 selectCategoria(index: number, idCategoria?: number) {
141 if (this.categoriaActive === idCategoria) return;
142 this.categoriaActive = idCategoria;
143 this.allActive = idCategoria === 0 ? true : false;
144 this.categorias.forEach((categoria, i) => {
145 categoria.selected = index === i ? true : false;
146 });
147 this.filterItems();
148 }
149
150 selectArticulo(articulo: IArticulo) { 111 selectArticulo(articulo: IArticulo) {
151 this.getByID(articulo.id); 112 this.getByID(articulo.id);
152 } 113 }
153 114
154 getByID(id: number) { 115 getByID(id: number) {
155 this.articuloService.getById(id) 116 this.articuloService.getById(id)
156 .subscribe((res: IArticulo) => { 117 .subscribe((res: IArticulo) => {
157 if (res.FPP) { 118 if (res.FPP) {
158 this.openModalPromos(res); 119 this.openModalPromos(res);
159 } else { 120 } else {
160 this.getSinonimos(res); 121 this.getSinonimos(res);
161 } 122 }
162 }, err => console.error(err)); 123 }, err => console.error(err));
163 } 124 }
164 125
165 getSinonimos(articulo: IArticulo) { 126 getSinonimos(articulo: IArticulo) {
166 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 127 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
167 .subscribe((res: ISinonimo[]) => { 128 .subscribe((res: ISinonimo[]) => {
168 if (res.length) { 129 if (res.length) {
169 this.openModalSinonimos(res, articulo); 130 this.openModalSinonimos(res, articulo);
170 } else { 131 } else {
171 this.articuloService.setArticulo(articulo); 132 this.articuloService.setArticulo(articulo);
172 } 133 }
173 }); 134 });
174 } 135 }
175 136
176 openModalPromos(articulo: IArticulo) { 137 openModalPromos(articulo: IArticulo) {
177 this.modalRef = this.modalService.show(PromocionComponent, { 138 this.modalRef = this.modalService.show(PromocionComponent, {
178 initialState: { articulosPromo: [articulo] }, 139 initialState: { articulosPromo: [articulo] },
179 class: 'modal-promo modal-dialog-centered' 140 class: 'modal-promo modal-dialog-centered'
180 }); 141 });
181 } 142 }
182 143
183 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 144 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
184 this.modalRef = this.modalService.show(SinonimoComponent, { 145 this.modalRef = this.modalService.show(SinonimoComponent, {
185 initialState: { sinonimos: sinonimosData }, 146 initialState: { sinonimos: sinonimosData },
186 class: 'modal-promo modal-dialog-centered' 147 class: 'modal-promo modal-dialog-centered'
187 }); 148 });
188 149
189 this.modalRef.content.onClose 150 this.modalRef.content.onClose
190 .subscribe((res: any) => { 151 .subscribe((res: any) => {
191 for (const a of articulo.productos) { 152 for (const a of articulo.productos) {
192 if (a.idSinonimo === res.ID_SIN) { 153 if (a.idSinonimo === res.ID_SIN) {
193 a.CODA = res.articulo.CodArt; 154 a.CODA = res.articulo.CodArt;
194 a.CodArt = res.articulo.CodArt; 155 a.CodArt = res.articulo.CodArt;
195 a.SECA = res.articulo.CodSec; 156 a.SECA = res.articulo.CodSec;
196 a.CodSec = res.articulo.CodSec; 157 a.CodSec = res.articulo.CodSec;
197 a.PreVen = res.articulo.PreVen; 158 a.PreVen = res.articulo.PreVen;
198 a.id = res.articulo.id; 159 a.id = res.articulo.id;
199 a.DET_LAR = res.articulo.DET_LAR; 160 a.DET_LAR = res.articulo.DET_LAR;
200 a.DetArt = res.articulo.DetArt; 161 a.DetArt = res.articulo.DetArt;
201 } 162 }
202 } 163 }
203 this.articuloService.setArticulo(articulo); 164 this.articuloService.setArticulo(articulo);
204 }); 165 });
205 } 166 }
206 167
207 deleteArticulo(index: number) { 168 deleteArticulo(index: number) {
208 this.articuloService.deleteArticulo(index); 169 this.articuloService.deleteArticulo(index);
209 } 170 }
210 171
211 substractCant(articulo: IArticulo) {
212 this.articuloService.substractCant(articulo);
213 }
214
215 addCant(articulo: IArticulo) {
216 this.articuloService.addCant(articulo);
217 }
218
219 increaseShow() { 172 increaseShow() {
220 this.showQuantity += 100; 173 this.showQuantity += 100;
221 } 174 }
222 175
223 @HostListener('scroll', ['$event']) 176 @HostListener('scroll', ['$event'])
224 scrollEvent(event: Event) { 177 scrollEvent(event: Event) {
225 clearTimeout(this.inactiveScreen.timerReposo); 178 clearTimeout(this.inactiveScreen.timerReposo);
226 this.inactiveScreen.startTimeOutInactividad(); 179 this.inactiveScreen.startTimeOutInactividad();
227 } 180 }
228 181
229 mouseup() { 182 mouseup() {
230 if (!this.timeoutHandler) return; 183 if (!this.timeoutHandler) return;
231 clearInterval(this.timeoutHandler); 184 clearInterval(this.timeoutHandler);
232 } 185 }
233 186
234 scrollY(el: HTMLElement, value) { 187 scrollY(el: HTMLElement, value) {
235 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 188 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
236 this.timeoutHandler = setInterval(() => { 189 this.timeoutHandler = setInterval(() => {
237 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 190 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
238 }, 500); 191 }, 500);
239 } 192 }
240 193
241 scrollX(el: HTMLElement, value) { 194 scrollX(el: HTMLElement, value) {
242 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 195 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
243 this.timeoutHandler = setInterval(() => { 196 this.timeoutHandler = setInterval(() => {
244 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 197 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
245 }, 500); 198 }, 500);
246 } 199 }
247 200
248 mediaPantalla() { 201 mediaPantalla() {
249 if ($('body').hasClass('media-pantalla')) { 202 if ($('body').hasClass('media-pantalla')) {
250 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); 203 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria')
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 879d5e4
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 import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
14 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
14 15
15 @NgModule({ 16 @NgModule({
16 declarations: [ 17 declarations: [
17 SeleccionArticulosComponent, 18 SeleccionArticulosComponent,
18 HeaderPublicidadComponent, 19 HeaderPublicidadComponent,
19 PromocionComponent, 20 PromocionComponent,
20 SinonimoComponent, 21 SinonimoComponent,
21 ConfirmacionComponent, 22 ConfirmacionComponent,
22 ArticuloCantidadComponent, 23 ArticuloCantidadComponent,
24 FiltroCategoriasComponent,
23 ], 25 ],
24 imports: [ 26 imports: [
25 CommonModule, 27 CommonModule,
26 SeleccionArticulosRoutingModule, 28 SeleccionArticulosRoutingModule,
27 FormsModule, 29 FormsModule,
28 ModalModule.forRoot(), 30 ModalModule.forRoot(),
29 CarouselModule.forRoot(), 31 CarouselModule.forRoot(),
30 SharedModule 32 SharedModule
31 ], 33 ],
32 exports: [HeaderPublicidadComponent, ArticuloCantidadComponent], 34 exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
33 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent] 35 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
34 }) 36 })
35 export class SeleccionArticulosModule { } 37 export class SeleccionArticulosModule { }
36 38
src/scss/styles-bootstrap.scss
Diff comments   View file @ 879d5e4
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9 $dark: #61666c; 9 $dark: #61666c;
10 $theme-colors: ( 10 $theme-colors: (
11 primary: $primary, 11 primary: $primary,
12 secondary: $secondary, 12 secondary: $secondary,
13 info: $info, 13 info: $info,
14 light: $light, 14 light: $light,
15 dark: $dark 15 dark: $dark
16 ); 16 );
17 $border-radius: 1.5rem; 17 $border-radius: 1.5rem;
18 $border-radius-lg: 2.5rem; 18 $border-radius-lg: 2.5rem;
19 $border-radius-sm: 0.5rem; 19 $border-radius-sm: 0.5rem;
20 20
21 .custom-modal { 21 .custom-modal {
22 max-width: 90% !important; 22 max-width: 90% !important;
23 & > .modal-content { 23 & > .modal-content {
24 background-color: $primary !important; 24 background-color: $primary !important;
25 color: white; 25 color: white;
26 border: none !important; 26 border: none !important;
27 border-radius: $border-radius !important; 27 border-radius: $border-radius !important;
28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; 28 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
29 } 29 }
30 } 30 }
31 31
32 .carousel-control { 32 .carousel-control {
33 visibility: hidden !important; 33 visibility: hidden !important;
34 } 34 }
35 35
36 .carousel, 36 .carousel,
37 .carousel-inner, 37 .carousel-inner,
38 .carousel-item, 38 .carousel-item,
39 .item { 39 .item {
40 height: 100% !important; 40 height: 100% !important;
41 } 41 }
42 42
43 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { 43 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
44 background-color: $primary !important; 44 background-color: $primary !important;
45 } 45 }
46 46
47 .custom-control-input:checked ~ .custom-control-label::before { 47 .custom-control-input:checked ~ .custom-control-label::before {
48 border-color: $primary !important; 48 border-color: $primary !important;
49 background-color: $primary !important; 49 background-color: $primary !important;
50 } 50 }
51 51
52 .custom-control-input:checked ~ .custom-control-label::before { 52 .custom-control-input:checked ~ .custom-control-label::before {
53 color: #fff; 53 color: #fff;
54 border-color: $primary !important; 54 border-color: $primary !important;
55 background-color: $primary !important; 55 background-color: $primary !important;
56 } 56 }
57 57
58 .modal-promo > div { 58 .modal-promo > div {
59 border: none !important; 59 border: none !important;
60 border-radius: $border-radius; 60 border-radius: $border-radius;
61 margin-left: 10px !important; 61 margin-left: 10px !important;
62 } 62 }
63 63
64 .modal-content.media-pantalla { 64 .modal-content.media-pantalla {
65 margin-top: auto !important; 65 margin-top: auto !important;
66 margin-bottom: 50px !important; 66 margin-bottom: 50px !important;
67 } 67 }
68 68
69 .card {
70 border: none !important;
71 }
72
69 @import "node_modules/bootstrap/scss/bootstrap"; 73 @import "node_modules/bootstrap/scss/bootstrap";
70 74