From 571c49ba30f3b1216867f5a75c102d8b797f17e5 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Thu, 23 Jan 2020 14:12:07 -0300
Subject: [PATCH] Change - Add Forma de seleccionar articulos. Ahora ofrece
 sinonimos

---
 .../seleccion-articulos.component.html             |  2 +-
 .../seleccion-articulos.component.ts               | 28 +++++++++++++--
 .../seleccion-articulos.module.ts                  |  8 +++--
 src/app/shared/promocion/promocion.component.html  |  4 +--
 src/app/shared/promocion/promocion.component.ts    | 29 ++++++++++++---
 src/app/shared/sinonimo/sinonimo.component.html    | 42 +++++++++++++++++++++-
 src/app/shared/sinonimo/sinonimo.component.scss    |  4 +++
 src/app/shared/sinonimo/sinonimo.component.ts      | 25 +++++++++++++
 src/scss/styles-bootstrap.scss                     | 17 ++++++++-
 src/styles.scss                                    |  4 +++
 10 files changed, 148 insertions(+), 15 deletions(-)

diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 66311d9..8ed247b 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -86,7 +86,7 @@
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
-                  (click)="elegirArticulo(articulo)">
+                  (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index ad34ce5..d6f2379 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -4,10 +4,13 @@ import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 
 @Component({
   selector: 'app-seleccion-articulos',
@@ -33,6 +36,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
+    private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
@@ -128,7 +132,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     this.filterItems();
   }
 
-  elegirArticulo(articulo: IArticulo) {
+  selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
 
@@ -138,12 +142,23 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
-          res.cantidad = 1;
-          this.articuloService.setArticulo(res);
+          this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
 
+  getSinonimos(articulo: IArticulo) {
+    this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
+      .subscribe((res: ISinonimo[]) => {
+        if (res.length) {
+          this.openModalSinonimos(res);
+        } else {
+          articulo.cantidad = 1;
+          this.articuloService.setArticulo(articulo);
+        }
+      })
+  }
+
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
@@ -151,6 +166,13 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     });
   }
 
+  openModalSinonimos(sinonimosData: ISinonimo[]) {
+    this.modalRef = this.modalService.show(SinonimoComponent, {
+      initialState: { sinonimos: sinonimosData },
+      class: 'modal-promo modal-dialog-centered'
+    });
+  }
+
   deleteArticulo(index: number) {
     this.articuloService.carrito.splice(index, 1);
     this.articuloService.calcularTotal();
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
index b793c89..267b352 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
@@ -7,21 +7,25 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
+import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
-    PromocionComponent
+    PromocionComponent,
+    SinonimoComponent,
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
+    FormsModule,
     ModalModule.forRoot(),
     CarouselModule.forRoot(),
     SharedModule
   ],
   exports: [HeaderPublicidadComponent],
-  entryComponents: [PromocionComponent]
+  entryComponents: [PromocionComponent, SinonimoComponent]
 })
 export class SeleccionArticulosModule { }
diff --git a/src/app/shared/promocion/promocion.component.html b/src/app/shared/promocion/promocion.component.html
index 2379b3d..20db4ca 100644
--- a/src/app/shared/promocion/promocion.component.html
+++ b/src/app/shared/promocion/promocion.component.html
@@ -6,7 +6,7 @@
     <div class="col-4 align-self-center">
       <div
         class="row mx-0 justify-content-between bg-white badge-pill"
-        (click)="elegirPromo(articulosPromo[0])">
+        (click)="selectPromo(articulosPromo[0])">
         <div class="col px-0 align-self-center text-primary">
           <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 
         </div>
@@ -43,7 +43,7 @@
     (scroll)="scrollEvent($event)">
     <div class="col-12">
       <div *ngFor="let promo of promociones">
-        <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
+        <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)">
           <div class="d-flex">
             <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
             <p class="font-weight-bold my-auto pr-2">
diff --git a/src/app/shared/promocion/promocion.component.ts b/src/app/shared/promocion/promocion.component.ts
index fb08562..cb293df 100644
--- a/src/app/shared/promocion/promocion.component.ts
+++ b/src/app/shared/promocion/promocion.component.ts
@@ -1,11 +1,14 @@
 import { Component, OnInit, HostListener } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { Subject } from 'rxjs';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
