Commit 6c52db3e2fed5e35a70b52aa4d9bc63a7106c064
1 parent
be7b891885
Exists in
develop
Creados servicios
Showing
15 changed files
with
180 additions
and
67 deletions
 
Show diff stats
src/app/app.module.ts
| 1 | import { BrowserModule } from '@angular/platform-browser'; | 1 | import { BrowserModule } from '@angular/platform-browser'; | 
| 2 | import { NgModule } from '@angular/core'; | 2 | import { NgModule } from '@angular/core'; | 
| 3 | import { AppRoutingModule } from './app-routing.module'; | 3 | import { AppRoutingModule } from './app-routing.module'; | 
| 4 | import { HttpClientModule } from '@angular/common/http'; | 4 | import { HttpClientModule } from '@angular/common/http'; | 
| 5 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | 5 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | 
| 6 | import { SplitPipe } from './pipes/split.pipe'; | 6 | import { SplitPipe } from './pipes/split.pipe'; | 
| 7 | import { AppComponent } from './app.component'; | 7 | import { AppComponent } from './app.component'; | 
| 8 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 8 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; | 
| 9 | import { AdminComponent } from './modules/admin/admin.component'; | 9 | import { AdminComponent } from './modules/admin/admin.component'; | 
| 10 | import { FooterComponent } from './shared/footer/footer.component'; | 10 | import { FooterComponent } from './shared/footer/footer.component'; | 
| 11 | import { SharedModule } from './modules/shared/shared.module'; | ||
| 11 | 12 | ||
| 12 | @NgModule({ | 13 | @NgModule({ | 
| 13 | declarations: [ | 14 | declarations: [ | 
| 14 | AppComponent, | 15 | AppComponent, | 
| 15 | SplashScreenComponent, | 16 | SplashScreenComponent, | 
| 16 | SplitPipe, | 17 | SplitPipe, | 
| 17 | AdminComponent, | 18 | AdminComponent, | 
| 18 | FooterComponent, | 19 | FooterComponent, | 
| 19 | ], | 20 | ], | 
| 20 | imports: [ | 21 | imports: [ | 
| 21 | BrowserModule, | 22 | BrowserModule, | 
| 22 | AppRoutingModule, | 23 | AppRoutingModule, | 
| 23 | HttpClientModule, | 24 | HttpClientModule, | 
| 24 | FormsModule, | 25 | FormsModule, | 
| 25 | ReactiveFormsModule, | 26 | ReactiveFormsModule, | 
| 26 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), | 27 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), | 
| 28 | SharedModule.forRoot(), | ||
| 27 | ], | 29 | ], | 
| 28 | providers: [], | ||
| 29 | bootstrap: [AppComponent] | 30 | bootstrap: [AppComponent] | 
| 30 | }) | 31 | }) | 
| 31 | export class AppModule { } | 32 | export class AppModule { } | 
src/app/modules/carrito/carrito.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="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"> | 
| 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"> | 
| 20 | <!-- ARTICULO --> | 25 | <!-- ARTICULO --> | 
| 21 | <div class="h-100 px-2 py-4 border border-primary rounded-sm"> | 26 | <div class="h-100 px-2 py-4 border border-primary rounded-sm"> | 
| 22 | <div class="row mx-0 h-100"> | 27 | <div class="row mx-0 h-100"> | 
| 23 | <!-- NOMBRE E IMAGEN --> | 28 | <!-- NOMBRE E IMAGEN --> | 
| 24 | <div class="col-3 h-100 border-right border-primary align-self-center"> | 29 | <div class="col-3 h-100 border-right border-primary align-self-center"> | 
| 25 | <img | 30 | <img | 
| 26 | draggable="false" | 31 | draggable="false" | 
| 27 | ondragstart="return false;" | 32 | ondragstart="return false;" | 
| 28 | (contextmenu)="false" | 33 | (contextmenu)="false" | 
| 29 | class="d-block mx-auto h-55" | 34 | class="d-block mx-auto h-55 rounded-sm shadow-sm" | 
| 30 | src="assets/img/icono-efectivo.svg"> | 35 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | 
| 31 | <div class="row mx-0 h-45"> | 36 | <div class="row mx-0 h-45"> | 
| 32 | <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p> | 37 | <p class="col text-primary text-truncate align-self-end"> | 
| 38 | <small>{{articulo.DetArt}}</small> | ||
| 39 | </p> | ||
| 33 | </div> | 40 | </div> | 
| 34 | </div> | 41 | </div> | 
| 35 | <!-- CANTIDAD --> | 42 | <!-- CANTIDAD --> | 
| 36 | <div class="col-3 border-right border-primary"> | 43 | <div class="col-3 border-right border-primary"> | 
| 37 | <p><small>CANT</small></p> | 44 | <p><small>CANT</small></p> | 
| 38 | <div class="row mt-2 mx-0"> | 45 | <div class="row mt-2 mx-0"> | 
| 39 | <div class="col-12 h-auto"> | 46 | <div class="col-12 h-auto"> | 
| 40 | <div class="row mx-0 justify-content-between bg-primary badge-pill"> | 47 | <div class="row mx-0 justify-content-between bg-primary badge-pill"> | 
| 48 | <!-- BOTON MENOS --> | ||
| 41 | <div class="col-auto px-0"> | 49 | <div class="col-auto px-0"> | 
| 42 | <!-- BOTON MENOS --> | ||
| 43 | <img | 50 | <img | 
| 44 | draggable="false" | 51 | draggable="false" | 
| 45 | ondragstart="return false;" | 52 | ondragstart="return false;" | 
| 46 | (contextmenu)="false" | 53 | (contextmenu)="false" | 
| 47 | class="d-block ml-auto py-2 icon-20 btn-effect" | 54 | class="d-block ml-auto py-2 icon-20 btn-effect" | 
| 48 | src="assets/img/menos-blanco.svg"> | 55 | src="assets/img/menos-blanco.svg"> | 
| 49 | </div> | 56 | </div> | 
| 57 | <!-- CANTIDAD --> | ||
| 50 | <div class="col px-0 align-self-center text-white"> | 58 | <div class="col px-0 align-self-center text-white"> | 
| 51 | <p><small>{{55}}</small></p> | 59 | <p><small>{{articulo.cantidad}}</small></p> | 
| 52 | </div> | 60 | </div> | 
| 61 | <!-- BOTON MAS --> | ||
| 53 | <div class="col-auto px-0"> | 62 | <div class="col-auto px-0"> | 
| 54 | <!-- BOTON MAS --> | ||
| 55 | <img | 63 | <img | 
| 56 | draggable="false" | 64 | draggable="false" | 
| 57 | ondragstart="return false;" | 65 | ondragstart="return false;" | 
| 58 | (contextmenu)="false" | 66 | (contextmenu)="false" | 
| 59 | class="d-block ml-auto py-2 icon-20 btn-effect" | 67 | class="d-block ml-auto py-2 icon-20 btn-effect" | 
| 60 | src="assets/img/mas-blanco.svg"> | 68 | src="assets/img/mas-blanco.svg"> | 
| 61 | </div> | 69 | </div> | 
| 62 | </div> | 70 | </div> | 
| 63 | </div> | 71 | </div> | 
| 64 | </div> | 72 | </div> | 
| 65 | </div> | 73 | </div> | 
| 66 | <!-- OPCIONALES --> | 74 | <!-- OPCIONALES --> | 
| 67 | <div class="col-3 border-right border-primary"> | 75 | <div class="col-3 border-right border-primary"> | 
| 68 | <p><small>OPCIONALES</small></p> | 76 | <p><small>OPCIONALES</small></p> | 
| 69 | <div class="py-1 badge-pill bg-dark text-white"><p><small>{{'AZÚCAR'}}</small></p></div> | 77 | <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"> | 78 | <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"> | 79 | <div class="col-auto pl-3 btn-effect bg-primary badge-pill text-white"> | 
| 72 | <span> | 80 | <span> | 
| 73 | <small class="pr-2">CAMBIAR</small> | 81 | <small class="pr-2">CAMBIAR</small> | 
| 74 | <img | 82 | <img | 
| 75 | draggable="false" | 83 | draggable="false" | 
| 76 | ondragstart="return false;" | 84 | ondragstart="return false;" | 
| 77 | (contextmenu)="false" | 85 | (contextmenu)="false" | 
| 78 | class="icon-20" | 86 | class="icon-20" | 
| 79 | src="assets/img/ir.svg"> | 87 | src="assets/img/ir.svg"> | 
| 80 | </span> | 88 | </span> | 
| 81 | </div> | 89 | </div> | 
| 82 | </div> | 90 | </div> | 
| 83 | </div> | 91 | </div> | 
| 84 | <!-- ELIMINAR --> | 92 | <!-- ELIMINAR --> | 
| 85 | <div class="col-3 align-self-center"> | 93 | <div class="col-3 align-self-center"> | 
| 86 | <div class="row mx-0 justify-content-center"> | 94 | <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"> | 95 | <div class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"> | 
| 88 | <span> | 96 | <span> | 
| 89 | <small class="pr-2">ELIMINAR</small> | 97 | <small class="pr-2">ELIMINAR</small> | 
| 90 | <img | 98 | <img | 
| 91 | draggable="false" | 99 | draggable="false" | 
| 92 | ondragstart="return false;" | 100 | ondragstart="return false;" | 
| 93 | (contextmenu)="false" | 101 | (contextmenu)="false" | 
| 94 | class="icon-20 rotate-45" | 102 | class="icon-20 rotate-45" | 
| 95 | src="assets/img/mas-blanco.svg"> | 103 | src="assets/img/mas-blanco.svg"> | 
| 96 | </span> | 104 | </span> | 
| 97 | </div> | 105 | </div> | 
| 98 | </div> | 106 | </div> | 
| 99 | </div> | 107 | </div> | 
| 100 | </div> | 108 | </div> | 
| 101 | </div> | 109 | </div> | 
| 102 | </div> | 110 | </div> | 
| 103 | </div> | 111 | </div> | 
| 104 | <div class="row mx-3 mt-4 h-auto justify-content-end"> | 112 | <!-- CONTINUAR --> | 
| 113 | <div | ||
| 114 | *ngIf="articuloService.carrito.length" | ||
| 115 | class="row mx-3 mt-4 h-auto justify-content-end"> | ||
| 105 | <div | 116 | <div | 
| 106 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" | 117 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" | 
| 107 | [routerLink]="['/forma-pago']"> | 118 | [routerLink]="['/forma-pago']"> | 
| 108 | <span> | 119 | <span> | 
| 109 | <small class="pr-2">CONTINUAR</small> | 120 | <small class="pr-2">CONTINUAR</small> | 
| 110 | <img | 121 | <img | 
| 111 | draggable="false" | 122 | draggable="false" | 
| 112 | ondragstart="return false;" | 123 | ondragstart="return false;" | 
| 113 | (contextmenu)="false" | 124 | (contextmenu)="false" | 
| 114 | class="icon-20" | 125 | class="icon-20" | 
| 115 | src="assets/img/ir.svg"> | 126 | src="assets/img/ir.svg"> | 
| 116 | </span> | 127 | </span> | 
| 117 | </div> | 128 | </div> | 
| 118 | </div> | 129 | </div> | 
| 119 | 130 | <!-- SEGUIR COMPRANDO --> | |
| 120 | <div class="row mx-3 mt-2 h-auto justify-content-end"> | 131 | <div class="row mx-3 mt-2 h-auto justify-content-end"> | 
| 121 | <div | 132 | <div | 
| 122 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" | 133 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" | 
| 123 | (click)="goBack()"> | 134 | (click)="goBack()"> | 
| 124 | <span> | 135 | <span> | 
| 125 | <small class="pr-2">SEGUIR COMPRANDO</small> | 136 | <small class="pr-2">SEGUIR COMPRANDO</small> | 
| 126 | <img | 137 | <img | 
| 127 | draggable="false" | 138 | draggable="false" | 
| 128 | ondragstart="return false;" | 139 | ondragstart="return false;" | 
| 129 | (contextmenu)="false" | 140 | (contextmenu)="false" | 
| 130 | class="icon-20" | 141 | class="icon-20" | 
| 131 | src="assets/img/ir.svg"> | 142 | src="assets/img/ir.svg"> | 
| 132 | </span> | 143 | </span> | 
| 133 | </div> | 144 | </div> | 
| 134 | </div> | 145 | </div> | 
| 135 | </div> | 146 | </div> | 
| 136 | 147 | 
src/app/modules/carrito/carrito.component.ts
| 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'; | ||
| 3 | 5 | ||
| 4 | @Component({ | 6 | @Component({ | 
| 5 | selector: 'app-carrito', | 7 | selector: 'app-carrito', | 
| 6 | templateUrl: './carrito.component.html', | 8 | templateUrl: './carrito.component.html', | 
| 7 | styleUrls: ['./carrito.component.scss'] | 9 | styleUrls: ['./carrito.component.scss'] | 
| 8 | }) | 10 | }) | 
| 9 | export class CarritoComponent implements OnInit { | 11 | export class CarritoComponent implements OnInit { | 
| 12 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | ||
| 10 | 13 | ||
| 11 | constructor( | 14 | constructor( | 
| 12 | private location: Location, | 15 | private location: Location, | 
| 16 | public articuloService: ArticuloService, | ||
| 13 | ) { } | 17 | ) { } | 
| 14 | 18 | ||
| 15 | ngOnInit() { | 19 | ngOnInit() { } | 
| 16 | } | ||
| 17 | 20 | ||
| 18 | goBack() { | 21 | goBack() { | 
| 19 | this.location.back(); | 22 | this.location.back(); | 
| 20 | } | 23 | } | 
| 21 | 24 | ||
| 22 | } | 25 | } | 
src/app/modules/carrito/carrito.module.ts
| 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
| 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 btn-effect 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, -100)" | 29 | (mousedown)="scrollY(templateCategorias, -100)" | 
| 30 | (mouseup)="mouseup()" | 30 | (mouseup)="mouseup()" | 
| 31 | (mouseleave)="mouseup()"> | 31 | (mouseleave)="mouseup()"> | 
| 32 | </div> | 32 | </div> | 
| 33 | <!-- CATEGORIAS --> | 33 | <!-- CATEGORIAS --> | 
| 34 | <div | 34 | <div | 
| 35 | #templateCategorias | 35 | #templateCategorias | 
| 36 | class="col-12 px-0 box-categorias border border-primary 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 }" | 39 | [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }" | 
| 40 | (click)="selectCategoria(-1, 0)"> | 40 | (click)="selectCategoria(-1, 0)"> | 
| 41 | <img | 41 | <img | 
| 42 | draggable="false" | 42 | draggable="false" | 
| 43 | ondragstart="return false;" | 43 | ondragstart="return false;" | 
| 44 | (contextmenu)="false" | 44 | (contextmenu)="false" | 
| 45 | class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" | 45 | class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" | 
| 46 | src="assets/img/ir-color.svg"> | 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> | 47 | <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small> | 
| 48 | </div> | 48 | </div> | 
| 49 | <div | 49 | <div | 
| 50 | class="row mx-4 mb-2 h-32 justify-content-center tab" | 50 | class="row mx-4 mb-2 h-32 justify-content-center tab" | 
| 51 | [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" | 51 | [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" | 
| 52 | (click)="selectCategoria(i, categoria.id)" | 52 | (click)="selectCategoria(i, categoria.id)" | 
| 53 | *ngFor="let categoria of categorias; let i = index;"> | 53 | *ngFor="let categoria of categorias; let i = index;"> | 
| 54 | <img | 54 | <img | 
| 55 | draggable="false" | 55 | draggable="false" | 
| 56 | ondragstart="return false;" | 56 | ondragstart="return false;" | 
| 57 | (contextmenu)="false" | 57 | (contextmenu)="false" | 
| 58 | 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" | 
| 59 | src="assets/img/ir-color.svg"> | 59 | src="assets/img/ir-color.svg"> | 
| 60 | <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> | 60 | <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> | 
| 61 | </div> | 61 | </div> | 
| 62 | </div> | 62 | </div> | 
| 63 | <div class="col-auto btn-effect h-5"> | 63 | <div class="col-auto btn-effect h-5"> | 
| 64 | <img | 64 | <img | 
| 65 | draggable="false" | 65 | draggable="false" | 
| 66 | ondragstart="return false;" | 66 | ondragstart="return false;" | 
| 67 | (contextmenu)="false" | 67 | (contextmenu)="false" | 
| 68 | class="h-100 d-block mx-auto rotate-90" | 68 | class="h-100 d-block mx-auto rotate-90" | 
| 69 | src="assets/img/ir-color.svg" | 69 | src="assets/img/ir-color.svg" | 
| 70 | (mousedown)="scrollY(templateCategorias, 100)" | 70 | (mousedown)="scrollY(templateCategorias, 100)" | 
| 71 | (mouseup)="mouseup()" | 71 | (mouseup)="mouseup()" | 
| 72 | (mouseleave)="mouseup()"> | 72 | (mouseleave)="mouseup()"> | 
| 73 | </div> | 73 | </div> | 
| 74 | </div> | 74 | </div> | 
| 75 | </div> | 75 | </div> | 
| 76 | <!-- LISTA DE ARTICULOS --> | 76 | <!-- LISTA DE ARTICULOS --> | 
| 77 | <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"> | 
| 78 | <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> | 78 | <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> | 
| 79 | <!-- ARTICULO --> | 79 | <!-- ARTICULO --> | 
| 80 | <div | 80 | <div | 
| 81 | class="col px-2 my-1 my-md-3 h-auto" | 81 | class="col px-2 my-1 my-md-3 h-auto" | 
| 82 | *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> | 82 | *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> | 
| 83 | <div class="swing-in-top-fwd card h-auto"> | 83 | <div class="swing-in-top-fwd card h-auto"> | 
| 84 | <img | 84 | <img | 
| 85 | draggable="false" | 85 | draggable="false" | 
| 86 | ondragstart="return false;" | 86 | ondragstart="return false;" | 
| 87 | (contextmenu)="false" | 87 | (contextmenu)="false" | 
| 88 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" | 88 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" | 
| 89 | class="card-img-top h-55 shadow-sm rounded-sm"> | 89 | class="card-img-top h-55 shadow-sm rounded-sm"> | 
| 90 | <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"> | 
| 91 | <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> | 91 | <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p> | 
| 92 | <p class="col-12 px-1 h-auto text-center line-height-sm"> | 92 | <p class="col-12 px-1 h-auto text-center line-height-sm"> | 
| 93 | <small>{{articulo.DET_LAR}}</small> | 93 | <small>{{articulo.DET_LAR}}</small> | 
| 94 | </p> | 94 | </p> | 
| 95 | <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"> | 
| 96 | <div | 96 | <div | 
| 97 | [ngClass]="{'bg-secondary': articulo.promo}" | 97 | [ngClass]="{'bg-secondary': articulo.promo}" | 
| 98 | class="row mx-0 justify-content-between bg-primary badge-pill" | 98 | class="row mx-0 justify-content-between bg-primary badge-pill" | 
| 99 | (click)="elegirArticulo(articulo)"> | 99 | (click)="elegirArticulo(articulo)"> | 
| 100 | <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"> | 
| 101 | {{articulo.PreVen | currency}} | 101 | {{articulo.PreVen | currency}} | 
| 102 | </div> | 102 | </div> | 
| 103 | <div class="col-5 px-0"> | 103 | <div class="col-5 px-0"> | 
| 104 | <img | 104 | <img | 
| 105 | draggable="false" | 105 | draggable="false" | 
| 106 | ondragstart="return false;" | 106 | ondragstart="return false;" | 
| 107 | (contextmenu)="false" | 107 | (contextmenu)="false" | 
| 108 | class="d-block ml-auto py-1 icon-30" | 108 | class="d-block ml-auto py-1 icon-30" | 
| 109 | src="assets/img/ir.svg"> | 109 | src="assets/img/ir.svg"> | 
| 110 | </div> | 110 | </div> | 
| 111 | </div> | 111 | </div> | 
| 112 | </div> | 112 | </div> | 
| 113 | </div> | 113 | </div> | 
| 114 | </div> | 114 | </div> | 
| 115 | </div> | 115 | </div> | 
| 116 | </div> | 116 | </div> | 
| 117 | <!-- BOTON VER MAS --> | 117 | <!-- BOTON VER MAS --> | 
| 118 | <div class="row mx-0"> | 118 | <div class="row mx-0"> | 
| 119 | <div | 119 | <div | 
| 120 | *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" | 120 | *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" | 
| 121 | class="col-12 px-0 mb-2"> | 121 | class="col-12 px-0 mb-2"> | 
| 122 | <button | 122 | <button | 
| 123 | (click)="increaseShow()" | 123 | (click)="increaseShow()" | 
| 124 | class="btn btn-block btn-outline-primary"> | 124 | class="btn btn-block btn-outline-primary"> | 
| 125 | Ver Más | 125 | Ver Más | 
| 126 | </button> | 126 | </button> | 
| 127 | </div> | 127 | </div> | 
| 128 | </div> | 128 | </div> | 
| 129 | </div> | 129 | </div> | 
| 130 | </div> | 130 | </div> | 
| 131 | </div> | 131 | </div> | 
| 132 | </div> | 132 | </div> | 
| 133 | <!-- FOOTER CARRITO DE COMPRAS --> | 133 | <!-- FOOTER CARRITO DE COMPRAS --> | 
| 134 | <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"> | 
| 135 | <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 --> | ||
| 136 | <div class="row mx-0 h-15 border-bottom border-primary"> | 137 | <div class="row mx-0 h-15 border-bottom border-primary"> | 
| 137 | <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> | 
| 138 | </div> | 139 | </div> | 
| 139 | <div class="row h-85 mx-0 justify-content-between"> | 140 | <!-- CUERPO --> | 
| 140 | <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"> | ||
| 141 | <img | 144 | <img | 
| 142 | draggable="false" | 145 | draggable="false" | 
| 143 | ondragstart="return false;" | 146 | ondragstart="return false;" | 
| 144 | (contextmenu)="false" | 147 | (contextmenu)="false" | 
| 145 | class="icon-30 rotate-180-neg" | 148 | class="icon-30 rotate-180-neg" | 
| 146 | src="assets/img/ir-fondo-color.svg" | 149 | src="assets/img/ir-fondo-color.svg" | 
| 147 | (mousedown)="scrollX(templateCarrito, -100)" | 150 | (mousedown)="scrollX(templateCarrito, -100)" | 
| 148 | (mouseup)="mouseup()" | 151 | (mouseup)="mouseup()" | 
| 149 | (mouseleave)="mouseup()"> | 152 | (mouseleave)="mouseup()"> | 
| 150 | </div> | 153 | </div> | 
| 154 | <!-- CARRITO --> | ||
| 151 | <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"> | 
| 152 | <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 --> | ||
| 153 | <div *ngIf="!articuloService.carrito.length" class="col h-100"> | 158 | <div *ngIf="!articuloService.carrito.length" class="col h-100"> | 
| 154 | <p>No hay articulos en el carrito</p> | 159 | <p class="text-center py-5">No hay articulos en el carrito</p> | 
| 155 | </div> | 160 | </div> | 
| 161 | <!-- ARTICULOS --> | ||
| 156 | <div | 162 | <div | 
| 157 | class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary swing-in-top-fwd" | 163 | class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" | 
| 158 | *ngFor="let articulo of articuloService.carrito; let i = index;"> | 164 | *ngFor="let articulo of articuloService.carrito; let i = index;"> | 
| 159 | <img | 165 | <div class="swing-in-top-fwd"> | 
| 160 | draggable="false" | 166 | <img | 
| 161 | ondragstart="return false;" | 167 | draggable="false" | 
| 162 | (contextmenu)="false" | 168 | ondragstart="return false;" | 
| 163 | class="d-block h-55 img-fluid p-2 mx-auto" | 169 | (contextmenu)="false" | 
| 164 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | 170 | class="d-block h-55 img-fluid p-2 mx-auto rounded" | 
| 165 | <p class="d-block mt-auto text-center text-primary text-truncate"> | 171 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | 
| 166 | <small>{{articulo.DetArt}}</small> | 172 | <p class="d-block mt-auto text-center text-primary text-truncate"> | 
| 167 | </p> | 173 | <small>{{articulo.DetArt}}</small> | 
| 174 | </p> | ||
| 175 | </div> | ||
| 168 | </div> | 176 | </div> | 
| 169 | </div> | 177 | </div> | 
| 170 | </div> | 178 | </div> | 
| 171 | <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"> | ||
| 172 | <img | 181 | <img | 
| 173 | draggable="false" | 182 | draggable="false" | 
| 174 | ondragstart="return false;" | 183 | ondragstart="return false;" | 
| 175 | (contextmenu)="false" | 184 | (contextmenu)="false" | 
| 176 | class="icon-30" | 185 | class="icon-30" | 
| 177 | src="assets/img/ir-fondo-color.svg" | 186 | src="assets/img/ir-fondo-color.svg" | 
| 178 | (mousedown)="scrollX(templateCarrito, 100)" | 187 | (mousedown)="scrollX(templateCarrito, 100)" | 
| 179 | (mouseup)="mouseup()" | 188 | (mouseup)="mouseup()" | 
| 180 | (mouseleave)="mouseup()"> | 189 | (mouseleave)="mouseup()"> | 
| 181 | </div> | 190 | </div> | 
| 182 | </div> | 191 | </div> | 
| 183 | </div> | 192 | </div> | 
| 193 | <!-- VER CARRITO --> | ||
| 184 | <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"> | 
| 185 | <div | 195 | <div | 
| 186 | 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" | 
| 187 | [routerLink]="['/carrito']"> | 197 | [routerLink]="['/carrito']"> | 
| 188 | <div class="row mx-0 bg-light"> | 198 | <div class="row mx-0 bg-light"> | 
| 189 | <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> | 
| 190 | <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"> | 
| 191 | <img | 201 | <img | 
| 192 | draggable="false" | 202 | draggable="false" | 
| 193 | ondragstart="return false;" | 203 | ondragstart="return false;" | 
| 194 | (contextmenu)="false" | 204 | (contextmenu)="false" | 
| 195 | class="p-2 icon-40" | 205 | class="p-2 icon-40" | 
| 196 | src="assets/img/carrito.svg"> | 206 | src="assets/img/carrito.svg"> | 
| 197 | </div> | 207 | </div> | 
| 198 | </div> | 208 | </div> | 
| 199 | </div> | 209 | </div> | 
| 200 | </div> | 210 | </div> | 
| 201 | </div> | 211 | </div> | 
| 202 | </div> | 212 | </div> | 
| 203 | 213 | ||
| 204 | </div> | 214 | </div> | 
| 205 | 215 | 
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
| 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'; | ||
| 4 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 
| 5 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; | 
| 6 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; | 
| 7 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; | 
| 7 | import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | ||
| 8 | 8 | ||
| 9 | @Component({ | 9 | @Component({ | 
| 10 | selector: "app-seleccion-articulos", | 10 | selector: "app-seleccion-articulos", | 
| 11 | templateUrl: "./seleccion-articulos.component.html", | 11 | templateUrl: "./seleccion-articulos.component.html", | 
| 12 | styleUrls: ["./seleccion-articulos.component.scss"] | 12 | styleUrls: ["./seleccion-articulos.component.scss"] | 
| 13 | }) | 13 | }) | 
| 14 | export class SeleccionArticulosComponent implements OnInit { | 14 | export class SeleccionArticulosComponent implements OnInit { | 
| 15 | showSpinner = true; | 15 | showSpinner = true; | 
| 16 | timeoutHandler: any; | 16 | timeoutHandler: any; | 
| 17 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 17 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | 
| 18 | articulos: IArticulo[] = []; | 18 | articulos: IArticulo[] = []; | 
| 19 | auxArticulos: IArticulo[] = []; | 19 | auxArticulos: IArticulo[] = []; | 
| 20 | showQuantity = 100; | 20 | showQuantity = 100; | 
| 21 | queMostrar = 'todos'; | 21 | queMostrar = 'todos'; | 
| 22 | categoriaActive: number = null; | 22 | categoriaActive: number = null; | 
| 23 | categorias: ICategoria[] = []; | 23 | categorias: ICategoria[] = []; | 
| 24 | searchTerm = ''; | 24 | searchTerm = ''; | 
| 25 | ordenandoByVendidos = true; | 25 | ordenandoByVendidos = true; | 
| 26 | allActive = true; | 26 | allActive = true; | 
| 27 | modalRef: BsModalRef; | 27 | modalRef: BsModalRef; | 
| 28 | 28 | ||
| 29 | constructor( | 29 | constructor( | 
| 30 | private modalService: BsModalService, | 30 | public articuloService: ArticuloService, | 
| 31 | private articuloService: ArticuloService, | 31 | private categoriaService: CategoriaService, | 
| 32 | ) { } | 32 | ) { } | 
| 33 | 33 | ||
| 34 | ngOnInit() { | 34 | ngOnInit() { | 
| 35 | this.getCategorias(); | 35 | this.getCategorias(); | 
| 36 | this.articuloService.getAll() | ||
| 37 | .subscribe((res: IArticulo[]) => { | ||
| 38 | this.articuloService.setArticulosSinImagen(res); | ||
| 39 | localStorage.setItem('articulos', JSON.stringify(res)); | ||
| 40 | this.setProductos(); | ||
| 41 | this.articulos = res; | ||
| 42 | }, err => console.error(err)); | ||
| 43 | } | 36 | } | 
| 44 | 37 | ||
| 45 | getCategorias() { | 38 | getCategorias() { | 
| 46 | this.articuloService.getCategorias() | 39 | this.categoriaService.getCategorias() | 
| 47 | .subscribe((categorias: ICategoria[]) => { | 40 | .subscribe((categorias: ICategoria[]) => { | 
| 48 | switch (this.queMostrar) { | 41 | switch (this.queMostrar) { | 
| 49 | case 'todos': | 42 | case 'todos': | 
| 50 | this.categorias = categorias; | 43 | this.categorias = categorias; | 
| 51 | this.categoriaActive = 0; | 44 | this.categoriaActive = 0; | 
| 52 | break; | 45 | break; | 
| 53 | case 'promociones': | 46 | case 'promociones': | 
| 54 | this.categorias = categorias; | 47 | this.categorias = categorias; | 
| 55 | this.categoriaActive = 19; | 48 | this.categoriaActive = 19; | 
| 56 | break; | 49 | break; | 
| 57 | case 'ordenar': | 50 | case 'ordenar': | 
| 58 | this.categorias = categorias.filter((categoria: ICategoria) => { | 51 | this.categorias = categorias.filter((categoria: ICategoria) => { | 
| 59 | return categoria.ES_PEDIDO; | 52 | return categoria.ES_PEDIDO; | 
| 60 | }); | 53 | }); | 
| 61 | this.categoriaActive = 4; | 54 | this.categoriaActive = 4; | 
| 62 | break; | 55 | break; | 
| 63 | default: | 56 | default: | 
| 64 | this.categorias = categorias; | 57 | this.categorias = categorias; | 
| 65 | this.categoriaActive = 0; | 58 | this.categoriaActive = 0; | 
| 66 | break; | 59 | break; | 
| 67 | } | 60 | } | 
| 68 | !localStorage.getItem('articulos') ? | 61 | !localStorage.getItem('articulos') ? | 
| 69 | this.getProductos() : | 62 | this.getProductos() : | 
| 70 | this.setProductos(); | 63 | this.setProductos(); | 
| 71 | }); | 64 | }); | 
| 72 | } | 65 | } | 
| 73 | 66 | ||
| 74 | getProductos() { | 67 | getProductos() { | 
| 75 | this.articuloService.getAll() | 68 | this.articuloService.getAll() | 
| 76 | .subscribe((result: IArticulo[]) => { | 69 | .subscribe((result: IArticulo[]) => { | 
| 77 | this.articuloService.setArticulosSinImagen(result); | 70 | this.articuloService.setArticulosSinImagen(result); | 
| 78 | if (this.queMostrar == 'ordenar') { | 71 | if (this.queMostrar == 'ordenar') { | 
| 79 | this.categorias.forEach((categoria: ICategoria) => { | 72 | this.categorias.forEach((categoria: ICategoria) => { | 
| 80 | let tempArticulos = result.filter((articulo: IArticulo) => { | 73 | let tempArticulos = result.filter((articulo: IArticulo) => { | 
| 81 | return articulo.categoria_selfservice == categoria.id; | 74 | return articulo.categoria_selfservice == categoria.id; | 
| 82 | }); | 75 | }); | 
| 83 | result = tempArticulos; | 76 | result = tempArticulos; | 
| 84 | }); | 77 | }); | 
| 85 | } | 78 | } | 
| 86 | localStorage.setItem('articulos', JSON.stringify(result)); | 79 | localStorage.setItem('articulos', JSON.stringify(result)); | 
| 87 | this.setProductos(); | 80 | this.setProductos(); | 
| 88 | }, (error) => { | 81 | }, (error) => { | 
| 89 | this.showSpinner = false; | 82 | this.showSpinner = false; | 
| 90 | console.error(error); | 83 | console.error(error); | 
| 91 | }); | 84 | }); | 
| 92 | } | 85 | } | 
| 93 | 86 | ||
| 94 | setProductos() { | 87 | setProductos() { | 
| 95 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 88 | this.articulos = JSON.parse(localStorage.getItem('articulos')); | 
| 96 | this.filterItems(); | 89 | this.filterItems(); | 
| 97 | } | 90 | } | 
| 98 | 91 | ||
| 99 | filterItems() { | 92 | filterItems() { | 
| 100 | if (this.categoriaActive == 0) { | 93 | if (this.categoriaActive == 0) { | 
| 101 | this.auxArticulos = this.articulos; | 94 | this.auxArticulos = this.articulos; | 
| 102 | return; | 95 | return; | 
| 103 | } | 96 | } | 
| 104 | this.auxArticulos = this.articulos.filter(x => { | 97 | this.auxArticulos = this.articulos.filter(x => { | 
| 105 | return x.categoria_selfservice === this.categoriaActive; | 98 | return x.categoria_selfservice === this.categoriaActive; | 
| 106 | }); | 99 | }); | 
| 107 | this.ordenar(); | 100 | this.ordenar(); | 
| 108 | } | 101 | } | 
| 109 | 102 | ||
| 110 | ordenar() { | 103 | ordenar() { | 
| 111 | if (this.ordenandoByVendidos) { | 104 | if (this.ordenandoByVendidos) { | 
| 112 | this.auxArticulos.sort((a, b) => { | 105 | this.auxArticulos.sort((a, b) => { | 
| 113 | return b.cantidadVendida - a.cantidadVendida; | 106 | return b.cantidadVendida - a.cantidadVendida; | 
| 114 | }); | 107 | }); | 
| 115 | } | 108 | } | 
| 116 | } | 109 | } | 
| 117 | 110 | ||
| 118 | selectCategoria(index: number, idCategoria?: number) { | 111 | selectCategoria(index: number, idCategoria?: number) { | 
| 119 | if (this.categoriaActive == idCategoria) return; | 112 | if (this.categoriaActive == idCategoria) return; | 
| 120 | this.categoriaActive = idCategoria; | 113 | this.categoriaActive = idCategoria; | 
| 121 | this.allActive = idCategoria === 0 ? true : false; | 114 | this.allActive = idCategoria === 0 ? true : false; | 
| 122 | this.categorias.forEach((categoria, i) => { | 115 | this.categorias.forEach((categoria, i) => { | 
| 123 | categoria.selected = index === i ? true : false; | 116 | categoria.selected = index === i ? true : false; | 
| 124 | }); | 117 | }); | 
| 125 | this.filterItems(); | 118 | this.filterItems(); | 
| 126 | } | 119 | } | 
| 127 | 120 | ||
| 128 | elegirArticulo(articulo: IArticulo) { | 121 | elegirArticulo(articulo: IArticulo) { | 
| 122 | articulo.cantidad = 1; | ||
| 129 | this.articuloService.setArticulo(articulo); | 123 | this.articuloService.setArticulo(articulo); | 
| 130 | } | 124 | } | 
| 131 | 125 | ||
| 132 | increaseShow() { | 126 | increaseShow() { | 
| 133 | this.showQuantity += 100; | 127 | this.showQuantity += 100; | 
| 134 | } | 128 | } | 
| 135 | 129 | ||
| 136 | mouseup() { | 130 | mouseup() { | 
| 137 | if (!this.timeoutHandler) return; | 131 | if (!this.timeoutHandler) return; | 
| 138 | clearInterval(this.timeoutHandler); | 132 | clearInterval(this.timeoutHandler); | 
| 139 | } | 133 | } | 
| 140 | 134 | ||
| 141 | scrollY(el: HTMLElement, value) { | 135 | scrollY(el: HTMLElement, value) { | 
| 142 | el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | 136 | el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | 
| 143 | this.timeoutHandler = setInterval(() => { | 137 | this.timeoutHandler = setInterval(() => { | 
| 144 | el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | 138 | el.scroll({ behavior: "smooth", top: value + el.scrollTop }); | 
| 145 | }, 500); | 139 | }, 500); | 
| 146 | } | 140 | } | 
| 147 | 141 | ||
| 148 | scrollX(el: HTMLElement, value) { | 142 | scrollX(el: HTMLElement, value) { | 
| 149 | el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); | 143 | el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); | 
| 150 | this.timeoutHandler = setInterval(() => { | 144 | this.timeoutHandler = setInterval(() => { | 
| 151 | el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); | 145 | el.scroll({ behavior: "smooth", left: value + el.scrollLeft }); | 
| 152 | }, 500); | 146 | }, 500); | 
| 153 | } | 147 | } | 
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
| 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 { ArticuloService } from 'src/app/services/articulo/articulo.service'; | 8 | import { SharedModule } from '../shared/shared.module'; | 
| 9 | 9 | ||
| 10 | @NgModule({ | 10 | @NgModule({ | 
| 11 | declarations: [ | 11 | declarations: [ | 
| 12 | SeleccionArticulosComponent, | 12 | SeleccionArticulosComponent, | 
| 13 | HeaderPublicidadComponent, | 13 | HeaderPublicidadComponent, | 
| 14 | PromocionComponent | 14 | PromocionComponent | 
| 15 | ], | 15 | ], | 
| 16 | imports: [ | 16 | imports: [ | 
| 17 | CommonModule, | 17 | CommonModule, | 
| 18 | SeleccionArticulosRoutingModule, | 18 | SeleccionArticulosRoutingModule, | 
| 19 | ModalModule.forRoot(), | 19 | ModalModule.forRoot(), | 
| 20 | SharedModule | ||
| 20 | ], | 21 | ], | 
| 21 | exports: [HeaderPublicidadComponent], | 22 | exports: [HeaderPublicidadComponent], | 
| 22 | providers: [ArticuloService], | ||
| 23 | entryComponents: [PromocionComponent] | 23 | entryComponents: [PromocionComponent] | 
| 24 | }) | 24 | }) | 
| 25 | export class SeleccionArticulosModule { } | 25 | export class SeleccionArticulosModule { } | 
src/app/modules/shared/shared.module.ts
| File was created | 1 | import { NgModule, ModuleWithProviders } from '@angular/core'; | |
| 2 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | ||
| 3 | |||
| 4 | @NgModule({}) | ||
| 5 | export class SharedModule { | ||
| 6 | static forRoot(): ModuleWithProviders { | ||
| 7 | return { | ||
| 8 | ngModule: SharedModule, | ||
| 9 | providers: [ArticuloService] | ||
| 10 | }; | ||
| 11 | } | ||
| 12 | } | ||
| 13 | 
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 | providedIn: 'root' | ||
| 10 | }) | ||
| 11 | export class ArticuloService { | 9 | export class ArticuloService { | 
| 12 | carrito: IArticulo[] = []; | 10 | carrito: IArticulo[] = []; | 
| 13 | articuloAcargar: IArticulo; | 11 | articuloAcargar: IArticulo; | 
| 14 | promoAcargar: IArticulo; | 12 | promoAcargar: IArticulo; | 
| 15 | mostrar: string; | 13 | mostrar: string; | 
| 16 | esPromoPersonalizada: boolean = false; | 14 | esPromoPersonalizada: boolean = false; | 
| 17 | urlDeboSuite = APP_SETTINGS.apiDeboSuite; | 15 | urlDeboSuite = APP_SETTINGS.apiDeboSuite; | 
| 18 | 16 | ||
| 19 | constructor( | 17 | constructor( | 
| 20 | private http: HttpClient, | 18 | private http: HttpClient, | 
| 21 | private clienteService: ClienteService, | 19 | private clienteService: ClienteService, | 
| 22 | ) { } | 20 | ) { } | 
| 23 | 21 | ||
| 24 | getById(id) { | 22 | getById(id) { | 
| 25 | return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); | 23 | return this.http.get(`${this.urlDeboSuite}/articulos/${id}`); | 
| 26 | } | 24 | } | 
| 27 | 25 | ||
| 28 | getAll() { | 26 | getAll() { | 
| 29 | return this.http.get(`${this.urlDeboSuite}/articulos/`); | 27 | return this.http.get(`${this.urlDeboSuite}/articulos/`); | 
| 30 | } | 28 | } | 
| 31 | 29 | ||
| 32 | getAllWithPaginator(page: number = 1) { | 30 | getAllWithPaginator(page: number = 1) { | 
| 33 | return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); | 31 | return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); | 
| 34 | } | 32 | } | 
| 35 | 33 | ||
| 36 | setArticulo(articulo: IArticulo) { | 34 | setArticulo(articulo: IArticulo) { | 
| 37 | for (let i = 0; i < this.carrito.length; i++) { | 35 | for (let i = 0; i < this.carrito.length; i++) { | 
| 38 | if (this.carrito[i].id === articulo.id) { | 36 | if (this.carrito[i].id === articulo.id) { | 
| 39 | if (articulo.PRO) break; | 37 | if (articulo.PRO) break; | 
| 40 | this.carrito[i].cantidad++; | 38 | this.carrito[i].cantidad++; | 
| 41 | return; | 39 | return; | 
| 42 | } | 40 | } | 
| 43 | } | 41 | } | 
| 44 | this.carrito.unshift(articulo); | 42 | this.carrito.unshift(articulo); | 
| 45 | } | 43 | } | 
| 46 | 44 | ||
| 47 | getPromocionByCodigos(sector, codigo) { | ||
| 48 | return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`); | ||
| 49 | } | ||
| 50 | |||
| 51 | getPromociones(sector, codigo) { | ||
| 52 | return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`); | ||
| 53 | } | ||
| 54 | |||
| 55 | getPromocionSinonimos(sector, codigo) { | ||
| 56 | return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); | ||
| 57 | } | ||
| 58 | |||
| 59 | getCategorias() { | ||
| 60 | return this.http.get(`${this.urlDeboSuite}/categorias`); | ||
| 61 | } | ||
| 62 | |||
| 63 | getComponentes(sector, codigo) { | ||
| 64 | return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`); | ||
| 65 | } | ||
| 66 | |||
| 67 | pay(dataPago: any) { | 45 | pay(dataPago: any) { | 
| 68 | return new Observable((observer) => { | 46 | return new Observable((observer) => { | 
| 69 | this.clienteService.getById(-1) | 47 | this.clienteService.getById(-1) | 
| 70 | .subscribe(cliente => { | 48 | .subscribe(cliente => { | 
| 71 | let puntoVenta = parseInt(localStorage.getItem('impresoraPVE')); | 49 | let puntoVenta = parseInt(localStorage.getItem('impresoraPVE')); | 
| 72 | this.markArticuloInPromoAsRemoved(); | 50 | this.markArticuloInPromoAsRemoved(); | 
| 73 | this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, { | 51 | this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, { | 
| 74 | productos: this.carrito, | 52 | productos: this.carrito, | 
| 75 | cliente: cliente, | 53 | cliente: cliente, | 
| 76 | origen: 'autoservicio', | 54 | origen: 'autoservicio', | 
| 77 | codigoVendedor: 5, | 55 | codigoVendedor: 5, | 
| 78 | puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta, | 56 | puntoVenta: dataPago.medioPago === 9 ? -1 * puntoVenta : puntoVenta, | 
| 79 | pedidoAnombreDe: dataPago.pedidoAnombreDe, | 57 | pedidoAnombreDe: dataPago.pedidoAnombreDe, | 
| 80 | numeroPlanilla: '11111', | 58 | numeroPlanilla: '11111', | 
| 81 | }) | 59 | }) | 
| 82 | .subscribe((data) => { | 60 | .subscribe((data) => { | 
| 83 | observer.next(data); | 61 | observer.next(data); | 
| 84 | observer.complete(); | 62 | observer.complete(); | 
| 85 | }); | 63 | }); | 
| 86 | }); | 64 | }); | 
| 87 | }); | 65 | }); | 
| 88 | } | 66 | } | 
| 89 | 67 | ||
| 90 | cleanShoppingCar() { | 68 | cleanShoppingCar() { | 
| 91 | this.articuloAcargar = undefined; | 69 | this.articuloAcargar = undefined; | 
| 92 | this.promoAcargar = undefined; | 70 | this.promoAcargar = undefined; | 
| 93 | this.carrito = []; | 71 | this.carrito = []; | 
| 94 | } | 72 | } | 
| 95 | 73 | ||
| 96 | setArticulosSinImagen(articulos: IArticulo[]) { | 74 | setArticulosSinImagen(articulos: IArticulo[]) { | 
| 97 | articulos.forEach((articulo: IArticulo) => { | 75 | articulos.forEach((articulo: IArticulo) => { | 
| 98 | articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : | 76 | articulo.imagenes = !articulo.imagenes ? [{ imagen: 'noImage.jpg' }] : | 
| 99 | !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; | 77 | !articulo.imagenes.length ? [{ imagen: 'noImage.jpg' }] : articulo.imagenes; | 
| 100 | }); | 78 | }); | 
| 101 | } | 79 | } | 
| 102 | 80 | ||
| 103 | markArticuloInPromoAsRemoved() { | 81 | markArticuloInPromoAsRemoved() { | 
| 104 | this.carrito.forEach((articulo: IArticulo) => { | 82 | this.carrito.forEach((articulo: IArticulo) => { | 
| 105 | if (articulo.PRO) { | 83 | if (articulo.PRO) { | 
| 106 | articulo.productos.forEach((articulo: IArticulo) => { | 84 | articulo.productos.forEach((articulo: IArticulo) => { | 
| 107 | if (articulo.cantidadAdicionada === 0) { | 85 | if (articulo.cantidadAdicionada === 0) { | 
| 108 | articulo.cantidad = 0; | 86 | articulo.cantidad = 0; | 
| 109 | articulo.importeValorExtra = 0; | 87 | articulo.importeValorExtra = 0; | 
| 110 | } | 88 | } | 
| 111 | }); | 89 | }); | 
| 112 | } | 90 | } | 
| 113 | }); | 91 | }); | 
| 114 | } | 92 | } | 
| 115 | } | 93 | } | 
| 116 | 94 | 
src/app/services/categoria/categoria.service.spec.ts
| 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
| 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/promocion/promocion.service.spec.ts
| 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
| 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
| 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
| 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 |