Luis Suarez / autoservicio-axion

Browse Code »

Commit 90e72dbbc296030030118d8bc4feda413c25c0a6

Authored by Benjamin Rodriguez 2020-01-30 14:31:21 -0300

1 parent 18045edafd

Exists in develop

agrego spinner a modal promociones

Showing 2 changed files with 12 additions and 7 deletions Show diff stats

src/app/shared/promocion/promocion.component.html

Diff comments View file @ 90e72db

-<!-- <div class="d-flex justify-content-center"
-     *ngIf="loading">
-  <div class="spinner-border text-primary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-</div> -->
 <div class="bg-primary rounded">
   <div class="modal-header" *ngIf="articulosPromo.length">
     <img
       draggable="false"
       ondragstart="return false;"
       (contextmenu)="false"
       (click)="selectPromo(articulosPromo[0])"
       class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
       src="assets/img/icono-cancelar-blanco.svg">
     <div class="row w-100 no-gutters justify-content-between">
       <div class="col align-self-center">
         <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
       </div>
       <div class="col-auto align-self-center mt-4 pl-2">
         <div
           class="row mx-0 justify-content-between bg-white badge-pill btn-effect"
           (click)="selectPromo(articulosPromo[0])">
           <div class="col-auto align-self-center text-primary">
             <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
           </div>
           <div class="col-auto px-0">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="d-block ml-auto my-1 icon-20"
               src="assets/img/ir-color.svg">
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class="modal-body" *ngIf="articulosPromo.length">
+  <div class="modal-body">
     <div class="row no-gutters w-100">
       <div class="col-9 col-9 align-self-center">
         <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
         <p class="h1 text-white">en un combo?</p>
       </div>
       <div class="col-3">
         <img
           draggable="false"
           ondragstart="return false;"
           (contextmenu)="false"
           src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
           onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
           class="card-img-top img-fluid rounded-circle">
       </div>
     </div>
     <div
+      class="d-flex justify-content-center mt-2"
+      *ngIf="loading">
+      <div class="spinner-border text-white" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+    <div
+      *ngIf="articulosPromo.length"
       class="row mt-3 no-gutters lista-promociones scroll-y-visible"
       (scroll)="scrollEvent($event)">
       <div class="col-12">
         <div *ngFor="let promo of promociones; let i = index">
           <div
             [ngClass]="{ 'mt-2': i !== 0 }"
             class="btn-effect 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 ml-auto my-auto pr-2">
                 <span>{{promo.PreVen | currency}}</span>
               </p>
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-block py-1 icon-30"
                 src="assets/img/ir-color.svg">
             </div>
           </div>

src/app/shared/promocion/promocion.component.ts

Diff comments View file @ 90e72db

 import { Component, OnInit, HostListener } from '@angular/core';
 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';
 import * as _ from 'lodash';
 @Component({
   selector: 'app-promocion',
   templateUrl: './promocion.component.html',
   styleUrls: ['./promocion.component.scss']
 })
 export class PromocionComponent implements OnInit {
   articulosPromo: IArticulo[] = [];
   promociones: IArticulo[] = [];
   onClose: Subject<any>;
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
+  loading = false;
   constructor(
     public modalPromocion: BsModalRef,
     private modalService: BsModalService,
     private articuloService: ArticuloService,
     private promocionService: PromocionService,
     private sinonimoService: SinonimoService,
     private inactiveScreen: InactiveScreenService,
   ) {
     this.onClose = new Subject();
   }
   ngOnInit() {
     this.getPromociones();
+    this.loading = true;
   }
   selectPromo(promo: IArticulo) {
     this.sinonimoService.getSinonimos(promo.CodSec, promo.CodArt)
       .subscribe((res: ISinonimo[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
           Object.keys(gruposArticulos).forEach(key => {
             sinonimos.push({ productos: gruposArticulos[key] });
           });
           res = sinonimos;
           this.openModalSinonimos(res, promo);
         } else {
           promo.cantidad = 1;
           this.articuloService.setArticulo(promo);
           this.modalPromocion.hide();
         }
       }, err => console.error(err));
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     const modalSinonimo = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
       class: 'modal-dialog-centered'
     });
     modalSinonimo.content.onClose
       .subscribe((res: any) => {
         for (const a of articulo.productos) {
           for (const aRes of res.articulos) {
             if (a.idSinonimo === aRes.ID_SIN) {
               a.CODA = aRes.CodArt;
               a.CodArt = aRes.CodArt;
               a.SECA = aRes.CodSec;
               aRes.CodSec = aRes.CodSec;
               a.PreVen = aRes.PreVen;
               a.id = aRes.id;
               a.DET_LAR = aRes.DET_LAR;
               a.DetArt = aRes.DetArt;
             }
           }
         }
         this.articuloService.setArticulo(articulo);
         this.modalPromocion.hide();
       });
   }
   getPromociones() {
     const sector = this.articulosPromo[0].CodSec;
     const codigo = this.articulosPromo[0].CodArt;
     this.promocionService.getPromociones(sector, codigo)
       .subscribe((res: IArticulo[]) => {
         this.promociones = res;
+        this.loading = false;
       }, error => { console.error(error); });
   }
   @HostListener('document:click', ['$event'])
   eventListener(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $('.modal-content').addClass('media-pantalla');
     }
   }
 }