Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 7e8c4a1298593178863d8648cd7457a9f04f677f

Authored by Luis Suarez
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
... ... @@ -29,6 +29,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
29 29 allActive = true;
30 30 modalRef: BsModalRef;
31 31 total = 0;
  32 + modalClass = '';
32 33  
33 34 constructor(
34 35 public articuloService: ArticuloService,
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ 7e8c4a1
1   -<div class="modal-header bg-primary rounded-top pt-4 px-2">
2   - <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3   - <div class="col-8">
4   - <p class="h3 text-white">{{articulosPromo[0].DetArt | uppercase}}</p>
5   - </div>
6   - <div class="col-4 align-self-center">
7   - <div
8   - class="row mx-0 justify-content-between bg-white badge-pill"
9   - (click)="elegirPromo(articulosPromo[0])">
10   - <div class="col px-0 align-self-center text-primary">
11   - <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12   - </div>
13   - <div class="col-3 px-0">
14   - <img
15   - draggable="false"
16   - ondragstart="return false;"
17   - (contextmenu)="false"
18   - class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19   - src="assets/img/ir-color.svg">
20   - </div>
21   - </div>
22   - </div>
  1 +<div class="d-flex justify-content-center"
  2 + *ngIf="!articulosPromo.length" id="loading">
  3 + <div class="spinner-border text-primary" role="status">
  4 + <span class="sr-only">Loading...</span>
23 5 </div>
24 6 </div>
25   -<div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26   - <div class="row mx-0 w-100">
27   - <div class="col-9">
28   - <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29   - <h1 class="text-white mb-4">en un combo?</h1>
30   - </div>
31   - <div class="col-3">
32   - <img
33   - draggable="false"
34   - ondragstart="return false;"
35   - (contextmenu)="false"
36   - src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37   - onerror="this.src='assets/img/image-not-found.jpg'"
38   - class="card-img-top img-fluid rounded-circle">
39   - </div>
40   - </div>
41   - <div
42   - class="row mx-0 lista-promociones scroll-y-visible"
43   - (scroll)="scrollEvent($event)">
44   - <div class="col-12">
45   - <div *ngFor="let promo of promociones">
46   - <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
47   - <div class="d-flex">
48   - <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49   - <p class="font-weight-bold my-auto pr-2">
50   - <span>{{promo.PreVen | currency}}</span>
51   - </p>
  7 +<div *ngIf="articulosPromo.length">
  8 + <div class="modal-header bg-primary rounded-top pt-4 px-2">
  9 + <div class="row mx-0 w-100 justify-content-between">
  10 + <div class="col-8">
  11 + <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
  12 + </div>
  13 + <div class="col-4 align-self-center">
  14 + <div
  15 + class="row mx-0 justify-content-between bg-white badge-pill"
  16 + (click)="elegirPromo(articulosPromo[0])">
  17 + <div class="col px-0 align-self-center text-primary">
  18 + <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
  19 + </div>
  20 + <div class="col-3 px-0">
52 21 <img
53 22 draggable="false"
54 23 ondragstart="return false;"
55 24 (contextmenu)="false"
56   - class="d-block icon-30 py-1"
  25 + class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
57 26 src="assets/img/ir-color.svg">
58 27 </div>
59 28 </div>
60 29 </div>
61 30 </div>
62 31 </div>
63   -</div>
  32 + <div class="modal-body bg-primary rounded-bottom pb-3 px-2">
  33 + <div class="row mx-0 w-100">
  34 + <div class="col-9">
  35 + <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
  36 + <h1 class="text-white mb-4">en un combo?</h1>
  37 + </div>
  38 + <div class="col-3">
  39 + <img
  40 + draggable="false"
  41 + ondragstart="return false;"
  42 + (contextmenu)="false"
  43 + src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
  44 + onerror="this.src='assets/img/image-not-found.jpg'"
  45 + class="card-img-top img-fluid rounded-circle">
  46 + </div>
  47 + </div>
  48 + <div
  49 + class="row mx-0 lista-promociones scroll-y-visible"
  50 + (scroll)="scrollEvent($event)">
  51 + <div class="col-12">
  52 + <div *ngFor="let promo of promociones">
  53 + <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="elegirPromo(promo)">
  54 + <div class="d-flex">
  55 + <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
  56 + <p class="font-weight-bold my-auto pr-2">
  57 + <span>{{promo.PreVen | currency}}</span>
  58 + </p>
  59 + <img
  60 + draggable="false"
  61 + ondragstart="return false;"
  62 + (contextmenu)="false"
  63 + class="d-block icon-30 py-1"
  64 + src="assets/img/ir-color.svg">
  65 + </div>
  66 + </div>
  67 + </div>
  68 + </div>
  69 + </div>
  70 + </div>
  71 +</div>
64 72 \ No newline at end of file
src/app/shared/promocion/promocion.component.scss
Diff comments   View file @ 7e8c4a1
... ... @@ -2,3 +2,8 @@
2 2 min-height: auto;
3 3 max-height: 25vh;
4 4 }
  5 +
  6 +.spinner-border {
  7 + width: 5rem;
  8 + height: 5rem;
  9 +}
... ... @@ -85,3 +85,7 @@ body.media-pantalla {
85 85 margin-top: auto !important;
86 86 margin-bottom: 50px !important;
87 87 }
  88 +
  89 +.modal-content {
  90 + background: transparent !important;
  91 +}