LP#1841089 Apply button in Patron Bill History screen is in confusing location
authorDan Briem <dbriem@wlsmail.org>
Sat, 24 Aug 2019 18:44:01 +0000 (14:44 -0400)
committerGalen Charlton <gmc@equinoxinitiative.org>
Fri, 4 Oct 2019 14:44:21 +0000 (10:44 -0400)
It's possible to miss the apply button for the date range in bill history
because it's located before the datepickers. The interface also allows
invalid date ranges.

This removes the apply button and watches the start and finish dates in the
bill history and payment history controllers. If it's not first init and they
are valid date objects in a valid date range, the grid refreshes with the new
date range query. If start > finish they are set equal to each other to force
a valid range.

To test:

1. Apply patch
2. Bring up a patron with bills and payments (or add bills and payments)
3. Under the Bills tab click History
4. Change the date range and observe that the grid refreshes
5. Try to set the start date past the finish date and vice versa

Signed-off-by: Dan Briem <dbriem@wlsmail.org>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/templates/staff/circ/patron/t_bill_history.tt2
Open-ILS/web/js/ui/default/staff/circ/patron/bills.js

index d9c4543..77cd4f9 100644 (file)
         <label>[% l('Selected Paid:') %]</label>
         <span>{{totals.selected_paid() | currency}}</span>
       </div>
         <label>[% l('Selected Paid:') %]</label>
         <span>{{totals.selected_paid() | currency}}</span>
       </div>
-      <div class="col-md-1">
-        <span><button class="btn btn-default" 
-            ng-click="actions.apply_date_range()">[% l('Apply') %]</button></span>
-      </div>
       <div class="col-md-4 flex-row padded">
         <label>[% l('Start Date:') %]</label>
         <div><eg-date-input ng-model="dates.xact_start"></eg-date-input></div>
       <div class="col-md-4 flex-row padded">
         <label>[% l('Start Date:') %]</label>
         <div><eg-date-input ng-model="dates.xact_start"></eg-date-input></div>
index 308fb30..25a01d8 100644 (file)
@@ -1010,6 +1010,25 @@ function($scope,  $q , egCore , patronSvc , billSvc , egPromptDialog , $location
         setQuery : current_grid_query
     }
 
         setQuery : current_grid_query
     }
 
+    $scope.$watch('dates.xact_start', function(new_date, old_date) {
+        if (new_date !== old_date && new_date) {
+            if (new_date.getTime() > $scope.dates.xact_finish.getTime()) {
+                $scope.dates.xact_finish = new_date;
+            } else {
+                $scope.actions.apply_date_range();
+            }
+        }
+    });
+    $scope.$watch('dates.xact_finish', function(new_date, old_date) {
+        if (new_date !== old_date && new_date) {
+            if (new_date.getTime() < $scope.dates.xact_start.getTime()) {
+                $scope.dates.xact_start = new_date;
+            } else {
+                $scope.actions.apply_date_range();
+            }
+        }
+    });
+
     $scope.actions.apply_date_range = function() {
         // tells the grid to re-draw itself with the new query
         $scope.gridControls.setQuery(current_grid_query());
     $scope.actions.apply_date_range = function() {
         // tells the grid to re-draw itself with the new query
         $scope.gridControls.setQuery(current_grid_query());
@@ -1152,6 +1171,25 @@ function($scope,  $q , egCore , patronSvc , billSvc , $location) {
         setQuery : current_grid_query
     }
 
         setQuery : current_grid_query
     }
 
+    $scope.$watch('dates.xact_start', function(new_date, old_date) {
+        if (new_date !== old_date && new_date) {
+            if (new_date.getTime() > $scope.dates.xact_finish.getTime()) {
+                $scope.dates.xact_finish = new_date;
+            } else {
+                $scope.actions.apply_date_range();
+            }
+        }
+    });
+    $scope.$watch('dates.xact_finish', function(new_date, old_date) {
+        if (new_date !== old_date && new_date) {
+            if (new_date.getTime() < $scope.dates.xact_start.getTime()) {
+                $scope.dates.xact_start = new_date;
+            } else {
+                $scope.actions.apply_date_range();
+            }
+        }
+    });
+
     $scope.actions.apply_date_range = function() {
         // tells the grid to re-draw itself with the new query
         $scope.gridControls.setQuery(current_grid_query());
     $scope.actions.apply_date_range = function() {
         // tells the grid to re-draw itself with the new query
         $scope.gridControls.setQuery(current_grid_query());