LP1849370 Mark items as damaged - changing fee usability issues

The prop that conditionally renders the fee interface is bound to the fee input
so it removes itself from the DOM when cleared. The patch uses a separate prop.

The fee input's by the edge so you may mistakenly close the modal if you try to
click & drag to highlight the fee. The patch sets the prop backdrop to static.

A $0 item price will cause the modal to keep reloading on submit. If you set a
$0 fee manually without clicking No Charge it charges the full item price. The
patch sets the apply_fines param for the Perl API dynamically on submission.

To test:
1. Make sure the OU setting "Charge item price when marked damaged" is true
2. Check out an item with a price to a user
3. Mark it damaged (from Item Status or Checkin screen)
4. Note if you clear the fee input it removes itself, if you drag the mouse off
the modal & release it closes, & if you charge $0 without using "No Charge" it
charges the user the full item price
5. Apply patch and repeat steps 1-3
6. Note the input stays when cleared, the modal doesn't close if you release
the mouse on the backdrop, & charging $0 doesn't charge the user

Signed-off-by: Dan Briem <dbriem@wlsmail.org>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Chris Sharp <csharp@georgialibraries.org>

diff --git a/Open-ILS/src/templates/staff/circ/share/t_mark_damaged.tt2 b/Open-ILS/src/templates/staff/circ/share/t_mark_damaged.tt2
index 467fa13..52d1c8a 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/share/t_mark_damaged.tt2
+++ b/Open-ILS/src/templates/staff/circ/share/t_mark_damaged.tt2
@@ -9,45 +9,45 @@
   <div class="pad-vert row">
     <div class="col-md-12">
       [% l("Item [_1] will be marked damaged. ", "{{barcode}}") %]
-      <span ng-if="circ && billArgs.charge != null">[% l("Was returned ") %]
+      <span ng-if="showBill">[% l("Was returned ") %]
         <span ng-if="circ_checkin_time">[% l("on [_1] ","{{circ_checkin_time | date:'MM/dd/yy H:mm a'}}") %]</span>
       [% l("for [_1] : [_2]. ",
       "{{circ_patron_name}}", "{{circ.usr().usrname()}}") %]
       [% l("Confirmation required to charge this patron [_1] for the damage.", "{{billArgs.charge | currency}}") %]</span>
     </div>
   </div>
-  <div class="pad-vert row" ng-if="circ && billArgs.charge != null">
+  <div class="pad-vert row" ng-if="showBill">
     <div class="col-md-3">
       <label>[% l("Fee") %]
-      <input type="number" min="0" step="any" class="form-control" ng-disabled="applyFine == 'noapply'"
+      <input type="number" min="0" step="any" class="form-control" ng-disabled="mode == 'waive'"
           focus-me='focus' required ng-model="billArgs.charge"></label>
     </div>
     <div class="col-md-6">
       <label>[% l("Type") %]
       <select class="form-control" ng-model="billArgs.type">
         <option ng-repeat="type in billingTypes | orderBy:'name()'" value="{{type.id()}}" 
-          ng-disabled="applyFine == 'noapply'">
+          ng-disabled="mode == 'waive'">
           {{type.name()}}
         </option>
       </select>
       </label>
     </div>
   </div>
-  <div class="pad-vert row" ng-if="circ && billArgs.charge != null">
+  <div class="pad-vert row" ng-if="showBill">
     <div class="col-md-6">
       <label>[% l("Note") %]
-      <textarea rows="3" class="form-control" placeholder="[% l('Note...') %]"  ng-disabled="applyFine == 'noapply'"
+      <textarea rows="3" class="form-control" placeholder="[% l('Note...') %]"  ng-disabled="mode == 'waive'"
         ng-model="billArgs.note"></textarea></label>
     </div>
   </div>
 </div>
 <div class="modal-footer">
