lpxxx Grid data loading progress
authorBill Erickson <berickxx@gmail.com>
Mon, 18 Mar 2019 19:05:41 +0000 (15:05 -0400)
committerBill Erickson <berickxx@gmail.com>
Mon, 18 Mar 2019 19:05:41 +0000 (15:05 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/grid/grid.component.html
Open-ILS/src/eg2/src/app/share/grid/grid.ts

index a98e17a..55e556b 100644 (file)
   <eg-grid-print #gridPrinter [gridContext]="context">
   </eg-grid-print>
 
-  <!-- move me too -->
-  <div class="row" *ngIf="dataSource.data.length == 0">
-    <div class="col-lg-12 text-center alert alert-light font-italic" i18n>
-      Nothing to Display
+  <ng-container *ngIf="dataSource.data.length == 0">
+    <div class="row">>
+      <ng-container *ngIf="dataSource.requestingData">
+        <div class="col-lg-6 offset-lg-3 text-center mt-3">
+         <eg-progress-inline></eg-progress-inline>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="!dataSource.requestingData">
+        <div class="col-lg-12 text-center alert alert-light font-italic" i18n>
+          Nothing to Display
+        </div>
+      </ng-container>
     </div>
-  </div>
+  </ng-container>
 
   <eg-grid-body [context]="context"></eg-grid-body>
 </div>
index d717c42..80c8518 100644 (file)
@@ -930,6 +930,7 @@ export class GridDataSource {
     data: any[];
     sort: any[];
     allRowsRetrieved: boolean;
+    requestingData: boolean;
     getRows: (pager: Pager, sort: any[]) => Observable<any>;
 
     constructor() {
@@ -965,16 +966,23 @@ export class GridDataSource {
             return Promise.resolve();
         }
 
+        // If we have to call out for data, set inFetch
+        this.requestingData = true;
+
         return new Promise((resolve, reject) => {
             let idx = pager.offset;
             return this.getRows(pager, this.sort).subscribe(
-                row => this.data[idx++] = row,
+                row => {
+                    this.data[idx++] = row;
+                    this.requestingData = false;
+                },
                 err => {
                     console.error(`grid getRows() error ${err}`);
                     reject(err);
                 },
                 ()  => {
                     this.checkAllRetrieved(pager, idx);
+                    this.requestingData = false;
                     resolve();
                 }
             );