Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit 571c49ba30f3b1216867f5a75c102d8b797f17e5

Authored by Marcelo Puebla
1 parent 6b94f5f761
Exists in develop

Change - Add 

Forma de seleccionar articulos. Ahora ofrece sinonimos
Showing 10 changed files with 148 additions and 15 deletions   Show diff stats
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 571c49b
... ... @@ -86,7 +86,7 @@
86 86 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
87 87 <div
88 88 class="swing-in-top-fwd btn-effect card h-auto"
89   - (click)="elegirArticulo(articulo)">
  89 + (click)="selectArticulo(articulo)">
90 90 <img
91 91 draggable="false"
92 92 ondragstart="return false;"
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 571c49b
... ... @@ -4,10 +4,13 @@ import { ArticuloService } from &#39;src/app/services/articulo/articulo.service&#39;;
4 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
  7 +import { ISinonimo } from 'src/app/interfaces/ISinonimo';
7 8 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
8 9 import { PromocionService } from 'src/app/services/promocion/promocion.service';
9 10 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 11 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
  12 +import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
  13 +import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 14  
12 15 @Component({
13 16 selector: 'app-seleccion-articulos',
... ... @@ -33,6 +36,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
33 36 constructor(
34 37 public articuloService: ArticuloService,
35 38 private categoriaService: CategoriaService,
  39 + private sinonimoService: SinonimoService,
36 40 private modalService: BsModalService,
37 41 private inactiveScreen: InactiveScreenService,
38 42 ) { }
... ... @@ -128,7 +132,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
128 132 this.filterItems();
129 133 }
130 134  
131   - elegirArticulo(articulo: IArticulo) {
  135 + selectArticulo(articulo: IArticulo) {
132 136 this.getByID(articulo.id);
133 137 }
134 138  
... ... @@ -138,12 +142,23 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
138 142 if (res.FPP) {
139 143 this.openModalPromos(res);
140 144 } else {
141   - res.cantidad = 1;
142   - this.articuloService.setArticulo(res);
  145 + this.getSinonimos(res);
143 146 }
144 147 }, err => console.error(err));
145 148 }
146 149  
  150 + getSinonimos(articulo: IArticulo) {
  151 + this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
  152 + .subscribe((res: ISinonimo[]) => {
  153 + if (res.length) {
  154 + this.openModalSinonimos(res);
  155 + } else {
  156 + articulo.cantidad = 1;
  157 + this.articuloService.setArticulo(articulo);
  158 + }
  159 + })
  160 + }
  161 +
147 162 openModalPromos(articulo: IArticulo) {
148 163 this.modalRef = this.modalService.show(PromocionComponent, {
149 164 initialState: { articulosPromo: [articulo] },
... ... @@ -151,6 +166,13 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
151 166 });
152 167 }
153 168  
  169 + openModalSinonimos(sinonimosData: ISinonimo[]) {
  170 + this.modalRef = this.modalService.show(SinonimoComponent, {
  171 + initialState: { sinonimos: sinonimosData },
  172 + class: 'modal-promo modal-dialog-centered'
  173 + });
  174 + }
  175 +
