Marcelo Puebla / autoservicio-axion

Commit 6bf89ab1586d737f1fb485e4de9c5ab7509a8b76

Authored by Marcelo Puebla 2020-02-11 15:42:40 -0300

Exists in develop

Merge branch 'develop' into 'develop'

Develop

See merge request !131

Showing 2 changed files Show diff stats

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

Diff comments View file @ 6bf89ab

 <div class="bg-primary rounded text-white">
   <div class="modal-header">
     <img
       draggable="false"
       ondragstart="return false;"
       (contextmenu)="false"
       (click)="close()"
       class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
       src="assets/img/icono-cancelar-blanco.svg">
     <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
   </div>
   <div class="modal-body my-2">
     <p class="mb-2 h4">Opcion {{currentIndex+1}}</p>
     <p class="mb-2 h5">Cantidad restante {{sinonimos[currentIndex].cantidadRestante}}</p>
     <div class="lista-sinonimos scroll-y-visible">
       <div
         class="row mx-0 mb-2 fade-in-left"
         *ngFor="let articulo of sinonimos[currentIndex].productos">
         <div class="col-8 p-0 my-auto h6 text-right">
           <p class="m-0 font-weight-normal">
             {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
           </p>
         </div>
         <div class="col-4">
           <div class="row mx-0 justify-content-between border border-white badge-pill">
             <!-- BOTON MENOS -->
             <div class="col-auto px-0 my-auto">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-block ml-auto py-2 icon-30 btn-effect"
                 src="assets/img/menos-blanco.svg"
                 (click)="restarCantidadSinonimo(articulo, currentIndex)">
             </div>
             <!-- CANTIDAD -->
             <div class="col px-0 my-auto text-white text-center">
               <p>{{articulo.cantidad}}</p>
             </div>
             <!-- BOTON MAS -->
             <div class="col-auto px-0 my-auto">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-block ml-auto py-2 icon-30 btn-effect"
                 src="assets/img/mas-blanco.svg"
                 (click)="sumarCantidadSinonimo(articulo, currentIndex)">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="modal-footer">
     <div
       *ngIf="currentIndex != 0 && sinonimos.length > 1"
       class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto fade-in-right"
       (click)="currentIndex = currentIndex-1">
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="icon-30 flip"
         src="assets/img/ir-color.svg">
       VOLVER
     </div>
     <div
+      [ngClass]="validateNext()"
       *ngIf="currentIndex != sinonimos.length-1"
-      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto fade-in-left"
+      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
-      (click)="currentIndex = currentIndex+1">
+      (click)="goNext()">
       SIGUIENTE
       <img
         draggable="false"
         ondragstart="return false;"
         (contextmenu)="false"
         class="icon-30"
         src="assets/img/ir-color.svg">
     </div>
     <div
       [ngClass]="validate()"
       *ngIf="currentIndex == sinonimos.length-1"
       class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto fade-in-left"
       (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 @ 6bf89ab

 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>;
   articulo: IArticulo;
   isSinonimoSelected = false;
   currentIndex = 0;
   constructor(
     private modalRef: BsModalRef,
     private articuloService: ArticuloService,
   ) {
     this.onClose = new Subject();
   }
   ngOnInit() {
     for (const s of this.sinonimos) {
       for (const a of s.productos) {
         a.cantidad = 0;
       }
     }
   }
   validate() {
     this.isValid = true;
     for (const s of this.sinonimos) {
       if (s.cantidadRestante > 0) {
         this.isValid = false;
         break;
       }
     }
     return !this.isValid ? 'disabled' : 'btn-effect';
   }
+  validateNext() {
+    const sinonimo = this.sinonimos[this.currentIndex]
+    sinonimo.selected = (sinonimo.cantidadRestante > 0) ? false : true;
+    return !sinonimo.selected ? 'disabled' : 'btn-effect';
+  }
+  goNext() {
+    if (!this.sinonimos[this.currentIndex].selected) return;
+    this.currentIndex++;
+  }
   continue() {
     if (!this.isValid) return;
     if (this.isSinonimoSelected) return;
     this.isSinonimoSelected = true;
     const observables = [];
     const cantidades = [];
     for (const s of this.sinonimos) {
       for (const articulo of s.productos) {
         if (articulo.cantidad === 0) continue;
         cantidades.push(articulo.cantidad);
         observables.push(this.articuloService.getById(articulo.id));
       }
     }
     forkJoin(observables)
       .subscribe((res: IArticulo[]) => {
         res.forEach((articulo, i) => {
           articulo.cantidad = cantidades[i];
         });
         this.modalRef.hide();
         this.onClose.next({
           articulos: res,
         });
       }, err => console.error(err));
   }
   sumarCantidadSinonimo(articulo: IArticulo, i: number) {
     if (this.sinonimos[i].cantidadRestante === 0) return;
     articulo.cantidad++;
     this.sinonimos[i].cantidadRestante--;
   }
   restarCantidadSinonimo(articulo: IArticulo, i: number) {
     if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return;
     if (articulo.cantidad === 0) return;
     articulo.cantidad--;
     this.sinonimos[i].cantidadRestante++;
   }
   scrollTo(index: number) {
     const el = document.getElementById(index.toString());
     el.scrollIntoView({ behavior: 'smooth' });
   }
   close() {
     this.modalRef.hide();
     this.onClose.next();
   }
 }