Commit 10fa6be8684bd0bd52565b56c935d6759eaf10d4

Authored by Luis Suarez
Exists in develop

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

update version
1 { 1 {
2 "name": "autoservicio-axion", 2 "name": "autoservicio-axion",
3 "version": "1.0.0", 3 "version": "1.0.1",
4 "main": "main.js", 4 "main": "main.js",
5 "scripts": { 5 "scripts": {
6 "ng": "ng", 6 "ng": "ng",
7 "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck", 7 "start": "ng serve --port 4206 --host 0.0.0.0 --disableHostCheck",
8 "build": "ng build", 8 "build": "ng build",
9 "build-prod": "ng build --prod", 9 "build-prod": "ng build --prod",
10 "test": "ng test", 10 "test": "ng test",
11 "lint": "ng lint", 11 "lint": "ng lint",
12 "e2e": "ng e2e", 12 "e2e": "ng e2e",
13 "electron": "electron .", 13 "electron": "electron .",
14 "electron-build": "ng build --prod && electron .", 14 "electron-build": "ng build --prod && electron .",
15 "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar --icon=src/favicon.ico" 15 "build-exe": "electron-packager . --platform=win32 --arch=x64 --asar --icon=src/favicon.ico"
16 }, 16 },
17 "private": true, 17 "private": true,
18 "dependencies": { 18 "dependencies": {
19 "@angular/animations": "~8.2.14", 19 "@angular/animations": "~8.2.14",
20 "@angular/common": "~8.2.14", 20 "@angular/common": "~8.2.14",
21 "@angular/compiler": "~8.2.14", 21 "@angular/compiler": "~8.2.14",
22 "@angular/core": "~8.2.14", 22 "@angular/core": "~8.2.14",
23 "@angular/forms": "~8.2.14", 23 "@angular/forms": "~8.2.14",
24 "@angular/platform-browser": "~8.2.14", 24 "@angular/platform-browser": "~8.2.14",
25 "@angular/platform-browser-dynamic": "~8.2.14", 25 "@angular/platform-browser-dynamic": "~8.2.14",
26 "@angular/router": "~8.2.14", 26 "@angular/router": "~8.2.14",
27 "@types/jquery": "^3.3.31", 27 "@types/jquery": "^3.3.31",
28 "bootstrap": "^4.4.1", 28 "bootstrap": "^4.4.1",
29 "electron-debug": "^3.0.1", 29 "electron-debug": "^3.0.1",
30 "hammerjs": "^2.0.8", 30 "hammerjs": "^2.0.8",
31 "jquery": "^3.4.1", 31 "jquery": "^3.4.1",
32 "js-sha256": "^0.9.0", 32 "js-sha256": "^0.9.0",
33 "lodash": "^4.17.15", 33 "lodash": "^4.17.15",
34 "ng-connection-service": "^1.0.4", 34 "ng-connection-service": "^1.0.4",
35 "ngx-bootstrap": "^5.2.0", 35 "ngx-bootstrap": "^5.2.0",
36 "popper.js": "^1.16.0", 36 "popper.js": "^1.16.0",
37 "rxjs": "~6.4.0", 37 "rxjs": "~6.4.0",
38 "tslib": "^1.10.0", 38 "tslib": "^1.10.0",
39 "zone.js": "~0.9.1" 39 "zone.js": "~0.9.1"
40 }, 40 },
41 "devDependencies": { 41 "devDependencies": {
42 "@angular-devkit/build-angular": "~0.803.20", 42 "@angular-devkit/build-angular": "~0.803.20",
43 "@angular/cli": "~8.3.20", 43 "@angular/cli": "~8.3.20",
44 "@angular/compiler-cli": "~8.2.14", 44 "@angular/compiler-cli": "~8.2.14",
45 "@angular/language-service": "~8.2.14", 45 "@angular/language-service": "~8.2.14",
46 "@fortawesome/fontawesome-free": "^5.12.0", 46 "@fortawesome/fontawesome-free": "^5.12.0",
47 "@types/jasmine": "~3.3.8", 47 "@types/jasmine": "~3.3.8",
48 "@types/jasminewd2": "~2.0.3", 48 "@types/jasminewd2": "~2.0.3",
49 "@types/lodash": "^4.14.149", 49 "@types/lodash": "^4.14.149",
50 "@types/node": "~8.9.4", 50 "@types/node": "~8.9.4",
51 "codelyzer": "^5.0.0", 51 "codelyzer": "^5.0.0",
52 "devtron": "^1.4.0", 52 "devtron": "^1.4.0",
53 "electron": "^7.1.11", 53 "electron": "^7.1.11",
54 "jasmine-core": "~3.4.0", 54 "jasmine-core": "~3.4.0",
55 "jasmine-spec-reporter": "~4.2.1", 55 "jasmine-spec-reporter": "~4.2.1",
56 "karma": "~4.1.0", 56 "karma": "~4.1.0",
57 "karma-chrome-launcher": "~2.2.0", 57 "karma-chrome-launcher": "~2.2.0",
58 "karma-coverage-istanbul-reporter": "~2.0.1", 58 "karma-coverage-istanbul-reporter": "~2.0.1",
59 "karma-jasmine": "~2.0.1", 59 "karma-jasmine": "~2.0.1",
60 "karma-jasmine-html-reporter": "^1.4.0", 60 "karma-jasmine-html-reporter": "^1.4.0",
61 "protractor": "~5.4.0", 61 "protractor": "~5.4.0",
62 "ts-node": "~7.0.0", 62 "ts-node": "~7.0.0",
63 "tslint": "~5.15.0", 63 "tslint": "~5.15.0",
64 "typescript": "~3.5.3" 64 "typescript": "~3.5.3"
65 } 65 }
66 } 66 }
67 67
src/app/modules/comanda/comanda.component.html
1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2"> 1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
2 <div class="row pt-5 mt-n5"> 2 <div class="row pt-5 mt-n5">
3 <div class="col-12"> 3 <div class="col-12">
4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> 4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="row flex-fill m-0 scroll-y"> 7 <div class="row flex-fill m-0 scroll-y">
8 <div class="col-12 px-2"> 8 <div class="col-12 px-2">
9 <div class="card-columns h-100 m-1 fade-in disable-user-select"> 9 <div class="card-columns h-100 m-1 fade-in disable-user-select">
10 <div 10 <div
11 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
12 class="card fade-in rounded-xs shadow-sm mt-2" 12 class="card fade-in rounded-xs shadow-sm mt-2"
13 [ngClass]="{ 13 [ngClass]="{
14 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
15 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
16 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
17 }"> 17 }">
18 <div class="card-body p-2"> 18 <div class="card-body p-2">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <img 20 <img
21 src="assets/img/para-llevar-fondo-sombra.png" 21 src="assets/img/para-llevar-fondo-sombra.png"
22 class="w-25 h-25 float-left ml-0 mt-n3" 22 class="w-25 h-25 float-left ml-0 mt-n3"
23 *ngIf="comanda.paraLlevar == true"> 23 *ngIf="comanda.paraLlevar == true">
24 <div></div> 24 <div></div>
25 <!-- NUMERO DE PEDIDO --> 25 <!-- NUMERO DE PEDIDO -->
26 <p class="h1 text-right mr-3"> 26 <p class="h1 text-right mr-3">
27 {{rellenar(comanda.id.toString().slice(0), 3)}} 27 {{rellenar(comanda.id.toString().slice(0), 3)}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div> 30 <div>
31 <!-- PEDIDO A NOMBRE DE --> 31 <!-- PEDIDO A NOMBRE DE -->
32 <p class="text-center m-0"> 32 <p class="text-center m-0">
33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}} 33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
34 </p> 34 </p>
35 <!-- TIMER PEDIDO --> 35 <!-- TIMER PEDIDO -->
36 <div class="d-flex justify-content-between align-items-center mt-2"> 36 <div class="d-flex justify-content-between align-items-center mt-2">
37 <p><i class="fas fa-user-clock text-info"></i></p> 37 <p><i class="fas fa-user-clock text-info"></i></p>
38 <p class="text-center mb-1"> 38 <p class="text-center mb-1">
39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}} 39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
40 </p> 40 </p>
41 <p><i class="far fa-clock fa-spin text-info"></i></p> 41 <p><i class="far fa-clock fa-spin text-info"></i></p>
42 </div> 42 </div>
43 <div *ngFor="let detalle of comanda.detalles"> 43 <div *ngFor="let detalle of comanda.detalles">
44 <div 44 <div
45 class="card-text border-top pt-2 mb-2" 45 class="card-text border-top pt-2 mb-2"
46 [ngClass]=" 46 [ngClass]="
47 { 47 {
48 'border-secondary': comanda.estado === 1, 48 'border-secondary': comanda.estado === 1,
49 'border-light': comanda.estado != 1 49 'border-light': comanda.estado != 1
50 }"> 50 }">
51 <!-- DETALLE Y CANTIDAD --> 51 <!-- DETALLE Y CANTIDAD -->
52 <p> 52 <p>
53 <small>{{detalle.MktDesc ? detalle.MktDesc.toUpperCase() : detalle.DetLar.toUpperCase()}}</small><br> 53 <small>{{detalle.MktDesc ? detalle.MktDesc.toUpperCase() : detalle.DetLar.toUpperCase()}}</small><br>
54 <small>CANT.{{detalle.cantidad}}</small> 54 <small>CANT.{{detalle.cantidad}}</small>
55 </p> 55 </p>
56 <div *ngFor="let componente of detalle.componentes"> 56 <div *ngFor="let componente of detalle.componentes">
57 <p *ngIf="componente.DetArt !== 'Producto ingrediente general'"> 57 <p *ngIf="componente.DetArt !== 'Producto ingrediente general'">
58 <small>{{componente.DetArt.toLowerCase()}}</small> 58 <small>{{componente.MktDesc ? componente.MktDesc.toLowerCase() : componente.DetArt.toLowerCase()}}</small>
59 </p> 59 </p>
60 </div> 60 </div>
61 </div> 61 </div>
62 <blockquote 62 <blockquote
63 *ngIf="detalle.comentario"> 63 *ngIf="detalle.comentario">
64 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p> 64 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p>
65 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p> 65 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p>
66 </blockquote> 66 </blockquote>
67 </div> 67 </div>
68 <!-- BOTONES --> 68 <!-- BOTONES -->
69 <button 69 <button
70 *ngIf="comanda.estado === 1" 70 *ngIf="comanda.estado === 1"
71 class="btn btn-block btn-primary shadow-sm btn-elaborar" 71 class="btn btn-block btn-primary shadow-sm btn-elaborar"
72 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 72 (click)="updateComanda(comanda, 2, 'En elaboracion')">
73 <div class="row justify-content-between"> 73 <div class="row justify-content-between">
74 <div></div> 74 <div></div>
75 <p class="ml-4 text-white">Elaborar</p> 75 <p class="ml-4 text-white">Elaborar</p>
76 <img 76 <img
77 draggable="false" 77 draggable="false"
78 ondragstart="return false;" 78 ondragstart="return false;"
79 (contextmenu)="false" 79 (contextmenu)="false"
80 class="icon-30 mr-2" 80 class="icon-30 mr-2"
81 src="assets/img/ir.svg"> 81 src="assets/img/ir.svg">
82 </div> 82 </div>
83 </button> 83 </button>
84 <button 84 <button
85 *ngIf="comanda.estado === 2" 85 *ngIf="comanda.estado === 2"
86 class="btn btn-block shadow-sm btn-terminar" 86 class="btn btn-block shadow-sm btn-terminar"
87 (click)="updateComanda(comanda, 3, 'Terminado')"> 87 (click)="updateComanda(comanda, 3, 'Terminado')">
88 <div class="row justify-content-between"> 88 <div class="row justify-content-between">
89 <div></div> 89 <div></div>
90 <p class="ml-4">Terminar</p> 90 <p class="ml-4">Terminar</p>
91 <img 91 <img
92 draggable="false" 92 draggable="false"
93 ondragstart="return false;" 93 ondragstart="return false;"
94 (contextmenu)="false" 94 (contextmenu)="false"
95 class="icon-30 mr-2" 95 class="icon-30 mr-2"
96 src="assets/img/flecha-borde-color.svg"> 96 src="assets/img/flecha-borde-color.svg">
97 </div> 97 </div>
98 </button> 98 </button>
99 <button 99 <button
100 *ngIf="comanda.estado === 2" 100 *ngIf="comanda.estado === 2"
101 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" 101 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
102 (click)="updateComanda(comanda, 1, 'Pagado')"> 102 (click)="updateComanda(comanda, 1, 'Pagado')">
103 <div class="row justify-content-between"> 103 <div class="row justify-content-between">
104 <div></div> 104 <div></div>
105 <span class="h6 ml-4 pt-1"><small>Deshacer</small></span> 105 <span class="h6 ml-4 pt-1"><small>Deshacer</small></span>
106 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> 106 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
107 </div> 107 </div>
108 </button> 108 </button>
109 </div> 109 </div>
110 <!-- TIMER DE ELABORACION --> 110 <!-- TIMER DE ELABORACION -->
111 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> 111 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
112 <div *ngIf="comanda.estado !== 1"> 112 <div *ngIf="comanda.estado !== 1">
113 <i class="fa fa-utensils text-info" aria-hidden="true"></i> 113 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
114 </div> 114 </div>
115 <span *ngIf="comanda.estado === 1" class="text-dark"> 115 <span *ngIf="comanda.estado === 1" class="text-dark">
116 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 116 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
117 </span> 117 </span>
118 <span *ngIf="comanda.estado !== 1" class="text-white"> 118 <span *ngIf="comanda.estado !== 1" class="text-white">
119 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 119 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
120 </span> 120 </span>
121 <i class="fas fa-clock fa-spin text-info"></i> 121 <i class="fas fa-clock fa-spin text-info"></i>
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 </div> 128 </div>
129 129
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
1 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core'; 1 import { Component, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
2 import { ICategoria } from 'src/app/interfaces/ICategoria'; 2 import { ICategoria } from 'src/app/interfaces/ICategoria';
3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 3 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
4 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 4 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { DateExtension } from 'src/app/utils/dateExtension';
6 7
7 @Component({ 8 @Component({
8 selector: 'app-filtro-categorias', 9 selector: 'app-filtro-categorias',
9 templateUrl: './filtro-categorias.component.html', 10 templateUrl: './filtro-categorias.component.html',
10 styleUrls: ['./filtro-categorias.component.scss'] 11 styleUrls: ['./filtro-categorias.component.scss']
11 }) 12 })
12 export class FiltroCategoriasComponent implements OnInit { 13 export class FiltroCategoriasComponent implements OnInit {
13 @Output() getProductos = new EventEmitter<any>(); 14 @Output() getProductos = new EventEmitter<any>();
14 @Output() setProductos = new EventEmitter<any>(); 15 @Output() setProductos = new EventEmitter<any>();
15 @Output() filterItems = new EventEmitter<any>(); 16 @Output() filterItems = new EventEmitter<any>();
16 categorias: ICategoria[] = []; 17 categorias: ICategoria[] = [];
17 timeoutHandler: any; 18 timeoutHandler: any;
18 categoriaActive = null; 19 categoriaActive = null;
19 allActive = true; 20 allActive = true;
20 queMostrar = 'todos'; 21 queMostrar = 'todos';
21 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
22 23
23 constructor( 24 constructor(
24 private categoriaService: CategoriaService, 25 private categoriaService: CategoriaService,
25 private inactiveScreen: InactiveScreenService 26 private inactiveScreen: InactiveScreenService
26 ) { } 27 ) { }
27 28
28 ngOnInit() { 29 ngOnInit() {
29 this.mediaPantalla(); 30 this.mediaPantalla();
30 } 31 }
31 32
32 getCategorias() { 33 getCategorias() {
33 this.categoriaService.getAll() 34 this.categoriaService.getAll()
34 .subscribe((categorias: ICategoria[]) => { 35 .subscribe((categorias: ICategoria[]) => {
35 switch (this.queMostrar) { 36 switch (this.queMostrar) {
36 case 'todos': 37 case 'todos':
37 this.categorias = categorias; 38 this.categorias = categorias;
38 this.categoriaActive = 0; 39 this.categoriaActive = 0;
39 break; 40 break;
40 case 'promociones': 41 case 'promociones':
41 this.categorias = categorias; 42 this.categorias = categorias;
42 this.categoriaActive = 19; 43 this.categoriaActive = 19;
43 break; 44 break;
44 case 'ordenar': 45 case 'ordenar':
45 this.categorias = categorias.filter((categoria: ICategoria) => { 46 this.categorias = categorias.filter((categoria: ICategoria) => {
46 return categoria.ES_PEDIDO; 47 return categoria.ES_PEDIDO;
47 }); 48 });
48 this.categoriaActive = 4; 49 this.categoriaActive = 4;
49 break; 50 break;
50 default: 51 default:
51 this.categorias = categorias; 52 this.categorias = categorias;
52 this.categoriaActive = 0; 53 this.categoriaActive = 0;
53 break; 54 break;
54 } 55 }
55 !localStorage.getItem('articulos') ? 56 !localStorage.getItem('articulos') ?
56 this.getProductos.emit() : 57 this.getProductos.emit() :
57 this.setProductos.emit(); 58 this.setProductos.emit();
58 }); 59 });
59 this.mediaPantalla(); 60 this.mediaPantalla();
60 } 61 }
61 62
62 selectCategoria(index: number, idCategoria?: number) { 63 selectCategoria(index: number, idCategoria?: number) {
63 if (this.categoriaActive === idCategoria) return; 64 if (this.categoriaActive === idCategoria) return;
64 this.categoriaActive = idCategoria; 65 this.categoriaActive = idCategoria;
65 this.allActive = idCategoria === 0 ? true : false; 66 this.allActive = idCategoria === 0 ? true : false;
66 this.categorias.forEach((categoria, i) => { 67 this.categorias.forEach((categoria, i) => {
67 categoria.selected = index === i ? true : false; 68 categoria.selected = index === i ? true : false;
68 }); 69 });
69 this.filterItems.emit(); 70 this.filterItems.emit();
70 } 71 }
71 72
72 @HostListener('scroll', ['$event']) 73 @HostListener('scroll', ['$event'])
73 scrollEvent(event: Event) { 74 scrollEvent(event: Event) {
74 clearTimeout(this.inactiveScreen.timerReposo); 75 clearTimeout(this.inactiveScreen.timerReposo);
75 this.inactiveScreen.startTimeOutInactividad(); 76 this.inactiveScreen.startTimeOutInactividad();
76 } 77 }
77 78
78 mouseup() { 79 mouseup() {
79 if (!this.timeoutHandler) return; 80 if (!this.timeoutHandler) return;
80 clearInterval(this.timeoutHandler); 81 clearInterval(this.timeoutHandler);
81 } 82 }
82 83
83 scrollY(el: HTMLElement, value) { 84 scrollY(el: HTMLElement, value) {
84 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 85 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
85 this.timeoutHandler = setInterval(() => { 86 this.timeoutHandler = setInterval(() => {
86 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 87 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
87 }, 500); 88 }, 500);
88 } 89 }
89 90
90 validarFecha(fechaInicioString: string, fechaFinString: string) { 91 validarFecha(fechaInicio: string, fechaFin: string) {
91 const fechaInicio = new Date(fechaInicioString); 92 return DateExtension.ValidateDateRange(fechaInicio, fechaFin);
92 const fechaFin = new Date(fechaFinString);
93 const fechaAux = Date.now();
94 const fechaHoy = new Date(fechaAux);
95 return (fechaHoy >= fechaInicio && fechaHoy <= fechaFin) ? true : false;
96 } 93 }
97 94
98 mediaPantalla() { 95 mediaPantalla() {
99 if ($('body').hasClass('media-pantalla')) { 96 if ($('body').hasClass('media-pantalla')) {
100 $('.cat-content,#cat-content') 97 $('.cat-content,#cat-content')
101 .addClass('media-pantalla') 98 .addClass('media-pantalla')
102 .addBack('media-pantalla'); 99 .addBack('media-pantalla');
103 } 100 }
104 } 101 }
105 } 102 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
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 align-items-end" 5 <div class="row mx-0 align-items-end"
6 [ngClass]="boxCarrito.classList.contains('media-pantalla') 6 [ngClass]="boxCarrito.classList.contains('media-pantalla')
7 ? 'h-68' : 'h-80'"> 7 ? 'h-68' : 'h-80'">
8 <!-- CABECERA --> 8 <!-- CABECERA -->
9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 9 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
10 <div class="col-12 p-2 align-self-center"> 10 <div class="col-12 p-2 align-self-center">
11 <div class="px-3"> 11 <div class="px-3">
12 <p class="h6 text-truncate">SELECCIONร Tรš COMIDA Y/O BEBIDA</p> 12 <p class="h6 text-truncate">SELECCIONร Tรš COMIDA Y/O BEBIDA</p>
13 </div> 13 </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <!-- CUERPO --> 16 <!-- CUERPO -->
17 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 17 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
18 <div class="col-12 h-100 px-0 py-3"> 18 <div class="col-12 h-100 px-0 py-3">
19 <div class="row mx-0 h-100"> 19 <div class="row mx-0 h-100">
20 <app-filtro-categorias 20 <app-filtro-categorias
21 class="col-5 col-sm-3 col-xl-2 h-100" 21 class="col-5 col-sm-3 col-xl-2 h-100"
22 #filtroCategorias 22 #filtroCategorias
23 (getProductos)="getProductos()" 23 (getProductos)="getProductos()"
24 (setProductos)="setProductos()" 24 (setProductos)="setProductos()"
25 (filterItems)="filterItems()"> 25 (filterItems)="filterItems()">
26 </app-filtro-categorias> 26 </app-filtro-categorias>
27 <!-- LISTA DE ARTICULOS --> 27 <!-- LISTA DE ARTICULOS -->
28 <div 28 <div
29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 29 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
30 (scroll)="scrollEvent($event)"> 30 (scroll)="scrollEvent($event)">
31 <!-- SPINNER --> 31 <!-- SPINNER -->
32 <div 32 <div
33 class="d-flex justify-content-center" 33 class="d-flex justify-content-center"
34 *ngIf="loading"> 34 *ngIf="loading">
35 <div class="spinner-border text-primary mt-5" role="status"> 35 <div class="spinner-border text-primary mt-5" role="status">
36 <span class="sr-only">Loading...</span> 36 <span class="sr-only">Loading...</span>
37 </div> 37 </div>
38 </div> 38 </div>
39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 39 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
40 <!-- ARTICULO --> 40 <!-- ARTICULO -->
41 <div 41 <div
42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;" 42 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
43 [hidden]="validarFecha(articulo.FECHA_VIGENCIA_DESDE, articulo.FECHA_VIGENCIA_HASTA)"
43 class="col px-2 my-1 my-md-3 h-auto"> 44 class="col px-2 my-1 my-md-3 h-auto">
44 <div 45 <div
45 class="swing-in-top-fwd btn-effect card h-auto" 46 class="swing-in-top-fwd btn-effect card h-auto"
46 (click)="selectArticulo(articulo)"> 47 (click)="selectArticulo(articulo)">
47 <img 48 <img
48 draggable="false" 49 draggable="false"
49 ondragstart="return false;" 50 ondragstart="return false;"
50 (contextmenu)="false" 51 (contextmenu)="false"
51 *ngIf="articulo.ExiVta < 1" 52 *ngIf="articulo.ExiVta < 1"
52 class="w-50 position-fixed right-0" 53 class="w-50 position-fixed right-0"
53 src="assets/img/sin-stock.svg"> 54 src="assets/img/sin-stock.svg">
54 <img 55 <img
55 draggable="false" 56 draggable="false"
56 ondragstart="return false;" 57 ondragstart="return false;"
57 (contextmenu)="false" 58 (contextmenu)="false"
58 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 59 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
59 onerror="this.src='assets/img/imagen-no-encontrada.jpg'" 60 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
60 class="card-img-top w-100 h-auto h-md-55 rounded-sm"> 61 class="card-img-top w-100 h-auto h-md-55 rounded-sm">
61 <div class="row mx-0 py-1 h-auto justify-content-center"> 62 <div class="row mx-0 py-1 h-auto justify-content-center">
62 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60"> 63 <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
63 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} 64 {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
64 </p> 65 </p>
65 <div class="col-12 px-1 align-self-end h-auto"> 66 <div class="col-12 px-1 align-self-end h-auto">
66 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 67 <div class="row mx-0 justify-content-between bg-primary badge-pill">
67 <div class="col px-0 align-self-center text-white text-right"> 68 <div class="col px-0 align-self-center text-white text-right">
68 {{articulo.PreVen | currency}} 69 {{articulo.PreVen | currency}}
69 </div> 70 </div>
70 <div class="col-5 px-0"> 71 <div class="col-5 px-0">
71 <img 72 <img
72 draggable="false" 73 draggable="false"
73 ondragstart="return false;" 74 ondragstart="return false;"
74 (contextmenu)="false" 75 (contextmenu)="false"
75 class="d-block ml-auto py-1 icon-30" 76 class="d-block ml-auto py-1 icon-30"
76 src="assets/img/ir.svg"> 77 src="assets/img/ir.svg">
77 </div> 78 </div>
78 </div> 79 </div>
79 </div> 80 </div>
80 </div> 81 </div>
81 </div> 82 </div>
82 </div> 83 </div>
83 </div> 84 </div>
84 <!-- BOTON VER MAS --> 85 <!-- BOTON VER MAS -->
85 <div class="row mx-0"> 86 <div class="row mx-0">
86 <div 87 <div
87 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 88 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
88 class="col-12 px-0 mb-2"> 89 class="col-12 px-0 mb-2">
89 <button 90 <button
90 (click)="increaseShow()" 91 (click)="increaseShow()"
91 class="btn btn-block btn-outline-primary"> 92 class="btn btn-block btn-outline-primary">
92 Ver Mรกs 93 Ver Mรกs
93 </button> 94 </button>
94 </div> 95 </div>
95 </div> 96 </div>
96 </div> 97 </div>
97 </div> 98 </div>
98 </div> 99 </div>
99 </div> 100 </div>
100 <!-- FOOTER CARRITO DE COMPRAS --> 101 <!-- FOOTER CARRITO DE COMPRAS -->
101 <div class="row w-90 mx-auto h-auto justify-content-center"> 102 <div class="row w-90 mx-auto h-auto justify-content-center">
102 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 103 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
103 [ngClass]="boxCarrito.classList.contains('media-pantalla') 104 [ngClass]="boxCarrito.classList.contains('media-pantalla')
104 ? 'col-8' : 'col-12'" id="boxCarrito"> 105 ? 'col-8' : 'col-12'" id="boxCarrito">
105 <!-- CABECERA --> 106 <!-- CABECERA -->
106 <div class="row mx-0 h-15 border-bottom border-primary"> 107 <div class="row mx-0 h-15 border-bottom border-primary">
107 <p class="col align-self-center text-truncate"><small>ARTรCULOS EN Tรš CARRITO DE COMPRAS</small></p> 108 <p class="col align-self-center text-truncate"><small>ARTรCULOS EN Tรš CARRITO DE COMPRAS</small></p>
108 </div> 109 </div>
109 <!-- CUERPO --> 110 <!-- CUERPO -->
110 <div class="row h-85 mx-0 justify-content-around"> 111 <div class="row h-85 mx-0 justify-content-around">
111 <!-- BOTON SCROLL IZQUIERDA --> 112 <!-- BOTON SCROLL IZQUIERDA -->
112 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 113 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
113 <img 114 <img
114 draggable="false" 115 draggable="false"
115 ondragstart="return false;" 116 ondragstart="return false;"
116 (contextmenu)="false" 117 (contextmenu)="false"
117 class="icon-30 rotate-180-neg" 118 class="icon-30 rotate-180-neg"
118 src="assets/img/ir-fondo-color.svg" 119 src="assets/img/ir-fondo-color.svg"
119 (mousedown)="scrollX(templateCarrito, -100)" 120 (mousedown)="scrollX(templateCarrito, -100)"
120 (mouseup)="mouseup()" 121 (mouseup)="mouseup()"
121 (mouseleave)="mouseup()"> 122 (mouseleave)="mouseup()">
122 </div> 123 </div>
123 <!-- CARRITO --> 124 <!-- CARRITO -->
124 <div class="col-6 col-sm-8 col-lg-10 h-100"> 125 <div class="col-6 col-sm-8 col-lg-10 h-100">
125 <div 126 <div
126 #templateCarrito 127 #templateCarrito
127 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 128 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
128 (scroll)="scrollEvent($event)"> 129 (scroll)="scrollEvent($event)">
129 <!-- ARTICULOS --> 130 <!-- ARTICULOS -->
130 <div 131 <div
131 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 132 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
132 *ngFor="let articulo of articuloService.carrito; let i = index;" 133 *ngFor="let articulo of articuloService.carrito; let i = index;"
133 @EnterLeaveY> 134 @EnterLeaveY>
134 <img 135 <img
135 class="btn-effect icon-20 mr-2 position-absolute right-0" 136 class="btn-effect icon-20 mr-2 position-absolute right-0"
136 src="assets/img/icono-cancelar-color.svg" 137 src="assets/img/icono-cancelar-color.svg"
137 (click)="deleteArticulo(i)"> 138 (click)="deleteArticulo(i)">
138 <img 139 <img
139 draggable="false" 140 draggable="false"
140 ondragstart="return false;" 141 ondragstart="return false;"
141 (contextmenu)="false" 142 (contextmenu)="false"
142 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto" 143 class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
143 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 144 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
144 onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> 145 onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
145 <p class="d-block mt-auto text-center text-primary text-truncate"> 146 <p class="d-block mt-auto text-center text-primary text-truncate">
146 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> 147 <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
147 </p> 148 </p>
148 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> 149 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
149 </div> 150 </div>
150 <!-- MENSAJE DE ADVERTENCIA --> 151 <!-- MENSAJE DE ADVERTENCIA -->
151 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 152 <div *ngIf="!articuloService.carrito.length" class="col h-100">
152 <p class="text-center py-5">No hay artรญculos en el carrito</p> 153 <p class="text-center py-5">No hay artรญculos en el carrito</p>
153 </div> 154 </div>
154 </div> 155 </div>
155 </div> 156 </div>
156 <!-- BOTON SCROLL DERECHA --> 157 <!-- BOTON SCROLL DERECHA -->
157 <div *ngIf="articuloService.carrito.length" 158 <div *ngIf="articuloService.carrito.length"
158 class="col-auto btn-effect h-20 align-self-center d-contents"> 159 class="col-auto btn-effect h-20 align-self-center d-contents">
159 <img 160 <img
160 draggable="false" 161 draggable="false"
161 ondragstart="return false;" 162 ondragstart="return false;"
162 (contextmenu)="false" 163 (contextmenu)="false"
163 class="icon-30" 164 class="icon-30"
164 src="assets/img/ir-fondo-color.svg" 165 src="assets/img/ir-fondo-color.svg"
165 (mousedown)="scrollX(templateCarrito, 100)" 166 (mousedown)="scrollX(templateCarrito, 100)"
166 (mouseup)="mouseup()" 167 (mouseup)="mouseup()"
167 (mouseleave)="mouseup()"> 168 (mouseleave)="mouseup()">
168 </div> 169 </div>
169 </div> 170 </div>
170 </div> 171 </div>
171 <!-- TOTAL--> 172 <!-- TOTAL-->
172 <div 173 <div
173 class="col-auto mt-2 ml-auto h-20"> 174 class="col-auto mt-2 ml-auto h-20">
174 <div class="row mx-0"> 175 <div class="row mx-0">
175 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div> 176 <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
176 <div class="col-auto align-self-center bg-primary badge-pill"> 177 <div class="col-auto align-self-center bg-primary badge-pill">
177 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p> 178 <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p>
178 </div> 179 </div>
179 </div> 180 </div>
180 </div> 181 </div>
181 182
182 <!-- VER CARRITO --> 183 <!-- VER CARRITO -->
183 <div 184 <div
184 class="col-auto px-0 h-20" 185 class="col-auto px-0 h-20"
185 *ngIf="articuloService.carrito.length" 186 *ngIf="articuloService.carrito.length"
186 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'"> 187 [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'">
187 <div 188 <div
188 class="btn-effect col-auto px-0 align-self-center bg-white" 189 class="btn-effect col-auto px-0 align-self-center bg-white"
189 [routerLink]="['/carrito']"> 190 [routerLink]="['/carrito']">
190 <div class="row mx-0 bg-light"> 191 <div class="row mx-0 bg-light">
191 <div class="col-auto p-0 bg-primary"> 192 <div class="col-auto p-0 bg-primary">
192 <img 193 <img
193 draggable="false" 194 draggable="false"
194 ondragstart="return false;" 195 ondragstart="return false;"
195 (contextmenu)="false" 196 (contextmenu)="false"
196 class="p-2 icon-40" 197 class="p-2 icon-40"
197 src="assets/img/carrito.svg"> 198 src="assets/img/carrito.svg">
198 </div> 199 </div>
199 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 200 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
200 </div> 201 </div>
201 </div> 202 </div>
202 </div> 203 </div>
203 204
204 </div> 205 </div>
205 </div> 206 </div>
206 207
207 </div> 208 </div>
208 209
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
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 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 10 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 11 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; 12 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13 import * as _ from 'lodash'; 13 import * as _ from 'lodash';
14 import { ANIMATIONS } from 'src/app/utils/animations'; 14 import { ANIMATIONS } from 'src/app/utils/animations';
15 import { NoStockComponent } from './no-stock/no-stock.component'; 15 import { NoStockComponent } from './no-stock/no-stock.component';
16 import { DateExtension } from 'src/app/utils/dateExtension';
16 17
17 @Component({ 18 @Component({
18 selector: 'app-seleccion-articulos', 19 selector: 'app-seleccion-articulos',
19 templateUrl: './seleccion-articulos.component.html', 20 templateUrl: './seleccion-articulos.component.html',
20 styleUrls: ['./seleccion-articulos.component.scss'], 21 styleUrls: ['./seleccion-articulos.component.scss'],
21 animations: [ANIMATIONS.EnterLeaveY] 22 animations: [ANIMATIONS.EnterLeaveY]
22 }) 23 })
23 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { 24 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
24 loading = true; 25 loading = true;
25 timeoutHandler: any; 26 timeoutHandler: any;
26 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`; 27 urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
27 articulos: IArticulo[] = []; 28 articulos: IArticulo[] = [];
28 auxArticulos: IArticulo[] = []; 29 auxArticulos: IArticulo[] = [];
29 showQuantity = 100; 30 showQuantity = 100;
30 searchTerm = ''; 31 searchTerm = '';
31 ordenandoByVendidos = true; 32 ordenandoByVendidos = true;
32 modalRef: BsModalRef; 33 modalRef: BsModalRef;
33 total = 0; 34 total = 0;
34 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; 35 @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
35 36
36 constructor( 37 constructor(
37 public articuloService: ArticuloService, 38 public articuloService: ArticuloService,
38 private sinonimoService: SinonimoService, 39 private sinonimoService: SinonimoService,
39 private modalService: BsModalService, 40 private modalService: BsModalService,
40 private inactiveScreen: InactiveScreenService, 41 private inactiveScreen: InactiveScreenService,
41 ) { } 42 ) { }
42 43
43 ngOnInit() { } 44 ngOnInit() { }
44 45
45 ngAfterViewInit(): void { 46 ngAfterViewInit(): void {
46 this.filtroCategorias.getCategorias(); 47 this.filtroCategorias.getCategorias();
47 this.mediaPantalla(); 48 this.mediaPantalla();
48 } 49 }
49 50
50 ngOnDestroy() { 51 ngOnDestroy() {
51 for (let i = 1; i <= this.modalService.getModalsCount(); i++) { 52 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
52 this.modalService.hide(i); 53 this.modalService.hide(i);
53 } 54 }
54 } 55 }
55 56
56 getProductos() { 57 getProductos() {
57 this.articuloService.getAll() 58 this.articuloService.getAll()
58 .subscribe((result: IArticulo[]) => { 59 .subscribe((result: IArticulo[]) => {
59 this.articuloService.setArticulosSinImagen(result); 60 this.articuloService.setArticulosSinImagen(result);
60 if (this.filtroCategorias.queMostrar === 'ordenar') { 61 if (this.filtroCategorias.queMostrar === 'ordenar') {
61 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { 62 this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
62 const tempArticulos = result.filter((articulo: IArticulo) => { 63 const tempArticulos = result.filter((articulo: IArticulo) => {
63 return articulo.categoria_selfservice === categoria.id; 64 return articulo.categoria_selfservice === categoria.id;
64 }); 65 });
65 result = tempArticulos; 66 result = tempArticulos;
66 }); 67 });
67 } 68 }
68 localStorage.setItem('articulos', JSON.stringify(result)); 69 localStorage.setItem('articulos', JSON.stringify(result));
69 this.setProductos(); 70 this.setProductos();
70 }, (error) => { 71 }, (error) => {
71 console.error(error); 72 console.error(error);
72 }); 73 });
73 } 74 }
74 75
75 setProductos() { 76 setProductos() {
76 this.articulos = JSON.parse(localStorage.getItem('articulos')); 77 this.articulos = JSON.parse(localStorage.getItem('articulos'));
77 this.filterItems(); 78 this.filterItems();
78 this.loading = false; 79 this.loading = false;
79 } 80 }
80 81
81 filterItems() { 82 filterItems() {
82 if (this.filtroCategorias.categoriaActive === 0) { 83 if (this.filtroCategorias.categoriaActive === 0) {
83 this.auxArticulos = this.articulos; 84 this.auxArticulos = this.articulos;
84 return; 85 return;
85 } 86 }
86 this.auxArticulos = this.articulos.filter(x => { 87 this.auxArticulos = this.articulos.filter(x => {
87 return x.categoria_selfservice === this.filtroCategorias.categoriaActive; 88 return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
88 }); 89 });
89 this.ordenar(); 90 this.ordenar();
90 } 91 }
91 92
92 ordenar() { 93 ordenar() {
93 if (this.ordenandoByVendidos) { 94 if (this.ordenandoByVendidos) {
94 this.auxArticulos.sort((a, b) => { 95 this.auxArticulos.sort((a, b) => {
95 return b.cantidadVendida - a.cantidadVendida; 96 return b.cantidadVendida - a.cantidadVendida;
96 }); 97 });
97 } 98 }
98 } 99 }
99 100
100 selectArticulo(articulo: IArticulo) { 101 selectArticulo(articulo: IArticulo) {
101 if (articulo.ExiVta < 1) { 102 if (articulo.ExiVta < 1) {
102 if (this.modalRef) return; 103 if (this.modalRef) return;
103 this.modalRef = this.modalService.show(NoStockComponent, { 104 this.modalRef = this.modalService.show(NoStockComponent, {
104 class: 'modal-dialog-centered', 105 class: 'modal-dialog-centered',
105 backdrop: false, 106 backdrop: false,
106 ignoreBackdropClick: true, 107 ignoreBackdropClick: true,
107 }); 108 });
108 this.modalRef.content.onClose 109 this.modalRef.content.onClose
109 .subscribe(() => this.modalRef = null); 110 .subscribe(() => this.modalRef = null);
110 } else { 111 } else {
111 this.getByID(articulo.id); 112 this.getByID(articulo.id);
112 } 113 }
113 } 114 }
114 115
115 getByID(id: number) { 116 getByID(id: number) {
116 this.articuloService.getById(id) 117 this.articuloService.getById(id)
117 .subscribe((res: IArticulo) => { 118 .subscribe((res: IArticulo) => {
118 if (res.FPP) { 119 if (res.FPP) {
119 this.openModalPromos(res); 120 this.openModalPromos(res);
120 } else { 121 } else {
121 this.getSinonimos(res); 122 this.getSinonimos(res);
122 } 123 }
123 }, err => console.error(err)); 124 }, err => console.error(err));
124 } 125 }
125 126
126 getSinonimos(articulo: IArticulo) { 127 getSinonimos(articulo: IArticulo) {
127 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 128 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
128 .subscribe((res: any[]) => { 129 .subscribe((res: any[]) => {
129 if (res.length) { 130 if (res.length) {
130 const sinonimos = []; 131 const sinonimos = [];
131 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); 132 const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
132 Object.keys(gruposArticulos).forEach((key, i) => { 133 Object.keys(gruposArticulos).forEach((key, i) => {
133 sinonimos.push({ productos: gruposArticulos[key], }); 134 sinonimos.push({ productos: gruposArticulos[key], });
134 for (const a of articulo.productos) { 135 for (const a of articulo.productos) {
135 if (key === a.idSinonimo.toString()) { 136 if (key === a.idSinonimo.toString()) {
136 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad; 137 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad;
137 continue; 138 continue;
138 } 139 }
139 } 140 }
140 }); 141 });
141 res = sinonimos; 142 res = sinonimos;
142 this.openModalSinonimos(res, articulo); 143 this.openModalSinonimos(res, articulo);
143 } else { 144 } else {
144 this.articuloService.setArticulo(articulo); 145 this.articuloService.setArticulo(articulo);
145 } 146 }
146 }); 147 });
147 } 148 }
148 149
149 openModalPromos(articulo: IArticulo) { 150 openModalPromos(articulo: IArticulo) {
150 if (this.modalRef) return; 151 if (this.modalRef) return;
151 this.articuloService.setArticulosSinImagen([articulo]); 152 this.articuloService.setArticulosSinImagen([articulo]);
152 this.modalRef = this.modalService.show(PromocionComponent, { 153 this.modalRef = this.modalService.show(PromocionComponent, {
153 initialState: { articulosPromo: [articulo] }, 154 initialState: { articulosPromo: [articulo] },
154 class: 'modal-dialog-centered', 155 class: 'modal-dialog-centered',
155 ignoreBackdropClick: true, 156 ignoreBackdropClick: true,
156 }); 157 });
157 this.modalRef.content.onClose 158 this.modalRef.content.onClose
158 .subscribe(() => this.modalRef = null); 159 .subscribe(() => this.modalRef = null);
159 this.mediaPantalla(); 160 this.mediaPantalla();
160 } 161 }
161 162
162 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 163 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
163 if (this.modalRef) return; 164 if (this.modalRef) return;
164 this.modalRef = this.modalService.show(SinonimoComponent, { 165 this.modalRef = this.modalService.show(SinonimoComponent, {
165 initialState: { 166 initialState: {
166 sinonimos: sinonimosData, 167 sinonimos: sinonimosData,
167 articulo 168 articulo
168 }, 169 },
169 class: 'modal-dialog-centered', 170 class: 'modal-dialog-centered',
170 ignoreBackdropClick: true, 171 ignoreBackdropClick: true,
171 }); 172 });
172 173
173 this.modalRef.content.onClose 174 this.modalRef.content.onClose
174 .subscribe((res: any) => { 175 .subscribe((res: any) => {
175 this.modalRef = null; 176 this.modalRef = null;
176 if (!res) return; 177 if (!res) return;
177 articulo.productos = res.articulos; 178 articulo.productos = res.articulos;
178 this.articuloService.setArticulo(articulo); 179 this.articuloService.setArticulo(articulo);
179 }); 180 });
180 this.mediaPantalla(); 181 this.mediaPantalla();
181 } 182 }
182 183
183 deleteArticulo(index: number) { 184 deleteArticulo(index: number) {
184 this.articuloService.deleteArticulo(index); 185 this.articuloService.deleteArticulo(index);
185 } 186 }
186 187
187 increaseShow() { 188 increaseShow() {
188 this.showQuantity += 100; 189 this.showQuantity += 100;
189 } 190 }
190 191
192
193 validarFecha(fechaInicio: string, fechaFin: string) {
194 return DateExtension.ValidateDateRange(fechaInicio, fechaFin);
195 }
196
191 @HostListener('scroll', ['$event']) 197 @HostListener('scroll', ['$event'])
192 scrollEvent(event: Event) { 198 scrollEvent(event: Event) {
193 clearTimeout(this.inactiveScreen.timerReposo); 199 clearTimeout(this.inactiveScreen.timerReposo);
194 this.inactiveScreen.startTimeOutInactividad(); 200 this.inactiveScreen.startTimeOutInactividad();
195 } 201 }
196 202
197 mouseup() { 203 mouseup() {
198 if (!this.timeoutHandler) return; 204 if (!this.timeoutHandler) return;
199 clearInterval(this.timeoutHandler); 205 clearInterval(this.timeoutHandler);
200 } 206 }
201 207
202 scrollY(el: HTMLElement, value) { 208 scrollY(el: HTMLElement, value) {
203 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 209 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
204 this.timeoutHandler = setInterval(() => { 210 this.timeoutHandler = setInterval(() => {
205 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 211 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
206 }, 500); 212 }, 500);
207 } 213 }
208 214
209 scrollX(el: HTMLElement, value) { 215 scrollX(el: HTMLElement, value) {
210 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 216 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
211 this.timeoutHandler = setInterval(() => { 217 this.timeoutHandler = setInterval(() => {
212 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 218 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
213 }, 500); 219 }, 500);
214 } 220 }
215 221
216 mediaPantalla() { 222 mediaPantalla() {
217 if ($('body').hasClass('media-pantalla')) { 223 if ($('body').hasClass('media-pantalla')) {
218 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito, 224 $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
219 .cat-box,.img-categoria, .modal-content`) 225 .cat-box,.img-categoria, .modal-content`)
220 .addClass('media-pantalla') 226 .addClass('media-pantalla')
221 .addBack('media-pantalla'); 227 .addBack('media-pantalla');
222 } 228 }
223 } 229 }
224 } 230 }
225 231
src/app/services/articulo/articulo.service.ts
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 total = 0; 18 total = 0;
19 maxCantidad = 50; 19 maxCantidad = 50;
20 20
21 constructor( 21 constructor(
22 private http: HttpClient, 22 private http: HttpClient,
23 private clienteService: ClienteService, 23 private clienteService: ClienteService,
24 ) { } 24 ) { }
25 25
26 getById(id) { 26 getById(id) {
27 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); 27 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
28 } 28 }
29 29
30 getAll() { 30 getAll() {
31 return this.http.get(`${this.urlDeboSuite}/articulos/`); 31 return this.http.get(`${this.urlDeboSuite}/articulos/`);
32 } 32 }
33 33
34 getAllWithPaginator(page: number = 1) { 34 getAllWithPaginator(page: number = 1) {
35 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); 35 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
36 } 36 }
37 37
38 substractCant(articulo: IArticulo) { 38 substractCant(articulo: IArticulo) {
39 if (articulo.cantidad === 1) return; 39 if (articulo.cantidad === 1) return;
40 articulo.cantidad--; 40 articulo.cantidad--;
41 this.calcularTotal(); 41 this.calcularTotal();
42 } 42 }
43 43
44 addCant(articulo: IArticulo) { 44 addCant(articulo: IArticulo) {
45 if (articulo.cantidad >= this.maxCantidad) return; 45 if (articulo.cantidad >= this.maxCantidad) return;
46 articulo.cantidad++; 46 articulo.cantidad++;
47 this.calcularTotal(); 47 this.calcularTotal();
48 } 48 }
49 49
50 calcularTotal() { 50 calcularTotal() {
51 this.total = 0; 51 this.total = 0;
52 this.carrito.forEach(articulo => { 52 this.carrito.forEach(articulo => {
53 this.total += (articulo.PreVen * articulo.cantidad); 53 this.total += (articulo.PreVen * articulo.cantidad);
54 }); 54 });
55 } 55 }
56 56
57 setArticulo(articulo: IArticulo) { 57 setArticulo(articulo: IArticulo) {
58 articulo.cantidad = 1; 58 articulo.cantidad = 1;
59 for (const articuloCarrito of this.carrito) { 59 for (const articuloCarrito of this.carrito) {
60 if (articuloCarrito.id === articulo.id && !articulo.productos) { 60 if (articuloCarrito.id === articulo.id && !articulo.productos) {
61 articuloCarrito.cantidad++; 61 articuloCarrito.cantidad++;
62 this.calcularTotal(); 62 this.calcularTotal();
63 return; 63 return;
64 } 64 }
65 } 65 }
66 this.setArticulosSinImagen([articulo]); 66 this.setArticulosSinImagen([articulo]);
67 this.carrito.unshift(articulo); 67 this.carrito.unshift(articulo);
68 this.calcularTotal(); 68 this.calcularTotal();
69 } 69 }
70 70
71 deleteArticulo(index: number) { 71 deleteArticulo(index: number) {
72 this.carrito.splice(index, 1); 72 this.carrito.splice(index, 1);
73 this.calcularTotal(); 73 this.calcularTotal();
74 } 74 }
75 75
76 pay(dataPago: any) { 76 pay(dataPago: any) {
77 return new Observable((observer) => { 77 return new Observable((observer) => {
78 this.clienteService.getById(-1) 78 this.clienteService.getById(-1)
79 .subscribe(cliente => { 79 .subscribe(cliente => {
80 this.markArticuloInPromoAsRemoved(); 80 this.markArticuloInPromoAsRemoved();
81 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, { 81 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${this.medioPago}`, {
82 productos: this.carrito, 82 productos: this.carrito,
83 cliente, 83 cliente,
84 origen: 'autoservicio', 84 origen: 'autoservicio',
85 codigoVendedor: 5, 85 codigoVendedor: 5,
86 puntoVenta: APP_SETTINGS.puntoVenta, 86 puntoVenta: APP_SETTINGS.puntoVenta,
87 pedidoAnombreDe: dataPago.pedidoAnombreDe, 87 pedidoAnombreDe: dataPago.pedidoAnombreDe,
88 numeroPlanilla: APP_SETTINGS.numeroPlanilla, 88 numeroPlanilla: APP_SETTINGS.numeroPlanilla,
89 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'), 89 pedidoParaLlevar: localStorage.getItem('pedidoParaLlevar'),
90 terminal: APP_SETTINGS.terminal 90 terminal: APP_SETTINGS.terminal,
91 contactLess: true,
91 }) 92 })
92 .subscribe((data) => { 93 .subscribe((data) => {
93 observer.next(data); 94 observer.next(data);
94 observer.complete(); 95 observer.complete();
95 }, err => { 96 }, err => {
96 observer.error(err); 97 observer.error(err);
97 observer.complete(); 98 observer.complete();
98 }); 99 });
99 }); 100 });
100 }); 101 });
101 } 102 }
102 103
103 cleanShoppingCar() { 104 cleanShoppingCar() {
104 this.articuloAcargar = undefined; 105 this.articuloAcargar = undefined;
105 this.promoAcargar = undefined; 106 this.promoAcargar = undefined;
106 this.carrito = []; 107 this.carrito = [];
107 this.calcularTotal(); 108 this.calcularTotal();
108 } 109 }
109 110
110 setArticulosSinImagen(articulos: IArticulo[]) { 111 setArticulosSinImagen(articulos: IArticulo[]) {
111 articulos.forEach((articulo: IArticulo) => { 112 articulos.forEach((articulo: IArticulo) => {
112 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : 113 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
113 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; 114 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
114 }); 115 });
115 } 116 }
116 117
117 markArticuloInPromoAsRemoved() { 118 markArticuloInPromoAsRemoved() {
118 this.carrito.forEach((articuloCarrito: IArticulo) => { 119 this.carrito.forEach((articuloCarrito: IArticulo) => {
119 if (articuloCarrito.PRO) { 120 if (articuloCarrito.PRO) {
120 articuloCarrito.productos.forEach((articulo: IArticulo) => { 121 articuloCarrito.productos.forEach((articulo: IArticulo) => {
121 if (articulo.cantidadAdicionada === 0) { 122 if (articulo.cantidadAdicionada === 0) {
122 articulo.cantidad = 0; 123 articulo.cantidad = 0;
123 articulo.importeValorExtra = 0; 124 articulo.importeValorExtra = 0;
124 } 125 }
125 }); 126 });
126 } 127 }
127 }); 128 });
128 } 129 }
129 130
130 changeArticulo(articuloToChange: IArticulo, articuloData: any) { 131 changeArticulo(articuloToChange: IArticulo, articuloData: any) {
131 articuloToChange.CODA = articuloData.CodArt; 132 articuloToChange.CODA = articuloData.CodArt;
132 articuloToChange.CodArt = articuloData.CodArt; 133 articuloToChange.CodArt = articuloData.CodArt;
133 articuloToChange.SECA = articuloData.CodSec; 134 articuloToChange.SECA = articuloData.CodSec;
134 articuloToChange.CodSec = articuloData.CodSec; 135 articuloToChange.CodSec = articuloData.CodSec;
135 articuloToChange.PreVen = articuloData.PreVen; 136 articuloToChange.PreVen = articuloData.PreVen;
136 articuloToChange.id = articuloData.id; 137 articuloToChange.id = articuloData.id;
137 articuloToChange.DET_LAR = articuloData.DET_LAR; 138 articuloToChange.DET_LAR = articuloData.DET_LAR;
138 articuloToChange.DetArt = articuloData.DetArt; 139 articuloToChange.DetArt = articuloData.DetArt;
139 articuloToChange.MKT_DESC = articuloData.MKT_DESC; 140 articuloToChange.MKT_DESC = articuloData.MKT_DESC;
140 } 141 }
141 } 142 }
142 143
src/app/utils/dateExtension.ts
File was created 1 export class DateExtension {
2
3 public static ValidateDateRange(dateStart: string, dateEnd: string) {
4 if (dateEnd === null) return false;
5 const today = Date.now();
6 const timeStart = new Date(dateStart).getTime();
7 const timeEnd = new Date(dateEnd).getTime();
8 return (timeStart <= today && today <= timeEnd) ? false : true;
9 }
10
11 }
12