154 176 deleteArticulo(index: number) {
155 177 this.articuloService.carrito.splice(index, 1);
156 178 this.articuloService.calcularTotal();
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 571c49b
... ... @@ -7,21 +7,25 @@ import { ModalModule } from &#39;ngx-bootstrap/modal&#39;;
7 7 import { CarouselModule } from 'ngx-bootstrap/carousel';
8 8 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
9 9 import { SharedModule } from '../shared/shared.module';
  10 +import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
  11 +import { FormsModule } from '@angular/forms';
10 12  
11 13 @NgModule({
12 14 declarations: [
13 15 SeleccionArticulosComponent,
14 16 HeaderPublicidadComponent,
15   - PromocionComponent
  17 + PromocionComponent,
  18 + SinonimoComponent,
16 19 ],
17 20 imports: [
18 21 CommonModule,
19 22 SeleccionArticulosRoutingModule,
  23 + FormsModule,
20 24 ModalModule.forRoot(),
21 25 CarouselModule.forRoot(),
22 26 SharedModule
23 27 ],
24 28 exports: [HeaderPublicidadComponent],
25   - entryComponents: [PromocionComponent]
  29 + entryComponents: [PromocionComponent, SinonimoComponent]
26 30 })
27 31 export class SeleccionArticulosModule { }
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 571c49b
... ... @@ -6,7 +6,7 @@
6 6 <div class="col-4 align-self-center">
7 7 <div
8 8 class="row mx-0 justify-content-between bg-white badge-pill"
9   - (click)="elegirPromo(articulosPromo[0])">
  9 + (click)="selectPromo(articulosPromo[0])">
10 10 <div class="col px-0 align-self-center text-primary">
11 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 12 </div>
... ... @@ -43,7 +43,7 @@
43 43 (scroll)="scrollEvent($event)">
44 44 <div class="col-12">
45 45 <div *ngFor="let promo of promociones">
46   - <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
  46 + <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)">
47 47 <div class="d-flex">
48 48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49 49 <p class="font-weight-bold my-auto pr-2">
src/app/shared/promocion/promocion.component.ts
Diff comments   View file @ 571c49b
1 1 import { Component, OnInit, HostListener } from '@angular/core';
2   -import { BsModalRef } from 'ngx-bootstrap/modal';
  2 +import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 4 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
5 5 import { PromocionService } from 'src/app/services/promocion/promocion.service';
6 6 import { Subject } from 'rxjs';
7 7 import { APP_SETTINGS } from 'src/etc/AppSettings';
8 8 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
  9 +import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
  10 +import { ISinonimo } from 'src/app/interfaces/ISinonimo';
  11 +import { SinonimoComponent } from '../sinonimo/sinonimo.component';