-  <div class="btn-group pull-left" ng-if="circ && billArgs.charge != null">
+  <div class="btn-group pull-left" ng-if="showBill">
     <label class="btn btn-primary" ng-model="mode" btn-radio="'charge'"
       ng-class="{active: mode == 'charge'}" ng-click="btnChargeFees()">[% l('Charge Fees') %]</label>
     <label class="btn btn-primary" ng-model="mode" btn-radio="'waive'"
       ng-class="{active: mode == 'waive'}" ng-click="btnWaiveFees()">[% l('No Charge') %]</label>
   </div>
-  <button class="btn btn-primary" ng-disabled="applyFine == 'apply' && circ && (billArgs.charge == null || !billArgs.type)" ng-click="ok()">[% l('Submit') %]</button>
-  <button class="btn btn-warning" ng-if="!billArgs.charge && applyFine != 'noapply'" ng-click="cancel()">[% l('Cancel') %]</button>
+  <button class="btn btn-primary" ng-disabled="showBill && (billArgs.charge == null || billArgs.charge && !billArgs.type)" ng-click="ok()">[% l('Submit') %]</button>
+  <button class="btn btn-warning" ng-click="cancel()">[% l('Cancel') %]</button>
 </div>

diff --git a/Open-ILS/web/js/ui/default/staff/circ/services/circ.js b/Open-ILS/web/js/ui/default/staff/circ/services/circ.js
index ecbf03a..64a68e1 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/circ/services/circ.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/services/circ.js
@@ -1313,18 +1313,17 @@ function($uibModal , $q , egCore , egAlertDialog , egConfirmDialog,  egAddCopyAl
     service.mark_damaged = function(params) {
         if (!params) return $q.when();
         return $uibModal.open({
+            backdrop: 'static',
             templateUrl: './circ/share/t_mark_damaged',
             controller:
                 ['$scope', '$uibModalInstance', 'egCore', 'egBilling', 'egItem',
                 function($scope, $uibModalInstance, egCore, egBilling, egItem) {
                     var doRefresh = params.refresh;
                     
+                    $scope.showBill = params.charge != null && params.circ;
                     $scope.billArgs = {charge: params.charge};
                     $scope.mode = 'charge';
                     $scope.barcode = params.barcode;
-                    if (params.charge && params.charge > 0) {
-                        $scope.applyFine = "apply";
-                    }
                     if (params.circ) {
                         $scope.circ = params.circ;
                         $scope.circ_checkin_time = params.circ.checkin_time();
@@ -1339,12 +1338,10 @@ function($uibModal , $q , egCore , egAlertDialog , egConfirmDialog,  egAddCopyAl
                     $scope.btnChargeFees = function() {
                         $scope.mode = 'charge';
                         $scope.billArgs.charge = params.charge;
-                        $scope.applyFine = "apply";
                     }
                     $scope.btnWaiveFees = function() {
                         $scope.mode = 'waive';
                         $scope.billArgs.charge = 0;
-                        $scope.applyFine = "noapply";
                     }
 
                     $scope.cancel = function ($event) { 
@@ -1355,15 +1352,19 @@ function($uibModal , $q , egCore , egAlertDialog , egConfirmDialog,  egAddCopyAl
                     }
 
                     var handle_mark_item_damaged = function() {
+                        var applyFines;
+                        if ($scope.showBill)
+                            applyFines = $scope.billArgs.charge ? 'apply' : 'noapply';
+
                         egCore.net.request(
                             'open-ils.circ',
                             'open-ils.circ.mark_item_damaged',
                             egCore.auth.token(), params.id, {
-                                apply_fines: $scope.applyFine,
+                                apply_fines: applyFines,
                                 override_amount: $scope.billArgs.charge,
                                 override_btype: $scope.billArgs.type,
                                 override_note: $scope.billArgs.note,
-                                handle_checkin: !$scope.applyFine
+                                handle_checkin: !applyFines
                         }).then(function(resp) {
                             if (evt = egCore.evt.parse(resp)) {
                                 doRefresh = false;