+import { SinonimoComponent } from '../sinonimo/sinonimo.component';
 
 @Component({
   selector: 'app-promocion',
@@ -20,8 +23,10 @@ export class PromocionComponent implements OnInit {
 
   constructor(
     public modalRef: BsModalRef,
+    private modalService: BsModalService,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
+    private sinonimoService: SinonimoService,
     private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
@@ -31,10 +36,24 @@ export class PromocionComponent implements OnInit {
     this.getPromociones();
   }
 
-  elegirPromo(promo: IArticulo) {
-    promo.cantidad = 1;
-    this.articuloService.setArticulo(promo);
-    this.modalRef.hide();
+  selectPromo(promo: IArticulo) {
+    this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
+      .subscribe((res: ISinonimo[]) => {
+        if (res.length) {
+          this.openModalSinonimos(res);
+        } else {
+          promo.cantidad = 1;
+          this.articuloService.setArticulo(promo);
+          this.modalRef.hide();
+        }
+      }, err => console.error(err));
+  }
+
+  openModalSinonimos(sinonimosData: ISinonimo[]) {
+    this.modalRef = this.modalService.show(SinonimoComponent, {
+      initialState: { sinonimos: sinonimosData },
+      class: 'modal-promo modal-dialog-centered'
+    });
   }
 
   getPromociones() {
diff --git a/src/app/shared/sinonimo/sinonimo.component.html b/src/app/shared/sinonimo/sinonimo.component.html
index 65fde3c..96a14bc 100644
--- a/src/app/shared/sinonimo/sinonimo.component.html
+++ b/src/app/shared/sinonimo/sinonimo.component.html
@@ -1 +1,41 @@
-<p>sinonimo works!</p>
+<div class="bg-primary rounded text-white">
+  <div class="modal-header">
+    <p class="h4">Seleccione sinonimos</p>
+  </div>
+
+  <div class="modal-body">
+    <div
+      class="lista-sinonimos scroll-y-visible"
+      *ngFor="let s of sinonimos">
+      <div *ngFor="let articulo of s.productos">
+        <div class="custom-control custom-checkbox">
+          <input
+            type="checkbox"
+            class="custom-control-input"
+            [(ngModel)]="articulo.seleccionado"
+            (click)="selectArticulo(articulo)"
+            [id]="articulo.id">
+          <label
+            class="custom-control-label"
+            [for]="articulo.id">
+            {{articulo.DET_LAR}}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="modal-footer">
+    <div
+      [ngClass]="validate()"
+      class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary">
+      CONTINUAR
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30"
+        src="assets/img/ir-color.svg">
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/sinonimo/sinonimo.component.scss b/src/app/shared/sinonimo/sinonimo.component.scss
index e69de29..1b62e4c 100644
--- a/src/app/shared/sinonimo/sinonimo.component.scss
+++ b/src/app/shared/sinonimo/sinonimo.component.scss
@@ -0,0 +1,4 @@
+.lista-sinonimos {
+  min-height: auto;
+  max-height: 25vh;
+}
diff --git a/src/app/shared/sinonimo/sinonimo.component.ts b/src/app/shared/sinonimo/sinonimo.component.ts
index 0b7a869..b2ab2d0 100644
--- a/src/app/shared/sinonimo/sinonimo.component.ts
+++ b/src/app/shared/sinonimo/sinonimo.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ISinonimo } from 'src/app/interfaces/ISinonimo';
+import { IArticulo } from 'src/app/interfaces/IArticulo';
 
 @Component({
   selector: 'app-sinonimo',
@@ -6,10 +8,33 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./sinonimo.component.scss']
 })
 export class SinonimoComponent implements OnInit {
+  sinonimos: ISinonimo[] = [];
+  isValid: boolean;
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  selectArticulo(articulo: IArticulo) {
+    for (const s of this.sinonimos) {
+      for (const articulo of s.productos) {
+        articulo.seleccionado = false;
+      }
+    }
+    articulo.seleccionado = true;
+  }
+
+  validate() {
+    this.isValid = false;
+    for (const s of this.sinonimos) {
+      for (const articulo of s.productos) {
+        if (articulo.seleccionado) {
+          this.isValid = true;
+        }
+      }
+    }
+    return !this.isValid ? 'disabled' : '';
+  }
+
 }
diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss
index 61aca81..9cc2819 100644
--- a/src/scss/styles-bootstrap.scss
+++ b/src/scss/styles-bootstrap.scss
@@ -40,9 +40,24 @@ $border-radius-sm: 0.5rem;
   height: 100% !important;
 }
 
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
+  background-color: $primary !important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  border-color: $primary !important;
+  background-color: $primary !important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  color: #fff;
+  border-color: $primary !important;
+  background-color: $primary !important;
+}
+
 .modal-promo > div {
   border: none !important;
-  border-radius: 10rem;
+  border-radius: $border-radius;
   margin-left: 10px !important;
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index a82c7b6..2402e01 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -73,3 +73,7 @@ p {
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
+
+.disabled {
+  opacity: 0.5;
+}
-- 
1.9.1