From 7e8c4a1298593178863d8648cd7457a9f04f677f Mon Sep 17 00:00:00 2001
From: Luis Suarez <lsuarezh23@gmail.com>
Date: Fri, 24 Jan 2020 07:46:18 -0400
Subject: [PATCH] Spinner durante carga del modal Promociones

---
 .../seleccion-articulos.component.ts               |   1 +
 src/app/shared/promocion/promocion.component.html  | 110 +++++++++++----------
 src/app/shared/promocion/promocion.component.scss  |   5 +
 src/styles.scss                                    |   4 +
 4 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index b68620f..c682b88 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -29,6 +29,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   allActive = true;
   modalRef: BsModalRef;
   total = 0;
+  modalClass = '';
 
   constructor(
     public articuloService: ArticuloService,
diff --git a/src/app/shared/promocion/promocion.component.html b/src/app/shared/promocion/promocion.component.html
index 752d552..d257f98 100644
--- a/src/app/shared/promocion/promocion.component.html
+++ b/src/app/shared/promocion/promocion.component.html
@@ -1,63 +1,71 @@
-<div class="modal-header bg-primary rounded-top pt-4 px-2">
-  <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
-    <div class="col-8">
-      <p class="h3 text-white">{{articulosPromo[0].DetArt | uppercase}}</p>
-    </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 class="d-flex justify-content-center"
+     *ngIf="!articulosPromo.length" id="loading">
+  <div class="spinner-border text-primary" role="status">
+    <span class="sr-only">Loading...</span>
   </div>
 </div>
-<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
-  <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"
-        ondragstart="return false;"
-        (contextmenu)="false"
-        src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
-        onerror="this.src='assets/img/image-not-found.jpg'"
-        class="card-img-top img-fluid rounded-circle">
-    </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>
+<div *ngIf="articulosPromo.length">
+  <div class="modal-header bg-primary rounded-top pt-4 px-2">
+    <div class="row mx-0 w-100 justify-content-between">
+      <div class="col-8">
+        <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
+      </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 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"
+          ondragstart="return false;"
+          (contextmenu)="false"
+          src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
+          onerror="this.src='assets/img/image-not-found.jpg'"
+          class="card-img-top img-fluid rounded-circle">
+      </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"
+                src="assets/img/ir-color.svg">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/promocion/promocion.component.scss b/src/app/shared/promocion/promocion.component.scss
index 9851b75..0ad4d2e 100644
--- a/src/app/shared/promocion/promocion.component.scss
+++ b/src/app/shared/promocion/promocion.component.scss
@@ -2,3 +2,8 @@
   min-height: auto;
   max-height: 25vh;
 }
+
+.spinner-border {
+  width: 5rem;
+  height: 5rem;
+}
diff --git a/src/styles.scss b/src/styles.scss
index dfe1bac..26db7be 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -85,3 +85,7 @@ body.media-pantalla {
   margin-top: auto !important;
   margin-bottom: 50px !important;
 }
+
+.modal-content {
+  background: transparent !important;
+}
-- 
1.9.1