Commit ac4a8e73ac5551ce75e3a3fa4adf0db54c06a063

Authored by Marcelo Puebla
1 parent 924d1d4f5d
Exists in develop

Fix

Referencia
src/app/shared/sinonimo/sinonimo.component.html
1 <div class="bg-primary rounded text-white"> 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <img 3 <img
4 draggable="false" 4 draggable="false"
5 ondragstart="return false;" 5 ondragstart="return false;"
6 (contextmenu)="false" 6 (contextmenu)="false"
7 (click)="modalRef.hide()" 7 (click)="close()"
8 class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index" 8 class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
9 src="assets/img/icono-cancelar-blanco.svg"> 9 src="assets/img/icono-cancelar-blanco.svg">
10 <p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p> 10 <p class="col-7 h4 px-0 align-self-center">{{articulo.DetArt}}</p>
11 <div class="col-5 pt-4 pr-0 text-right"> 11 <div class="col-5 pt-4 pr-0 text-right">
12 <p *ngFor="let s of sinonimos; let i = index"> 12 <p *ngFor="let s of sinonimos; let i = index">
13 <span 13 <span
14 class="btn-effect" 14 class="btn-effect"
15 (click)="scrollTo(i)"> 15 (click)="scrollTo(i)">
16 Ir a opción {{i+1}} 16 Ir a opción {{i+1}}
17 <i class="far fa-hand-point-left"></i> 17 <i class="far fa-hand-point-left"></i>
18 </span> 18 </span>
19 </p> 19 </p>
20 </div> 20 </div>
21 </div> 21 </div>
22 22
23 <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2"> 23 <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
24 <div *ngFor="let s of sinonimos; let i = index"> 24 <div *ngFor="let s of sinonimos; let i = index">
25 <div [id]="i"></div> 25 <div [id]="i"></div>
26 <hr [hidden]="i === 0" class="bg-white"> 26 <hr [hidden]="i === 0" class="bg-white">
27 <div *ngFor="let articulo of s.productos"> 27 <div *ngFor="let articulo of s.productos">
28 <div class="custom-control custom-checkbox"> 28 <div class="custom-control custom-checkbox">
29 <input 29 <input
30 type="checkbox" 30 type="checkbox"
31 class="custom-control-input" 31 class="custom-control-input"
32 [(ngModel)]="articulo.seleccionado" 32 [(ngModel)]="articulo.seleccionado"
33 (click)="selectSinonimo(i, articulo)" 33 (click)="selectSinonimo(i, articulo)"
34 [id]="articulo.id"> 34 [id]="articulo.id">
35 <label 35 <label
36 class="custom-control-label" 36 class="custom-control-label"
37 [for]="articulo.id"> 37 [for]="articulo.id">
38 {{articulo.DET_LAR.toUpperCase()}} 38 {{articulo.DET_LAR.toUpperCase()}}
39 </label> 39 </label>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 44
45 <div class="modal-footer"> 45 <div class="modal-footer">
46 <div 46 <div
47 [ngClass]="validate()" 47 [ngClass]="validate()"
48 class="d-inline-block py-1 bg-white badge-pill text-primary" 48 class="d-inline-block py-1 bg-white badge-pill text-primary"
49 (click)="continue()"> 49 (click)="continue()">
50 CONTINUAR 50 CONTINUAR
51 <img 51 <img
52 draggable="false" 52 draggable="false"
53 ondragstart="return false;" 53 ondragstart="return false;"
54 (contextmenu)="false" 54 (contextmenu)="false"
55 class="icon-30" 55 class="icon-30"
56 src="assets/img/ir-color.svg"> 56 src="assets/img/ir-color.svg">
57 </div> 57 </div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
src/app/shared/sinonimo/sinonimo.component.ts
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject, forkJoin } from 'rxjs'; 5 import { Subject, forkJoin } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7 import { element } from 'protractor'; 7 import { element } from 'protractor';
8 8
9 @Component({ 9 @Component({
10 selector: 'app-sinonimo', 10 selector: 'app-sinonimo',
11 templateUrl: './sinonimo.component.html', 11 templateUrl: './sinonimo.component.html',
12 styleUrls: ['./sinonimo.component.scss'] 12 styleUrls: ['./sinonimo.component.scss']
13 }) 13 })
14 export class SinonimoComponent implements OnInit { 14 export class SinonimoComponent implements OnInit {
15 sinonimos: ISinonimo[] = []; 15 sinonimos: ISinonimo[] = [];
16 isValid: boolean; 16 isValid: boolean;
17 onClose: Subject<any>; 17 onClose: Subject<any>;
18 articulosSelected: IArticulo[] = []; 18 articulosSelected: IArticulo[] = [];
19 articulo: IArticulo; 19 articulo: IArticulo;
20 20
21 constructor( 21 constructor(
22 private modalRef: BsModalRef, 22 private modalRef: BsModalRef,
23 private articuloService: ArticuloService, 23 private articuloService: ArticuloService,
24 ) { 24 ) {
25 this.onClose = new Subject(); 25 this.onClose = new Subject();
26 this.articulosSelected.length = this.sinonimos.length; 26 this.articulosSelected.length = this.sinonimos.length;
27 } 27 }
28 28
29 ngOnInit() { } 29 ngOnInit() { }
30 30
31 selectSinonimo(index: number, articulo: IArticulo) { 31 selectSinonimo(index: number, articulo: IArticulo) {
32 for (const a of this.sinonimos[index].productos) { 32 for (const a of this.sinonimos[index].productos) {
33 a.seleccionado = false; 33 a.seleccionado = false;
34 } 34 }
35 articulo.seleccionado = true; 35 articulo.seleccionado = true;
36 this.articulosSelected[index] = articulo; 36 this.articulosSelected[index] = articulo;
37 } 37 }
38 38
39 validate() { 39 validate() {
40 this.isValid = true; 40 this.isValid = true;
41 for (const s of this.sinonimos) { 41 for (const s of this.sinonimos) {
42 for (const a of s.productos) { 42 for (const a of s.productos) {
43 this.isValid = (!a.seleccionado) ? false : true; 43 this.isValid = (!a.seleccionado) ? false : true;
44 if (this.isValid) break; 44 if (this.isValid) break;
45 } 45 }
46 if (!this.isValid) break; 46 if (!this.isValid) break;
47 } 47 }
48 return !this.isValid ? 'disabled' : 'btn-effect'; 48 return !this.isValid ? 'disabled' : 'btn-effect';
49 } 49 }
50 50
51 continue() { 51 continue() {
52 if (!this.isValid) return; 52 if (!this.isValid) return;
53 const ID_SINS = []; 53 const ID_SINS = [];
54 const observables = []; 54 const observables = [];
55 55
56 for (const articulo of this.articulosSelected) { 56 for (const articulo of this.articulosSelected) {
57 ID_SINS.push(articulo.ID_SIN); 57 ID_SINS.push(articulo.ID_SIN);
58 } 58 }
59 59
60 for (const articulo of this.articulosSelected) { 60 for (const articulo of this.articulosSelected) {
61 observables.push(this.articuloService.getById(articulo.id)); 61 observables.push(this.articuloService.getById(articulo.id));
62 } 62 }
63 63
64 forkJoin(observables) 64 forkJoin(observables)
65 .subscribe((res: IArticulo[]) => { 65 .subscribe((res: IArticulo[]) => {
66 for (const articulo of res) { 66 for (const articulo of res) {
67 for (const ID_SIN of ID_SINS) { 67 for (const ID_SIN of ID_SINS) {
68 articulo.ID_SIN = ID_SIN; 68 articulo.ID_SIN = ID_SIN;
69 } 69 }
70 } 70 }
71 this.modalRef.hide(); 71 this.modalRef.hide();
72 this.onClose.next({ 72 this.onClose.next({
73 articulos: res, 73 articulos: res,
74 }); 74 });
75 }, err => console.error(err)); 75 }, err => console.error(err));
76 } 76 }
77 77
78 scrollTo(index: number) { 78 scrollTo(index: number) {
79 const el = document.getElementById(index.toString()); 79 const el = document.getElementById(index.toString());
80 el.scrollIntoView({ behavior: 'smooth' }); 80 el.scrollIntoView({ behavior: 'smooth' });
81 } 81 }
82 82
83 close() {
84 this.modalRef.hide();
85 }
86
83 } 87 }
84 88