9 12  
10 13 @Component({
11 14 selector: 'app-promocion',
... ... @@ -20,8 +23,10 @@ export class PromocionComponent implements OnInit {
20 23  
21 24 constructor(
22 25 public modalRef: BsModalRef,
  26 + private modalService: BsModalService,
23 27 private articuloService: ArticuloService,
24 28 private promocionService: PromocionService,
  29 + private sinonimoService: SinonimoService,
25 30 private inactiveScreen: InactiveScreenService,
26 31 ) {
27 32 this.onClose = new Subject();
... ... @@ -31,10 +36,24 @@ export class PromocionComponent implements OnInit {
31 36 this.getPromociones();
32 37 }
33 38  
34   - elegirPromo(promo: IArticulo) {
35   - promo.cantidad = 1;
36   - this.articuloService.setArticulo(promo);
37   - this.modalRef.hide();
  39 + selectPromo(promo: IArticulo) {
  40 + this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
  41 + .subscribe((res: ISinonimo[]) => {
  42 + if (res.length) {
  43 + this.openModalSinonimos(res);
  44 + } else {
  45 + promo.cantidad = 1;
  46 + this.articuloService.setArticulo(promo);
  47 + this.modalRef.hide();
  48 + }
  49 + }, err => console.error(err));
  50 + }
  51 +
  52 + openModalSinonimos(sinonimosData: ISinonimo[]) {
  53 + this.modalRef = this.modalService.show(SinonimoComponent, {
  54 + initialState: { sinonimos: sinonimosData },
  55 + class: 'modal-promo modal-dialog-centered'
  56 + });
38 57 }
39 58  
40 59 getPromociones() {
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ 571c49b
1   -<p>sinonimo works!</p>
  1 +<div class="bg-primary rounded text-white">
  2 + <div class="modal-header">
  3 + <p class="h4">Seleccione sinonimos</p>
  4 + </div>
  5 +
  6 + <div class="modal-body">
  7 + <div
  8 + class="lista-sinonimos scroll-y-visible"
  9 + *ngFor="let s of sinonimos">
  10 + <div *ngFor="let articulo of s.productos">
  11 + <div class="custom-control custom-checkbox">
  12 + <input
  13 + type="checkbox"
  14 + class="custom-control-input"
  15 + [(ngModel)]="articulo.seleccionado"
  16 + (click)="selectArticulo(articulo)"
  17 + [id]="articulo.id">
  18 + <label
  19 + class="custom-control-label"
  20 + [for]="articulo.id">
  21 + {{articulo.DET_LAR}}
  22 + </label>
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 +
  28 + <div class="modal-footer">
  29 + <div
  30 + [ngClass]="validate()"
  31 + class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary">
  32 + CONTINUAR
  33 + <img
  34 + draggable="false"
  35 + ondragstart="return false;"
  36 + (contextmenu)="false"
  37 + class="icon-30"
  38 + src="assets/img/ir-color.svg">
  39 + </div>
  40 + </div>
  41 +</div>
src/app/shared/sinonimo/sinonimo.component.scss
Diff comments   View file @ 571c49b
... ... @@ -0,0 +1,4 @@
  1 +.lista-sinonimos {
  2 + min-height: auto;
  3 + max-height: 25vh;
  4 +}
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ 571c49b
1 1 import { Component, OnInit } from '@angular/core';
  2 +import { ISinonimo } from 'src/app/interfaces/ISinonimo';
  3 +import { IArticulo } from 'src/app/interfaces/IArticulo';
2 4  
3 5 @Component({
4 6 selector: 'app-sinonimo',
... ... @@ -6,10 +8,33 @@ import { Component, OnInit } from &#39;@angular/core&#39;;
6 8 styleUrls: ['./sinonimo.component.scss']
7 9 })
8 10 export class SinonimoComponent implements OnInit {
  11 + sinonimos: ISinonimo[] = [];
  12 + isValid: boolean;
9 13  
10 14 constructor() { }
11 15  
12 16 ngOnInit() {
13 17 }
14 18  
  19 + selectArticulo(articulo: IArticulo) {
  20 + for (const s of this.sinonimos) {
  21 + for (const articulo of s.productos) {
  22 + articulo.seleccionado = false;
  23 + }
  24 + }
  25 + articulo.seleccionado = true;
  26 + }
  27 +
  28 + validate() {
  29 + this.isValid = false;
  30 + for (const s of this.sinonimos) {
  31 + for (const articulo of s.productos) {
  32 + if (articulo.seleccionado) {
  33 + this.isValid = true;
  34 + }
  35 + }
  36 + }
  37 + return !this.isValid ? 'disabled' : '';
  38 + }
  39 +
15 40 }
src/scss/styles-bootstrap.scss
Diff comments   View file @ 571c49b
... ... @@ -40,9 +40,24 @@ $border-radius-sm: 0.5rem;
40 40 height: 100% !important;
41 41 }
42 42  
  43 +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  44 + background-color: $primary !important;
  45 +}
  46 +
  47 +.custom-control-input:checked ~ .custom-control-label::before {
  48 + border-color: $primary !important;
  49 + background-color: $primary !important;
  50 +}
  51 +
  52 +.custom-control-input:checked ~ .custom-control-label::before {
  53 + color: #fff;
  54 + border-color: $primary !important;
  55 + background-color: $primary !important;
  56 +}
  57 +
43 58 .modal-promo > div {
44 59 border: none !important;
45   - border-radius: 10rem;
  60 + border-radius: $border-radius;
46 61 margin-left: 10px !important;
47 62 }
48 63  
... ... @@ -73,3 +73,7 @@ p {
73 73 .rotate-180-neg {
74 74 transform: rotate(-180deg);
75 75 }
  76 +
  77 +.disabled {
  78 + opacity: 0.5;
  79 +}