Commit 048062d50786db715e4112b6e72ad0e9fdaf8f90
Exists in
develop
Merge branch 'develop' of http://git.focasoftware.com/angular/autoservicio-axion into develop
actualizando desde upstream
Showing
24 changed files
Show diff stats
package-lock.json
src/app/app-routing.module.ts
... | ... | @@ -15,7 +15,8 @@ const routes: Routes = [ |
15 | 15 | }, |
16 | 16 | { |
17 | 17 | path: 'indicaciones-pago-tarjeta', |
18 | - loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module').then(m => m.IndicacionesPagoTarjetaModule) | |
18 | + loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module') | |
19 | + .then(m => m.IndicacionesPagoTarjetaModule) | |
19 | 20 | }, |
20 | 21 | { |
21 | 22 | path: 'opcion-pedido', |
src/app/interfaces/ISinonimo.ts
src/app/modules/carrito/carrito.component.html
... | ... | @@ -39,7 +39,7 @@ |
39 | 39 | src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" |
40 | 40 | onerror="this.src='assets/img/imagen-no-encontrada.jpg'"> |
41 | 41 | <div class="row mx-0 h-100 h-md-45"> |
42 | - <p class="col text-primary text-truncate align-self-center"> | |
42 | + <p class="col px-0 text-primary carrito-text-desc align-self-center"> | |
43 | 43 | <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small> |
44 | 44 | </p> |
45 | 45 | </div> |
... | ... | @@ -82,7 +82,7 @@ |
82 | 82 | <div class="row mx-3 mt-2 h-auto justify-content-end"> |
83 | 83 | <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div> |
84 | 84 | <div class="col-auto align-self-center bg-primary badge-pill"> |
85 | - <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.subTotal | currency}}</p> | |
85 | + <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p> | |
86 | 86 | </div> |
87 | 87 | </div> |
88 | 88 | <!-- CONTINUAR --> |
src/app/modules/carrito/carrito.component.scss
src/app/modules/comanda/comanda.component.html
... | ... | @@ -50,7 +50,7 @@ |
50 | 50 | }"> |
51 | 51 | <!-- DETALLE Y CANTIDAD --> |
52 | 52 | <p> |
53 | - <small>{{detalle.MKT_DESC ? detalle.MKT_DESC.toUpperCase() : detalle.DetArt.toUpperCase()}}</small><br> | |
53 | + <small>{{detalle.MKT_DESC ? detalle.MKT_DESC.toUpperCase() : detalle.DetLar.toUpperCase()}}</small><br> | |
54 | 54 | <small>CANT.{{detalle.cantidad}}</small> |
55 | 55 | </p> |
56 | 56 | <div *ngFor="let componente of detalle.componentes"> |
src/app/modules/comanda/comanda.component.ts
... | ... | @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; |
2 | 2 | import { IComanda, IComandaDetalle, IComponente } from 'src/app/interfaces/IComanda'; |
3 | 3 | import { ComandaService } from 'src/app/services/comanda/comanda.service'; |
4 | 4 | import * as _ from 'lodash'; |
5 | +import { SoundManager } from 'src/app/utils/sound-manager'; | |
5 | 6 | |
6 | 7 | @Component({ |
7 | 8 | selector: 'app-comanda', |
... | ... | @@ -47,6 +48,7 @@ export class ComandaComponent implements OnInit { |
47 | 48 | } |
48 | 49 | } |
49 | 50 | if (!resComandas.length) return; |
51 | + SoundManager.playAudio('bell.mp3'); | |
50 | 52 | Array.prototype.push.apply(this.comandas, resComandas); |
51 | 53 | this.startTimersPedido(resComandas); |
52 | 54 | } |
src/app/modules/mensaje-final/mensaje-final.component.ts
1 | + | |
2 | + | |
1 | 3 | import { Component, OnInit } from '@angular/core'; |
2 | 4 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
3 | 5 | import { Router } from '@angular/router'; |
... | ... | @@ -12,14 +14,19 @@ export class MensajeFinalComponent implements OnInit { |
12 | 14 | |
13 | 15 | constructor( |
14 | 16 | public articuloService: ArticuloService, |
15 | - private router: Router | |
16 | - ) {} | |
17 | + private router: Router, | |
18 | + ) { } | |
17 | 19 | |
18 | 20 | ngOnInit() { |
21 | + this.timer = setTimeout(() => { | |
22 | + this.goToSplash(); | |
23 | + }, 90000); | |
19 | 24 | this.mediaPantalla(); |
20 | 25 | } |
21 | 26 | |
22 | - OnDestroy() {} | |
27 | + OnDestroy() { | |
28 | + clearTimeout(this.timer); | |
29 | + } | |
23 | 30 | |
24 | 31 | goToSplash() { |
25 | 32 | this.articuloService.cleanShoppingCar(); |
src/app/modules/pedidos-salientes/pedidos-salientes.component.html
1 | -<div class="row mt-2 justify-content-center h-15"> | |
2 | - <div class="col-3 col-lg-2"> | |
1 | +<div class="row mx-0 mt-5 justify-content-around"> | |
2 | + <div class="col"> | |
3 | + <div class="p-3 bg-white text-center shadow-lg rounded h-100"> | |
4 | + <p class="h5 mt-3">ESTAMOS</p> | |
5 | + <p class="h3 font-weight-bold text-secondary">preparando</p> | |
6 | + <p class="h5">TU PEDIDO</p> | |
7 | + <div | |
8 | + *ngFor="let pedido of pedidosPendientes; let i = index" | |
9 | + [hidden]="i > 3" | |
10 | + class="font-weight-bold mb-2 text-muted"> | |
11 | + <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p> | |
12 | + </div> | |
13 | + </div> | |
14 | + </div> | |
15 | + <div class="col"> | |
3 | 16 | <img |
4 | 17 | draggable="false" |
5 | 18 | ondragstart="return false;" |
6 | 19 | (contextmenu)="false" |
7 | - class="w-60 h-auto d-block mx-auto" | |
20 | + class="w-40 h-auto d-block mx-auto" | |
8 | 21 | src="assets/img/logo-spot.svg"> |
22 | + <div class="p-3 text-center h-100"> | |
23 | + <p class="h5 mt-3">LISTO PARA</p> | |
24 | + <p class="h3 font-weight-bold text-primary">retirar</p> | |
25 | + <div *ngIf="pedidosFinalizados.length"> | |
26 | + <p class="display-1 mt-2 text-primary mb-0">{{rellenar(pedidosFinalizados[0].id.toString().slice(0), 3)}}</p> | |
27 | + </div> | |
28 | + <p class="h3 font-weight-bold text-info mt-2">ยกQue lo disfrutes!</p> | |
29 | + </div> | |
9 | 30 | </div> |
10 | -</div> | |
11 | -<div class="row mt-n5 mx-0 justify-content-around h-75"> | |
12 | - <div class="col-5 col-md-6 col-lg-4 h-100"> | |
31 | + <div class="col"> | |
13 | 32 | <div class="p-3 bg-white text-center shadow-lg rounded h-100"> |
14 | - <h5 class="pt-3">ESTAMOS</h5> | |
15 | - <h3 class="font-weight-bold text-secondary">preparando</h3> | |
16 | - <h5>TU PEDIDO</h5> | |
33 | + <p class="h5 mt-3">YA FUร</p> | |
34 | + <p class="h3 font-weight-bold text-primary">entregado</p> | |
35 | + <p class="h5">TU PEDIDO</p> | |
17 | 36 | <div |
18 | - *ngFor="let pedido of pedidosPendientes; let i = index" | |
19 | - [hidden]="i > 3" | |
37 | + *ngFor="let pedido of pedidosFinalizados; let i = index" | |
38 | + [hidden]="i > 4 || i == 0" | |
20 | 39 | class="font-weight-bold mb-2 text-muted"> |
21 | - <h1 class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</h1> | |
22 | - </div> | |
23 | - </div> | |
24 | - </div> | |
25 | - <div class="col-5 col-md-6 col-lg-4 h-100"> | |
26 | - <div class="p-3 bg-white shadow-lg rounded text-center h-100"> | |
27 | - <h5 class="pt-3">LISTO PARA</h5> | |
28 | - <h3 class="font-weight-bold text-primary">retirar</h3> | |
29 | - <div *ngIf="pedidoFinalizado.length"> | |
30 | - <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(0), 3)}}</h1> | |
31 | - <hr class="line mt-0"> | |
40 | + <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p> | |
32 | 41 | </div> |
33 | - <h3 class="font-weight-bold text-info mt-4">ยกQue lo disfrutes!</h3> | |
34 | 42 | </div> |
35 | 43 | </div> |
36 | 44 | </div> |
src/app/modules/pedidos-salientes/pedidos-salientes.component.ts
... | ... | @@ -7,7 +7,7 @@ import { ComandaService } from 'src/app/services/comanda/comanda.service'; |
7 | 7 | styleUrls: ['./pedidos-salientes.component.scss'] |
8 | 8 | }) |
9 | 9 | export class PedidosSalientesComponent implements OnInit { |
10 | - pedidoFinalizado = []; | |
10 | + pedidosFinalizados = []; | |
11 | 11 | cicloTime; |
12 | 12 | pedidosPendientes = []; |
13 | 13 | |
... | ... | @@ -28,7 +28,7 @@ export class PedidosSalientesComponent implements OnInit { |
28 | 28 | buscarPedidosFinalizados() { |
29 | 29 | this.comandaServices.getPendientesEntrega() |
30 | 30 | .subscribe((pedidos: []) => { |
31 | - this.pedidoFinalizado = pedidos; | |
31 | + this.pedidosFinalizados = pedidos; | |
32 | 32 | }); |
33 | 33 | } |
34 | 34 |
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
... | ... | @@ -142,7 +142,7 @@ |
142 | 142 | </div> |
143 | 143 | <!-- MENSAJE DE ADVERTENCIA --> |
144 | 144 | <div *ngIf="!articuloService.carrito.length" class="col h-100"> |
145 | - <p class="text-center py-5">No hay articulos en el carrito</p> | |
145 | + <p class="text-center py-5">No hay artรญculos en el carrito</p> | |
146 | 146 | </div> |
147 | 147 | </div> |
148 | 148 | </div> |
... | ... | @@ -167,7 +167,7 @@ |
167 | 167 | <div class="row mx-0"> |
168 | 168 | <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div> |
169 | 169 | <div class="col-auto align-self-center bg-primary badge-pill"> |
170 | - <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.subTotal | currency}}</p> | |
170 | + <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.total | currency}}</p> | |
171 | 171 | </div> |
172 | 172 | </div> |
173 | 173 | </div> |
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
... | ... | @@ -117,8 +117,14 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes |
117 | 117 | if (res.length) { |
118 | 118 | const sinonimos = []; |
119 | 119 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); |
120 | - Object.keys(gruposArticulos).forEach(key => { | |
121 | - sinonimos.push({ productos: gruposArticulos[key] }); | |
120 | + Object.keys(gruposArticulos).forEach((key, i) => { | |
121 | + sinonimos.push({ productos: gruposArticulos[key], }); | |
122 | + for (const a of articulo.productos) { | |
123 | + if (key === a.idSinonimo.toString()) { | |
124 | + sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad; | |
125 | + continue; | |
126 | + } | |
127 | + } | |
122 | 128 | }); |
123 | 129 | res = sinonimos; |
124 | 130 | this.openModalSinonimos(res, articulo); |
... | ... | @@ -155,20 +161,8 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes |
155 | 161 | this.modalRef.content.onClose |
156 | 162 | .subscribe((res: any) => { |
157 | 163 | this.modalRef = null; |
158 | - for (const a of articulo.productos) { | |
159 | - for (const aRes of res.articulos) { | |
160 | - if (a.idSinonimo === aRes.ID_SIN) { | |
161 | - a.CODA = aRes.CodArt; | |
162 | - a.CodArt = aRes.CodArt; | |
163 | - a.SECA = aRes.CodSec; | |
164 | - aRes.CodSec = aRes.CodSec; | |
165 | - a.PreVen = aRes.PreVen; | |
166 | - a.id = aRes.id; | |
167 | - a.DET_LAR = aRes.DET_LAR; | |
168 | - a.DetArt = aRes.DetArt; | |
169 | - } | |
170 | - } | |
171 | - } | |
164 | + if (!res) return; | |
165 | + articulo.productos = res.articulos; | |
172 | 166 | this.articuloService.setArticulo(articulo); |
173 | 167 | }); |
174 | 168 | this.mediaPantalla(); |
src/app/modules/splash-screen/splash-screen.component.ts
1 | 1 | import { Component, OnInit } from '@angular/core'; |
2 | +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | |
2 | 3 | |
3 | 4 | @Component({ |
4 | 5 | selector: 'app-splash-screen', |
... | ... | @@ -13,9 +14,12 @@ export class SplashScreenComponent implements OnInit { |
13 | 14 | textInvitamos = 'TE INVITAMOS A HACER'; |
14 | 15 | textTuPedido = 'tu pedido acรก'; |
15 | 16 | |
16 | - constructor() {} | |
17 | + constructor( | |
18 | + private articuloService: ArticuloService, | |
19 | + ) { } | |
17 | 20 | |
18 | 21 | ngOnInit() { |
22 | + this.articuloService.cleanShoppingCar(); | |
19 | 23 | localStorage.clear(); |
20 | 24 | setTimeout(() => { |
21 | 25 | this.showSplashScreen = false; |
src/app/services/articulo/articulo.service.ts
... | ... | @@ -15,7 +15,7 @@ export class ArticuloService { |
15 | 15 | urlDeboSuite = APP_SETTINGS.apiDeboSuite; |
16 | 16 | medioPago: number; |
17 | 17 | idComanda: number; |
18 | - subTotal = 0; | |
18 | + total = 0; | |
19 | 19 | maxCantidad = 50; |
20 | 20 | |
21 | 21 | constructor( |
... | ... | @@ -48,9 +48,9 @@ export class ArticuloService { |
48 | 48 | } |
49 | 49 | |
50 | 50 | calcularTotal() { |
51 | - this.subTotal = 0; | |
51 | + this.total = 0; | |
52 | 52 | this.carrito.forEach(articulo => { |
53 | - this.subTotal += (articulo.PreVen * articulo.cantidad); | |
53 | + this.total += (articulo.PreVen * articulo.cantidad); | |
54 | 54 | }); |
55 | 55 | } |
56 | 56 | |
... | ... | @@ -126,4 +126,16 @@ export class ArticuloService { |
126 | 126 | } |
127 | 127 | }); |
128 | 128 | } |
129 | + | |
130 | + changeArticulo(articuloToChange: IArticulo, articuloData: any) { | |
131 | + articuloToChange.CODA = articuloData.CodArt; | |
132 | + articuloToChange.CodArt = articuloData.CodArt; | |
133 | + articuloToChange.SECA = articuloData.CodSec; | |
134 | + articuloToChange.CodSec = articuloData.CodSec; | |
135 | + articuloToChange.PreVen = articuloData.PreVen; | |
136 | + articuloToChange.id = articuloData.id; | |
137 | + articuloToChange.DET_LAR = articuloData.DET_LAR; | |
138 | + articuloToChange.DetArt = articuloData.DetArt; | |
139 | + articuloToChange.MKT_DESC = articuloData.MKT_DESC; | |
140 | + } | |
129 | 141 | } |
src/app/shared/header-publicidad/header-publicidad.component.ts
... | ... | @@ -93,8 +93,14 @@ export class HeaderPublicidadComponent implements OnInit { |
93 | 93 | if (res.length) { |
94 | 94 | const sinonimos = []; |
95 | 95 | const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); |
96 | - Object.keys(gruposArticulos).forEach(key => { | |
97 | - sinonimos.push({ productos: gruposArticulos[key] }); | |
96 | + Object.keys(gruposArticulos).forEach((key, i) => { | |
97 | + sinonimos.push({ productos: gruposArticulos[key], }); | |
98 | + for (const a of articulo.productos) { | |
99 | + if (key === a.idSinonimo.toString()) { | |
100 | + sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad; | |
101 | + continue; | |
102 | + } | |
103 | + } | |
98 | 104 | }); |
99 | 105 | res = sinonimos; |
100 | 106 | this.openModalSinonimos(res, articulo); |
... | ... | @@ -118,20 +124,9 @@ export class HeaderPublicidadComponent implements OnInit { |
118 | 124 | }); |
119 | 125 | this.modalSinonimo.content.onClose |
120 | 126 | .subscribe((res: any) => { |
121 | - for (const a of articulo.productos) { | |
122 | - for (const aRes of res.articulos) { | |
123 | - if (a.idSinonimo === aRes.ID_SIN) { | |
124 | - a.CODA = aRes.CodArt; | |
125 | - a.CodArt = aRes.CodArt; | |
126 | - a.SECA = aRes.CodSec; | |
127 | - aRes.CodSec = aRes.CodSec; | |
128 | - a.PreVen = aRes.PreVen; | |
129 | - a.id = aRes.id; | |
130 | - a.DET_LAR = aRes.DET_LAR; | |
131 | - a.DetArt = aRes.DetArt; | |
132 | - } | |
133 | - } | |
134 | - } | |
127 | + this.modalSinonimo = null; | |
128 | + if (!res) return; | |
129 | + articulo.productos = res.articulos; | |
135 | 130 | this.articuloService.setArticulo(articulo); |
136 | 131 | }); |
137 | 132 | } |
src/app/shared/promocion/promocion.component.ts
... | ... | @@ -43,22 +43,32 @@ export class PromocionComponent implements OnInit { |
43 | 43 | selectPromo(promo: IArticulo) { |
44 | 44 | if (this.isPromoSelected) return; |
45 | 45 | this.isPromoSelected = true; |
46 | - this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) | |
47 | - .subscribe((res: ISinonimo[]) => { | |
48 | - if (res.length) { | |
49 | - const sinonimos = []; | |
50 | - const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); | |
51 | - Object.keys(gruposArticulos).forEach(key => { | |
52 | - sinonimos.push({ productos: gruposArticulos[key] }); | |
53 | - }); | |
54 | - res = sinonimos; | |
55 | - this.openModalSinonimos(res, promo); | |
56 | - } else { | |
57 | - promo.cantidad = 1; | |
58 | - this.articuloService.setArticulo(promo); | |
59 | - this.onClose.next(); | |
60 | - this.modalPromocion.hide(); | |
61 | - } | |
46 | + this.articuloService.getById(promo.id) | |
47 | + .subscribe((resPromo: IArticulo) => { | |
48 | + promo = resPromo; | |
49 | + this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt) | |
50 | + .subscribe((res: ISinonimo[]) => { | |
51 | + if (res.length) { | |
52 | + const sinonimos = []; | |
53 | + const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN'); | |
54 | + Object.keys(gruposArticulos).forEach((key, i) => { | |
55 | + sinonimos.push({ productos: gruposArticulos[key], }); | |
56 | + for (const a of promo.productos) { | |
57 | + if (key === a.idSinonimo.toString()) { | |
58 | + sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad; | |
59 | + continue; | |
60 | + } | |
61 | + } | |
62 | + }); | |
63 | + res = sinonimos; | |
64 | + this.openModalSinonimos(res, promo); | |
65 | + } else { | |
66 | + promo.cantidad = 1; | |
67 | + this.articuloService.setArticulo(promo); | |
68 | + this.onClose.next(); | |
69 | + this.modalPromocion.hide(); | |
70 | + } | |
71 | + }, err => console.error(err)); | |
62 | 72 | }, err => console.error(err)); |
63 | 73 | this.mediaPantalla(); |
64 | 74 | } |
... | ... | @@ -82,20 +92,7 @@ export class PromocionComponent implements OnInit { |
82 | 92 | this.modalPromocion.hide(); |
83 | 93 | return; |
84 | 94 | } |
85 | - for (const a of articulo.productos) { | |
86 | - for (const aRes of res.articulos) { | |
87 | - if (a.idSinonimo === aRes.ID_SIN) { | |
88 | - a.CODA = aRes.CodArt; | |
89 | - a.CodArt = aRes.CodArt; | |
90 | - a.SECA = aRes.CodSec; | |
91 | - aRes.CodSec = aRes.CodSec; | |
92 | - a.PreVen = aRes.PreVen; | |
93 | - a.id = aRes.id; | |
94 | - a.DET_LAR = aRes.DET_LAR; | |
95 | - a.DetArt = aRes.DetArt; | |
96 | - } | |
97 | - } | |
98 | - } | |
95 | + articulo.productos = res.articulos; | |
99 | 96 | this.articuloService.setArticulo(articulo); |
100 | 97 | this.onClose.next(); |
101 | 98 | this.modalPromocion.hide(); |
src/app/shared/sinonimo/sinonimo.component.html
... | ... | @@ -7,45 +7,84 @@ |
7 | 7 | (click)="close()" |
8 | 8 | class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index" |
9 | 9 | src="assets/img/icono-cancelar-blanco.svg"> |
10 | - <p class="col-7 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p> | |
11 | - <div class="col-5 pt-4 pr-0 text-right"> | |
12 | - <p *ngFor="let s of sinonimos; let i = index"> | |
13 | - <span | |
14 | - class="btn-effect" | |
15 | - (click)="scrollTo(i)"> | |
16 | - Ir a opciรณn {{i+1}} | |
17 | - <i class="far fa-hand-point-left"></i> | |
18 | - </span> | |
19 | - </p> | |
20 | - </div> | |
10 | + <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p> | |
21 | 11 | </div> |
22 | 12 | |
23 | - <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2"> | |
24 | - <div *ngFor="let s of sinonimos; let i = index"> | |
25 | - <div [id]="i"></div> | |
26 | - <hr [hidden]="i === 0" class="bg-white"> | |
27 | - <div *ngFor="let articulo of s.productos"> | |
28 | - <div class="custom-control custom-checkbox"> | |
29 | - <input | |
30 | - type="checkbox" | |
31 | - class="custom-control-input" | |
32 | - [(ngModel)]="articulo.seleccionado" | |
33 | - (click)="selectSinonimo(i, articulo)" | |
34 | - [id]="articulo.id"> | |
35 | - <label | |
36 | - class="custom-control-label" | |
37 | - [for]="articulo.id"> | |
38 | - {{articulo.DET_LAR.toUpperCase()}} | |
39 | - </label> | |
13 | + <div class="modal-body my-2"> | |
14 | + <p class="mb-2 h4">Opcion {{currentIndex+1}}</p> | |
15 | + <p class="mb-2 h5">Cantidad restante {{sinonimos[currentIndex].cantidadRestante}}</p> | |
16 | + <div class="lista-sinonimos scroll-y-visible"> | |
17 | + <div | |
18 | + class="row mx-0 mb-2 fade-in-left" | |
19 | + *ngFor="let articulo of sinonimos[currentIndex].productos"> | |
20 | + <div class="col-8 p-0 my-auto h6 text-right"> | |
21 | + <p class="m-0 font-weight-normal"> | |
22 | + {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}} | |
23 | + </p> | |
24 | + </div> | |
25 | + <div class="col-4"> | |
26 | + <div class="row mx-0 justify-content-between border border-white badge-pill"> | |
27 | + <!-- BOTON MENOS --> | |
28 | + <div class="col-auto px-0 my-auto"> | |
29 | + <img | |
30 | + draggable="false" | |
31 | + ondragstart="return false;" | |
32 | + (contextmenu)="false" | |
33 | + class="d-block ml-auto py-2 icon-30 btn-effect" | |
34 | + src="assets/img/menos-blanco.svg" | |
35 | + (click)="restarCantidadSinonimo(articulo, currentIndex)"> | |
36 | + </div> | |
37 | + <!-- CANTIDAD --> | |
38 | + <div class="col px-0 my-auto text-white text-center"> | |
39 | + <p>{{articulo.cantidad}}</p> | |
40 | + </div> | |
41 | + <!-- BOTON MAS --> | |
42 | + <div class="col-auto px-0 my-auto"> | |
43 | + <img | |
44 | + draggable="false" | |
45 | + ondragstart="return false;" | |
46 | + (contextmenu)="false" | |
47 | + class="d-block ml-auto py-2 icon-30 btn-effect" | |
48 | + src="assets/img/mas-blanco.svg" | |
49 | + (click)="sumarCantidadSinonimo(articulo, currentIndex)"> | |
50 | + </div> | |
51 | + </div> | |
40 | 52 | </div> |
41 | 53 | </div> |
42 | 54 | </div> |
55 | + | |
43 | 56 | </div> |
44 | 57 | |
45 | 58 | <div class="modal-footer"> |
46 | 59 | <div |
60 | + *ngIf="currentIndex != 0 && sinonimos.length > 1" | |
61 | + class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto fade-in-right" | |
62 | + (click)="currentIndex = currentIndex-1"> | |
63 | + <img | |
64 | + draggable="false" | |
65 | + ondragstart="return false;" | |
66 | + (contextmenu)="false" | |
67 | + class="icon-30 flip" | |
68 | + src="assets/img/ir-color.svg"> | |
69 | + VOLVER | |
70 | + </div> | |
71 | + <div | |
72 | + [ngClass]="validateNext()" | |
73 | + *ngIf="currentIndex != sinonimos.length-1" | |
74 | + class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left" | |
75 | + (click)="goNext()"> | |
76 | + SIGUIENTE | |
77 | + <img | |
78 | + draggable="false" | |
79 | + ondragstart="return false;" | |
80 | + (contextmenu)="false" | |
81 | + class="icon-30" | |
82 | + src="assets/img/ir-color.svg"> | |
83 | + </div> | |
84 | + <div | |
47 | 85 | [ngClass]="validate()" |
48 | - class="d-inline-block py-1 bg-white badge-pill text-primary" | |
86 | + *ngIf="currentIndex == sinonimos.length-1" | |
87 | + class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left" | |
49 | 88 | (click)="continue()"> |
50 | 89 | CONTINUAR |
51 | 90 | <img |
src/app/shared/sinonimo/sinonimo.component.scss
src/app/shared/sinonimo/sinonimo.component.ts
... | ... | @@ -4,7 +4,6 @@ import { IArticulo } from 'src/app/interfaces/IArticulo'; |
4 | 4 | import { BsModalRef } from 'ngx-bootstrap/modal'; |
5 | 5 | import { Subject, forkJoin } from 'rxjs'; |
6 | 6 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
7 | -import { element } from 'protractor'; | |
8 | 7 | |
9 | 8 | @Component({ |
10 | 9 | selector: 'app-sinonimo', |
... | ... | @@ -15,62 +14,66 @@ export class SinonimoComponent implements OnInit { |
15 | 14 | sinonimos: ISinonimo[] = []; |
16 | 15 | isValid: boolean; |
17 | 16 | onClose: Subject<any>; |
18 | - articulosSelected: IArticulo[] = []; | |
19 | 17 | articulo: IArticulo; |
20 | 18 | isSinonimoSelected = false; |
19 | + currentIndex = 0; | |
21 | 20 | |
22 | 21 | constructor( |
23 | 22 | private modalRef: BsModalRef, |
24 | 23 | private articuloService: ArticuloService, |
25 | 24 | ) { |
26 | 25 | this.onClose = new Subject(); |
27 | - this.articulosSelected.length = this.sinonimos.length; | |
28 | 26 | } |
29 | 27 | |
30 | - ngOnInit() { } | |
31 | - | |
32 | - selectSinonimo(index: number, articulo: IArticulo) { | |
33 | - for (const a of this.sinonimos[index].productos) { | |
34 | - a.seleccionado = false; | |
28 | + ngOnInit() { | |
29 | + for (const s of this.sinonimos) { | |
30 | + for (const a of s.productos) { | |
31 | + a.cantidad = 0; | |
32 | + } | |
35 | 33 | } |
36 | - articulo.seleccionado = true; | |
37 | - this.articulosSelected[index] = articulo; | |
38 | 34 | } |
39 | 35 | |
40 | 36 | validate() { |
41 | 37 | this.isValid = true; |
42 | 38 | for (const s of this.sinonimos) { |
43 | - for (const a of s.productos) { | |
44 | - this.isValid = (!a.seleccionado) ? false : true; | |
45 | - if (this.isValid) break; | |
39 | + if (s.cantidadRestante > 0) { | |
40 | + this.isValid = false; | |
41 | + break; | |
46 | 42 | } |
47 | - if (!this.isValid) break; | |
48 | 43 | } |
49 | 44 | return !this.isValid ? 'disabled' : 'btn-effect'; |
50 | 45 | } |
51 | 46 | |
47 | + validateNext() { | |
48 | + const sinonimo = this.sinonimos[this.currentIndex] | |
49 | + sinonimo.selected = (sinonimo.cantidadRestante > 0) ? false : true; | |
50 | + return !sinonimo.selected ? 'disabled' : 'btn-effect'; | |
51 | + } | |
52 | + | |
53 | + goNext() { | |
54 | + if (!this.sinonimos[this.currentIndex].selected) return; | |
55 | + this.currentIndex++; | |
56 | + } | |
57 | + | |
52 | 58 | continue() { |
53 | 59 | if (!this.isValid) return; |
54 | 60 | if (this.isSinonimoSelected) return; |
55 | 61 | this.isSinonimoSelected = true; |
56 | - const ID_SINS = []; | |
57 | 62 | const observables = []; |
63 | + const cantidades = []; | |
58 | 64 | |
59 | - for (const articulo of this.articulosSelected) { | |
60 | - ID_SINS.push(articulo.ID_SIN); | |
61 | - } | |
62 | - | |
63 | - for (const articulo of this.articulosSelected) { | |
64 | - observables.push(this.articuloService.getById(articulo.id)); | |
65 | + for (const s of this.sinonimos) { | |
66 | + for (const articulo of s.productos) { | |
67 | + if (articulo.cantidad === 0) continue; | |
68 | + cantidades.push(articulo.cantidad); | |
69 | + observables.push(this.articuloService.getById(articulo.id)); | |
70 | + } | |
65 | 71 | } |
66 | - | |
67 | 72 | forkJoin(observables) |
68 | 73 | .subscribe((res: IArticulo[]) => { |
69 | - for (const articulo of res) { | |
70 | - for (const ID_SIN of ID_SINS) { | |
71 | - articulo.ID_SIN = ID_SIN; | |
72 | - } | |
73 | - } | |
74 | + res.forEach((articulo, i) => { | |
75 | + articulo.cantidad = cantidades[i]; | |
76 | + }); | |
74 | 77 | this.modalRef.hide(); |
75 | 78 | this.onClose.next({ |
76 | 79 | articulos: res, |
... | ... | @@ -78,6 +81,19 @@ export class SinonimoComponent implements OnInit { |
78 | 81 | }, err => console.error(err)); |
79 | 82 | } |
80 | 83 | |
84 | + sumarCantidadSinonimo(articulo: IArticulo, i: number) { | |
85 | + if (this.sinonimos[i].cantidadRestante === 0) return; | |
86 | + articulo.cantidad++; | |
87 | + this.sinonimos[i].cantidadRestante--; | |
88 | + } | |
89 | + | |
90 | + restarCantidadSinonimo(articulo: IArticulo, i: number) { | |
91 | + if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return; | |
92 | + if (articulo.cantidad === 0) return; | |
93 | + articulo.cantidad--; | |
94 | + this.sinonimos[i].cantidadRestante++; | |
95 | + } | |
96 | + | |
81 | 97 | scrollTo(index: number) { |
82 | 98 | const el = document.getElementById(index.toString()); |
83 | 99 | el.scrollIntoView({ behavior: 'smooth' }); |
src/app/utils/sound-manager.ts
src/assets/sounds/beep-01a.wav
No preview for this file type
src/assets/sounds/bell.mp3
No preview for this file type
src/scss/animations.scss
... | ... | @@ -124,6 +124,39 @@ |
124 | 124 | } |
125 | 125 | |
126 | 126 | /* |
127 | + * animation fade-in-right | |
128 | + */ | |
129 | +.fade-in-right { | |
130 | + -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; | |
131 | + animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; | |
132 | +} | |
133 | + | |
134 | +@-webkit-keyframes fade-in-right { | |
135 | + 0% { | |
136 | + -webkit-transform: translateX(50px); | |
137 | + transform: translateX(50px); | |
138 | + opacity: 0; | |
139 | + } | |
140 | + 100% { | |
141 | + -webkit-transform: translateX(0); | |
142 | + transform: translateX(0); | |
143 | + opacity: 1; | |
144 | + } | |
145 | +} | |
146 | +@keyframes fade-in-right { | |
147 | + 0% { | |
148 | + -webkit-transform: translateX(50px); | |
149 | + transform: translateX(50px); | |
150 | + opacity: 0; | |
151 | + } | |
152 | + 100% { | |
153 | + -webkit-transform: translateX(0); | |
154 | + transform: translateX(0); | |
155 | + opacity: 1; | |
156 | + } | |
157 | +} | |
158 | + | |
159 | +/* | |
127 | 160 | * animation swing-in-top-fwd |
128 | 161 | */ |
129 | 162 | .swing-in-top-fwd { |
src/styles.scss
... | ... | @@ -87,7 +87,7 @@ p { |
87 | 87 | } |
88 | 88 | |
89 | 89 | .disabled { |
90 | - opacity: 0.5; | |
90 | + background-color: hsla(0, 0%, 100%, 0.4) !important; | |
91 | 91 | } |
92 | 92 | |
93 | 93 | .modal-content.media-pantalla { |
... | ... | @@ -102,3 +102,8 @@ p { |
102 | 102 | .z-index { |
103 | 103 | z-index: 1000; |
104 | 104 | } |
105 | + | |
106 | +.flip { | |
107 | + -webkit-transform: scaleX(-1); | |
108 | + transform: scaleX(-1); | |
109 | +} | |
105 | 110 | \ No newline at end of file |