From 40c52bd34e2ebdf1e3ca8c84f7f5cc4b668903b4 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Wed, 26 Feb 2020 14:49:31 -0500
Subject: [PATCH] eg-grid: disable filter controls while fetching data

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../share/grid/grid-filter-control.component.html  | 50 +++++++++++++++-------
 .../src/app/share/grid/grid-toolbar.component.html |  2 +-
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
index 53155db989..c6440cd1f8 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
@@ -3,7 +3,9 @@
     <div *ngSwitchCase="'link'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div style="padding-top: 2px;">
@@ -21,7 +23,9 @@
     <div *ngSwitchCase="'bool'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <div style="padding-top: 2px;">
@@ -42,7 +46,9 @@
     <div *ngSwitchCase="'text'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
@@ -69,13 +75,15 @@
           </div>
         </div>
         <input type="text" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" 
-          [disabled]="col.filterInputDisabled" i18n-placeholder placeholder="Enter value to filter by">
+          [disabled]="col.filterInputDisabled || context.dataSource.requestingData" i18n-placeholder placeholder="Enter value to filter by">
       </div>
     </div>
     <div *ngSwitchCase="'int'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
@@ -97,13 +105,15 @@
             </div>
           </div>
         </div>
-        <input type="number" min="0" step="1" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled">
+        <input type="number" min="0" step="1" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
       </div>
     </div>
     <div *ngSwitchCase="'id'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
@@ -125,13 +135,15 @@
             </div>
           </div>
         </div>
-        <input type="number" min="0" step="1" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled">
+        <input type="number" min="0" step="1" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
       </div>
     </div>
     <div *ngSwitchCase="'float'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
@@ -153,13 +165,15 @@
             </div>
           </div>
         </div>
-        <input type="number" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled">
+        <input type="number" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
       </div>
     </div>
     <div *ngSwitchCase="'money'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
@@ -181,14 +195,16 @@
             </div>
           </div>
         </div>
-        <input type="number" step="0.01" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled">
+        <input type="number" step="0.01" class="form-control" [(ngModel)]="col.filterValue" (keyup.enter)="applyFilter(col)" [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
       </div>
     </div>
     <div *ngSwitchCase="'timestamp'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-           <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
-          <div ngbDropdownMenu class="eg-grid-filter-menu">
+            <div ngbDropdownMenu class="eg-grid-filter-menu">
+            <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+              <span class="material-icons mat-icon-in-button">filter_list</span>
+            </button>
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
               <select id="eg-filter-op-select-{{col.name}}" class="form-control" [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
@@ -211,7 +227,7 @@
           </div>
         </div>
         <eg-date-select [initialYmd]="col.filterValue" (onChangeAsYmd)="applyDateFilter($event, col, dateendsel.currentAsYmd())" (onCleared)="clearDateFilter(col)"
-                        [disabled]="col.filterInputDisabled" #datesel></eg-date-select>
+                        [disabled]="col.filterInputDisabled || context.dataSource.requestingData" #datesel></eg-date-select>
         <div [hidden]="col.filterOperator !== 'between'" class="form-inline form-group">
           <label for="eg-filter-end-date-select-{{col.name}}" style="width: 3em;" i18n>and</label>
           <eg-date-select [hidden]="col.filterOperator !== 'between'" (onChangeAsYmd)="applyDateFilter(datesel.currentAsYmd(), col, $event)"
@@ -222,7 +238,9 @@
     <div *ngSwitchCase="'org_unit'">
       <div class="input-group">
         <div ngbDropdown class="d-inline-block" autoClose="outside" placement="bottom-left" [ngClass]="{'eg-grid-col-is-filtered' : col.isFiltered}">
-          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button"><span class="material-icons mat-icon-in-button">filter_list</span></button>
+          <button ngbDropdownToggle class="form-control btn btn-sm btn-outline-dark text-button" [disabled]="context.dataSource.requestingData">
+            <span class="material-icons mat-icon-in-button">filter_list</span>
+          </button>
           <div ngbDropdownMenu class="eg-grid-filter-menu">
             <div class="dropdown-item">
               <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
index 3b2237771b..eb701ce233 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -8,7 +8,7 @@
       <!-- special case for remove filters button -->
       <button *ngIf="gridContext.isFilterable"
         class="btn btn-outline-dark mr-1" (click)="gridContext.removeFilters()"
-        [disabled]="!gridContext.filtersSet()" i18n>
+        [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
         Remove Filters
       </button>
       <button *ngFor="let btn of gridContext.toolbarButtons"
-- 
2.11.0