Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 49fd89c4b359ae476d87fe62ae14b125969b1fd8

Authored by Marcelo Puebla
2 parents f08df31201 f9762abf9b
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Merge branch 'develop' into 'master' 

Fixes

See merge request !2
Showing 27 changed files   Show diff stats
1 # See http://help.github.com/ignore-files/ for more about ignoring files. 1 # See http://help.github.com/ignore-files/ for more about ignoring files.
2 2
3 # compiled output 3 # compiled output
4 /dist 4 /dist
5 /tmp 5 /tmp
6 /out-tsc 6 /out-tsc
7 # Only exists if Bazel was run 7 # Only exists if Bazel was run
8 /bazel-out 8 /bazel-out
9 9
10 # dependencies 10 # dependencies
11 /node_modules 11 /node_modules
12 /dist 12 /dist
13 /src/etc/AppSettings.ts
13 14
14 # profiling files 15 # profiling files
15 chrome-profiler-events*.json 16 chrome-profiler-events*.json
16 speed-measure-plugin*.json 17 speed-measure-plugin*.json
17 18
18 # IDEs and editors 19 # IDEs and editors
19 /.idea 20 /.idea
20 .project 21 .project
21 .classpath 22 .classpath
22 .c9/ 23 .c9/
23 *.launch 24 *.launch
24 .settings/ 25 .settings/
25 *.sublime-workspace 26 *.sublime-workspace
26 27
27 # IDE - VSCode 28 # IDE - VSCode
28 .vscode/* 29 .vscode/*
29 !.vscode/settings.json 30 !.vscode/settings.json
30 !.vscode/tasks.json 31 !.vscode/tasks.json
31 !.vscode/launch.json 32 !.vscode/launch.json
32 !.vscode/extensions.json 33 !.vscode/extensions.json
33 .history/* 34 .history/*
34 35
35 # misc 36 # misc
36 /.sass-cache 37 /.sass-cache
37 /connect.lock 38 /connect.lock
38 /coverage 39 /coverage
39 /libpeerconnection.log 40 /libpeerconnection.log
40 npm-debug.log 41 npm-debug.log
41 yarn-error.log 42 yarn-error.log
42 testem.log 43 testem.log
43 /typings 44 /typings
44 45
45 # System Files 46 # System Files
46 .DS_Store 47 .DS_Store
47 Thumbs.db 48 Thumbs.db
48 49
src/app/app.module.ts
Diff comments   View file @ 49fd89c
1 import { BrowserModule } from '@angular/platform-browser'; 1 import { BrowserModule } from '@angular/platform-browser';
2 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
2 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
3 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { SplitPipe } from './pipes/split.pipe';
4 import { AppComponent } from './app.component'; 8 import { AppComponent } from './app.component';
5 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; 9 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
6 import { SplitPipe } from './pipes/split.pipe';
7 import { AdminComponent } from './modules/admin/admin.component'; 10 import { AdminComponent } from './modules/admin/admin.component';
8 import { FooterComponent } from './shared/footer/footer.component'; 11 import { FooterComponent } from './shared/footer/footer.component';
12 import { SharedModule } from './modules/shared/shared.module';
9 13
10 @NgModule({ 14 @NgModule({
11 declarations: [ 15 declarations: [
12 AppComponent, 16 AppComponent,
13 SplashScreenComponent, 17 SplashScreenComponent,
14 SplitPipe, 18 SplitPipe,
15 AdminComponent, 19 AdminComponent,
16 FooterComponent, 20 FooterComponent,
17 ], 21 ],
18 imports: [ 22 imports: [
19 BrowserModule, 23 BrowserModule,
20 AppRoutingModule 24 BrowserAnimationsModule,
25 AppRoutingModule,
26 HttpClientModule,
27 FormsModule,
28 ReactiveFormsModule,
29 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
30 SharedModule.forRoot(),
21 ], 31 ],
22 providers: [],
23 bootstrap: [AppComponent] 32 bootstrap: [AppComponent]
24 }) 33 })
src/app/interfaces/IArticulo.ts
Diff comments   View file @ 49fd89c
File was created 1 export interface IArticulo {
2 cantidad?: number;
3 cantidadAdicionada?: number;
4 cantidadVendida?: number;
5 categoria_selfservice?: number;
6 CodArt: number;
7 codigoBarra?: ICodigoBarra[];
8 CodSec: number;
9 DetArt: string;
10 DET_LAR: string;
11 ELBPRO: string;
12 esAdicionable?: boolean;
13 esSustraible?: boolean;
14 FPP?: boolean;
15 id: number;
16 idSinonimo?: number;
17 imagenes?: any[];
18 ImpInt: number;
19 ImpInt2: number;
20 ImpInt3: number;
21 importeValorExtra?: number;
22 PreVen: number;
23 PRO: boolean;
24 productos?: IArticulo[];
25 seleccionado?: boolean;
26 tieneSinonimo?: boolean;
27 tipo_articulo?: number;
28 comentario?: string;
29 }
30
31 export interface ICodigoBarra {
32 CodBar: string;
33 CodArt: number;
34 CodSec: string;
35 }
36
src/app/interfaces/ICategoria.ts
Diff comments   View file @ 49fd89c
File was created 1 export interface ICategoria {
2 id: number;
3 detalle: string;
4 es_promocion: boolean;
5 vigencia_desde: Date;
6 vigencia_hasta: Date;
7 ES_PEDIDO: boolean;
8 selected?: boolean;
9 }
10
src/app/interfaces/ICliente.ts
Diff comments   View file @ 49fd89c
File was created 1 export interface ICliente {
2 COD: number;
3 NOM: string;
4 DOM: string;
5 CPO: string;
6 LOC: string;
7 PCI: string;
8 CUIT: string;
9 TEL: string;
10 FPA: number;
11 TIP: string;
12 ZON: string;
13 ACT: string;
14 PDA: boolean;
15 MCC: number;
16 MCH: number;
17 CTA: number;
18 IDE: string;
19 TLI: string;
20 MOD: string;
21 SUR: boolean;
22 IVA: number;
23 SIT: string;
24 TCO: string;
25 LOX: number;
26 PCX: number;
27 OBS: string;
28 FUP: string;
29 DIC: number;
30 GRP: boolean;
31 BLO: boolean;
32 PLP: boolean;
33 FRE: boolean;
34 VEN: number;
35 FEA: string;
36 ICP: boolean;
37 PER: boolean;
38 RANT: boolean;
39 D_EN: string;
40 D_Y: string;
41 REC: number;
42 NHA: boolean;
43 EMG: number;
44 E_HD: string;
45 C_HD: string;
46 PDA_A: number;
47 CAN_KIL: number;
48 PER_MAY: boolean;
49 ES_MAY: boolean;
50 SEG_MAY: number;
51 INC_MAY: number;
52 ZON_MAY: number;
53 PER_IVA_MAY: number;
54 LPCC: boolean;
55 EREPL: boolean;
56 IMP_ABONO: number;
57 ID_LEY: number;
58 NRO_PER_MAY: string;
59 JUR_MAY_PER: string;
60 NARIB: string;
61 DIC_1: number;
62 REC_1: number;
63 TASA_DIC: number;
64 TASA_DIC_1: number;
65 IMP_CANJE: boolean;
66 USOINT: boolean;
67 PERC: number;
68 CTRL_LIT: boolean;
69 CTRL_SEC: boolean;
70 CLI_CON: number;
71 ITC_SUR: boolean;
72 PIDVEN: boolean;
73 MAIL: string;
74 HAB_NOTIF: boolean;
75 TIPO_NOTIFICACION: boolean;
76 VEH_CHF: boolean;
77 ICIVAL: boolean;
78 LEY_ABO1: string;
79 LEY_ABO2: string;
80 LEY_ABO3: string;
81 LEY_ABO4: string;
82 SALDO_ABONO: number;
83 FACT_ABONO: number;
84 FACT_AUTO: boolean;
85 MES_VDO: boolean;
86 FEC_CTRL: string;
87 SEG_FID: number;
88 MARCA_SALDO: boolean;
89 CTRL_SEC_FPA: boolean;
90 TIPO_RET: number;
91 COD_EXT: string;
92 RIESGO_FISCAL: boolean;
93 POR_RED: number;
94 DESTINO_VENTA: number;
95 FT_ANT: boolean;
96 FID_PART: boolean;
97 PER_SL: number;
98 EN_COBRO: number;
99 BLO_CTA_PROPIA: boolean;
100 TIENE_CERTIFICADO_IIBB: boolean;
101 NOTIF_FT_RE: boolean;
102 IMP_DET_VAL: boolean;
103 EX_PER_HASTA: string;
104 REVENDEDOR: boolean;
105 CONVMULTILATERAL: boolean;
106 PERCPORC?: any;
107 MAIL_COBRANZA: string;
108 MAIL_COMPRAS: string;
109 MAIL_OTROS: string;
110 IMP_OBS_CLI: boolean;
111 PASSWEB: string;
112 COD_REG_CANJ: number;
113 CERTIF_JURIS: boolean;
114 PER_IVARG17: number;
115 PER_ATER: number;
116 OpJurMis: boolean;
117 TIPO_RES_60: number;
118 FEB: string;
119 idPreciosConcidiones: number;
120 idprecioscondiciones: number;
121 ES_PROS?: any;
122 idCobrador: string;
123 ECI: boolean;
124 MUM: string;
125 TipoClienteAbonado: number;
126 EMAIL?: any;
127 FNAC?: any;
128 PAIS?: any;
129 control_saldos_vencidos: boolean;
130 Ignora_bloqueo_auto: boolean;
131 iva: IIva;
132 cuenta: ICuenta;
133 tipoComprobante: ITipoComprobante;
134 estadoCuenta: ICuenta;
135 }
136
137 export interface ICuenta {
138 autorizado: number;
139 extracciones: number;
140 saldo: number;
141 facturasvencidas: number;
142 }
143
144 export interface IIva {
145 ID: number;
146 NOMBRE: string;
147 ABR: string;
148 IFE: string;
149 IFH: string;
150 IFO: string;
151 TIP: string;
152 COI: number;
153 }
154
155 export interface ITipoComprobante {
156 ID: string;
157 NOMBRE: string;
158 TIP: number;
159 CLA: number;
160 RES_SUM: number;
161 }
162
src/app/modules/carrito/carrito.component.html
Diff comments   View file @ 49fd89c
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="h-85"> 5 <div class="h-85">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 px-0 py-2 align-self-center"> 8 <div class="col-12 px-0 py-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p> 10 <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <!-- ARTICULOS --> 15 <!-- CARRITO -->
16 <div class="row mx-2 mt-4 h-80 scroll-y"> 16 <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y-visible">
17 <!-- MENSAJE DE ADVERTENCIA -->
18 <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
19 <p class="h5 text-center">No hay artículos en el carrito</p>
20 </div>
21 <!-- ARTICULOS -->
17 <div 22 <div
18 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" 23 class="col-12 col-xl-6 p-2 h-25 text-center text-truncate"
19 *ngFor="let item of [{},{},{},{},{},{},{},{},{}]"> 24 *ngFor="let articulo of articuloService.carrito; let i = index;"
25 @EnterLeave>
20 <!-- ARTICULO --> 26 <!-- ARTICULO -->
21 <div class="h-100 px-2 py-4 border border-primary rounded-sm"> 27 <div class="h-100 px-2 py-4 border border-primary rounded-sm">
22 <div class="row mx-0 h-100"> 28 <div class="row mx-0 h-100">
23 <!-- NOMBRE E IMAGEN --> 29 <!-- NOMBRE E IMAGEN -->
24 <div class="col-3 h-100 border-right border-primary align-self-center"> 30 <div class="col-3 h-100 border-right border-primary align-self-center">
25 <img 31 <img
26 draggable="false" 32 draggable="false"
27 ondragstart="return false;" 33 ondragstart="return false;"
28 (contextmenu)="false" 34 (contextmenu)="false"
29 class="d-block mx-auto h-55" 35 class="d-block mx-auto h-55 rounded-sm shadow-sm"
30 src="assets/img/icono-efectivo.svg"> 36 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
31 <div class="row mx-0 h-45"> 37 <div class="row mx-0 h-45">
32 <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p> 38 <p class="col text-primary text-truncate align-self-end">
39 <small>{{articulo.DetArt}}</small>
40 </p>
33 </div> 41 </div>
34 </div> 42 </div>
35 <!-- CANTIDAD --> 43 <!-- CANTIDAD -->
36 <div class="col-3 border-right border-primary"> 44 <div class="col-3 border-right border-primary">
37 <p><small>CANT</small></p> 45 <p><small>CANT</small></p>
38 <div class="row mt-2 mx-0"> 46 <div class="row mt-2 mx-0">
39 <div class="col-12 h-auto"> 47 <div class="col-12 h-auto">
40 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 48 <div class="row mx-0 justify-content-between bg-primary badge-pill">
49 <!-- BOTON MENOS -->
41 <div class="col-auto px-0"> 50 <div class="col-auto px-0">
42 <!-- BOTON MENOS -->
43 <img 51 <img
44 draggable="false" 52 draggable="false"
45 ondragstart="return false;" 53 ondragstart="return false;"
46 (contextmenu)="false" 54 (contextmenu)="false"
47 class="d-block ml-auto py-2 icon-20 btn-effect" 55 class="d-block ml-auto py-2 icon-20 btn-effect"
48 src="assets/img/menos-blanco.svg"> 56 src="assets/img/menos-blanco.svg"
57 (click)="substractCant(articulo)">
49 </div> 58 </div>
59 <!-- CANTIDAD -->
50 <div class="col px-0 align-self-center text-white"> 60 <div class="col px-0 align-self-center text-white">
51 <p><small>{{55}}</small></p> 61 <p><small>{{articulo.cantidad}}</small></p>
52 </div> 62 </div>
63 <!-- BOTON MAS -->
53 <div class="col-auto px-0"> 64 <div class="col-auto px-0">
54 <!-- BOTON MAS -->
55 <img 65 <img
56 draggable="false" 66 draggable="false"
57 ondragstart="return false;" 67 ondragstart="return false;"
58 (contextmenu)="false" 68 (contextmenu)="false"
59 class="d-block ml-auto py-2 icon-20 btn-effect" 69 class="d-block ml-auto py-2 icon-20 btn-effect"
60 src="assets/img/mas-blanco.svg"> 70 src="assets/img/mas-blanco.svg"
71 (click)="addCant(articulo)">
61 </div> 72 </div>
62 </div> 73 </div>
63 </div> 74 </div>
64 </div> 75 </div>
65 </div> 76 </div>
66 <!-- OPCIONALES --> 77 <!-- OPCIONALES -->
67 <div class="col-3 border-right border-primary"> 78 <div class="col-3 border-right border-primary">
68 <p><small>OPCIONALES</small></p> 79 <p><small>OPCIONALES</small></p>
69 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> 80 <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div>
70 <div class="row mx-0 mt-2 justify-content-center"> 81 <div class="row mx-0 mt-2 justify-content-center">
71 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> 82 <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white">
72 <span> 83 <span>
73 <small class="pr-2">CAMBIAR</small> 84 <small class="pr-2">CAMBIAR</small>
74 <img 85 <img
75 draggable="false" 86 draggable="false"
76 ondragstart="return false;" 87 ondragstart="return false;"
77 (contextmenu)="false" 88 (contextmenu)="false"
78 class="icon-20" 89 class="icon-20"
79 src="assets/img/ir.svg"> 90 src="assets/img/ir.svg">
80 </span> 91 </span>
81 </div> 92 </div>
82 </div> 93 </div>
83 </div> 94 </div>
84 <!-- ELIMINAR --> 95 <!-- ELIMINAR -->
85 <div class="col-3 align-self-center"> 96 <div class="col-3 align-self-center">
86 <div class="row mx-0 justify-content-center"> 97 <div class="row mx-0 justify-content-center">
87 <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"> 98 <div
99 class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
100 (click)="deleteArticulo(i)">
88 <span> 101 <span>
89 <small class="pr-2">ELIMINAR</small> 102 <small class="pr-2">ELIMINAR</small>
90 <img 103 <img
91 draggable="false" 104 draggable="false"
92 ondragstart="return false;" 105 ondragstart="return false;"
93 (contextmenu)="false" 106 (contextmenu)="false"
94 class="icon-20 rotate-45" 107 class="icon-20 rotate-45"
95 src="assets/img/mas-blanco.svg"> 108 src="assets/img/mas-blanco.svg">
96 </span> 109 </span>
97 </div> 110 </div>
98 </div> 111 </div>
99 </div> 112 </div>
100 </div> 113 </div>
101 </div> 114 </div>
102 </div> 115 </div>
103 </div> 116 </div>
104 <div class="row mx-3 mt-4 h-auto justify-content-end"> 117 <!-- CONTINUAR -->
118 <div
119 *ngIf="articuloService.carrito.length"
120 class="row mx-3 mt-4 h-auto justify-content-end">
105 <div 121 <div
106 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 122 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
107 [routerLink]="['/forma-pago']"> 123 [routerLink]="['/forma-pago']">
108 <span> 124 <span>
109 <small class="pr-2">CONTINUAR</small> 125 <small class="pr-2">CONTINUAR</small>
110 <img 126 <img
111 draggable="false" 127 draggable="false"
112 ondragstart="return false;" 128 ondragstart="return false;"
113 (contextmenu)="false" 129 (contextmenu)="false"
114 class="icon-20" 130 class="icon-20"
115 src="assets/img/ir.svg"> 131 src="assets/img/ir.svg">
116 </span> 132 </span>
117 </div> 133 </div>
118 </div> 134 </div>
119 135 <!-- SEGUIR COMPRANDO -->
120 <div class="row mx-3 mt-2 h-auto justify-content-end"> 136 <div class="row mx-3 mt-2 h-auto justify-content-end">
121 <div 137 <div
122 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" 138 class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
123 (click)="goBack()"> 139 (click)="goBack()">
124 <span> 140 <span>
125 <small class="pr-2">SEGUIR COMPRANDO</small> 141 <small class="pr-2">SEGUIR COMPRANDO</small>
126 <img 142 <img
127 draggable="false" 143 draggable="false"
128 ondragstart="return false;" 144 ondragstart="return false;"
129 (contextmenu)="false" 145 (contextmenu)="false"
130 class="icon-20" 146 class="icon-20"
131 src="assets/img/ir.svg"> 147 src="assets/img/ir.svg">
132 </span> 148 </span>
133 </div> 149 </div>
134 </div> 150 </div>
135 </div> 151 </div>
136 152
src/app/modules/carrito/carrito.component.ts
Diff comments   View file @ 49fd89c
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } 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';
4 import { APP_SETTINGS } from 'src/etc/AppSettings';
5 import { trigger, state, style, transition, animate } from '@angular/animations';
6 import { IArticulo } from 'src/app/interfaces/IArticulo';
3 7
4 @Component({ 8 @Component({
5 selector: 'app-carrito', 9 selector: 'app-carrito',
6 templateUrl: './carrito.component.html', 10 templateUrl: './carrito.component.html',
7 styleUrls: ['./carrito.component.scss'] 11 styleUrls: ['./carrito.component.scss'],
12 animations: [
13 trigger('EnterLeave', [
14 state('flyIn', style({ transform: 'translateX(0)' })),
15 transition(':enter', [
16 style({ transform: 'translateX(-100%)' }),
17 animate('1s ease-in')
18 ]),
19 transition(':leave', [
20 animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
21 ])
22 ])
23 ]
8 }) 24 })
9 export class CarritoComponent implements OnInit { 25 export class CarritoComponent implements OnInit {
26 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
27 maxCantidad = 50;
10 28
11 constructor( 29 constructor(
12 private location: Location, 30 private location: Location,
31 public articuloService: ArticuloService,
13 ) { } 32 ) { }
14 33
15 ngOnInit() { 34 ngOnInit() { }
35
36 deleteArticulo(index: number) {
37 this.articuloService.carrito.splice(index, 1);
38 }
39
40 substractCant(articulo: IArticulo) {
41 if (articulo.cantidad === 1) return;
42 articulo.cantidad--;
43 }
44
45 addCant(articulo: IArticulo) {
46 if (articulo.cantidad >= this.maxCantidad) return;
47 articulo.cantidad++;
16 } 48 }
17 49
18 goBack() { 50 goBack() {
19 this.location.back(); 51 this.location.back();
20 } 52 }
21 53
22 } 54 }
23 55
src/app/modules/carrito/carrito.module.ts
Diff comments   View file @ 49fd89c
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 3
4 import { CarritoRoutingModule } from "./carrito-routing.module"; 4 import { CarritoRoutingModule } from "./carrito-routing.module";
5 import { CarritoComponent } from "./carrito.component"; 5 import { CarritoComponent } from "./carrito.component";
6 import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module'; 6 import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module';
7 import { SharedModule } from '../shared/shared.module';
7 8
8 @NgModule({ 9 @NgModule({
9 declarations: [CarritoComponent], 10 declarations: [CarritoComponent],
10 imports: [CommonModule, CarritoRoutingModule, SeleccionArticulosModule] 11 imports: [
12 CommonModule,
13 CarritoRoutingModule,
14 SeleccionArticulosModule,
15 SharedModule,
16 ]
11 }) 17 })
12 export class CarritoModule { } 18 export class CarritoModule { }
13 19
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 49fd89c
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-90 align-items-end"> 5 <div class="row mx-0 h-90 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-70"> 15 <div class="row w-100 mr-4 h-70">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto h-5"> 22 <div class="col-auto btn-effect h-5">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -80)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 <div 37 <div
38 class="row mx-4 mb-2 h-32 justify-content-center tab" 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
40 (click)="selectCategoria(-1, 0)">
41 <img
42 draggable="false"
43 ondragstart="return false;"
44 (contextmenu)="false"
45 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
46 src="assets/img/ir-color.svg">
47 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
48 </div>
49 <div
50 class="row mx-4 mb-2 h-32 justify-content-center tab"
39 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40 (click)="selectCategoria(i)" 52 (click)="selectCategoria(i, categoria.id)"
41 *ngFor="let categoria of categorias; let i = index;"> 53 *ngFor="let categoria of categorias; let i = index;">
42 <img 54 <img
43 draggable="false" 55 draggable="false"
44 ondragstart="return false;" 56 ondragstart="return false;"
45 (contextmenu)="false" 57 (contextmenu)="false"
46 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small> 60 <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
49 </div> 61 </div>
50 </div> 62 </div>
51 <div class="col-auto btn-effect h-5"> 63 <div class="col-auto btn-effect h-5">
52 <img 64 <img
53 draggable="false" 65 draggable="false"
54 ondragstart="return false;" 66 ondragstart="return false;"
55 (contextmenu)="false" 67 (contextmenu)="false"
56 class="h-100 d-block mx-auto rotate-90" 68 class="h-100 d-block mx-auto rotate-90"
57 src="assets/img/ir-color.svg" 69 src="assets/img/ir-color.svg"
58 (mousedown)="scrollY(templateCategorias, 80)" 70 (mousedown)="scrollY(templateCategorias, 100)"
59 (mouseup)="mouseup()" 71 (mouseup)="mouseup()"
60 (mouseleave)="mouseup()"> 72 (mouseleave)="mouseup()">
61 </div> 73 </div>
62 </div> 74 </div>
63 </div> 75 </div>
64 <!-- LISTA DE ARTICULOS --> 76 <!-- LISTA DE ARTICULOS -->
65 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y-visible">
66 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100"> 78 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
67 <!-- ARTICULO --> 79 <!-- ARTICULO -->
68 <div 80 <div
69 class="col px-2 my-1 my-md-3 h-auto" 81 class="col px-2 my-1 my-md-3 h-auto"
70 *ngFor="let articulo of [{},{},{promo: true},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 82 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
71 <div class="card h-100"> 83 <div class="swing-in-top-fwd card h-auto">
72 <img 84 <img
73 draggable="false" 85 draggable="false"
74 ondragstart="return false;" 86 ondragstart="return false;"
75 (contextmenu)="false" 87 (contextmenu)="false"
76 src="assets/img/icono-volver.svg" 88 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
77 class="card-img-top h-55"> 89 class="card-img-top h-55 rounded-sm">
78 <div class="row mx-0 py-1 h-auto justify-content-center"> 90 <div class="row mx-0 py-1 h-auto justify-content-center">
79 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 91 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
80 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 92 <p class="col-12 px-1 h-auto text-center line-height-sm">
93 <small>{{articulo.DET_LAR}}</small>
94 </p>
81 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 95 <div class="col-12 px-1 align-self-end btn-effect h-auto">
82 <div 96 <div
83 [ngClass]="{'bg-secondary': articulo.promo}" 97 [ngClass]="{'bg-secondary': articulo.promo}"
84 class="row mx-0 justify-content-between bg-primary badge-pill" 98 class="row mx-0 justify-content-between bg-primary badge-pill"
85 (click)="elegirArticulo(articulo)"> 99 (click)="elegirArticulo(articulo)">
86 <div class="col px-0 align-self-center text-white text-right"> 100 <div class="col px-0 align-self-center text-white text-right">
87 {{55 | currency}} 101 {{articulo.PreVen | currency}}
88 </div> 102 </div>
89 <div class="col-5 px-0"> 103 <div class="col-5 px-0">
90 <img 104 <img
91 draggable="false" 105 draggable="false"
92 ondragstart="return false;" 106 ondragstart="return false;"
93 (contextmenu)="false" 107 (contextmenu)="false"
94 class="d-block ml-auto py-1 icon-30" 108 class="d-block ml-auto py-1 icon-30"
95 src="assets/img/ir.svg"> 109 src="assets/img/ir.svg">
96 </div> 110 </div>
97 </div> 111 </div>
98 </div> 112 </div>
99 </div> 113 </div>
100 </div> 114 </div>
101 </div> 115 </div>
102 </div> 116 </div>
117 <!-- BOTON VER MAS -->
118 <div class="row mx-0">
119 <div
120 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
121 class="col-12 px-0 mb-2">
122 <button
123 (click)="increaseShow()"
124 class="btn btn-block btn-outline-primary">
125 Ver Más
126 </button>
127 </div>
128 </div>
103 </div> 129 </div>
104 </div> 130 </div>
105 </div> 131 </div>
106 </div> 132 </div>
107 <!-- FOOTER CARRITO DE COMPRAS --> 133 <!-- FOOTER CARRITO DE COMPRAS -->
108 <div class="row w-90 mx-auto h-auto justify-content-center"> 134 <div class="row w-90 mx-auto h-auto justify-content-center">
109 <div class="col-12 h-75 px-0 border border-primary rounded"> 135 <div class="col-12 h-75 px-0 border border-primary rounded">
136 <!-- CABECERA -->
110 <div class="row mx-0 h-15 border-bottom border-primary"> 137 <div class="row mx-0 h-15 border-bottom border-primary">
111 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 138 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
112 </div> 139 </div>
113 <div class="row h-85 mx-0 justify-content-between"> 140 <!-- CUERPO -->
114 <div class="col-auto btn-effect h-20 align-self-center"> 141 <div class="row h-85 mx-0 justify-content-around">
142 <!-- BOTON SCROLL IZQUIERDA -->
143 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
115 <img 144 <img
116 draggable="false" 145 draggable="false"
117 ondragstart="return false;" 146 ondragstart="return false;"
118 (contextmenu)="false" 147 (contextmenu)="false"
119 class="icon-30 rotate-180-neg" 148 class="icon-30 rotate-180-neg"
120 src="assets/img/ir-fondo-color.svg" 149 src="assets/img/ir-fondo-color.svg"
121 (mousedown)="scrollX(templateCarrito, -100)" 150 (mousedown)="scrollX(templateCarrito, -100)"
122 (mouseup)="mouseup()" 151 (mouseup)="mouseup()"
123 (mouseleave)="mouseup()"> 152 (mouseleave)="mouseup()">
124 </div> 153 </div>
154 <!-- CARRITO -->
125 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 155 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
126 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> 156 <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x">
157 <!-- MENSAJE DE ADVERTENCIA -->
158 <div *ngIf="!articuloService.carrito.length" class="col h-100">
159 <p class="text-center py-5">No hay articulos en el carrito</p>
160 </div>
161 <!-- ARTICULOS -->
127 <div 162 <div
128 class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary" 163 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
129 (click)="selectCategoria(i)" 164 *ngFor="let articulo of articuloService.carrito; let i = index;">
130 *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;"> 165 <div class="swing-in-top-fwd">
131 <img 166 <img
132 draggable="false" 167 draggable="false"
133 ondragstart="return false;" 168 ondragstart="return false;"
134 (contextmenu)="false" 169 (contextmenu)="false"
135 class="d-block h-55 p-2 mx-auto" 170 class="d-block img-fluid p-2 mx-auto rounded"
136 src="assets/img/ir-color.svg"> 171 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}">
137 <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p> 172 <p class="d-block mt-auto text-center text-primary text-truncate">
173 <small>{{articulo.DetArt}}</small>
174 </p>
175 </div>
138 </div> 176 </div>
139 </div> 177 </div>
140 </div> 178 </div>
141 <div class="col-auto btn-effect h-20 align-self-center"> 179 <!-- BOTON SCROLL DERECHA -->
180 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
142 <img 181 <img
143 draggable="false" 182 draggable="false"
144 ondragstart="return false;" 183 ondragstart="return false;"
145 (contextmenu)="false" 184 (contextmenu)="false"
146 class="icon-30" 185 class="icon-30"
147 src="assets/img/ir-fondo-color.svg" 186 src="assets/img/ir-fondo-color.svg"
148 (mousedown)="scrollX(templateCarrito, 100)" 187 (mousedown)="scrollX(templateCarrito, 100)"
149 (mouseup)="mouseup()" 188 (mouseup)="mouseup()"
150 (mouseleave)="mouseup()"> 189 (mouseleave)="mouseup()">
151 </div> 190 </div>
152 </div> 191 </div>
153 </div> 192 </div>
193 <!-- VER CARRITO -->
154 <div class="col-auto p-0 mt-2 ml-auto h-20"> 194 <div class="col-auto p-0 mt-2 ml-auto h-20">
155 <div 195 <div
156 class="btn-effect col-auto align-self-center px-0 bg-white" 196 class="btn-effect col-auto align-self-center px-0 bg-white"
157 [routerLink]="['/carrito']"> 197 [routerLink]="['/carrito']">
158 <div class="row mx-0 bg-light"> 198 <div class="row mx-0 bg-light">
159 <div class="col-auto align-self-center text-primary">VER CARRITO</div> 199 <div class="col-auto align-self-center text-primary">VER CARRITO</div>
160 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 200 <div class="col-auto p-0 bg-primary d-none d-sm-block">
161 <img 201 <img
162 draggable="false" 202 draggable="false"
163 ondragstart="return false;" 203 ondragstart="return false;"
164 (contextmenu)="false" 204 (contextmenu)="false"
165 class="p-2 icon-40" 205 class="p-2 icon-40"
166 src="assets/img/carrito.svg"> 206 src="assets/img/carrito.svg">
167 </div> 207 </div>
168 </div> 208 </div>
169 </div> 209 </div>
170 </div> 210 </div>
171 </div> 211 </div>
172 </div> 212 </div>
173 213
174 </div> 214 </div>
175 215
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 49fd89c
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .box-categorias { 3 .box-categorias {
4 height: calc(100% - 100px) !important; 4 height: calc(100% - 100px) !important;
5 } 5 }
6 6
7 .active { 7 .active {
8 background-color: white; 8 background-color: white;
9 border-bottom: 3px solid $primary !important; 9 border-bottom: 3px solid $primary !important;
10 } 10 }
11 11
12 .border-bottom-effect { 12 .border-bottom-effect {
13 border: none; 13 border: none;
14 position: relative; 14 position: relative;
15 &:hover { 15 &:hover {
16 border: none; 16 border: none;
17 } 17 }
18 &::after { 18 &::after {
19 content: ""; 19 content: "";
20 position: absolute; 20 position: absolute;
21 width: 0px; 21 width: 0px;
22 height: 3px; 22 height: 3px;
23 left: 50%; 23 left: 50%;
24 bottom: 0; 24 bottom: 0;
25 background-color: $primary; 25 background-color: $primary;
26 transition: all ease-in-out 0.2s; 26 transition: all ease-in-out 0.2s;
27 } 27 }
28 &:hover::after { 28 &:hover::after {
29 width: 100%; 29 width: 100%;
30 left: 0; 30 left: 0;
31 } 31 }
32 } 32 }
33 33
34 .card { 34 .card {
35 border: none; 35 border: none;
36 } 36 }
37
38 .line-height-sm {
39 line-height: 1.2;
40 }
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 49fd89c
1 import { Component, OnInit } from "@angular/core"; 1 import { Component, OnInit } from "@angular/core";
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef } from 'ngx-bootstrap/modal';
3 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
4 8
5 @Component({ 9 @Component({
6 selector: "app-seleccion-articulos", 10 selector: "app-seleccion-articulos",
7 templateUrl: "./seleccion-articulos.component.html", 11 templateUrl: "./seleccion-articulos.component.html",
8 styleUrls: ["./seleccion-articulos.component.scss"] 12 styleUrls: ["./seleccion-articulos.component.scss"]
9 }) 13 })
10 export class SeleccionArticulosComponent implements OnInit { 14 export class SeleccionArticulosComponent implements OnInit {
15 showSpinner = true;
11 timeoutHandler: any; 16 timeoutHandler: any;
12 categorias = [ 17 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
13 { id: 1, selected: false }, 18 articulos: IArticulo[] = [];
14 { id: 2, selected: false }, 19 auxArticulos: IArticulo[] = [];
15 { id: 3, selected: false }, 20 showQuantity = 100;
16 { id: 4, selected: false }, 21 queMostrar = 'todos';
17 { id: 5, selected: false }, 22 categoriaActive: number = null;
18 { id: 6, selected: false } 23 categorias: ICategoria[] = [];
19 ]; 24 searchTerm = '';
25 ordenandoByVendidos = true;
26 allActive = true;
20 modalRef: BsModalRef; 27 modalRef: BsModalRef;
21 28
22 constructor( 29 constructor(
23 private modalService: BsModalService, 30 public articuloService: ArticuloService,
31 private categoriaService: CategoriaService,
24 ) { } 32 ) { }
25 33
26 ngOnInit() { } 34 ngOnInit() {
35 this.getCategorias();
36 }
37
38 getCategorias() {
39 this.categoriaService.getCategorias()
40 .subscribe((categorias: ICategoria[]) => {
41 switch (this.queMostrar) {
42 case 'todos':
43 this.categorias = categorias;
44 this.categoriaActive = 0;
45 break;
46 case 'promociones':
47 this.categorias = categorias;
48 this.categoriaActive = 19;
49 break;
50 case 'ordenar':
51 this.categorias = categorias.filter((categoria: ICategoria) => {
52 return categoria.ES_PEDIDO;
53 });
54 this.categoriaActive = 4;
55 break;
56 default:
57 this.categorias = categorias;
58 this.categoriaActive = 0;
59 break;
60 }
61 !localStorage.getItem('articulos') ?
62 this.getProductos() :
63 this.setProductos();
64 });
65 }
66
67 getProductos() {
68 this.articuloService.getAll()
69 .subscribe((result: IArticulo[]) => {
70 this.articuloService.setArticulosSinImagen(result);
71 if (this.queMostrar == 'ordenar') {
72 this.categorias.forEach((categoria: ICategoria) => {
73 let tempArticulos = result.filter((articulo: IArticulo) => {
74 return articulo.categoria_selfservice == categoria.id;
75 });
76 result = tempArticulos;
77 });
78 }
79 localStorage.setItem('articulos', JSON.stringify(result));
80 this.setProductos();
81 }, (error) => {
82 this.showSpinner = false;
83 console.error(error);
84 });
85 }
27 86
28 selectCategoria(index: number) { 87 setProductos() {
88 this.articulos = JSON.parse(localStorage.getItem('articulos'));
89 this.filterItems();
90 }
91
92 filterItems() {
93 if (this.categoriaActive == 0) {
94 this.auxArticulos = this.articulos;
95 return;
96 }
97 this.auxArticulos = this.articulos.filter(x => {
98 return x.categoria_selfservice === this.categoriaActive;
99 });
100 this.ordenar();
101 }
102
103 ordenar() {
104 if (this.ordenandoByVendidos) {
105 this.auxArticulos.sort((a, b) => {
106 return b.cantidadVendida - a.cantidadVendida;
107 });
108 }
109 }
110
111 selectCategoria(index: number, idCategoria?: number) {
112 if (this.categoriaActive == idCategoria) return;
113 this.categoriaActive = idCategoria;
114 this.allActive = idCategoria === 0 ? true : false;
29 this.categorias.forEach((categoria, i) => { 115 this.categorias.forEach((categoria, i) => {
30 categoria.selected = index === i ? true : false; 116 categoria.selected = index === i ? true : false;
31 }); 117 });
118 this.filterItems();
32 } 119 }
33 120
34 elegirArticulo(articulo: any) { 121 elegirArticulo(articulo: IArticulo) {
35 if (articulo.promo) { 122 articulo.cantidad = 1;
36 this.modalRef = this.modalService.show(PromocionComponent, { 123 this.articuloService.setArticulo(articulo);
37 class: 'custom-modal modal-dialog-centered', 124 }
38 ignoreBackdropClick: true, 125
39 }) 126 increaseShow() {
40 } 127 this.showQuantity += 100;
41 } 128 }
42 129
43 mouseup() { 130 mouseup() {
44 if (!this.timeoutHandler) return; 131 if (!this.timeoutHandler) return;
45 clearInterval(this.timeoutHandler); 132 clearInterval(this.timeoutHandler);
46 } 133 }
47 134
48 scrollY(el: HTMLElement, value) { 135 scrollY(el: HTMLElement, value) {
49 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 136 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
50 this.timeoutHandler = setInterval(() => { 137 this.timeoutHandler = setInterval(() => {
51 el.scroll({ behavior: "smooth", top: value + el.scrollTop }); 138 el.scroll({ behavior: "smooth", top: value + el.scrollTop });
52 }, 500); 139 }, 500);
53 } 140 }
54 141
55 scrollX(el: HTMLElement, value) { 142 scrollX(el: HTMLElement, value) {
56 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 143 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
57 this.timeoutHandler = setInterval(() => { 144 this.timeoutHandler = setInterval(() => {
58 el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); 145 el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
59 }, 500); 146 }, 500);
60 } 147 }
61 } 148 }
62 149
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 49fd89c
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 { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 7 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
8 import { SharedModule } from '../shared/shared.module';
8 9
9 @NgModule({ 10 @NgModule({
10 declarations: [ 11 declarations: [
11 SeleccionArticulosComponent, 12 SeleccionArticulosComponent,
12 HeaderPublicidadComponent, 13 HeaderPublicidadComponent,
13 PromocionComponent 14 PromocionComponent
14 ], 15 ],
15 imports: [ 16 imports: [
16 CommonModule, 17 CommonModule,
17 SeleccionArticulosRoutingModule, 18 SeleccionArticulosRoutingModule,
18 ModalModule.forRoot(), 19 ModalModule.forRoot(),
20 SharedModule
19 ], 21 ],
20 exports: [HeaderPublicidadComponent], 22 exports: [HeaderPublicidadComponent],
21 entryComponents: [PromocionComponent] 23 entryComponents: [PromocionComponent]
22 }) 24 })
23 export class SeleccionArticulosModule { } 25 export class SeleccionArticulosModule { }
24 26
src/app/modules/shared/shared.module.ts
Diff comments   View file @ 49fd89c
File was created 1 import { NgModule, ModuleWithProviders } from '@angular/core';
2 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
3 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
4
5 @NgModule({})
6 export class SharedModule {
7 static forRoot(): ModuleWithProviders {
8 return {
9 ngModule: SharedModule,
10 providers: [
11 ArticuloService,
12 CategoriaService
13 ]
14 };
15 }
16 }
17
src/app/services/articulo/articulo.service.spec.ts
Diff comments   View file @ 49fd89c
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { ArticuloService } from './articulo.service';
4
5 describe('ArticuloService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: ArticuloService = TestBed.get(ArticuloService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 49fd89c
File was created 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from '../../../etc/AppSettings';
4 import { IArticulo } from '../../interfaces/IArticulo';
5 import { ClienteService } from '../cliente/cliente.service';
6 import { Observable } from 'rxjs';
7
8 @Injectable()
9 export class ArticuloService {
10 carrito: IArticulo[] = [];
11 articuloAcargar: IArticulo;
12 promoAcargar: IArticulo;
13 mostrar: string;
14 esPromoPersonalizada: boolean = false;
15 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
16
17 constructor(
18 private http: HttpClient,
19 private clienteService: ClienteService,
20 ) { }
21
22 getById(id) {
23 return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
24 }
25
26 getAll() {
27 return this.http.get(`${this.urlDeboSuite}/articulos/`);
28 }
29
30 getAllWithPaginator(page: number = 1) {
31 return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
32 }
33
34 setArticulo(articulo: IArticulo) {
35 for (let i = 0; i < this.carrito.length; i++) {
36 if (this.carrito[i].id === articulo.id) {
37 if (articulo.PRO) break;
38 this.carrito[i].cantidad++;
39 return;
40 }
41 }
42 this.carrito.unshift(articulo);
43 }
44
45 pay(dataPago: any) {
46 return new Observable((observer) => {
47 this.clienteService.getById(-1)
48 .subscribe(cliente => {
49 let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
50 this.markArticuloInPromoAsRemoved();
51 this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
52 productos: this.carrito,
53 cliente: cliente,
54 origen: 'autoservicio',
55 codigoVendedor: 5,
56 puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta,
57 pedidoAnombreDe: dataPago.pedidoAnombreDe,
58 numeroPlanilla: '11111',
59 })
60 .subscribe((data) => {
61 observer.next(data);
62 observer.complete();
63 });
64 });
65 });
66 }
67
68 cleanShoppingCar() {
69 this.articuloAcargar = undefined;
70 this.promoAcargar = undefined;
71 this.carrito = [];
72 }
73
74 setArticulosSinImagen(articulos: IArticulo[]) {
75 articulos.forEach((articulo: IArticulo) => {
76 articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] :
77 !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes;
78 });
79 }
80
81 markArticuloInPromoAsRemoved() {
82 this.carrito.forEach((articulo: IArticulo) => {
83 if (articulo.PRO) {
84 articulo.productos.forEach((articulo: IArticulo) => {
85 if (articulo.cantidadAdicionada === 0) {
86 articulo.cantidad = 0;
87 articulo.importeValorExtra = 0;
88 }
89 });
90 }
91 });
92 }
93 }
94
src/app/services/categoria/categoria.service.spec.ts
Diff comments   View file @ 49fd89c
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { CategoriaService } from './categoria.service';
4
5 describe('CategoriaService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: CategoriaService = TestBed.get(CategoriaService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/categoria/categoria.service.ts
Diff comments   View file @ 49fd89c
File was created 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from 'src/etc/AppSettings';
4
5 @Injectable({
6 providedIn: 'root'
7 })
8 export class CategoriaService {
9 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
10
11 constructor(
12 private http: HttpClient,
13 ) { }
14
15 getCategorias() {
16 return this.http.get(`${this.urlDeboSuite}/categorias`);
17 }
18 }
19
src/app/services/cliente/cliente.service.spec.ts
Diff comments   View file @ 49fd89c
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { ClienteService } from './cliente.service';
4
5 describe('ClienteService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: ClienteService = TestBed.get(ClienteService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/cliente/cliente.service.ts
Diff comments   View file @ 49fd89c
File was created 1 import { Injectable } from '@angular/core';
2 import { HttpClient } from '@angular/common/http';
3 import { APP_SETTINGS } from "src/etc/AppSettings";
4
5 @Injectable({
6 providedIn: 'root'
7 })
8 export class ClienteService {
9 urlClientes = `${APP_SETTINGS.apiDeboSuite}/clientes`;
10
11 constructor(private http: HttpClient) { }
12
13 getById(id: number) {
14 return this.http.get(`${this.urlClientes}/get/${id}`);
15 }
16 }
17
src/app/services/promocion/promocion.service.spec.ts
Diff comments   View file @ 49fd89c
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { PromocionService } from './promocion.service';
4
5 describe('PromocionService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: PromocionService = TestBed.get(PromocionService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/promocion/promocion.service.ts
Diff comments   View file @ 49fd89c
File was created 1 import { Injectable } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { HttpClient } from '@angular/common/http';
4
5 @Injectable({
6 providedIn: 'root'
7 })
8 export class PromocionService {
9 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
10
11 constructor(
12 private http: HttpClient,
13 ) { }
14
15 getPromocionByCodigos(sector, codigo) {
16 return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`);
17 }
18
19 getPromociones(sector, codigo) {
20 return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`);
21 }
22
23 getComponentes(sector, codigo) {
24 return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`);
25 }
26 }
27
src/app/services/sinonimo/sinonimo.service.spec.ts
Diff comments   View file @ 49fd89c
File was created 1 import { TestBed } from '@angular/core/testing';
2
3 import { SinonimoService } from './sinonimo.service';
4
5 describe('SinonimoService', () => {
6 beforeEach(() => TestBed.configureTestingModule({}));
7
8 it('should be created', () => {
9 const service: SinonimoService = TestBed.get(SinonimoService);
10 expect(service).toBeTruthy();
11 });
12 });
13
src/app/services/sinonimo/sinonimo.service.ts
Diff comments   View file @ 49fd89c
File was created 1 import { Injectable } from '@angular/core';
2 import { APP_SETTINGS } from 'src/etc/AppSettings';
3 import { HttpClient } from '@angular/common/http';
4
5 @Injectable({
6 providedIn: 'root'
7 })
8 export class SinonimoService {
9 urlDeboSuite = APP_SETTINGS.apiDeboSuite;
10
11 constructor(
12 private http: HttpClient,
13 ) { }
14
15 getPromocionSinonimos(sector, codigo) {
16 return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
17 }
18 }
19
src/etc/AppSettings.ejemplo.ts
Diff comments   View file @ 49fd89c
File was created 1 // export const APP_SETTINGS = {
2 // apiDeboSuite: 'http://localhost:9900'
3 // }
4
src/scss/animations.scss
Diff comments   View file @ 49fd89c
1 /* 1 /*
2 * animation focus-in-blur 2 * animation focus-in-blur
3 */ 3 */
4 .focus-in-blur { 4 .focus-in-blur {
5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 5 -webkit-animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; 6 animation: focus-in-blur 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
7 } 7 }
8 8
9 @-webkit-keyframes focus-in-blur { 9 @-webkit-keyframes focus-in-blur {
10 0% { 10 0% {
11 -webkit-filter: blur(12px); 11 -webkit-filter: blur(12px);
12 filter: blur(12px); 12 filter: blur(12px);
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 100% { 15 100% {
16 -webkit-filter: blur(0px); 16 -webkit-filter: blur(0px);
17 filter: blur(0px); 17 filter: blur(0px);
18 opacity: 1; 18 opacity: 1;
19 } 19 }
20 } 20 }
21 21
22 @keyframes focus-in-blur { 22 @keyframes focus-in-blur {
23 0% { 23 0% {
24 -webkit-filter: blur(12px); 24 -webkit-filter: blur(12px);
25 filter: blur(12px); 25 filter: blur(12px);
26 opacity: 0; 26 opacity: 0;
27 } 27 }
28 100% { 28 100% {
29 -webkit-filter: blur(0px); 29 -webkit-filter: blur(0px);
30 filter: blur(0px); 30 filter: blur(0px);
31 opacity: 1; 31 opacity: 1;
32 } 32 }
33 } 33 }
34 34
35 /* 35 /*
36 * animation fade-in 36 * animation fade-in
37 */ 37 */
38 .fade-in { 38 .fade-in {
39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 39 -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; 40 animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
41 } 41 }
42 42
43 @-webkit-keyframes fade-in { 43 @-webkit-keyframes fade-in {
44 0% { 44 0% {
45 opacity: 0; 45 opacity: 0;
46 } 46 }
47 100% { 47 100% {
48 opacity: 1; 48 opacity: 1;
49 } 49 }
50 } 50 }
51 51
52 @keyframes fade-in { 52 @keyframes fade-in {
53 0% { 53 0% {
54 opacity: 0; 54 opacity: 0;
55 } 55 }
56 100% { 56 100% {
57 opacity: 1; 57 opacity: 1;
58 } 58 }
59 } 59 }
60 60
61 /* 61 /*
62 * animation fade-in 62 * animation fade-in
63 */ 63 */
64 .loop-color { 64 .loop-color {
65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 65 -webkit-animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both; 66 animation: loop-color 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
67 } 67 }
68 68
69 @-webkit-keyframes loop-color { 69 @-webkit-keyframes loop-color {
70 0% { 70 0% {
71 background-color: #f4b223; 71 background-color: #f4b223;
72 } 72 }
73 50% { 73 50% {
74 background-color: #ba8b29; 74 background-color: #ba8b29;
75 } 75 }
76 100% { 76 100% {
77 background-color: #f4b223; 77 background-color: #f4b223;
78 } 78 }
79 } 79 }
80 80
81 @keyframes loop-color { 81 @keyframes loop-color {
82 0% { 82 0% {
83 background-color: #f4b223; 83 background-color: #f4b223;
84 } 84 }
85 50% { 85 50% {
86 background-color: #ba8b29; 86 background-color: #ba8b29;
87 } 87 }
88 100% { 88 100% {
89 background-color: #f4b223; 89 background-color: #f4b223;
90 } 90 }
91 } 91 }
92 92
93 /* 93 /*
94 * animation fade-in-left 94 * animation fade-in-left
95 */ 95 */
96 .fade-in-left { 96 .fade-in-left {
97 -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 97 -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
98 animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 98 animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
99 } 99 }
100 100
101 @-webkit-keyframes fade-in-left { 101 @-webkit-keyframes fade-in-left {
102 0% { 102 0% {
103 -webkit-transform: translateX(-50px); 103 -webkit-transform: translateX(-50px);
104 transform: translateX(-50px); 104 transform: translateX(-50px);
105 opacity: 0; 105 opacity: 0;
106 } 106 }
107 100% { 107 100% {
108 -webkit-transform: translateX(0); 108 -webkit-transform: translateX(0);
109 transform: translateX(0); 109 transform: translateX(0);
110 opacity: 1; 110 opacity: 1;
111 } 111 }
112 } 112 }
113 @keyframes fade-in-left { 113 @keyframes fade-in-left {
114 0% { 114 0% {
115 -webkit-transform: translateX(-50px); 115 -webkit-transform: translateX(-50px);
116 transform: translateX(-50px); 116 transform: translateX(-50px);
117 opacity: 0; 117 opacity: 0;
118 } 118 }
119 100% { 119 100% {
120 -webkit-transform: translateX(0); 120 -webkit-transform: translateX(0);
121 transform: translateX(0); 121 transform: translateX(0);
122 opacity: 1; 122 opacity: 1;
123 } 123 }
124 } 124 }
125
126 /*
127 * animation swing-in-top-fwd
128 */
129 .swing-in-top-fwd {
130 -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
131 animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
132 }
133
134 @-webkit-keyframes swing-in-top-fwd {
135 0% {
136 -webkit-transform: rotateX(-100deg);
137 transform: rotateX(-100deg);
138 -webkit-transform-origin: top;
139 transform-origin: top;
140 opacity: 0;
141 }
142 100% {
143 -webkit-transform: rotateX(0deg);
144 transform: rotateX(0deg);
145 -webkit-transform-origin: top;
146 transform-origin: top;
147 opacity: 1;
148 }
149 }
150 @keyframes swing-in-top-fwd {
151 0% {
152 -webkit-transform: rotateX(-100deg);
153 transform: rotateX(-100deg);
154 -webkit-transform-origin: top;
155 transform-origin: top;
156 opacity: 0;
157 }
158 100% {
159 -webkit-transform: rotateX(0deg);
160 transform: rotateX(0deg);
161 -webkit-transform-origin: top;
162 transform-origin: top;
163 opacity: 1;
164 }
165 }
125 166
src/scss/scroll.scss
Diff comments   View file @ 49fd89c
File was created 1 @import "node_modules/bootstrap/scss/variables";
2
3 .scroll-y {
4 overflow-y: auto;
5 scrollbar-width: none;
6 &::-webkit-scrollbar {
7 display: none;
8 }
9 }
10
11 .scroll-y-visible {
12 overflow-y: auto;
13 &::-webkit-scrollbar {
14 width: 0.75em;
15 }
16 &::-webkit-scrollbar-track {
17 border-radius: 10px;
18 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
19 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
20 background-color: $white;
21 }
22 &::-webkit-scrollbar-thumb {
23 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
24 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
25 outline: 1px solid slategrey;
26 border-radius: 10px;
27 height: 12px;
28 &:active {
29 box-shadow: inset 0 0 8px $primary;
30 -webkit-box-shadow: inset 0 0 8px $primary;
31 }
32 }
33 &::-webkit-scrollbar-corner {
34 border-radius: 10px;
35 }
36 }
37
38 .scroll-x {
39 overflow-x: auto;
40 scrollbar-width: none;
41 &::-webkit-scrollbar {
42 display: none;
43 }
44 }
45
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss"; 2 @import "scss/typography.scss";
3 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
4 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
5 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
6 @import "scss/scroll.scss";
6 @import "node_modules/bootstrap/scss/_variables.scss"; 7 @import "node_modules/bootstrap/scss/_variables.scss";
7 8
8 @font-face { 9 @font-face {
9 font-family: "Gotham"; 10 font-family: "Gotham";
10 font-style: normal; 11 font-style: normal;
11 font-weight: normal; 12 font-weight: normal;
12 src: url("assets/fonts/gotham-medium.woff") format("woff"); 13 src: url("assets/fonts/gotham-medium.woff") format("woff");
13 } 14 }
14 15
15 html, 16 html,
16 body { 17 body {
17 min-height: 100vh; 18 min-height: 100vh;
18 max-height: 100vh; 19 max-height: 100vh;
19 height: 100vh; 20 height: 100vh;
20 font-family: "Gotham"; 21 font-family: "Gotham";
21 overflow: hidden; 22 overflow: hidden;
22 user-select: none; 23 user-select: none;
23 } 24 }
24 25
25 .btn-effect { 26 .btn-effect {
26 transition: all 0.3s; 27 transition: all 0.3s;
27 &:hover { 28 &:hover {
28 cursor: pointer; 29 cursor: pointer;
29 opacity: 0.7; 30 opacity: 0.7;
30 } 31 }
31 &:active { 32 &:active {
32 transform: scale(1.02); 33 transform: scale(1.02);
33 } 34 }
34 } 35 }
35 36
36 .cursor-pointer { 37 .cursor-pointer {
37 cursor: pointer; 38 cursor: pointer;
38 } 39 }
39 40
40 p { 41 p {
41 margin: 0 !important; 42 margin: 0 !important;
42 } 43 }
43 44
44 .img-in-top { 45 .img-in-top {
45 position: absolute; 46 position: absolute;
46 top: -35px; 47 top: -35px;
47 left: 50%; 48 left: 50%;
48 height: 70px; 49 height: 70px;
49 -webkit-transform: translateX(-50%); 50 -webkit-transform: translateX(-50%);
50 transform: translateX(-50%); 51 transform: translateX(-50%);
51 } 52 }
52 53
53 .rotate-45 { 54 .rotate-45 {
54 transform: rotate(45deg); 55 transform: rotate(45deg);
55 } 56 }
56 57
57 .rotate-90 { 58 .rotate-90 {
58 transform: rotate(90deg); 59 transform: rotate(90deg);
59 } 60 }
60 61
61 .rotate-90-neg { 62 .rotate-90-neg {
62 transform: rotate(-90deg); 63 transform: rotate(-90deg);
63 } 64 }
64 65
65 .rotate-180-neg { 66 .rotate-180-neg {
66 transform: rotate(-180deg); 67 transform: rotate(-180deg);
67 } 68 }
68
69 .scroll-y {
70 overflow-y: auto;
71 scrollbar-width: none;
72 &::-webkit-scrollbar {
73 display: none;
74 }
75 }
76
77 .scroll-x {
78 overflow-x: auto;
79 scrollbar-width: none;
80 &::-webkit-scrollbar {
81 display: none;
82 }
83 }