Marcelo Puebla / autoservicio-axion

Commit 6065f9ca0308b6827d0bf71b2ac47177677b68e4

Authored by Marcelo Puebla 2020-02-06 15:11:18 -0300

Exists in develop

Change

seleccion de sinonimo

Showing 6 changed files with 92 additions and 23 deletions Show diff stats

src/app/interfaces/ISinonimo.ts

Diff comments View file @ 6065f9c

 import { IArticulo } from './IArticulo';
 export interface ISinonimo {
   ID_SIN: number;
   descripcion: string;
   productos: IArticulo[];
   productoPadre?: number;
   cantidad?: number;
+  cantidadRestante?: number;
   selected?: boolean;
 }

src/app/modules/seleccion-articulos/seleccion-articulos.component.ts

Diff comments View file @ 6065f9c

 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 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 { 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';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 import * as _ from 'lodash';
 import { ANIMATIONS } from 'src/app/utils/animations';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss'],
   animations: [ANIMATIONS.EnterLeaveY]
 })
 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   searchTerm = '';
   ordenandoByVendidos = true;
   modalRef: BsModalRef;
   total = 0;
   @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
   constructor(
     public articuloService: ArticuloService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() { }
   ngAfterViewInit(): void {
     this.filtroCategorias.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
       this.modalService.hide(i);
     }
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.filtroCategorias.queMostrar === 'ordenar') {
           this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
     this.loading = false;
   }
   filterItems() {
     if (this.filtroCategorias.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
           this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
   getSinonimos(articulo: IArticulo) {
     this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
       .subscribe((res: any[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
-          Object.keys(gruposArticulos).forEach(key => {
+          Object.keys(gruposArticulos).forEach((key, i) => {
             sinonimos.push({ productos: gruposArticulos[key] });
+            sinonimos[i].cantidad = articulo.productos[i].cantidad;
+            sinonimos[i].cantidadRestante = articulo.productos[i].cantidad;
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
     if (this.modalRef) return;
     this.articuloService.setArticulosSinImagen([articulo]);
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe(() => this.modalRef = null);
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     if (this.modalRef) return;
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe((res: any) => {
         this.modalRef = null;
         if (!res) return;
         for (const a of articulo.productos) {
           for (const aRes of res.articulos) {
             if (a.idSinonimo === aRes.ID_SIN) {
               this.articuloService.changeArticulo(a, aRes);
             }
           }
         }
         this.articuloService.setArticulo(articulo);
       });
     this.mediaPantalla();
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
   increaseShow() {
     this.showQuantity += 100;
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
         .cat-box,.img-categoria, .modal-content`)
         .addClass('media-pantalla')
         .addBack('media-pantalla');
     }
   }
 }

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

Diff comments View file @ 6065f9c

 <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-7 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
+    <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
-    <div class="col-5 pt-4 pr-0 text-right">
+    <!-- <div class="col-5 pt-4 pr-0 text-right">
       <p *ngFor="let s of sinonimos; let i = index">
         <span
           class="btn-effect"
           (click)="scrollTo(i)">
           Ir a opción {{i+1}}
           <i class="far fa-hand-point-left"></i>
         </span>
       </p>
-    </div>
+    </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 class="row mx-0 mb-2"  *ngFor="let articulo of sinonimos[currentIndex].productos">
-      <div [id]="i"></div>
+      <div class="col-7 p-0 my-auto h6 text-right">
-      <hr [hidden]="i === 0" class="bg-white">
+        <p class="m-0 font-weight-normal">
-      <div *ngFor="let articulo of s.productos">
+          {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
-        <div class="custom-control custom-checkbox">
+        </p>
-          <input
+      </div>
-            type="checkbox"
+      <div class="col-5 pr-0">
-            class="custom-control-input"
+        <div class="row mx-0 justify-content-between bg-white badge-pill">
-            [(ngModel)]="articulo.seleccionado"
+          <!-- BOTON MENOS -->
-            (click)="selectSinonimo(i, articulo)"
+          <div class="col-auto px-0 my-auto">
-            [id]="articulo.id">
+            <img
-          <label
+              draggable="false"
-            class="custom-control-label"
+              ondragstart="return false;"
-            [for]="articulo.id">
+              (contextmenu)="false"
-            {{articulo.DET_LAR.toUpperCase()}}
+              class="d-block ml-auto py-2 icon-15 btn-effect"
-          </label>
+              src="assets/img/menos.svg"
+              (click)="restarCantidadSinonimo(articulo, currentIndex)">
+          </div>
+          <!-- CANTIDAD -->
+          <div class="col px-0 my-auto text-primary text-center">
+            <p><small>{{articulo.cantidad}}</small></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-15 btn-effect"
+              src="assets/img/mas.svg"
+              (click)="sumarCantidadSinonimo(articulo, currentIndex)">
+          </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"
+      (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
+      *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
+      (click)="currentIndex = currentIndex+1">
+      SIGUIENTE
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30"
+        src="assets/img/ir-color.svg">
+    </div>
+    <div
       [ngClass]="validate()"
-      class="d-inline-block py-1 bg-white badge-pill text-primary"
+      *ngIf="currentIndex == sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
       (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.scss

Diff comments View file @ 6065f9c

1	.lista-sinonimos {	1	.lista-sinonimos {
2	min-height: auto;	2	min-height: 35vh;
3	max-height: 35vh;	3	max-height: 35vh;
4	}	4	}
5		5

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

Diff comments View file @ 6065f9c

 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[] = [];
   articulo: IArticulo;
   isSinonimoSelected = false;
+  currentIndex = 0;
   constructor(
     private modalRef: BsModalRef,
     private articuloService: ArticuloService,
   ) {
     this.onClose = new Subject();
     this.articulosSelected.length = this.sinonimos.length;
   }
-  ngOnInit() { }
+  ngOnInit() {
+    for (const s of this.sinonimos) {
+      for (const a of s.productos) {
+        a.cantidad = 0;
+      }
+    }
+  }
   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;
     if (this.isSinonimoSelected) return;
     this.isSinonimoSelected = true;
     const ID_SINS = [];
     const observables = [];
     for (const articulo of this.articulosSelected) {
       ID_SINS.push(articulo.ID_SIN);
       observables.push(this.articuloService.getById(articulo.id));
     }
     forkJoin(observables)
       .subscribe((res: IArticulo[]) => {
         res.forEach((articulo, i) => {
           articulo.ID_SIN = ID_SINS[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();
   }
 }

src/styles.scss

Diff comments View file @ 6065f9c

 @import "scss/styles-bootstrap.scss";
 @import "scss/typography.scss";
 @import "scss/height-width.scss";
 @import "scss/animations.scss";
 @import "scss/icons.scss";
 @import "scss/scroll.scss";
 @import "node_modules/bootstrap/scss/_variables.scss";
 @font-face {
   font-family: "Gotham";
   font-style: normal;
   font-weight: normal;
   src: url("assets/fonts/gotham-medium.woff") format("woff");
 }
 html,
 body {
   max-height: 100vh;
   height: 100%;
   font-family: "Gotham";
   overflow: hidden;
   user-select: none;
 }
 body.media-pantalla {
   height: calc(50%) !important;
   position: absolute;
   bottom: 0;
   width: 100%;
   background-color: #3d3d3d;
 }
 .btn-effect {
   transition: all 0.3s !important;
   &:hover {
     cursor: pointer !important;
     opacity: 0.7 !important;
   }
   &:active {
     transform: scale(1.02) !important;
   }
 }
 .cursor-pointer {
   cursor: pointer;
 }
 p {
   margin: 0 !important;
 }
 .img-in-top {
   position: absolute;
   top: -35px;
   left: 50%;
   height: 70px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .right-0 {
   right: 0;
 }
 .top-0 {
   top: 0;
 }
 .left-0 {
   left: 0;
 }
 .rotate-45 {
   transform: rotate(45deg);
 }
 .rotate-90 {
   transform: rotate(90deg);
 }
 .rotate-90-neg {
   transform: rotate(-90deg);
 }
 .rotate-180-neg {
   transform: rotate(-180deg);
 }
 .disabled {
   opacity: 0.5;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
 .modal-content {
   background: transparent !important;
 }
 .z-index {
   z-index: 1000;
 }
+.flip {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}