Luis Suarez / autoservicio-axion

Commit 94cbc3c513d881ded2768652402d5acbbf1351ad

Authored by Marcelo Puebla 2020-01-28 15:04:32 -0300

Exists in develop

Add

Puntero para sinonimos

Showing 2 changed files with 17 additions and 1 deletions Show diff stats

src/app/shared/sinonimo/sinonimo.component.html

Diff comments View file @ 94cbc3c

 <div class="bg-primary rounded text-white">
   <div class="modal-header">
-    <p class="h4">Elige una opción</p>
+    <p class="h4 col-6 px-0 align-self-center">Eliga opciones {{sinonimos.length}}</p>
+    <div class="col-6 text-right">
+      <p *ngFor="let s of sinonimos; let i = index">
+        <span
+          class="pr-2 btn-effect"
+          (click)="scrollTo(i)">
+          Ir a opción {{i+1}}</span>
+        <i class="far fa-hand-point-left"></i>
+      </p>
+    </div>
   </div>
   <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
     <div *ngFor="let s of sinonimos; let i = index">
+      <div [id]="i"></div>
       <hr [hidden]="i === 0" class="bg-white">
       <div *ngFor="let articulo of s.productos">
         <div class="custom-control custom-checkbox">
           <input
             type="checkbox"
             class="custom-control-input"
             [(ngModel)]="articulo.seleccionado"
             (click)="selectSinonimo(i, articulo)"
             [id]="articulo.id">
           <label
             class="custom-control-label"
             [for]="articulo.id">
             {{articulo.DET_LAR.toUpperCase()}}
           </label>
         </div>
       </div>
     </div>
   </div>
   <div class="modal-footer">
     <div
       [ngClass]="validate()"
       class="d-inline-block py-1 bg-white badge-pill text-primary"
       (click)="continue()">
       CONTINUAR
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="icon-30"
         src="assets/img/ir-color.svg">
     </div>
   </div>
 </div>

src/app/shared/sinonimo/sinonimo.component.ts

Diff comments View file @ 94cbc3c

 import { Component, OnInit } from '@angular/core';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Subject, forkJoin } from 'rxjs';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+import { element } from 'protractor';
 @Component({
   selector: 'app-sinonimo',
   templateUrl: './sinonimo.component.html',
   styleUrls: ['./sinonimo.component.scss']
 })
 export class SinonimoComponent implements OnInit {
   sinonimos: ISinonimo[] = [];
   isValid: boolean;
   onClose: Subject<any>;
   articulosSelected: IArticulo[] = [];
   constructor(
     private modalRef: BsModalRef,
     private articuloService: ArticuloService,
   ) {
     this.onClose = new Subject();
     this.articulosSelected.length = this.sinonimos.length;
   }
   ngOnInit() { }
   selectSinonimo(index: number, articulo: IArticulo) {
     for (const a of this.sinonimos[index].productos) {
       a.seleccionado = false;
     }
     articulo.seleccionado = true;
     this.articulosSelected[index] = articulo;
   }
   validate() {
     this.isValid = true;
     for (const s of this.sinonimos) {
       for (const a of s.productos) {
         this.isValid = (!a.seleccionado) ? false : true;
         if (this.isValid) break;
       }
       if (!this.isValid) break;
     }
     return !this.isValid ? 'disabled' : 'btn-effect';
   }
   continue() {
     if (!this.isValid) return;
     const ID_SINS = [];
     const observables = [];
     for (const articulo of this.articulosSelected) {
       ID_SINS.push(articulo.ID_SIN);
     }
     for (const articulo of this.articulosSelected) {
       observables.push(this.articuloService.getById(articulo.id));
     }
     forkJoin(observables)
       .subscribe((res: IArticulo[]) => {
         for (const articulo of res) {
           for (const ID_SIN of ID_SINS) {
             articulo.ID_SIN = ID_SIN;
           }
         }
         this.modalRef.hide();
         this.onClose.next({
           articulos: res,
         });
       }, err => console.error(err));
   }
+  scrollTo(index: number) {
+    const element = document.getElementById(index.toString());
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
 }