Marcelo Puebla / autoservicio-axion

Browse Code »

Commit bc753a27efb30d2250f653c8fbec7baa3c85b2ef

Authored by Benjamin Rodriguez 2020-01-30 15:54:58 -0300

1 parent 540f91d409

Exists in develop

agrego spinner en seleccion-articulos

Showing 3 changed files with 15 additions and 2 deletions Show diff stats

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

Diff comments View file @ bc753a2

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 align-items-end"
        [ngClass]="boxCarrito.classList.contains('media-pantalla')
                   ? 'h-68' : 'h-80'">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <app-filtro-categorias
             class="col-5 col-sm-3 col-xl-2 h-100"
             #filtroCategorias
             (getProductos)="getProductos()"
             (setProductos)="setProductos()"
             (filterItems)="filterItems()">
           </app-filtro-categorias>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
+            <!-- SPINNER -->
+            <div
+              class="d-flex justify-content-center"
+              *ngIf="loading">
+              <div class="spinner-border text-primary mt-5" role="status">
+                <span class="sr-only">Loading...</span>
+              </div>
+            </div>
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"
                 class="col px-2 my-1 my-md-3 h-auto">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
                   (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/imagen-no-encontrada.jpg'"
                     class="card-img-top w-100 h-auto h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p class="col-12 px-1 h6 h-auto text-primary text-center min-h-60">
                      {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
                     </p>
                     <div class="col-12 px-1 align-self-end h-auto">
                       <div class="row mx-0 justify-content-between bg-primary badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;"
                 @EnterLeaveY>
                 <img
                   class="btn-effect icon-20 mr-2 position-absolute right-0"
                   src="assets/img/icono-cancelar-color.svg"
                   (click)="deleteArticulo(i)">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="d-block img-fluid p-2 mx-auto rounded w-100 h-auto"
                   src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                   onerror="this.src='assets/img/imagen-no-encontrada.jpg'">
                 <p class="d-block mt-auto text-center text-primary text-truncate">
                   <small>{{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}</small>
                 </p>
                 <app-articulo-cantidad [articulo]="articulo"></app-articulo-cantidad>
               </div>
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length"
                class="col-auto btn-effect h-20 align-self-center d-contents">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto font-weight-bold align-self-center text-primary py-2 h3">TOTAL</div>
           <div class="col-auto align-self-center bg-primary badge-pill">
             <p class="text-center font-weight-bold text-white py-2 h3 px-2">{{articuloService.subTotal | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
         class="col-auto px-0 h-20"
         *ngIf="articuloService.carrito.length"
         [ngClass]="boxCarrito.classList.contains('media-pantalla') ? 'ml-auto' : 'mt-3'">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
             <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

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

Diff comments View file @ bc753a2

 #content.media-pantalla,
 #cat-content.media-pantalla,
 #boxCarrito.media-pantalla {
   max-height: 60% !important;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
 }
 .d-contents {
   display: contents !important;
 }
+.spinner-border {
+  width: 10rem;
+  height: 10rem;
+}

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

Diff comments View file @ bc753a2

 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 {
-  showSpinner = true;
+  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) => {
-        this.showSpinner = false;
         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 => {
             sinonimos.push({ productos: gruposArticulos[key] });
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
       class: 'modal-dialog-centered'
     });
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
       class: 'modal-dialog-centered'
     });
     this.modalRef.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.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');
     }
   }
 }