Marcelo Puebla / autoservicio-axion

Browse Code »

Commit 7e8c4a1298593178863d8648cd7457a9f04f677f

Authored by Luis Suarez 2020-01-24 08:46:18 -0300

1 parent 8f572393ef

Exists in develop

Spinner durante carga del modal Promociones

Showing 4 changed files with 69 additions and 51 deletions Show diff stats

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

Diff comments View file @ 7e8c4a1

 import { Component, OnInit, TemplateRef, OnDestroy, HostListener } 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 { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionService } from 'src/app/services/promocion/promocion.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss']
 })
 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   queMostrar = 'todos';
   categoriaActive = null;
   categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
+  modalClass = '';
   constructor(
     public articuloService: ArticuloService,
     private categoriaService: CategoriaService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() {
     this.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     if (this.modalRef) this.modalRef.hide();
   }
   getCategorias() {
     this.categoriaService.getAll()
       .subscribe((categorias: ICategoria[]) => {
         switch (this.queMostrar) {
           case 'todos':
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
           case 'promociones':
             this.categorias = categorias;
             this.categoriaActive = 19;
             break;
           case 'ordenar':
             this.categorias = categorias.filter((categoria: ICategoria) => {
               return categoria.ES_PEDIDO;
             });
             this.categoriaActive = 4;
             break;
           default:
             this.categorias = categorias;
             this.categoriaActive = 0;
             break;
         }
         !localStorage.getItem('articulos') ?
           this.getProductos() :
           this.setProductos();
       });
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.queMostrar === 'ordenar') {
           this.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();
   }
   filterItems() {
     if (this.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectCategoria(index: number, idCategoria?: number) {
     if (this.categoriaActive === idCategoria) return;
     this.categoriaActive = idCategoria;
     this.allActive = idCategoria === 0 ? true : false;
     this.categorias.forEach((categoria, i) => {
       categoria.selected = index === i ? true : false;
     });
     this.filterItems();
   }
   elegirArticulo(articulo: IArticulo) {
     if (!articulo.FPP) {
       this.getByID(articulo.id);
     } else {
       this.openModalPromos(articulo);
     }
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         res.cantidad = 1;
         this.articuloService.setArticulo(res);
       }, err => console.error(err));
   }
   openModalPromos(articulo: IArticulo) {
     this.modalRef = this.modalService.show(PromocionComponent,
       {
         initialState: {
           idArticulo: articulo.id
         },
         class: 'modal-promo modal-dialog-centered'
       });
   }
   deleteArticulo(index: number) {
     this.articuloService.carrito.splice(index, 1);
     this.articuloService.calcularTotal();
   }
   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,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
     }
   }
 }

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

Diff comments View file @ 7e8c4a1

-<div class="modal-header bg-primary rounded-top pt-4 px-2">
+<div class="d-flex justify-content-center"
-  <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
+     *ngIf="!articulosPromo.length" id="loading">
-    <div class="col-8">
+  <div class="spinner-border text-primary" role="status">
-      <p class="h3 text-white">{{articulosPromo[0].DetArt | uppercase}}</p>
+    <span class="sr-only">Loading...</span>
-    </div>
-    <div class="col-4 align-self-center">
-      <div
-        class="row mx-0 justify-content-between bg-white badge-pill"
-        (click)="elegirPromo(articulosPromo[0])">
-        <div class="col px-0 align-self-center text-primary">
-          <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
-        </div>
-        <div class="col-3 px-0">
-          <img
-            draggable="false"
-            ondragstart="return false;"
-            (contextmenu)="false"
-            class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
-            src="assets/img/ir-color.svg">
-        </div>
-      </div>
-    </div>
   </div>
 </div>
-<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
+<div *ngIf="articulosPromo.length">
-  <div class="row mx-0 w-100">
+  <div class="modal-header bg-primary rounded-top pt-4 px-2">
-    <div class="col-9">
+    <div class="row mx-0 w-100 justify-content-between">
-      <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
+      <div class="col-8">
-      <h1 class="text-white mb-4">en un combo?</h1>
+        <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
-    </div>
+      </div>
-    <div class="col-3">
+      <div class="col-4 align-self-center">
-      <img
+        <div
-        draggable="false"
+          class="row mx-0 justify-content-between bg-white badge-pill"
-        ondragstart="return false;"
+          (click)="elegirPromo(articulosPromo[0])">
-        (contextmenu)="false"
+          <div class="col px-0 align-self-center text-primary">
-        src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
+            <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
-        onerror="this.src='assets/img/image-not-found.jpg'"
+          </div>
-        class="card-img-top img-fluid rounded-circle">
+          <div class="col-3 px-0">
-    </div>
-  </div>
-  <div
-    class="row mx-0 lista-promociones scroll-y-visible"
-    (scroll)="scrollEvent($event)">
-    <div class="col-12">
-      <div *ngFor="let promo of promociones">
-        <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
-          <div class="d-flex">
-            <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
-            <p class="font-weight-bold my-auto pr-2">
-              <span>{{promo.PreVen | currency}}</span>
-            </p>
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
-              class="d-block icon-30 py-1"
+              class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
               src="assets/img/ir-color.svg">
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+  <div class="modal-body bg-primary rounded-bottom pb-3 px-2">
+    <div class="row mx-0 w-100">
+      <div class="col-9">
+        <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
+        <h1 class="text-white mb-4">en un combo?</h1>
+      </div>
+      <div class="col-3">
+        <img
+          draggable="false"

src/app/shared/promocion/promocion.component.scss

Diff comments View file @ 7e8c4a1

 .lista-promociones {
   min-height: auto;
   max-height: 25vh;
 }
+.spinner-border {
+  width: 5rem;
+  height: 5rem;
+}

src/styles.scss

Diff comments View file @ 7e8c4a1

 @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;
 }
 .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;
 }
 .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);
 }
 body.media-pantalla {
   height: 50% !important;
   position: absolute;
   bottom: 0;
   width: 100%;
 }
 .modal-content.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
+.modal-content {
+  background: transparent !important;
+}