Commit e3899772c182228c834d87e6fca33fdb5007f851

Authored by Eric Fernandez
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !24
src/app/app.module.ts
1 //#region MODULES 1 //#region MODULES
2 import { BrowserModule } from '@angular/platform-browser'; 2 import { BrowserModule } from '@angular/platform-browser';
3 import { NgModule } from '@angular/core'; 3 import { NgModule } from '@angular/core';
4 import { AppRoutingModule } from './app-routing.module'; 4 import { AppRoutingModule } from './app-routing.module';
5 import { HttpClientModule } from '@angular/common/http'; 5 import { HttpClientModule } from '@angular/common/http';
6 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 6 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7 import { TooltipModule } from 'ngx-bootstrap/tooltip'; 7 import { TooltipModule } from 'ngx-bootstrap/tooltip';
8 import { PopoverModule } from 'ngx-bootstrap/popover'; 8 import { PopoverModule } from 'ngx-bootstrap/popover';
9 //#endregion 9 //#endregion
10 10
11 //#region COMPONENTS 11 //#region COMPONENTS
12 import { AppComponent } from './app.component'; 12 import { AppComponent } from './app.component';
13 import { HeaderComponent } from './components/header/header.component'; 13 import { HeaderComponent } from './components/header/header.component';
14 import { SidebarComponent } from './components/sidebar/sidebar.component'; 14 import { SidebarComponent } from './components/sidebar/sidebar.component';
15 import { CarouselComponent } from './components/carousel/carousel.component'; 15 import { CarouselComponent } from './components/carousel/carousel.component';
16 import { HomeComponent } from './components/home/home.component'; 16 import { HomeComponent } from './components/home/home.component';
17 import { InicioComponent } from './components/inicio/inicio.component'; 17 import { InicioComponent } from './components/inicio/inicio.component';
18 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 18 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
19 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 19 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
20 import { MasterComponent } from './components/master/master.component'; 20 import { MasterComponent } from './components/master/master.component';
21 import { PopoverComponent } from './components/popover/popover.component'; 21 import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
22 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
22 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 23 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
23 //#endregion 24 //#endregion
24 25
25 @NgModule({ 26 @NgModule({
26 declarations: [ 27 declarations: [
27 AppComponent, 28 AppComponent,
28 HeaderComponent, 29 HeaderComponent,
29 SidebarComponent, 30 SidebarComponent,
30 CarouselComponent, 31 CarouselComponent,
31 HomeComponent, 32 HomeComponent,
32 InicioComponent, 33 InicioComponent,
33 BusquedaProductosComponent, 34 BusquedaProductosComponent,
34 ConfirmacionCarritoComponent, 35 ConfirmacionCarritoComponent,
35 MasterComponent, 36 MasterComponent,
36 PopoverComponent, 37 PopoverPromosComponent,
38 PopoverSinonimosComponent,
37 AmbImagenesComponent 39 AmbImagenesComponent
38 ], 40 ],
39 imports: [ 41 imports: [
40 BrowserModule, 42 BrowserModule,
41 AppRoutingModule, 43 AppRoutingModule,
42 HttpClientModule, 44 HttpClientModule,
43 FormsModule, 45 FormsModule,
44 ReactiveFormsModule, 46 ReactiveFormsModule,
45 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), 47 ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
46 TooltipModule.forRoot(), 48 TooltipModule.forRoot(),
47 PopoverModule.forRoot() 49 PopoverModule.forRoot()
48 ], 50 ],
49 providers: [], 51 providers: [],
50 bootstrap: [AppComponent] 52 bootstrap: [AppComponent]
51 }) 53 })
52 export class AppModule { } 54 export class AppModule { }
53 55
src/app/components/busqueda-productos/busqueda-productos.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div class="col-sm-2 p-1"> 17 <div class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 [ngClass]="{active: categoria == 1}" 23 [ngClass]="{active: categoria == 1}"
24 (click)="categoria = 1" 24 (click)="categoria = 1"
25 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 25 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
26 Combos y Promociones 26 Combos y Promociones
27 </li> 27 </li>
28 <li 28 <li
29 [ngClass]="{active: categoria == 2}" 29 [ngClass]="{active: categoria == 2}"
30 (click)="categoria = 2" 30 (click)="categoria = 2"
31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 31 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
32 Todos 32 Todos
33 </li> 33 </li>
34 <li 34 <li
35 [ngClass]="{active: categoria == 3}" 35 [ngClass]="{active: categoria == 3}"
36 (click)="categoria = 3" 36 (click)="categoria = 3"
37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 37 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
38 Bebidas 38 Bebidas
39 </li> 39 </li>
40 <li 40 <li
41 [ngClass]="{active: categoria == 4}" 41 [ngClass]="{active: categoria == 4}"
42 (click)="categoria = 4" 42 (click)="categoria = 4"
43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 43 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
44 Sandwichería 44 Sandwichería
45 </li> 45 </li>
46 <li 46 <li
47 [ngClass]="{active: categoria == 5}" 47 [ngClass]="{active: categoria == 5}"
48 (click)="categoria = 5" 48 (click)="categoria = 5"
49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 49 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
50 Panaderia 50 Panaderia
51 </li> 51 </li>
52 <li 52 <li
53 [ngClass]="{active: categoria == 6}" 53 [ngClass]="{active: categoria == 6}"
54 (click)="categoria = 6" 54 (click)="categoria = 6"
55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 55 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
56 Golosinas 56 Golosinas
57 </li> 57 </li>
58 <li 58 <li
59 [ngClass]="{active: categoria == 7}" 59 [ngClass]="{active: categoria == 7}"
60 (click)="categoria = 7" 60 (click)="categoria = 7"
61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm"> 61 class="list-group-item list-group-item-action text-center my-1 p-2 h6 shadow-sm">
62 Tabaqueria 62 Tabaqueria
63 </li> 63 </li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 66
67 <!-- SEARCH INPUT --> 67 <!-- SEARCH INPUT -->
68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10"> 68 <div *ngIf="productos.length > 0" class="fade-in col-sm-10">
69 69
70 <div class="form-group row search"> 70 <div class="form-group row search">
71 <div class="col-sm-10"> 71 <div class="col-sm-10">
72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 72 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
73 <input 73 <input
74 type="text" 74 type="text"
75 class="form-control form-control-lg shadow-sm rounded-pill px-5" 75 class="form-control form-control-lg shadow-sm rounded-pill px-5"
76 placeholder="Búsqueda productos" 76 placeholder="Búsqueda productos"
77 [(ngModel)]="searchTerm" 77 [(ngModel)]="searchTerm"
78 (ngModelChange)="filterItems()"> 78 (ngModelChange)="filterItems()">
79 </div> 79 </div>
80 <!-- BOTON VOLVER --> 80 <!-- BOTON VOLVER -->
81 <div class="col-sm-2"> 81 <div class="col-sm-2">
82 <button 82 <button
83 type="button" 83 type="button"
84 class="btn btn-light btn-lg shadow-sm" 84 class="btn btn-light btn-lg shadow-sm"
85 [routerLink]="['/inicio']"> 85 [routerLink]="['/inicio']">
86 <span class="font-weight-normal h6 pr-2">Volver</span> 86 <span class="font-weight-normal h6 pr-2">Volver</span>
87 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 87 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
88 </button> 88 </button>
89 </div> 89 </div>
90 </div> 90 </div>
91 <!-- LISTA DE PRODUCTOS --> 91 <!-- LISTA DE PRODUCTOS -->
92 <div class="row align-items-start vh-60 overflow-scroll disable-user-select"> 92 <div class="row align-items-start vh-60 overflow-scroll disable-user-select">
93 <div 93 <div
94 class="col-4 p-2" 94 class="col-4 p-2"
95 *ngFor="let producto of auxProductos"> 95 *ngFor="let producto of auxProductos">
96 <div 96 <div
97 class="card-effect bg-white rounded-sm shadow border-0" 97 class="card-effect bg-white rounded-sm shadow border-0"
98 (click)="mostrarBotonCargar(producto)"> 98 (click)="mostrarBotonCargar(producto)">
99 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="rounded-sm w-100 m-auto"> 99 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto">
100 <div class="p-2"> 100 <div class="p-2">
101 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
102 <div class="row justify-content-between m-0"> 102 <div class="row justify-content-between m-0">
103 <div class="col-12 p-0"> 103 <div class="col-12 p-0">
104 <div class="text-left"> 104 <div class="text-left">
105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 105 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 106 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="col-12 my-auto pt-2 pr-2 p-0"> 109 <div class="col-12 my-auto pt-2 pr-2 p-0">
110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 110 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
111 </div> 111 </div>
112 </div> 112 </div>
113 <div *ngIf="producto.showCargarProducto" class="row mt-2"> 113 <div *ngIf="producto.showCargarProducto" class="row mt-2">
114 <div class="col-sm-12"> 114 <div class="col-sm-12">
115 <button 115 <button
116 type="button" 116 type="button"
117 class="btn btn-block btn-outline-primary shadow" 117 class="btn btn-block btn-outline-primary shadow"
118 (click)="elegirProducto(producto)"> 118 (click)="elegirProducto(producto)">
119 Cargar Producto 119 Cargar Producto
120 </button> 120 </button>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 128
129 <!-- SPINNER --> 129 <!-- SPINNER -->
130 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center"> 130 <div *ngIf="productos.length === 0 && showSpinner" class="col-sm-10 align-self-center">
131 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 131 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
132 <span class="text-secondary m-2 h5">Cargando información.</span> 132 <span class="text-secondary m-2 h5">Cargando información.</span>
133 </div> 133 </div>
134 134
135 </div> 135 </div>
136 136
137 </div> 137 </div>
138 138
139 </div> 139 </div>
140 140
src/app/components/inicio/inicio.component.html
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto"> 15 <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
16 <div class="card-body text-left px-4 py-3"> 16 <div class="card-body text-left px-4 py-3">
17 <div class="row"> 17 <div class="row">
18 <div class="col-7"> 18 <div class="col-7">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 </div> 20 </div>
21 <div class="col-5 p-0"> 21 <div class="col-5 p-0">
22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 22 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
23 </div> 23 </div>
24 </div> 24 </div>
25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 25 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
26 </div> 26 </div>
27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 27 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
28 <div class="carousel-inner"> 28 <div class="carousel-inner">
29 <div class="carousel-item active"> 29 <div class="carousel-item active">
30 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 30 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 33 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded"> 36 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- ORDENAR --> 42 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left px-4 py-3"> 44 <div class="card-body text-left px-4 py-3">
45 <div class="row"> 45 <div class="row">
46 <div class="col-5"> 46 <div class="col-5">
47 <p class="h3 card-title">Ordenar</p> 47 <p class="h3 card-title">Ordenar Pedido</p>
48 </div> 48 </div>
49 <div class="col-7 p-0"> 49 <div class="col-7 p-0">
50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 50 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
51 </div> 51 </div>
52 </div> 52 </div>
53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 53 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
54 </div> 54 </div>
55 <img 55 <img
56 class="card-img-bottom d-block w-100 mx-auto rounded" 56 class="card-img-bottom d-block w-100 mx-auto rounded"
57 src="{{apiUrl}}/imagenes/cafe.jpg"> 57 src="{{apiUrl}}/imagenes/cafe.jpg">
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 61 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
62 62
63 <!-- CARGAR PRODUCTOS --> 63 <!-- CARGAR PRODUCTOS -->
64 <ng-template #popTemplate> 64 <ng-template #popTemplate>
65 <app-popover 65 <app-popover-promos
66 *ngIf="productoAcargar && !productoEsPromo"
66 [popover]="popoverDirective" 67 [popover]="popoverDirective"
67 [popoverContent]="popoverContent" 68 [popoverContent]="promociones"
68 class="fade-in text-white rounded-sm border-0"> 69 (promoSeleccionada)="promoSeleccionada($event)"
69 </app-popover> 70 class="text-white rounded-sm border-0">
71 </app-popover-promos>
72 <app-popover-sinonimos
73 *ngIf="promoAcargar && productoEsPromo"
74 [popover]="popoverDirective"
75 [popoverContent]="sinonimos"
76 class="text-white rounded-sm border-0">
77 </app-popover-sinonimos>
70 </ng-template> 78 </ng-template>
71 <div 79 <div
72 placement="left" 80 placement="left"
73 triggers="" 81 triggers=""
74 [popover]="popTemplate" 82 [popover]="popTemplate"
75 class="w-100" 83 class="w-100"
76 #pop="bs-popover"> 84 #pop="bs-popover">
77 <div class="card bg-white border-0 shadow rounded mb-auto"> 85 <div class="card bg-white border-0 shadow rounded mb-auto">
78 <div class="card-body text-left px-4 py-3"> 86 <div class="card-body text-left px-4 py-3">
79 <div class="row"> 87 <div class="row">
80 <div class="col-6"> 88 <div class="col-6">
81 <p class="h3 card-title">Cargar Productos</p> 89 <p class="h3 card-title">Cargar Productos</p>
82 </div> 90 </div>
83 <div class="col-6 p-0"> 91 <div class="col-6 p-0">
84 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 92 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
85 </div> 93 </div>
86 </div> 94 </div>
87 <p class="h5 card-text text-muted font-weight-light"> 95 <p class="h5 card-text text-muted font-weight-light">
88 Coloque el código de<br> 96 Coloque el código de<br>
89 barras o QR frente al scanner. 97 barras o QR frente al scanner.
90 </p> 98 </p>
91 </div> 99 </div>
92 <div class="row m-4"> 100 <div class="row m-4">
93 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 101 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
102 <!-- IMAGEN DE ESCANER -->
94 <img 103 <img
95 *ngIf="!productoAcargar" 104 *ngIf="!productoAcargar"
96 class="card-img-top d-block w-100 mx-auto rounded-sm" 105 class="card-img-top d-block w-100 mx-auto rounded-sm"
97 src="{{apiUrl}}/imagenes/escanner.jpg"> 106 src="{{apiUrl}}/imagenes/escanner.jpg">
98 <div *ngIf="productoAcargar"> 107
108 <!-- PRODUCTO A CARGAR -->
109 <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
99 <img 110 <img
100 class="card-img-top d-block w-100 mx-auto rounded-sm" 111 class="card-img-top d-block w-100 mx-auto rounded-sm"
101 src="{{apiUrl}}/imagenes/cafe.jpg"> 112 src="{{apiUrl}}/imagenes/testImg3.jpg">
102 113
103 <div class="row justify-content-between m-3"> 114 <div class="row justify-content-between m-3">
104 <div class="col-auto text-left px-1"> 115 <div class="col-12 text-left px-1">
105 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 116 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
106 <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
107 </div> 117 </div>
108 <div class="col-4 text-right my-auto"> 118 <div class="col-12 text-right mt-2">
109 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 119 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
110 </div> 120 </div>
111 </div> 121 </div>
112 </div> 122 </div>
123
124 <!-- PROMO A CARGAR -->
125 <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
126 <img
127 class="card-img-top d-block w-100 mx-auto rounded-sm"
128 src="{{apiUrl}}/imagenes/testImg3.jpg">
129
130 <div class="row justify-content-between m-3">
131 <div class="col-12 text-left px-1">
132 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
133 </div>
134 <div class="col-12 text-right mt-2 align-self-end">
135 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
136 </div>
137 </div>
138 </div>
139
113 </div> 140 </div>
114 <!-- BOTONES --> 141 <!-- BOTONES DE CARGAR PRODUCTOS-->
115 <div 142 <div
116 class="col-5 pr-0" 143 class="col-5 pr-0"
117 *ngIf="productoAcargar && tienePromo"> 144 *ngIf="productoAcargar && tienePromo">
118 <button 145 <button
119 *ngIf="productoEsPromo" 146 *ngIf="productoEsPromo && promoAcargar.sinonimos"
120 type="button" 147 type="button"
121 class="btn btn-light btn-block shadow-sm" 148 class="btn btn-light btn-block shadow-sm"
122 (click)="pop.show()"> 149 (click)="pop.show()">
123 <span class="pr-2">Personalizar</span> 150 <span class="pr-2">Personalizar</span>
124 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 151 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
125 </button> 152 </button>
126 <button 153 <button
127 *ngIf="!productoEsPromo" 154 *ngIf="!productoEsPromo"
128 type="button" 155 type="button"
129 class="btn btn-primary btn-block shadow-sm" 156 class="btn btn-primary btn-block shadow-sm"
130 (click)="pop.show()"> 157 (click)="pop.show()">
131 <span class="pr-2">Mostrar promociones</span> 158 <span class="pr-2">Mostrar promociones</span>
132 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 159 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
133 </button> 160 </button>
134 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 161 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
135 <span class="pr-2 font-weight-bold">Confirmar</span> 162 <span class="pr-2 font-weight-bold">Confirmar</span>
136 <i class="fa fa-check text-success" aria-hidden="true"></i> 163 <i class="fa fa-check text-success" aria-hidden="true"></i>
137 </button> 164 </button>
138 <button 165 <button
139 type="button" 166 type="button"
140 class="btn btn-light btn-block shadow-sm" 167 class="btn btn-light btn-block shadow-sm"
141 (click)="deshacerCarga()"> 168 (click)="deshacerCarga()">
142 <span class="pr-2">Deshacer</span> 169 <span class="pr-2">Deshacer</span>
143 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 170 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
144 </button> 171 </button>
145 </div> 172 </div>
146 </div> 173 </div>
147 </div> 174 </div>
148 </div> 175 </div>
149 176
150 <!-- BUSCAR PRODUCTOS --> 177 <!-- BUSCAR PRODUCTOS -->
151 <div (click)="goPage('busqueda-productos')" 178 <div (click)="goPage('busqueda-productos')"
152 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 179 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
153 <div class="card-body text-left px-4 py-3"> 180 <div class="card-body text-left px-4 py-3">
154 <div class="row"> 181 <div class="row">
155 <div class="col-6"> 182 <div class="col-6">
156 <p class="h3 card-title">Buscar Productos</p> 183 <p class="h3 card-title">Buscar Productos</p>
157 <p class="h5 card-text text-muted font-weight-light"> 184 <p class="h5 card-text text-muted font-weight-light">
158 Busque aquí los productos<br> 185 Busque aquí los productos<br>
159 que no tienen código </p> 186 que no tienen código </p>
160 </div> 187 </div>
161 <div class="col-6 p-0"> 188 <div class="col-6 p-0">
162 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 189 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
163 </div> 190 </div>
164 </div> 191 </div>
165 192
166 </div> 193 </div>
167 </div> 194 </div>
168 195
169 </div> 196 </div>
170 197
171 </div> 198 </div>
172 199
173 </div> 200 </div>
174 </div> 201 </div>
src/app/components/inicio/inicio.component.ts
1 import { Component, OnInit, ViewChild } from '@angular/core'; 1 import { Component, OnInit, ViewChild } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap'; 2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { Producto } from 'src/app/wrappers/producto'; 4 import { Producto } from 'src/app/wrappers/producto';
5 import { ProductoService } from 'src/app/services/producto.service'; 5 import { ProductoService } from 'src/app/services/producto.service';
6 import { Router } from '@angular/router'; 6 import { Router } from '@angular/router';
7 import { Promocion } from 'src/app/wrappers/promocion'; 7 import { Promocion } from 'src/app/wrappers/promocion';
8 import { Sinonimo } from 'src/app/wrappers/sinonimo';
8 9
9 10
10 @Component({ 11 @Component({
11 selector: 'app-inicio', 12 selector: 'app-inicio',
12 templateUrl: './inicio.component.html', 13 templateUrl: './inicio.component.html',
13 styleUrls: ['./inicio.component.scss'] 14 styleUrls: ['./inicio.component.scss']
14 }) 15 })
15 export class InicioComponent implements OnInit { 16 export class InicioComponent implements OnInit {
16 17
17 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective; 18 @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
18 private productoAcargar: Producto; 19 private productoAcargar: Producto;
20 private promoAcargar: Promocion;
19 private tienePromo = false; 21 private tienePromo = false;
20 private productoEsPromo = false; 22 private productoEsPromo = false;
21 23
22 popoverContent: Promocion[] = [] 24 promociones: Promocion[] = [];
25 sinonimos: Sinonimo[] = [];
23 apiUrl: string = appSettings.apiUrl 26 apiUrl: string = appSettings.apiUrl
24 27
25 constructor( 28 constructor(
26 private router: Router, 29 private router: Router,
27 private productoService: ProductoService) { } 30 private productoService: ProductoService) { }
28 31
29 ngOnInit() { 32 ngOnInit() {
30 33
31 this.productoAcargar = this.productoService.productoAcargar; 34 this.productoAcargar = this.productoService.productoAcargar;
32 if (this.productoAcargar) { 35 if (this.productoAcargar) {
33 var sector = this.productoAcargar.CodSec; 36 var sector = this.productoAcargar.CodSec;
34 var codigo = this.productoAcargar.CodArt; 37 var codigo = this.productoAcargar.CodArt;
35 this.productoService.getPromocion(sector, codigo) 38 this.productoService.getPromocion(sector, codigo)
36 .subscribe((promociones: Promocion[]) => { 39 .subscribe((res: Promocion[]) => {
37 40
38 if (promociones.length === 0) { 41 if (res.length === 0) {
39 //Si no tiene promociones la cargará al carrito despues de un tiempo 42 //Si no tiene promociones la cargará al carrito despues de un tiempo
40 setTimeout(() => { 43 setTimeout(() => {
41 this.productoService.productos.push(this.productoAcargar); 44 this.productoService.productos.push(this.productoAcargar);
42 this.productoAcargar = undefined; 45 this.productoAcargar = undefined;
43 this.tienePromo = false; 46 this.tienePromo = false;
44 }, 2000) 47 }, 2000)
45 } else { 48 } else {
46 49
47 this.popoverContent = promociones; 50 this.promociones = res;
48 this.tienePromo = true; 51 this.tienePromo = true;
49 this.popoverDirective.show(); 52 this.popoverDirective.show();
50 } 53 }
51 }, error => { console.error(error); }) 54 }, error => { console.error(error); })
52 } 55 }
53 } 56 }
54 57
55 showPopover() { 58 showPopover() {
56 59
57 this.popoverDirective.show(); 60 this.popoverDirective.show();
58 } 61 }
59 62
60 private goPage(pageUrl) { 63 private goPage(pageUrl) {
64
61 this.router.navigate([pageUrl]); 65 this.router.navigate([pageUrl]);
62 } 66 }
63 67
64 deshacerCarga() { 68 deshacerCarga() {
69 if (this.productoEsPromo) {
70 this.promoAcargar = undefined;
71 this.productoEsPromo = false;
72 this.popoverDirective.show();
73 } else {
74 this.productoAcargar = undefined;
75 this.tienePromo = false;
76 this.popoverDirective.hide();
77 }
78 }
65 79
66 this.productoAcargar = undefined; 80 promoSeleccionada($event: Promocion) {
67 this.tienePromo = false; 81
82 this.productoEsPromo = true;
83 this.promoAcargar = $event;
68 this.popoverDirective.hide(); 84 this.popoverDirective.hide();
85 if (this.promoAcargar.sinonimos) {
86 var sector = this.promoAcargar.sector;
87 var codigo = this.promoAcargar.codigo;
88 this.productoService.getPromocionSinonimos(sector, codigo)
89 .subscribe((res : Sinonimo[]) => {
90
91 this.sinonimos = res;
92 this.showPopover();
93 })
94 }
69 } 95 }
70 96
71 } 97 }
72 98
src/app/components/popover-promos/popover-promos.component.html
File was created 1 <div class="card-body fade-left">
2 <div class="row">
3 <div class="col text-left">
4 <p class="h5 card-title">
5 Este producto forma parte<br>
6 de Combos y Promociones
7 </p>
8 </div>
9 </div>
10
11 <div class="overflow-scroll popover-size pr-2">
12 <div
13 class="row my-2"
14 *ngFor="let promo of popoverContent">
15 <div class="col text-dark">
16 <div
17 class="bg-white card-effect rounded-sm p-2 px-3"
18 (click)="seleccionarPromo(promo)">
19 <div class="row justify-content-between">
20 <div class="col-12 text-left">
21 <p class="h5 mb-0">
22 <small class="font-weight-bold">{{promo.nombrePromo}}</small>
23 </p>
24 </div>
25 <div class="col-12 text-right mt-2">
26 <p class="h4 font-weight-bold mb-0">
27 {{calcularPrecioDePromo(promo.productos) | currency}}
28 </p>
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34 </div>
35
36 <div class="row mt-3 justify-content-end">
37 <div class="col-auto">
38 <button
39 type="button"
40 class="btn btn-sm btn-light shadow"
41 (click)="hide()">
42 <span class="pr-2">No, gracias</span>
43 <i class="fa fa-times text-danger" aria-hidden="true"></i>
44 </button>
45 </div>
46 </div>
47
48 </div>
49
src/app/components/popover-promos/popover-promos.component.scss
File was created 1 .popover-size {
2 max-height: 57vh !important;
3 min-height: 57vh !important;
4 }
5
src/app/components/popover-promos/popover-promos.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 import { PopoverPromosComponent } from './popover-promos.component';
3
4 describe('PopoverPromosComponent', () => {
5 let component: PopoverPromosComponent;
6 let fixture: ComponentFixture<PopoverPromosComponent>;
7
8 beforeEach(async(() => {
9 TestBed.configureTestingModule({
10 declarations: [ PopoverPromosComponent ]
11 })
12 .compileComponents();
13 }));
14
15 beforeEach(() => {
16 fixture = TestBed.createComponent(PopoverPromosComponent);
17 component = fixture.componentInstance;
18 fixture.detectChanges();
19 });
20
21 it('should create', () => {
22 expect(component).toBeTruthy();
23 });
24 });
25
src/app/components/popover-promos/popover-promos.component.ts
File was created 1 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap/popover';
3 import { Promocion } from 'src/app/wrappers/promocion';
4 import { Producto } from 'src/app/wrappers/producto';
5
6 @Component({
7 selector: 'app-popover-promos',
8 templateUrl: './popover-promos.component.html',
9 styleUrls: ['./popover-promos.component.scss']
10 })
11 export class PopoverPromosComponent implements OnInit {
12
13 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Promocion[];
15 @Output() promoSeleccionada = new EventEmitter<Promocion>();
16
17 constructor() { }
18
19 ngOnInit() {
20 }
21
22 hide() {
23 this.popover.hide();
24 }
25
26 seleccionarPromo(promo: Promocion) {
27
28 this.promoSeleccionada.emit(promo);
29 }
30
31 calcularPrecioDePromo(productos: Producto[]) {
32
33 var precio = 0;
34 productos.forEach(producto => {
35 precio += producto.PreVen;
36 })
37
38 return precio;
39 }
40
41 }
42
src/app/components/popover-sinonimos/popover-sinonimos.component.html
File was created 1 <div class="card-body fade-left">
2
3 <div class="row m-0">
4 <div class="col text-left">
5 <p class="h4 card-title">
6 Personalice su pedido
7 </p>
8 </div>
9 </div>
10
11 <div class="row m-0">
12 <div class="col text-left">
13 <p class="h5 card-title">
14 Elija una opción
15 </p>
16 </div>
17 </div>
18
19 <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
20 <div class="col">
21 <div class="row" *ngFor="let sinonimo of popoverContent">
22 <div class="col pl-4 h6">
23 <div class="custom-control custom-radio">
24 <input
25 type="radio"
26 id="{{sinonimo.CodArt}}"
27 name="sinonimoOpciones"
28 class="custom-control-input"
29 (click)="setSinonimo(sinonimo)">
30 <label
31 class="font-weight-normal custom-control-label"
32 for="{{sinonimo.CodArt}}">
33 {{sinonimo.DetArt}}
34 </label>
35 </div>
36 </div>
37 </div>
38 </div>
39 </div>
40
41 <div class="row mt-3 justify-content-end">
42 <div class="col-auto">
43 <button type="button" class="btn btn-sm btn-light shadow" (click)="hidePopover()">
44 <span class="font-weight-bold pr-2">Continuar</span>
45 <i class="fa fa-check text-success" aria-hidden="true"></i>
46 </button>
47 </div>
48 </div>
49
50 </div>
51
src/app/components/popover-sinonimos/popover-sinonimos.component.scss
File was created 1 .popover-size {
2 max-height: 57vh !important;
3 min-height: 57vh !important;
4 }
5
src/app/components/popover-sinonimos/popover-sinonimos.component.spec.ts
File was created 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2
3 import { PopoverSinonimosComponent } from './popover-sinonimos.component';
4
5 describe('PopoverSinonimosComponent', () => {
6 let component: PopoverSinonimosComponent;
7 let fixture: ComponentFixture<PopoverSinonimosComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ PopoverSinonimosComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(PopoverSinonimosComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
File was created 1 import { Component, OnInit, Input } from '@angular/core';
2 import { PopoverDirective } from 'ngx-bootstrap';
3 import { Sinonimo } from 'src/app/wrappers/sinonimo';
4
5 @Component({
6 selector: 'app-popover-sinonimos',
7 templateUrl: './popover-sinonimos.component.html',
8 styleUrls: ['./popover-sinonimos.component.scss']
9 })
10 export class PopoverSinonimosComponent implements OnInit {
11
12 //Directiva del popover, para poder cerrarlo desde este componente
13 @Input() popover: PopoverDirective;
14 @Input() popoverContent: Sinonimo[];
15 sinonimoAelegir: Sinonimo;
16
17 constructor() { }
18
19 ngOnInit() {
20 }
21
22 hidePopover() {
23
24 this.popover.hide();
25 }
26
27 setSinonimo(sinonimo: Sinonimo) {
28
29 this.sinonimoAelegir = sinonimo;
30 }
31
32 }
33
src/app/components/popover/popover.component.html
1 <div class="card-body"> File was deleted
2 <div class="row">
3 <div class="col text-left">
4 <p class="h5 card-title">
5 Este producto forma parte<br>
6 de Combos y Promociones
7 </p>
8 </div>
9 </div>
10
11 <div class="overflow-scroll popover-size pr-2">
12 <div
13 class="row my-2"
14 *ngFor="let promo of popoverContent">
15 <div class="col text-dark">
16 <div class="bg-white rounded-sm p-2 px-3">
17 <div class="row justify-content-between">
18 <div class="col-auto text-left">
19 <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
20 <p
21 class="h6 mb-0"
22 *ngFor="let producto of promo.productos">
23 {{producto.DetArt}}
24 </p>
25 </div>
26 <div class="col-auto text-right align-self-end">
27 <p class="h4 font-weight-bold mb-0">{{28 | currency}}</p>
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34
35 <div class="row mt-3 justify-content-end">
36 <div class="col-auto">
37 <button
38 type="button"
39 class="btn btn-sm btn-light shadow"
40 (click)="hide()">
41 <span class="pr-2">No, gracias</span>
42 <i class="fa fa-times text-danger" aria-hidden="true"></i>
43 </button>
44 </div>
45 </div>
46
47 </div>
48 1 <div class="card-body">
src/app/components/popover/popover.component.scss
1 .popover-size { File was deleted
2 max-height: 430px !important;
3 min-height: 200px !important;
4 }
5 1 .popover-size {
src/app/components/popover/popover.component.spec.ts
1 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; File was deleted
2
3 import { PopoverComponent } from './popover.component';
4
5 describe('PopoverComponent', () => {
6 let component: PopoverComponent;
7 let fixture: ComponentFixture<PopoverComponent>;
8
9 beforeEach(async(() => {
10 TestBed.configureTestingModule({
11 declarations: [ PopoverComponent ]
12 })
13 .compileComponents();
14 }));
15
16 beforeEach(() => {
17 fixture = TestBed.createComponent(PopoverComponent);
18 component = fixture.componentInstance;
19 fixture.detectChanges();
20 });
21
22 it('should create', () => {
23 expect(component).toBeTruthy();
24 });
25 });
26 1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
src/app/components/popover/popover.component.ts
1 import { Component, OnInit, Input } from '@angular/core'; File was deleted
2 import { PopoverDirective } from 'ngx-bootstrap/popover';
3 import { Promocion } from 'src/app/wrappers/promocion';
4
5 @Component({
6 selector: 'app-popover',
7 templateUrl: './popover.component.html',
8 styleUrls: ['./popover.component.scss']
9 })
10 export class PopoverComponent implements OnInit {
11
12 @Input() popover: PopoverDirective;
13 @Input() popoverContent: Promocion[];
14
15 constructor() { }
16
17 ngOnInit() {
18 }
19
20 hide() {
21 this.popover.hide();
22 }
23
24 }
25 1 import { Component, OnInit, Input } from '@angular/core';
src/app/services/producto.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 { Observable } from 'rxjs'; 3 import { Observable } from 'rxjs';
4 import { appSettings } from 'src/etc/AppSettings'; 4 import { appSettings } from 'src/etc/AppSettings';
5 import { Producto } from '../wrappers/producto'; 5 import { Producto } from '../wrappers/producto';
6 6
7 @Injectable({ 7 @Injectable({
8 providedIn: 'root' 8 providedIn: 'root'
9 }) 9 })
10 export class ProductoService { 10 export class ProductoService {
11 11
12 productos: Producto[] = []; 12 productos: Producto[] = [];
13 productoAcargar: Producto; 13 productoAcargar: Producto;
14 14
15 constructor(private http: HttpClient) { } 15 constructor(private http: HttpClient) { }
16 16
17 getAll(): Observable<any> { 17 getAll(): Observable<any> {
18 18
19 return this.http.get(`${appSettings.apiUrl}/articulos`); 19 return this.http.get(`${appSettings.apiUrl}/articulos`);
20 } 20 }
21 21
22 setProductos(producto: Producto) { 22 setProductos(producto: Producto) {
23 23
24 this.productos.push(producto); 24 this.productos.push(producto);
25 } 25 }
26 26
27 getPromocion(sector, codigo): Observable<any> { 27 getPromocion(sector, codigo): Observable<any> {
28
29 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
30 // var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${2}/${1306}`;
31 return this.http.get(url);
32 }
28 33
34 getPromocionSinonimos(sector, codigo): Observable<any> {
35
29 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`; 36 var url = `${appSettings.apiUrl}/promociones/incluir-articulo/${sector}/${codigo}`;
37 // var url = `${appSettings.apiUrl}/sinonimos/promo/${2}/${7}`;
30 return this.http.get(url); 38 return this.http.get(url);
31 } 39 }
32 40
33 updateImages(body): Observable<any> { 41 updateImages(body): Observable<any> {
34 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); 42 return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body);
35 } 43 }
36 44
37 } 45 }
38 46
src/app/wrappers/producto.ts
1 export interface Producto { 1 export interface Producto {
2 CodSec: number; 2 CodSec: number;
3 CodArt: number; 3 CodArt: number;
4 DetArt: string; 4 DetArt: string;
5 CodRub: number; 5 CodRub: number;
6 Costo: number; 6 Costo: number;
7 PreNet: number; 7 PreNet: number;
8 ImpInt: number; 8 ImpInt: number;
9 UniVen: number; 9 UniVen: number;
10 FecCos: Date; 10 FecCos: Date;
11 UltAct: Date; 11 UltAct: Date;
12 CodPro: number; 12 CodPro: number;
13 ExiDep: number; 13 ExiDep: number;
14 ExiVta: number; 14 ExiVta: number;
15 MinDep: number; 15 MinDep: number;
16 MaxDep: number; 16 MaxDep: number;
17 MinPVE: number; 17 MinPVE: number;
18 MaxPVE: number; 18 MaxPVE: number;
19 ENTTur: number; 19 ENTTur: number;
20 SINTur: number; 20 SINTur: number;
21 SALTur: number; 21 SALTur: number;
22 IvaSN: boolean; 22 IvaSN: boolean;
23 DepSN: boolean; 23 DepSN: boolean;
24 RubMay: number; 24 RubMay: number;
25 PreVen: number; 25 PreVen: number;
26 IvaCO: number; 26 IvaCO: number;
27 TIP: string; 27 TIP: string;
28 IMPIVA: number; 28 IMPIVA: number;
29 ENTADM: number; 29 ENTADM: number;
30 SALADM: number; 30 SALADM: number;
31 CODIIN: number; 31 CODIIN: number;
32 PRO: boolean; 32 PRO: boolean;
33 FPP: boolean; 33 FPP: boolean;
34 ESS: boolean; 34 ESS: boolean;
35 FID: Date; 35 FID: Date;
36 NID: number; 36 NID: number;
37 FIV: Date; 37 FIV: Date;
38 NIV: number; 38 NIV: number;
39 COO: string; 39 COO: string;
40 CAG: string; 40 CAG: string;
41 CAP: number; 41 CAP: number;
42 UTL: number; 42 UTL: number;
43 NHA: boolean; 43 NHA: boolean;
44 PID: boolean; 44 PID: boolean;
45 PRV: number; 45 PRV: number;
46 PRD: number; 46 PRD: number;
47 ImpInt2: number; 47 ImpInt2: number;
48 E_HD: string; 48 E_HD: string;
49 C_HD: string; 49 C_HD: string;
50 CLA: number; 50 CLA: number;
51 UNICAP: number; 51 UNICAP: number;
52 ELBPRO: string; 52 ELBPRO: string;
53 PPP: number; 53 PPP: number;
54 ALI: number; 54 ALI: number;
55 BAL_TIPO: string; 55 BAL_TIPO: string;
56 PER_MAY: boolean; 56 PER_MAY: boolean;
57 ES_MAY: boolean; 57 ES_MAY: boolean;
58 CLA_MAY: number; 58 CLA_MAY: number;
59 PME_CMP: string; 59 PME_CMP: string;
60 USA_BAL: boolean; 60 USA_BAL: boolean;
61 DET_LAR: string; 61 DET_LAR: string;
62 ROTULO: string; 62 ROTULO: string;
63 REC_MANUAL: boolean; 63 REC_MANUAL: boolean;
64 E_HD1: string; 64 E_HD1: string;
65 C_HD1: string; 65 C_HD1: string;
66 ImpInt3: number; 66 ImpInt3: number;
67 FUA_MAE_YPF: Date; 67 FUA_MAE_YPF: Date;
68 CPQ: number; 68 CPQ: number;
69 EPQ: string; 69 EPQ: string;
70 BPQ: number; 70 BPQ: number;
71 PUPQ: number; 71 PUPQ: number;
72 CORVTO: boolean; 72 CORVTO: boolean;
73 CORVTO_COSTO: number; 73 CORVTO_COSTO: number;
74 UTLFR: number; 74 UTLFR: number;
75 FAMILIA: number; 75 FAMILIA: number;
76 ES_LUB: boolean; 76 ES_LUB: boolean;
77 ES_FERT: boolean; 77 ES_FERT: boolean;
78 AutoFac: boolean; 78 AutoFac: boolean;
79 LitrosPCD: number; 79 LitrosPCD: number;
80 LisPCD: number; 80 LisPCD: number;
81 ImpLey23966: boolean; 81 ImpLey23966: boolean;
82 es_bio: boolean; 82 es_bio: boolean;
83 ExpArbaRev: boolean; 83 ExpArbaRev: boolean;
84 ES_AGROQ: boolean; 84 ES_AGROQ: boolean;
85 ES_PLAST: boolean; 85 ES_PLAST: boolean;
86 es_bio_por: string; 86 es_bio_por: string;
87 IMP_IMP_INT: boolean; 87 IMP_IMP_INT: boolean;
88 id: number; 88 id: number;
89 nombreImagen?: any; 89 nombreImagen?: any;
90 90
91 cantidad?:number; 91 cantidad?: number;
92 showCargarProducto?:boolean; 92 showCargarProducto?: boolean;
93 } 93 }
94 94
src/app/wrappers/promocion.ts
1 import { Producto } from './producto'; 1 import { Producto } from './producto';
2 2
3 export interface Promocion { 3 export interface Promocion {
4 idPromo: number; 4 idPromo: number;
5 nombrePromo: string; 5 nombrePromo: string;
6 productos: Producto[]; 6 productos: Producto[];
7 sinonimos: boolean;
8 sector: number,
9 codigo: number,
7 } 10 }
8 11
src/app/wrappers/sinonimo.ts
File was created 1 export interface Sinonimo {
2 EMP: number;
3 ID_SIN: number;
4 SEC: number;
5 COD: string;
6 DET: string;
7 E_HD: string[];
8 C_HD: string[];
9 CodSec: number;
10 CodArt: number;
11 DetArt: string;
12 CodRub: number;
13 Costo: number;
14 PreNet: number;
15 ImpInt: number;
16 UniVen: number;
17 FecCos: Date;
18 UltAct: Date;
19 CodPro: number;
20 ExiDep: number;
21 ExiVta: number;
22 MinDep: number;
23 MaxDep: number;
24 MinPVE: number;
25 MaxPVE: number;
26 ENTTur: number;
27 SINTur: number;
28 SALTur: number;
29 IvaSN: boolean;
30 DepSN: boolean;
31 RubMay: number;
32 PreVen: number;
33 IvaCO: number;
34 TIP: string;
35 IMPIVA: number;
36 ENTADM: number;
37 SALADM: number;
38 CODIIN: number;
39 PRO: boolean;
40 FPP: boolean;
41 ESS: boolean;
42 FID: Date;
43 NID: number;
44 FIV: Date;
45 NIV: number;
46 COO: string;
47 CAG: string;
48 CAP: number;
49 UTL: number;
50 NHA: boolean;
51 PID: boolean;
52 PRV: number;
53 PRD: number;
54 ImpInt2: number;
55 CLA: number;
56 UNICAP: number;
57 ELBPRO: string;
58 PPP: number;
59 ALI: number;
60 BAL_TIPO: string;
61 PER_MAY: boolean;
62 ES_MAY: boolean;
63 CLA_MAY: number;
64 PME_CMP: string;
65 USA_BAL: boolean;
66 DET_LAR: string;
67 ROTULO: string;
68 REC_MANUAL: boolean;
69 E_HD1: string;
70 C_HD1: string;
71 ImpInt3: number;
72 FUA_MAE_YPF: Date;
73 CPQ: number;
74 EPQ: string;
75 BPQ: number;
76 PUPQ: number;
77 CORVTO: boolean;
78 CORVTO_COSTO: number;
79 UTLFR: number;
80 FAMILIA: number;
81 ES_LUB: boolean;
82 ES_FERT: boolean;
83 AutoFac: boolean;
84 LitrosPCD: number;
85 LisPCD: number;
86 id: number;
87 ImpLey23966: boolean;
88 es_bio: boolean;
89 ExpArbaRev: boolean;
90 ES_AGROQ: boolean;
91 ES_PLAST: boolean;
92 es_bio_por: string;
93 ID_MARCA: number;
94 ID_ATRB1: number;
95 ID_ATRB2: number;
96 ID_ART_REF: number;
97 ILPC: boolean;
98 CantAgrupar: number;
99 E_HD2: string;
100 PPV: number;
101 PPD: number;
102 MOD_DET: boolean;
103 C_HD2: string;
104 nombreImagen?: any;
105 IMP_IMP_INT: boolean;
106 }
107
src/assets/scss/animation.scss
1 .fade-in { 1 .fade-in {
2 margin-top: 25px; 2 margin-top: 25px;
3 font-size: 21px; 3 font-size: 21px;
4 text-align: center; 4 text-align: center;
5 animation: fadein 1s; 5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */ 6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */ 7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */ 8 -o-animation: fadein 1s; /* Opera */
9 } 9 }
10 10
11 @keyframes fadein { 11 @keyframes fadein {
12 from { 12 from {
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 to { 15 to {
16 opacity: 1; 16 opacity: 1;
17 } 17 }
18 } 18 }
19 19
20 @-moz-keyframes fadein { 20 @-moz-keyframes fadein {
21 /* Firefox */ 21 /* Firefox */
22 from { 22 from {
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 to { 25 to {
26 opacity: 1; 26 opacity: 1;
27 } 27 }
28 } 28 }
29 29
30 @-webkit-keyframes fadein { 30 @-webkit-keyframes fadein {
31 /* Safari and Chrome */ 31 /* Safari and Chrome */
32 from { 32 from {
33 opacity: 0; 33 opacity: 0;
34 } 34 }
35 to { 35 to {
36 opacity: 1; 36 opacity: 1;
37 } 37 }
38 } 38 }
39 39
40 .fade-left { 40 .fade-right {
41 margin-top: 25px; 41 margin-top: 25px;
42 font-size: 21px; 42 font-size: 21px;
43 text-align: center; 43 text-align: center;
44 animation: fadeleft 1s; 44 animation: faderight 1s;
45 -moz-animation: fadeleft 1s; /* Firefox */ 45 -moz-animation: faderight 1s; /* Firefox */
46 -webkit-animation: fadeleft 1s; /* Safari and Chrome */ 46 -webkit-animation: faderight 1s; /* Safari and Chrome */
47 -o-animation: fadeleft 1s; /* Opera */ 47 -o-animation: faderight 1s; /* Opera */
48 } 48 }
49 49
50 @keyframes fadeleft { 50 @keyframes faderight {
51 from { 51 from {
52 opacity: 0; 52 opacity: 0;
53 transform: translateX(-20px); 53 transform: translateX(-20px);
54 } 54 }
55 to { 55 to {
56 opacity: 1; 56 opacity: 1;
57 transform: translateX(0); 57 transform: translateX(0);
58 } 58 }
59 } 59 }
60 60
61 @-moz-keyframes fadeleft { 61 @-moz-keyframes faderight {
62 /* Firefox */ 62 /* Firefox */
63 from { 63 from {
64 opacity: 0; 64 opacity: 0;
65 -moz-transform: translateX(-20px); 65 -moz-transform: translateX(-20px);
66 } 66 }
67 to { 67 to {
68 opacity: 1; 68 opacity: 1;
69 -moz-transform: translateX(0); 69 -moz-transform: translateX(0);
70 } 70 }
71 } 71 }
72 72
73 @-webkit-keyframes fadeleft { 73 @-webkit-keyframes faderight {
74 /* Safari and Chrome */ 74 /* Safari and Chrome */
75 from { 75 from {
76 opacity: 0; 76 opacity: 0;
77 -webkit-transform: translateX(-20px); 77 -webkit-transform: translateX(-20px);
78 } 78 }
79 to { 79 to {
80 opacity: 1; 80 opacity: 1;
81 -webkit-transform: translateX(0); 81 -webkit-transform: translateX(0);
82 } 82 }
83 } 83 }
84
85 .fade-left {
86
87 -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
88 animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
89 }
90
91 @-webkit-keyframes fadeleft {
92 0% {
93 -webkit-transform: scaleX(0);
94 transform: scaleX(0);
95 -webkit-transform-origin: 100% 100%;
96 transform-origin: 100% 100%;
97 opacity: 1;
98 }
99 100% {
100 -webkit-transform: scaleX(1);
101 transform: scaleX(1);
102 -webkit-transform-origin: 100% 100%;
103 transform-origin: 100% 100%;
104 opacity: 1;
105 }
106 }
107
108 @keyframes fadeleft {
109 0% {
110 -webkit-transform: scaleX(0);
111 transform: scaleX(0);
112 -webkit-transform-origin: 100% 100%;
113 transform-origin: 100% 100%;
114 opacity: 1;
115 }
116 100% {
117 -webkit-transform: scaleX(1);
118 transform: scaleX(1);
119 -webkit-transform-origin: 100% 100%;
120 transform-origin: 100% 100%;
121 opacity: 1;
122 }
123 }
84 124
src/assets/scss/bootstrap-override.scss
1 @import "../../../node_modules/bootstrap/scss/functions"; 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 @import "../../../node_modules/bootstrap/scss/mixins"; 3 @import "../../../node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #2872ae; 5 $primary: #2872ae;
6 6
7 $theme-colors: ( 7 $theme-colors: (
8 primary: $primary, 8 primary: $primary,
9 light: white 9 light: white
10 ); 10 );
11 11
12 .popover { 12 .popover {
13 transform: translate3d(-464px, 0, -34px) !important; 13 transform: translate3d(-480px, 0, -34px) !important;
14 min-width: 200px !important; 14 min-width: 485px !important;
15 max-width: 525px !important; 15 max-width: 485px !important;
16 border: none !important; 16 border: none !important;
17 border-radius: 1.5rem !important; 17 border-radius: 1.5rem !important;
18 padding: 0 !important; 18 padding: 0 !important;
19 background-color: $primary !important; 19 background-color: $primary !important;
20 .popover-body { 20 .popover-body {
21 padding: 0 !important; 21 padding: 0 !important;
22 } 22 }
23 } 23 }
24 24
25 .bs-popover-left .arrow::after, 25 .bs-popover-left .arrow::after,
26 .bs-popover-auto[x-placement^="left"] .arrow::after { 26 .bs-popover-auto[x-placement^="left"] .arrow::after {
27 border-left-color: $primary !important; 27 border-left-color: $primary !important;
28 } 28 }
29 29
30 .bs-popover-right .arrow::after, 30 .bs-popover-right .arrow::after,
31 .bs-popover-auto[x-placement^="right"] .arrow::after { 31 .bs-popover-auto[x-placement^="right"] .arrow::after {
32 border-right-color: $primary !important; 32 border-right-color: $primary !important;
33 } 33 }
34 34
35 .bs-popover-top .arrow::after, 35 .bs-popover-top .arrow::after,
36 .bs-popover-auto[x-placement^="top"] .arrow::after { 36 .bs-popover-auto[x-placement^="top"] .arrow::after {
37 border-top-color: $primary !important; 37 border-top-color: $primary !important;
38 } 38 }
39 39
40 .bs-popover-bottom .arrow::after, 40 .bs-popover-bottom .arrow::after,
41 .bs-popover-auto[x-placement^="bottom"] .arrow::after { 41 .bs-popover-auto[x-placement^="bottom"] .arrow::after {
42 border-bottom-color: $primary !important; 42 border-bottom-color: $primary !important;
43 } 43 }
44 44
45 .list-group-item.active { 45 .list-group-item.active {
46 background-color: $primary !important; 46 background-color: $primary !important;
47 border-color: $primary !important; 47 border-color: $primary !important;
48 } 48 }
49 49
50 .custom-radio .custom-control-label::before {
51 background-color: $primary !important;
52 border-color: $white !important;
53 border-width: 2px !important;
54 }
55
56 .custom-control-input {
57 border-color: $white !important;
58 background-color: $primary !important;
59 color: $primary !important;
60 &:checked ~ .custom-control-label::before {
61 border-color: $white !important;
62 color: #fff !important;
63 background-color: $primary !important;
64 }
65 &:focus ~ .custom-control-label::before {
66 border-color: $white !important;
67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;
68 }
69 }
70
50 @import "../../../node_modules/bootstrap/scss/bootstrap"; 71 @import "../../../node_modules/bootstrap/scss/bootstrap";
51 72
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift;
8 } 9 }
9 10
10 .blur { 11 .blur {
11 filter: blur(10px); 12 filter: blur(10px);
12 -webkit-filter: blur(10px); 13 -webkit-filter: blur(10px);
13 } 14 }
14 15
15 .disable-user-select { 16 .disable-user-select {
16 -webkit-user-select: none; 17 -webkit-user-select: none;
17 -moz-user-select: none; 18 -moz-user-select: none;
18 -ms-user-select: none; 19 -ms-user-select: none;
19 user-select: none; 20 user-select: none;
20 } 21 }
21 22
22 .blue-gradient { 23 .blue-gradient {
23 background: linear-gradient(0deg, #ffffff00, $white); 24 background: linear-gradient(0deg, #ffffff00, $white);
24 } 25 }
25 26
26 .rounded { 27 .rounded {
27 border-radius: 1.5rem !important; 28 border-radius: 1.5rem !important;
28 } 29 }
29 30
30 .rounded-top-sm { 31 .rounded-top-sm {
31 border-top-left-radius: 0.75rem !important; 32 border-top-left-radius: 0.75rem !important;
32 border-top-right-radius: 0.75rem !important; 33 border-top-right-radius: 0.75rem !important;
33 } 34 }
34 35
35 .rounded-sm { 36 .rounded-sm {
36 border-radius: 0.75rem !important; 37 border-radius: 0.75rem !important;
37 } 38 }
38 39
39 .card-effect { 40 .card-effect {
40 &:active { 41 &:active {
41 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
42 transition: background-color 0.5s; 43 transition: background-color 0.5s;
43 } 44 }
44 &:focus { 45 &:focus {
45 background-color: #c9c9c9b3 !important; 46 background-color: #c9c9c9b3 !important;
46 transition: background-color 0.5s; 47 transition: background-color 0.5s;
47 } 48 }
48 } 49 }
49 50
50 .overflow-scroll { 51 .overflow-scroll {
51 overflow-y: auto !important; 52 overflow-y: auto !important;
52 overflow-x: hidden !important; 53 overflow-x: hidden !important;
53 &::-webkit-scrollbar { 54 &::-webkit-scrollbar {
54 width: 0.5em; 55 width: 0.5em;
55 } 56 }
56 &::-webkit-scrollbar-track { 57 &::-webkit-scrollbar-track {
57 border-radius: 10px; 58 border-radius: 10px;
58 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 59 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
59 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 60 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
60 background-color: $white; 61 background-color: $white;
61 } 62 }
62 &::-webkit-scrollbar-thumb { 63 &::-webkit-scrollbar-thumb {
63 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 64 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
64 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 65 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
65 outline: 1px solid slategrey; 66 outline: 1px solid slategrey;
66 border-radius: 10px; 67 border-radius: 10px;
67 height: 12px; 68 height: 12px;
68 &:active { 69 &:active {
69 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 70 box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
70 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 71 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
71 } 72 }
72 } 73 }
73 &::-webkit-scrollbar-corner { 74 &::-webkit-scrollbar-corner {
74 border-radius: 10px; 75 border-radius: 10px;
75 } 76 }
76 } 77 }
77 78
78 .bg-gray { 79 .bg-gray {
79 background-color: #e6e6e6; 80 background-color: #e6e6e6;
80 } 81 }
81 82
82 .bg-primary-gradient { 83 .bg-primary-gradient {
83 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
84 } 85 }
85 86
86 .icon-dim { 87 .icon-dim {
87 height: 40px !important; 88 height: 40px !important;
88 width: auto !important; 89 width: auto !important;
89 background-color: white !important; 90 background-color: white !important;
90 } 91 }
91 92
92 .text-purple { 93 .text-purple {
93 color: $purple; 94 color: $purple;
94 } 95 }
95 96
96 .vh-70 { 97 .vh-70 {
97 min-height: auto !important; 98 min-height: auto !important;
98 max-height: 70vh !important; 99 max-height: 70vh !important;
99 } 100 }
100 101
101 .vh-60 { 102 .vh-60 {
102 min-height: auto !important; 103 min-height: auto !important;
103 max-height: 60vh !important; 104 max-height: 60vh !important;
104 } 105 }
105 106
106 .spinner-lg { 107 .spinner-lg {
107 width: 3rem !important; 108 width: 3rem !important;
108 height: 3rem !important; 109 height: 3rem !important;
109 } 110 }
110 111
111 .sidebar { 112 .sidebar {
112 right: 0; 113 right: 0;
113 } 114 }
114 115