Commit 81e1a8fc64917cfecf731820569a9fd9b2c350d4
Exists in
develop
solving merge 2
Showing
27 changed files
Show diff stats
src/app/modules/carrito/carrito.component.html
... | ... | @@ -46,37 +46,12 @@ |
46 | 46 | <!-- CANTIDAD --> |
47 | 47 | <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> |
48 | 48 | <p class="h-40"><small>CANT</small></p> |
49 | - <div class="row mx-0 justify-content-between bg-primary badge-pill"> | |
50 | - <!-- BOTON MENOS --> | |
51 | - <div class="col-auto px-0 my-auto"> | |
52 | - <img | |
53 | - draggable="false" | |
54 | - ondragstart="return false;" | |
55 | - (contextmenu)="false" | |
56 | - class="d-block ml-auto py-2 icon-20 btn-effect" | |
57 | - src="assets/img/menos-blanco.svg" | |
58 | - (click)="substractCant(articulo)"> | |
59 | - </div> | |
60 | - <!-- CANTIDAD --> | |
61 | - <div class="col px-0 py-2 my-auto text-white"> | |
62 | - <p><small>{{articulo.cantidad}}</small></p> | |
63 | - </div> | |
64 | - <!-- BOTON MAS --> | |
65 | - <div class="col-auto px-0 my-auto"> | |
66 | - <img | |
67 | - draggable="false" | |
68 | - ondragstart="return false;" | |
69 | - (contextmenu)="false" | |
70 | - class="d-block ml-auto py-2 icon-20 btn-effect" | |
71 | - src="assets/img/mas-blanco.svg" | |
72 | - (click)="addCant(articulo)"> | |
73 | - </div> | |
74 | - </div> | |
49 | + <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> | |
75 | 50 | </div> |
76 | 51 | <!-- PRECIO --> |
77 | 52 | <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary"> |
78 | 53 | <p class="h-40"><small>PRECIO</small></p> |
79 | - <div class="py-2 badge-pill bg-dark text-white"> | |
54 | + <div class="py-1 badge-pill bg-dark text-white"> | |
80 | 55 | <p><small>{{articulo.PreVen | currency}}</small></p> |
81 | 56 | </div> |
82 | 57 | </div> |
src/app/modules/carrito/carrito.component.ts
... | ... | @@ -53,18 +53,6 @@ export class CarritoComponent implements OnInit, OnDestroy { |
53 | 53 | this.articuloService.deleteArticulo(index); |
54 | 54 | } |
55 | 55 | |
56 | - substractCant(articulo: IArticulo) { | |
57 | - if (articulo.cantidad === 1) return; | |
58 | - articulo.cantidad--; | |
59 | - this.articuloService.calcularTotal(); | |
60 | - } | |
61 | - | |
62 | - addCant(articulo: IArticulo) { | |
63 | - if (articulo.cantidad >= this.maxCantidad) return; | |
64 | - articulo.cantidad++; | |
65 | - this.articuloService.calcularTotal(); | |
66 | - } | |
67 | - | |
68 | 56 | goBack() { |
69 | 57 | this.location.back(); |
70 | 58 | } |
src/app/modules/comanda/comanda.component.html
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 | <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> |
5 | 5 | </div> |
6 | 6 | </div> |
7 | - <div class="row flex-fill m-0 overflow-scroll"> | |
7 | + <div class="row flex-fill m-0 scroll-y"> | |
8 | 8 | <div class="col-12 px-2"> |
9 | 9 | <div class="card-columns h-100 m-1 fade-in disable-user-select"> |
10 | 10 | <div |
src/app/modules/info-formas-pago/info-formas-pago.component.html
... | ... | @@ -13,8 +13,8 @@ |
13 | 13 | <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> |
14 | 14 | <div |
15 | 15 | [routerLink]="['/opcion-pedido']" |
16 | - class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto | |
17 | - btn-effect align-self-end border border-secondary rounded"> | |
16 | + class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto | |
17 | + btn-effect align-self-end border border-secondary rounded reduce-card-1"> | |
18 | 18 | <img |
19 | 19 | draggable="false" |
20 | 20 | ondragstart="return false;" |
... | ... | @@ -41,8 +41,10 @@ |
41 | 41 | src="assets/img/ir.svg"> |
42 | 42 | </div> |
43 | 43 | </div> |
44 | - <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center | |
45 | - btn-effect border border-primary rounded reduce-card-2"> | |
44 | + <div | |
45 | + class="col-11 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center | |
46 | + btn-effect border border-primary rounded reduce-card-2" | |
47 | + (click)="openGoCaja(templateGoCaja)"> | |
46 | 48 | <img |
47 | 49 | draggable="false" |
48 | 50 | ondragstart="return false;" |
... | ... | @@ -55,3 +57,11 @@ |
55 | 57 | </div> |
56 | 58 | </div> |
57 | 59 | </div> |
60 | + | |
61 | +<ng-template #templateGoCaja> | |
62 | + <div class="bg-primary rounded shadow text-white"> | |
63 | + <div class="modal-body text-center"> | |
64 | + Por favor, hace tu pedido en la caja. | |
65 | + </div> | |
66 | + </div> | |
67 | +</ng-template> |
src/app/modules/info-formas-pago/info-formas-pago.component.scss
... | ... | @@ -3,22 +3,11 @@ |
3 | 3 | } |
4 | 4 | |
5 | 5 | .reduce-card-1.media-pantalla { |
6 | - position: absolute; | |
7 | - bottom: 0; | |
8 | - -webkit-box-flex: 0; | |
9 | - flex: 0 0 41.6666666667%; | |
10 | - max-width: 41.6666666667%; | |
11 | - left: 5%; | |
12 | - margin-left: 0 !important; | |
6 | + flex: 0 0 35% !important; | |
7 | + max-width: 35% !important; | |
13 | 8 | } |
14 | 9 | |
15 | 10 | .reduce-card-2.media-pantalla { |
16 | - position: absolute; | |
17 | - bottom: 0; | |
18 | - -webkit-box-flex: 0; | |
19 | - flex: 0 0 41.6666666667%; | |
20 | - max-width: 41.6666666667%; | |
21 | - right: 5%; | |
22 | - margin-right: 0 !important; | |
23 | - height: 202px !important; | |
11 | + flex: 0 0 35% !important; | |
12 | + max-width: 35% !important; | |
24 | 13 | } |
src/app/modules/info-formas-pago/info-formas-pago.component.ts
1 | -import { Component, OnInit } from '@angular/core'; | |
1 | +import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; | |
2 | +import { BsModalService } from 'ngx-bootstrap/modal'; | |
2 | 3 | |
3 | 4 | @Component({ |
4 | 5 | selector: 'app-formas-pago', |
5 | 6 | templateUrl: './info-formas-pago.component.html', |
6 | 7 | styleUrls: ['./info-formas-pago.component.scss'] |
7 | 8 | }) |
8 | -export class InfoFormasPagoComponent implements OnInit { | |
9 | +export class InfoFormasPagoComponent implements OnInit, OnDestroy { | |
9 | 10 | mediaPantalla = false; |
11 | + timer: any; | |
10 | 12 | |
11 | - constructor() { } | |
13 | + constructor( | |
14 | + private modalService: BsModalService, | |
15 | + ) { } | |
12 | 16 | |
13 | - ngOnInit() { | |
14 | - this.reducirPantalla(); | |
17 | + ngOnInit() { } | |
18 | + | |
19 | + ngOnDestroy() { | |
20 | + if (this.timer) clearTimeout(this.timer); | |
15 | 21 | } |
16 | 22 | |
17 | - reducirPantalla() { | |
18 | - if ($('body').hasClass('media-pantalla')) { | |
19 | - $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); | |
20 | - } | |
23 | + openGoCaja(templateRef: TemplateRef<any>) { | |
24 | + const modalRef = this.modalService.show(templateRef, { class: 'modal-promo modal-sm modal-dialog-centered' }); | |
25 | + this.timer = setTimeout(() => { | |
26 | + modalRef.hide(); | |
27 | + }, 3000); | |
21 | 28 | } |
22 | 29 | } |
src/app/modules/opcion-pedido/opcion-pedido.component.html
1 | 1 | <div class="h-92 bg-white fade-in-left"> |
2 | - <div class="row mx-0 h-15"> | |
2 | + <div class="row mx-0 h-20"> | |
3 | 3 | <div class="col-12 px-0 h-80 my-auto"> |
4 | 4 | <img |
5 | 5 | draggable="false" |
... | ... | @@ -9,61 +9,70 @@ |
9 | 9 | src="assets/img/logo-spot.svg"> |
10 | 10 | </div> |
11 | 11 | </div> |
12 | - <div class="h-85"> | |
12 | + <div class="h-100"> | |
13 | + <div class="h-10"></div> | |
13 | 14 | <div class="row mt-5 mx-3 h-auto"> |
14 | 15 | <div class="col-12 px-0 py-2 align-self-center"> |
15 | - <p class="h6 text-truncate text-center">TU PEDIDO ES PARA</p> | |
16 | + <p class="col-auto h4 text-truncate text-center">TU PEDIDO ES PARA</p> | |
16 | 17 | </div> |
17 | 18 | </div> |
18 | 19 | <div class="row mt-5 h-auto justify-content-center mx-0"> |
19 | - <div class="col-auto px-0 h-auto align-self-start reduce-card-1"> | |
20 | - <div | |
21 | - class="btn-effect col-auto align-self-center px-0 bg-white" | |
22 | - (click)="goTo('/seleccion-articulos'); seleccionPedido('false')"> | |
23 | - <div class="row mx-0 bg-primary badge-pill"> | |
24 | - <div class="col-auto p-0"> | |
25 | - <img | |
26 | - draggable="false" | |
27 | - ondragstart="return false;" | |
28 | - (contextmenu)="false" | |
29 | - class="p-1 icon-50" | |
30 | - src="assets/img/icono-plato.svg"> | |
31 | - </div> | |
32 | - <div class="col-auto align-self-center text-white">comer acรก</div> | |
33 | - <div class="col-auto align-self-center p-0"> | |
34 | - <img | |
35 | - draggable="false" | |
36 | - ondragstart="return false;" | |
37 | - (contextmenu)="false" | |
38 | - class="p-1 icon-30" | |
39 | - src="assets/img/ir.svg"> | |
20 | + <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> | |
21 | + <div class="row justify-content-between"> | |
22 | + <div class="col-12"> | |
23 | + <div | |
24 | + class="btn-effect col-12 px-0 bg-white" | |
25 | + (click)="goTo('/seleccion-articulos'); seleccionPedido('false')"> | |
26 | + <div class="row mx-0 bg-primary badge-pill"> | |
27 | + <div class="col-2 p-0"> | |
28 | + <img | |
29 | + draggable="false" | |
30 | + ondragstart="return false;" | |
31 | + (contextmenu)="false" | |
32 | + class="p-1 icon-50" | |
33 | + src="assets/img/icono-plato.svg"> | |
34 | + </div> | |
35 | + <div class="col-8 align-self-center text-center text-white">comer acรก</div> | |
36 | + <div class="col-2 align-self-center p-0"> | |
37 | + <img | |
38 | + draggable="false" | |
39 | + ondragstart="return false;" | |
40 | + (contextmenu)="false" | |
41 | + class="p-1 icon-30" | |
42 | + src="assets/img/ir.svg"> | |
43 | + </div> | |
44 | + </div> | |
40 | 45 | </div> |
41 | 46 | </div> |
42 | 47 | </div> |
43 | 48 | </div> |
44 | 49 | </div> |
45 | - <div class="row mt-4 h-auto justify-content-center mx-0"> | |
46 | - <div class="col-auto px-0 h-auto align-self-start reduce-card-2"> | |
47 | - <div | |
48 | - class="btn-effect col-auto align-self-center px-0 bg-white" | |
49 | - (click)="goTo('/seleccion-articulos'); seleccionPedido('true')"> | |
50 | - <div class="row mx-0 bg-primary badge-pill"> | |
51 | - <div class="col-auto p-0"> | |
52 | - <img | |
53 | - draggable="false" | |
54 | - ondragstart="return false;" | |
55 | - (contextmenu)="false" | |
56 | - class="p-1 icon-50" | |
57 | - src="assets/img/icono-take-away.svg"> | |
58 | - </div> | |
59 | - <div class="col-auto align-self-center text-white">para llevar</div> | |
60 | - <div class="col-auto align-self-center p-0"> | |
61 | - <img | |
62 | - draggable="false" | |
63 | - ondragstart="return false;" | |
64 | - (contextmenu)="false" | |
65 | - class="p-1 icon-30" | |
66 | - src="assets/img/ir.svg"> | |
50 | + <div class="row mt-5 h-auto justify-content-center mx-0"> | |
51 | + <div class="col-5 px-0 h-auto align-self-start reduce-card-2"> | |
52 | + <div class="row justify-content-between"> | |
53 | + <div class="col-12"> | |
54 | + <div | |
55 | + class="btn-effect col-12 align-self-center px-0 bg-white" | |
56 | + (click)="goTo('/seleccion-articulos'); seleccionPedido('true')"> | |
57 | + <div class="row mx-0 bg-primary badge-pill"> | |
58 | + <div class="col-2 p-0"> | |
59 | + <img | |
60 | + draggable="false" | |
61 | + ondragstart="return false;" | |
62 | + (contextmenu)="false" | |
63 | + class="p-1 icon-50" | |
64 | + src="assets/img/icono-take-away.svg"> | |
65 | + </div> | |
66 | + <div class="col-8 align-self-center text-center text-white">para llevar</div> | |
67 | + <div class="col-2 align-self-center p-0"> | |
68 | + <img | |
69 | + draggable="false" | |
70 | + ondragstart="return false;" | |
71 | + (contextmenu)="false" | |
72 | + class="p-1 icon-30" | |
73 | + src="assets/img/ir.svg"> | |
74 | + </div> | |
75 | + </div> | |
67 | 76 | </div> |
68 | 77 | </div> |
69 | 78 | </div> |
src/app/modules/opcion-pedido/opcion-pedido.component.ts
src/app/modules/pedidos-salientes/pedidos-salientes.component.html
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | </div> |
10 | 10 | </div> |
11 | 11 | <div class="row mt-n5 mx-0 justify-content-around h-75"> |
12 | - <div class="col-5 col-md-6 col-lg-3 h-100"> | |
12 | + <div class="col-5 col-md-6 col-lg-4 h-100"> | |
13 | 13 | <div class="p-3 bg-white text-center shadow-lg rounded h-100"> |
14 | 14 | <h5 class="pt-3">ESTAMOS</h5> |
15 | 15 | <h3 class="font-weight-bold text-secondary">preparando</h3> |
... | ... | @@ -18,16 +18,16 @@ |
18 | 18 | *ngFor="let pedido of pedidosPendientes; let i = index" |
19 | 19 | [hidden]="i > 3" |
20 | 20 | class="font-weight-bold mb-2 text-muted"> |
21 | - <h1 class="display-4">{{rellenar(pedido.id.toString().slice(1), 3)}}</h1> | |
21 | + <h1 class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</h1> | |
22 | 22 | </div> |
23 | 23 | </div> |
24 | 24 | </div> |
25 | - <div class="col-5 col-md-6 col-lg-3 h-100"> | |
25 | + <div class="col-5 col-md-6 col-lg-4 h-100"> | |
26 | 26 | <div class="p-3 bg-white shadow-lg rounded text-center h-100"> |
27 | 27 | <h5 class="pt-3">LISTO PARA</h5> |
28 | 28 | <h3 class="font-weight-bold text-primary">retirar</h3> |
29 | 29 | <div *ngIf="pedidoFinalizado.length"> |
30 | - <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(1), 3)}}</h1> | |
30 | + <h1 class="display-1 mt-4 text-primary mb-0">{{rellenar(pedidoFinalizado[0].id.toString().slice(0), 3)}}</h1> | |
31 | 31 | <hr class="line mt-0"> |
32 | 32 | </div> |
33 | 33 | <h3 class="font-weight-bold text-info mt-4">ยกQue lo disfrutes!</h3> |
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
... | ... | @@ -0,0 +1,59 @@ |
1 | +<!-- FILTRO CATEGORIAS --> | |
2 | + <p class="h6 h-6 m-0 text-center"><small>CATEGORรAS</small></p> | |
3 | + <div class="row mx-0 h-94 justify-content-center align-items-center"> | |
4 | + <div class="col-auto btn-effect h-5 cat-btn"> | |
5 | + <img | |
6 | + draggable="false" | |
7 | + ondragstart="return false;" | |
8 | + (contextmenu)="false" | |
9 | + class="h-100 d-block mx-auto rotate-90-neg" | |
10 | + src="assets/img/ir-color.svg" | |
11 | + (mousedown)="scrollY(templateCategorias, -100)" | |
12 | + (mouseup)="mouseup()" | |
13 | + (mouseleave)="mouseup()"> | |
14 | + </div> | |
15 | + <!-- CATEGORIAS --> | |
16 | + <div | |
17 | + #templateCategorias | |
18 | + class="col-12 px-0 mx-0 box-categorias border border-primary py-1 | |
19 | + border-left-0 rounded-right scroll-y cat-box" | |
20 | + (scroll)="scrollEvent($event)"> | |
21 | + <div | |
22 | + class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" | |
23 | + [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }" | |
24 | + (click)="selectCategoria(-1, 0)"> | |
25 | + <img | |
26 | + draggable="false" | |
27 | + ondragstart="return false;" | |
28 | + (contextmenu)="false" | |
29 | + class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle" | |
30 | + src="assets/img/logo-spot.svg"> | |
31 | + <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> | |
32 | + </div> | |
33 | + <div | |
34 | + class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" | |
35 | + [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }" | |
36 | + (click)="selectCategoria(i, categoria.id)" | |
37 | + *ngFor="let categoria of categorias; let i = index;"> | |
38 | + <img | |
39 | + draggable="false" | |
40 | + ondragstart="return false;" | |
41 | + (contextmenu)="false" | |
42 | + class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle" | |
43 | + src="{{urlImagenes}}{{categoria.path_imagen}}" | |
44 | + onerror="this.src='assets/img/image-not-found.jpg'"> | |
45 | + <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> | |
46 | + </div> | |
47 | + </div> | |
48 | + <div class="col-auto btn-effect h-5 cat-btn"> | |
49 | + <img | |
50 | + draggable="false" | |
51 | + ondragstart="return false;" | |
52 | + (contextmenu)="false" | |
53 | + class="h-100 d-block mx-auto rotate-90" | |
54 | + src="assets/img/ir-color.svg" | |
55 | + (mousedown)="scrollY(templateCategorias, 100)" | |
56 | + (mouseup)="mouseup()" | |
57 | + (mouseleave)="mouseup()"> | |
58 | + </div> | |
59 | + </div> |
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
... | ... | @@ -0,0 +1,54 @@ |
1 | +$primary: #aa006b; | |
2 | + | |
3 | +.box-categorias { | |
4 | + height: calc(100% - 100px) !important; | |
5 | +} | |
6 | + | |
7 | +.active { | |
8 | + transition: 0.3s; | |
9 | + background-color: white; | |
10 | + border-bottom: 3px solid $primary !important; | |
11 | + border-top: 3px solid $primary !important; | |
12 | + border-left: 3px solid $primary !important; | |
13 | + border-right: 3px solid $primary !important; | |
14 | +} | |
15 | + | |
16 | +.border-bottom-effect { | |
17 | + border: none; | |
18 | + position: relative; | |
19 | + &:hover { | |
20 | + border: none; | |
21 | + } | |
22 | + &::after { | |
23 | + content: ""; | |
24 | + position: absolute; | |
25 | + width: 0px; | |
26 | + height: 3px; | |
27 | + left: 50%; | |
28 | + bottom: 0; | |
29 | + background-color: $primary; | |
30 | + transition: all ease-in-out 0.2s; | |
31 | + } | |
32 | + &:hover::after { | |
33 | + width: 100%; | |
34 | + left: 0; | |
35 | + } | |
36 | +} | |
37 | + | |
38 | +.cat-content.media-pantalla { | |
39 | + margin: 0.5rem 0.7rem !important; | |
40 | + height: 76% !important; | |
41 | +} | |
42 | + | |
43 | +.cat-box.media-pantalla { | |
44 | + height: calc(100% - 85px) !important; | |
45 | +} | |
46 | + | |
47 | +.cat-btn.media-pantalla { | |
48 | + height: 7% !important; | |
49 | +} | |
50 | + | |
51 | +#content.media-pantalla, | |
52 | +#boxCarrito.media-pantalla { | |
53 | + max-height: 60% !important; | |
54 | +} |
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts
... | ... | @@ -0,0 +1,25 @@ |
1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { FiltroCategoriasComponent } from './filtro-categorias.component'; | |
4 | + | |
5 | +describe('FiltroCategoriasComponent', () => { | |
6 | + let component: FiltroCategoriasComponent; | |
7 | + let fixture: ComponentFixture<FiltroCategoriasComponent>; | |
8 | + | |
9 | + beforeEach(async(() => { | |
10 | + TestBed.configureTestingModule({ | |
11 | + declarations: [ FiltroCategoriasComponent ] | |
12 | + }) | |
13 | + .compileComponents(); | |
14 | + })); | |
15 | + | |
16 | + beforeEach(() => { | |
17 | + fixture = TestBed.createComponent(FiltroCategoriasComponent); | |
18 | + component = fixture.componentInstance; | |
19 | + fixture.detectChanges(); | |
20 | + }); | |
21 | + | |
22 | + it('should create', () => { | |
23 | + expect(component).toBeTruthy(); | |
24 | + }); | |
25 | +}); |
src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
... | ... | @@ -0,0 +1,86 @@ |
1 | +import { Component, OnInit, Input, HostListener, Output, EventEmitter } from '@angular/core'; | |
2 | +import { ICategoria } from 'src/app/interfaces/ICategoria'; | |
3 | +import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; | |
4 | +import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | |
5 | +import { APP_SETTINGS } from 'src/etc/AppSettings'; | |
6 | + | |
7 | +@Component({ | |
8 | + selector: 'app-filtro-categorias', | |
9 | + templateUrl: './filtro-categorias.component.html', | |
10 | + styleUrls: ['./filtro-categorias.component.scss'] | |
11 | +}) | |
12 | +export class FiltroCategoriasComponent implements OnInit { | |
13 | + @Output() getProductos = new EventEmitter<any>(); | |
14 | + @Output() setProductos = new EventEmitter<any>(); | |
15 | + @Output() filterItems = new EventEmitter<any>(); | |
16 | + categorias: ICategoria[] = []; | |
17 | + timeoutHandler: any; | |
18 | + categoriaActive = null; | |
19 | + allActive = true; | |
20 | + queMostrar = 'todos'; | |
21 | + urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | |
22 | + | |
23 | + constructor( | |
24 | + private categoriaService: CategoriaService, | |
25 | + private inactiveScreen: InactiveScreenService, | |
26 | + ) { } | |
27 | + | |
28 | + ngOnInit() { } | |
29 | + | |
30 | + getCategorias() { | |
31 | + this.categoriaService.getAll() | |
32 | + .subscribe((categorias: ICategoria[]) => { | |
33 | + switch (this.queMostrar) { | |
34 | + case 'todos': | |
35 | + this.categorias = categorias; | |
36 | + this.categoriaActive = 0; | |
37 | + break; | |
38 | + case 'promociones': | |
39 | + this.categorias = categorias; | |
40 | + this.categoriaActive = 19; | |
41 | + break; | |
42 | + case 'ordenar': | |
43 | + this.categorias = categorias.filter((categoria: ICategoria) => { | |
44 | + return categoria.ES_PEDIDO; | |
45 | + }); | |
46 | + this.categoriaActive = 4; | |
47 | + break; | |
48 | + default: | |
49 | + this.categorias = categorias; | |
50 | + this.categoriaActive = 0; | |
51 | + break; | |
52 | + } | |
53 | + !localStorage.getItem('articulos') ? | |
54 | + this.getProductos.emit() : | |
55 | + this.setProductos.emit(); | |
56 | + }); | |
57 | + } | |
58 | + | |
59 | + selectCategoria(index: number, idCategoria?: number) { | |
60 | + if (this.categoriaActive === idCategoria) return; | |
61 | + this.categoriaActive = idCategoria; | |
62 | + this.allActive = idCategoria === 0 ? true : false; | |
63 | + this.categorias.forEach((categoria, i) => { | |
64 | + categoria.selected = index === i ? true : false; | |
65 | + }); | |
66 | + this.filterItems.emit(); | |
67 | + } | |
68 | + | |
69 | + @HostListener('scroll', ['$event']) | |
70 | + scrollEvent(event: Event) { | |
71 | + clearTimeout(this.inactiveScreen.timerReposo); | |
72 | + this.inactiveScreen.startTimeOutInactividad(); | |
73 | + } | |
74 | + | |
75 | + mouseup() { | |
76 | + if (!this.timeoutHandler) return; | |
77 | + clearInterval(this.timeoutHandler); | |
78 | + } | |
79 | + | |
80 | + scrollY(el: HTMLElement, value) { | |
81 | + el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | |
82 | + this.timeoutHandler = setInterval(() => { | |
83 | + el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); | |
84 | + }, 500); | |
85 | + } | |
86 | +} |
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
... | ... | @@ -15,70 +15,13 @@ |
15 | 15 | <div class="row w-100 mr-4 h-50 h-md-70" id="content"> |
16 | 16 | <div class="col-12 h-100 px-0 py-3"> |
17 | 17 | <div class="row mx-0 h-100"> |
18 | - <!-- FILTRO CATEGORIAS --> | |
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> | |
21 | - <div class="row mx-0 h-94 justify-content-center align-items-center"> | |
22 | - <div class="col-auto btn-effect h-5 cat-btn"> | |
23 | - <img | |
24 | - draggable="false" | |
25 | - ondragstart="return false;" | |
26 | - (contextmenu)="false" | |
27 | - class="h-100 d-block mx-auto rotate-90-neg" | |
28 | - src="assets/img/ir-color.svg" | |
29 | - (mousedown)="scrollY(templateCategorias, -100)" | |
30 | - (mouseup)="mouseup()" | |
31 | - (mouseleave)="mouseup()"> | |
32 | - </div> | |
33 | - <!-- CATEGORIAS --> | |
34 | - <div | |
35 | - #templateCategorias | |
36 | - class="col-12 px-0 box-categorias border border-primary | |
37 | - border-left-0 rounded-right scroll-y cat-box" | |
38 | - (scroll)="scrollEvent($event)"> | |
39 | - <div | |
40 | - class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" | |
41 | - [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive, | |
42 | - 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" | |
43 | - (click)="selectCategoria(-1, 0)"> | |
44 | - <img | |
45 | - draggable="false" | |
46 | - ondragstart="return false;" | |
47 | - (contextmenu)="false" | |
48 | - class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" | |
49 | - src="assets/img/logo-spot.svg"> | |
50 | - <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> | |
51 | - </div> | |
52 | - <div | |
53 | - class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" | |
54 | - [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected, | |
55 | - 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" | |
56 | - (click)="selectCategoria(i, categoria.id)" | |
57 | - *ngFor="let categoria of categorias; let i = index;"> | |
58 | - <img | |
59 | - draggable="false" | |
60 | - ondragstart="return false;" | |
61 | - (contextmenu)="false" | |
62 | - class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" | |
63 | - [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}" | |
64 | - src="{{urlImagenes}}{{categoria.path_imagen}}" | |
65 | - onerror="this.src='assets/img/image-not-found.jpg'"> | |
66 | - <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> | |
67 | - </div> | |
68 | - </div> | |
69 | - <div class="col-auto btn-effect h-5 cat-btn"> | |
70 | - <img | |
71 | - draggable="false" | |
72 | - ondragstart="return false;" | |
73 | - (contextmenu)="false" | |
74 | - class="h-100 d-block mx-auto rotate-90" | |
75 | - src="assets/img/ir-color.svg" | |
76 | - (mousedown)="scrollY(templateCategorias, 100)" | |
77 | - (mouseup)="mouseup()" | |
78 | - (mouseleave)="mouseup()"> | |
79 | - </div> | |
80 | - </div> | |
81 | - </div> | |
18 | + <app-filtro-categorias | |
19 | + class="col-5 col-sm-3 col-xl-2 h-100" | |
20 | + #filtroCategorias | |
21 | + (getProductos)="getProductos()" | |
22 | + (setProductos)="setProductos()" | |
23 | + (filterItems)="filterItems()"> | |
24 | + </app-filtro-categorias> | |
82 | 25 | <!-- LISTA DE ARTICULOS --> |
83 | 26 | <div |
84 | 27 | class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" |
... | ... | @@ -170,30 +113,30 @@ |
170 | 113 | #templateCarrito |
171 | 114 | class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" |
172 | 115 | (scroll)="scrollEvent($event)"> |
173 | - <!-- MENSAJE DE ADVERTENCIA --> | |
174 | - <div *ngIf="!articuloService.carrito.length" class="col h-100"> | |
175 | - <p class="text-center py-5">No hay articulos en el carrito</p> | |
176 | - </div> | |
177 | 116 | <!-- ARTICULOS --> |
178 | 117 | <div |
179 | 118 | class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" |
180 | - *ngFor="let articulo of articuloService.carrito; let i = index;"> | |
181 | - <div class="swing-in-top-fwd"> | |
182 | - <img | |
183 | - class="btn-effect icon-20 position-absolute right-0" | |
184 | - src="assets/img/icono-cancelar-color.svg" | |
185 | - (click)="deleteArticulo(i)"> | |
186 | - <img | |
187 | - draggable="false" | |
188 | - ondragstart="return false;" | |
189 | - (contextmenu)="false" | |
190 | - class="d-block img-fluid p-2 mx-auto rounded" | |
191 | - src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" | |
192 | - onerror="this.src='assets/img/image-not-found.jpg'"> | |
193 | - <p class="d-block mt-auto text-center text-primary text-truncate"> | |
194 | - <small>{{articulo.DetArt}}</small> | |
195 | - </p> | |
196 | - </div> | |
119 | + *ngFor="let articulo of articuloService.carrito; let i = index;" | |
120 | + @EnterLeave> | |
121 | + <img | |
122 | + class="btn-effect icon-20 mr-2 position-absolute right-0" | |
123 | + src="assets/img/icono-cancelar-color.svg" | |
124 | + (click)="deleteArticulo(i)"> | |
125 | + <img | |
126 | + draggable="false" | |
127 | + ondragstart="return false;" | |
128 | + (contextmenu)="false" | |
129 | + class="d-block img-fluid p-2 mx-auto rounded" | |
130 | + src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" | |
131 | + onerror="this.src='assets/img/image-not-found.jpg'"> | |
132 | + <p class="d-block mt-auto text-center text-primary text-truncate"> | |
133 | + <small>{{articulo.DetArt}}</small> | |
134 | + </p> | |
135 | + <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad> | |
136 | + </div> | |
137 | + <!-- MENSAJE DE ADVERTENCIA --> | |
138 | + <div *ngIf="!articuloService.carrito.length" class="col h-100"> | |
139 | + <p class="text-center py-5">No hay articulos en el carrito</p> | |
197 | 140 | </div> |
198 | 141 | </div> |
199 | 142 | </div> |
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
1 | -$primary: #aa006b; | |
2 | - | |
3 | -.box-categorias { | |
4 | - height: calc(100% - 100px) !important; | |
5 | -} | |
6 | - | |
7 | -.active { | |
8 | - background-color: white; | |
9 | - border-bottom: 3px solid $primary !important; | |
10 | - border-top: 3px solid $primary !important; | |
11 | - border-left: 3px solid $primary !important; | |
12 | - border-right: 3px solid $primary !important; | |
13 | -} | |
14 | - | |
15 | -.border-bottom-effect { | |
16 | - border: none; | |
17 | - position: relative; | |
18 | - &:hover { | |
19 | - border: none; | |
20 | - } | |
21 | - &::after { | |
22 | - content: ""; | |
23 | - position: absolute; | |
24 | - width: 0px; | |
25 | - height: 3px; | |
26 | - left: 50%; | |
27 | - bottom: 0; | |
28 | - background-color: $primary; | |
29 | - transition: all ease-in-out 0.2s; | |
30 | - } | |
31 | - &:hover::after { | |
32 | - width: 100%; | |
33 | - left: 0; | |
34 | - } | |
35 | -} | |
36 | - | |
37 | -.card { | |
38 | - border: none; | |
39 | -} | |
40 | - | |
41 | -.line-height-sm { | |
42 | - line-height: 1.2; | |
43 | -} | |
44 | - | |
45 | -#content.media-pantalla,#boxCarrito.media-pantalla { | |
1 | +#content.media-pantalla, | |
2 | +#boxCarrito.media-pantalla { | |
46 | 3 | max-height: 60% !important; |
47 | 4 | } |
48 | - | |
49 | -.cat-content.media-pantalla { | |
50 | - margin: 0.5rem 0.7rem !important; | |
51 | - height: 76% !important; | |
52 | -} | |
53 | - | |
54 | -.cat-box.media-pantalla{ | |
55 | - height: calc(100% - 85px) !important; | |
56 | -} | |
57 | - | |
58 | -.cat-btn.media-pantalla { | |
59 | - height: 7% !important; | |
60 | -} | |
61 | - | |
62 | -.img-categoria.media-pantalla{ | |
63 | - min-height: 40px !important; | |
64 | -} | |
65 | 5 | \ No newline at end of file |
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
1 | -import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; | |
1 | +import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, AfterViewInit } from '@angular/core'; | |
2 | 2 | import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; |
3 | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
4 | 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
... | ... | @@ -10,27 +10,38 @@ import { PromocionComponent } from 'src/app/shared/promocion/promocion.component |
10 | 10 | import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; |
11 | 11 | import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; |
12 | 12 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; |
13 | +import { trigger, state, style, transition, animate } from '@angular/animations'; | |
14 | +import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; | |
13 | 15 | |
14 | 16 | @Component({ |
15 | 17 | selector: 'app-seleccion-articulos', |
16 | 18 | templateUrl: './seleccion-articulos.component.html', |
17 | - styleUrls: ['./seleccion-articulos.component.scss'] | |
19 | + styleUrls: ['./seleccion-articulos.component.scss'], | |
20 | + animations: [ | |
21 | + trigger('EnterLeave', [ | |
22 | + state('flyIn', style({ transform: 'translateY(0)' })), | |
23 | + transition(':enter', [ | |
24 | + style({ transform: 'translateY(-100%)' }), | |
25 | + animate('0.5s ease-in') | |
26 | + ]), | |
27 | + transition(':leave', [ | |
28 | + animate('0.5s ease-out', style({ transform: 'translateY(-100%)' })) | |
29 | + ]) | |
30 | + ]) | |
31 | + ] | |
18 | 32 | }) |
19 | -export class SeleccionArticulosComponent implements OnInit, OnDestroy { | |
33 | +export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy { | |
20 | 34 | showSpinner = true; |
21 | 35 | timeoutHandler: any; |
22 | 36 | urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; |
23 | 37 | articulos: IArticulo[] = []; |
24 | 38 | auxArticulos: IArticulo[] = []; |
25 | 39 | showQuantity = 100; |
26 | - queMostrar = 'todos'; | |
27 | - categoriaActive = null; | |
28 | - categorias: ICategoria[] = []; | |
29 | 40 | searchTerm = ''; |
30 | 41 | ordenandoByVendidos = true; |
31 | - allActive = true; | |
32 | 42 | modalRef: BsModalRef; |
33 | 43 | total = 0; |
44 | + @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent; | |
34 | 45 | |
35 | 46 | constructor( |
36 | 47 | public articuloService: ArticuloService, |
... | ... | @@ -40,8 +51,10 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
40 | 51 | private inactiveScreen: InactiveScreenService, |
41 | 52 | ) { } |
42 | 53 | |
43 | - ngOnInit() { | |
44 | - this.getCategorias(); | |
54 | + ngOnInit() { } | |
55 | + | |
56 | + ngAfterViewInit(): void { | |
57 | + this.filtroCategorias.getCategorias(); | |
45 | 58 | this.mediaPantalla(); |
46 | 59 | } |
47 | 60 | |
... | ... | @@ -51,41 +64,12 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
51 | 64 | } |
52 | 65 | } |
53 | 66 | |
54 | - getCategorias() { | |
55 | - this.categoriaService.getAll() | |
56 | - .subscribe((categorias: ICategoria[]) => { | |
57 | - switch (this.queMostrar) { | |
58 | - case 'todos': | |
59 | - this.categorias = categorias; | |
60 | - this.categoriaActive = 0; | |
61 | - break; | |
62 | - case 'promociones': | |
63 | - this.categorias = categorias; | |
64 | - this.categoriaActive = 19; | |
65 | - break; | |
66 | - case 'ordenar': | |
67 | - this.categorias = categorias.filter((categoria: ICategoria) => { | |
68 | - return categoria.ES_PEDIDO; | |
69 | - }); | |
70 | - this.categoriaActive = 4; | |
71 | - break; | |
72 | - default: | |
73 | - this.categorias = categorias; | |
74 | - this.categoriaActive = 0; | |
75 | - break; | |
76 | - } | |
77 | - !localStorage.getItem('articulos') ? | |
78 | - this.getProductos() : | |
79 | - this.setProductos(); | |
80 | - }); | |
81 | - } | |
82 | - | |
83 | 67 | getProductos() { |
84 | 68 | this.articuloService.getAll() |
85 | 69 | .subscribe((result: IArticulo[]) => { |
86 | 70 | this.articuloService.setArticulosSinImagen(result); |
87 | - if (this.queMostrar === 'ordenar') { | |
88 | - this.categorias.forEach((categoria: ICategoria) => { | |
71 | + if (this.filtroCategorias.queMostrar === 'ordenar') { | |
72 | + this.filtroCategorias.categorias.forEach((categoria: ICategoria) => { | |
89 | 73 | const tempArticulos = result.filter((articulo: IArticulo) => { |
90 | 74 | return articulo.categoria_selfservice === categoria.id; |
91 | 75 | }); |
... | ... | @@ -106,12 +90,12 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
106 | 90 | } |
107 | 91 | |
108 | 92 | filterItems() { |
109 | - if (this.categoriaActive === 0) { | |
93 | + if (this.filtroCategorias.categoriaActive === 0) { | |
110 | 94 | this.auxArticulos = this.articulos; |
111 | 95 | return; |
112 | 96 | } |
113 | 97 | this.auxArticulos = this.articulos.filter(x => { |
114 | - return x.categoria_selfservice === this.categoriaActive; | |
98 | + return x.categoria_selfservice === this.filtroCategorias.categoriaActive; | |
115 | 99 | }); |
116 | 100 | this.ordenar(); |
117 | 101 | } |
... | ... | @@ -124,16 +108,6 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
124 | 108 | } |
125 | 109 | } |
126 | 110 | |
127 | - selectCategoria(index: number, idCategoria?: number) { | |
128 | - if (this.categoriaActive === idCategoria) return; | |
129 | - this.categoriaActive = idCategoria; | |
130 | - this.allActive = idCategoria === 0 ? true : false; | |
131 | - this.categorias.forEach((categoria, i) => { | |
132 | - categoria.selected = index === i ? true : false; | |
133 | - }); | |
134 | - this.filterItems(); | |
135 | - } | |
136 | - | |
137 | 111 | selectArticulo(articulo: IArticulo) { |
138 | 112 | this.getByID(articulo.id); |
139 | 113 | } |
... | ... | @@ -226,7 +200,9 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { |
226 | 200 | |
227 | 201 | mediaPantalla() { |
228 | 202 | if ($('body').hasClass('media-pantalla')) { |
229 | - $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); | |
203 | + $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria') | |
204 | + .addClass('media-pantalla') | |
205 | + .addBack('media-pantalla'); | |
230 | 206 | } |
231 | 207 | } |
232 | 208 | } |
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
... | ... | @@ -10,6 +10,8 @@ import { SharedModule } from '../shared/shared.module'; |
10 | 10 | import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; |
11 | 11 | import { FormsModule } from '@angular/forms'; |
12 | 12 | import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component'; |
13 | +import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component'; | |
14 | +import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component'; | |
13 | 15 | |
14 | 16 | @NgModule({ |
15 | 17 | declarations: [ |
... | ... | @@ -17,7 +19,9 @@ import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion. |
17 | 19 | HeaderPublicidadComponent, |
18 | 20 | PromocionComponent, |
19 | 21 | SinonimoComponent, |
20 | - ConfirmacionComponent | |
22 | + ConfirmacionComponent, | |
23 | + ArticuloCantidadComponent, | |
24 | + FiltroCategoriasComponent, | |
21 | 25 | ], |
22 | 26 | imports: [ |
23 | 27 | CommonModule, |
... | ... | @@ -27,7 +31,7 @@ import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion. |
27 | 31 | CarouselModule.forRoot(), |
28 | 32 | SharedModule |
29 | 33 | ], |
30 | - exports: [HeaderPublicidadComponent], | |
34 | + exports: [HeaderPublicidadComponent, ArticuloCantidadComponent], | |
31 | 35 | entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent] |
32 | 36 | }) |
33 | 37 | export class SeleccionArticulosModule { } |
src/app/services/articulo/articulo.service.ts
... | ... | @@ -16,6 +16,7 @@ export class ArticuloService { |
16 | 16 | medioPago: number; |
17 | 17 | idComanda: number; |
18 | 18 | subTotal = 0; |
19 | + maxCantidad = 50; | |
19 | 20 | |
20 | 21 | constructor( |
21 | 22 | private http: HttpClient, |
... | ... | @@ -34,6 +35,18 @@ export class ArticuloService { |
34 | 35 | return this.http.get(`${this.urlDeboSuite}/articulos/${page}`); |
35 | 36 | } |
36 | 37 | |
38 | + substractCant(articulo: IArticulo) { | |
39 | + if (articulo.cantidad === 1) return; | |
40 | + articulo.cantidad--; | |
41 | + this.calcularTotal(); | |
42 | + } | |
43 | + | |
44 | + addCant(articulo: IArticulo) { | |
45 | + if (articulo.cantidad >= this.maxCantidad) return; | |
46 | + articulo.cantidad++; | |
47 | + this.calcularTotal(); | |
48 | + } | |
49 | + | |
37 | 50 | calcularTotal() { |
38 | 51 | this.subTotal = 0; |
39 | 52 | this.carrito.forEach(articulo => { |
src/app/shared/articulo-cantidad/articulo-cantidad.component.html
... | ... | @@ -0,0 +1,26 @@ |
1 | +<div class="row mx-0 justify-content-between bg-primary badge-pill"> | |
2 | + <!-- BOTON MENOS --> | |
3 | + <div class="col-auto px-0 my-auto"> | |
4 | + <img | |
5 | + draggable="false" | |
6 | + ondragstart="return false;" | |
7 | + (contextmenu)="false" | |
8 | + class="d-block ml-auto py-2 icon-15 btn-effect" | |
9 | + src="assets/img/menos-blanco.svg" | |
10 | + (click)="substractCant(articulo)"> | |
11 | + </div> | |
12 | + <!-- CANTIDAD --> | |
13 | + <div class="col px-0 my-auto text-white text-center"> | |
14 | + <p><small>{{articulo.cantidad}}</small></p> | |
15 | + </div> | |
16 | + <!-- BOTON MAS --> | |
17 | + <div class="col-auto px-0 my-auto"> | |
18 | + <img | |
19 | + draggable="false" | |
20 | + ondragstart="return false;" | |
21 | + (contextmenu)="false" | |
22 | + class="d-block ml-auto py-2 icon-15 btn-effect" | |
23 | + src="assets/img/mas-blanco.svg" | |
24 | + (click)="addCant(articulo)"> | |
25 | + </div> | |
26 | +</div> |
src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
... | ... | @@ -0,0 +1,25 @@ |
1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { ArticuloCantidadComponent } from './articulo-cantidad.component'; | |
4 | + | |
5 | +describe('ArticuloCantidadComponent', () => { | |
6 | + let component: ArticuloCantidadComponent; | |
7 | + let fixture: ComponentFixture<ArticuloCantidadComponent>; | |
8 | + | |
9 | + beforeEach(async(() => { | |
10 | + TestBed.configureTestingModule({ | |
11 | + declarations: [ ArticuloCantidadComponent ] | |
12 | + }) | |
13 | + .compileComponents(); | |
14 | + })); | |
15 | + | |
16 | + beforeEach(() => { | |
17 | + fixture = TestBed.createComponent(ArticuloCantidadComponent); | |
18 | + component = fixture.componentInstance; | |
19 | + fixture.detectChanges(); | |
20 | + }); | |
21 | + | |
22 | + it('should create', () => { | |
23 | + expect(component).toBeTruthy(); | |
24 | + }); | |
25 | +}); |
src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
... | ... | @@ -0,0 +1,25 @@ |
1 | +import { Component, OnInit, Input } from '@angular/core'; | |
2 | +import { IArticulo } from 'src/app/interfaces/IArticulo'; | |
3 | +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | |
4 | + | |
5 | +@Component({ | |
6 | + selector: 'app-articulo-cantidad', | |
7 | + templateUrl: './articulo-cantidad.component.html', | |
8 | + styleUrls: ['./articulo-cantidad.component.scss'] | |
9 | +}) | |
10 | +export class ArticuloCantidadComponent implements OnInit { | |
11 | + @Input() articulo: IArticulo; | |
12 | + | |
13 | + constructor(private articuloService: ArticuloService) { } | |
14 | + | |
15 | + ngOnInit() { } | |
16 | + | |
17 | + substractCant(articulo: IArticulo) { | |
18 | + this.articuloService.substractCant(articulo); | |
19 | + } | |
20 | + | |
21 | + addCant(articulo: IArticulo) { | |
22 | + this.articuloService.addCant(articulo); | |
23 | + } | |
24 | + | |
25 | +} |
src/app/shared/header-publicidad/header-publicidad.component.ts
... | ... | @@ -7,6 +7,9 @@ import { PromocionComponent } from '../promocion/promocion.component'; |
7 | 7 | import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; |
8 | 8 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
9 | 9 | import { ConfirmacionComponent } from '../confirmacion/confirmacion.component'; |
10 | +import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; | |
11 | +import { ISinonimo } from 'src/app/interfaces/ISinonimo'; | |
12 | +import { SinonimoComponent } from '../sinonimo/sinonimo.component'; | |
10 | 13 | |
11 | 14 | @Component({ |
12 | 15 | selector: 'app-header-publicidad', |
... | ... | @@ -22,6 +25,7 @@ export class HeaderPublicidadComponent implements OnInit { |
22 | 25 | private publicidadService: PublicidadService, |
23 | 26 | private articuloService: ArticuloService, |
24 | 27 | private modalService: BsModalService, |
28 | + private sinonimoService: SinonimoService | |
25 | 29 | ) { } |
26 | 30 | |
27 | 31 | ngOnInit() { |
... | ... | @@ -68,7 +72,7 @@ export class HeaderPublicidadComponent implements OnInit { |
68 | 72 | { |
69 | 73 | initialState: { |
70 | 74 | titleMessage: articulo.DET_LAR, |
71 | - imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : '', | |
75 | + imagenPath: articulo.imagenes.length ? articulo.imagenes[0].imagen : 'assets/img/image-not-found.jpg', | |
72 | 76 | footerMessageFirst: `ยฟDESEA AGREGAR ESTE ARTรCULO`, |
73 | 77 | footerMessageSecond: `a su carrito?`, |
74 | 78 | footerConfirmation: articulo.PreVen, |
... | ... | @@ -77,10 +81,42 @@ export class HeaderPublicidadComponent implements OnInit { |
77 | 81 | class: 'modal-promo modal-dialog-centered' |
78 | 82 | }); |
79 | 83 | this.modalRef.content.onClose.subscribe(() => { |
80 | - this.articuloService.setArticulo(articulo); | |
84 | + this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) | |
85 | + .subscribe((res: ISinonimo[]) => { | |
86 | + if (res.length) { | |
87 | + this.openModalSinonimos(res, articulo); | |
88 | + } else { | |
89 | + articulo.cantidad = 1; | |
90 | + this.articuloService.setArticulo(articulo); | |
91 | + } | |
92 | + }, err => console.error(err)); | |
81 | 93 | }); |
94 | + this.mediaPantalla(); | |
82 | 95 | } |
83 | 96 | |
97 | + openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { | |
98 | + const modalSinonimo = this.modalService.show(SinonimoComponent, { | |
99 | + initialState: { sinonimos: sinonimosData }, | |
100 | + class: 'modal-promo modal-dialog-centered' | |
101 | + }); | |
102 | + modalSinonimo.content.onClose | |
103 | + .subscribe((res: any) => { | |
104 | + for (const a of articulo.productos) { | |
105 | + if (a.idSinonimo === res.ID_SIN) { | |
106 | + a.CODA = res.articulo.CodArt; | |
107 | + a.CodArt = res.articulo.CodArt; | |
108 | + a.SECA = res.articulo.CodSec; | |
109 | + a.CodSec = res.articulo.CodSec; | |
110 | + a.PreVen = res.articulo.PreVen; | |
111 | + a.id = res.articulo.id; | |
112 | + a.DET_LAR = res.articulo.DET_LAR; | |
113 | + a.DetArt = res.articulo.DetArt; | |
114 | + } | |
115 | + } | |
116 | + this.articuloService.setArticulo(articulo); | |
117 | + }); | |
118 | +} | |
119 | + | |
84 | 120 | mediaPantalla() { |
85 | 121 | if ($('body').hasClass('media-pantalla')) { |
86 | 122 | $('#headerPublicidad,#headerPad').addClass('media-pantalla'); |
src/app/shared/sinonimo/sinonimo.component.html
1 | 1 | <div class="bg-primary rounded text-white"> |
2 | 2 | <div class="modal-header"> |
3 | - <p class="h4">Seleccione sinonimos</p> | |
3 | + <p class="h4">Elige una opciรณn</p> | |
4 | 4 | </div> |
5 | 5 | |
6 | 6 | <div class="modal-body"> |
... | ... | @@ -18,13 +18,13 @@ |
18 | 18 | <label |
19 | 19 | class="custom-control-label" |
20 | 20 | [for]="articulo.id"> |
21 | - {{articulo.DET_LAR}} | |
21 | + {{articulo.DET_LAR.toUpperCase()}} | |
22 | 22 | </label> |
23 | 23 | </div> |
24 | 24 | </div> |
25 | 25 | </div> |
26 | 26 | </div> |
27 | - | |
27 | + | |
28 | 28 | <div class="modal-footer"> |
29 | 29 | <div |
30 | 30 | [ngClass]="validate()" |
src/scss/icons.scss
src/scss/styles-bootstrap.scss
... | ... | @@ -61,4 +61,13 @@ $border-radius-sm: 0.5rem; |
61 | 61 | margin-left: 10px !important; |
62 | 62 | } |
63 | 63 | |
64 | +.modal-content.media-pantalla { | |
65 | + margin-top: auto !important; | |
66 | + margin-bottom: 50px !important; | |
67 | +} | |
68 | + | |
69 | +.card { | |
70 | + border: none !important; | |
71 | +} | |
72 | + | |
64 | 73 | @import "node_modules/bootstrap/scss/bootstrap"; |
src/styles.scss
... | ... | @@ -22,6 +22,13 @@ body { |
22 | 22 | user-select: none; |
23 | 23 | } |
24 | 24 | |
25 | +body.media-pantalla { | |
26 | + height: 50% !important; | |
27 | + position: absolute; | |
28 | + bottom: 0; | |
29 | + width: 100%; | |
30 | +} | |
31 | + | |
25 | 32 | .btn-effect { |
26 | 33 | transition: all 0.3s !important; |
27 | 34 | &:hover { |
... | ... | @@ -77,15 +84,3 @@ p { |
77 | 84 | .disabled { |
78 | 85 | opacity: 0.5; |
79 | 86 | } |
80 | - | |
81 | -body.media-pantalla { | |
82 | - height: 50% !important; | |
83 | - position: absolute; | |
84 | - bottom: 0; | |
85 | - width: 100%; | |
86 | -} | |
87 | - | |
88 | -.modal-content.media-pantalla { | |
89 | - margin-top: auto !important; | |
90 | - margin-bottom: 50px !important; | |
91 | -} |