JBAS-2141 Patron UI layout improvements

* Move patron address to the top of the UI
* Hide the patron address copy/paste textarea until needed (was taking
  up a lot of space)
* Hide list of penalties and instead display a styled exclamation next
  to the patron's name when alerts exist.
* Move Fines, etc. counts to the bottom of the patron summary.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/templates/staff/circ/patron/index.tt2 b/Open-ILS/src/templates/staff/circ/patron/index.tt2
index 5ebbe0e..53b225b 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/patron/index.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/index.tt2
@@ -97,10 +97,11 @@ angular.module('egCoreMod').run(['egStrings', function(s) {
         <div class="flex-row">
           <div class="flex-cell"
           ng-class="{'patron-summary-alert' : hasAlerts()}">
-            [% l('[_1], [_2] [_3]', 
+            [% l('[_1], [_2] [_3][_4]', 
                 '{{patron().family_name()}}',
                 '{{patron().first_given_name()}}',
-                '{{patron().second_given_name()}}') %]
+                '{{patron().second_given_name()}}',
+                '{{hasAlerts() ? " !" : ""}}') %]
                <span ng-if="patron().name_keywords()"> <a title="[% l('Name keywords: ') %]{{patron().name_keywords()}}" class="glyphicon glyphicon-tags"></a>
           </div>
 

diff --git a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
index 6b16b66..1676b7a 100644 (file)
--- a/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_summary.tt2
@@ -11,6 +11,8 @@
         %]
       </div>
     </div>
+
+    <!-- KCLS JBAS-2141
     <div class="row" 
       ng-class="{'patron-summary-divider' : !$index}"
       ng-repeat="penalty in alert_penalties()">
@@ -23,6 +25,34 @@
         {{penalty.set_date() | date:$root.egDateFormat}}
       </div>
     </div>
+    -->
+
+    <div class="row" ng-repeat="addr in patron().addresses()">
+      <div class="col-lg-12" style="padding: 7px;">
+        <h4 ng-class="{'patron-summary-alert': addr.valid() == 'f'}">
+          {{addr.address_type()}} 
+          (<a href class="patron-summary-act-link" 
+            ng-click="copy_address(addr)">[%- l('copy') -%]</a><a 
+            href class="patron-summary-act-link" 
+            ng-click="print_address(addr)">[%- l('/print') -%]</a>)
+        </h4>
+        <div>{{addr.street1()}} {{addr.street2()}}</div>
+        <div>{{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</div>
+        <textarea id="patron-address-copy-{{addr.id()}}" rows="2" 
+          style="display:none;visibility:hidden">[%- l(
+            '[_1] [_2] [_3]&#13;&#10;[_4] [_5]&#13;&#10;[_6], [_7] [_8]', 
+            '{{patron().first_given_name()}}',
+            '{{patron().second_given_name()}}',
+            '{{patron().family_name()}}',
+            '{{addr.street1()}}',
+            '{{addr.street2()}}',
+            '{{addr.city()}}',
+            '{{addr.state()}}',
+            '{{addr.post_code()}}') 
+          -%]</textarea>
+      </div>
+    </div>
+
     <div class="row patron-summary-divider">
       <div
         class="col-md-9 patron-summary-alert"
@@ -34,8 +64,7 @@
     <div ng-if="patron().photo_url()" class="row">
          <div class="col-md-8 patron_photo_wrap"><img class="img-responsive img-rounded" src="{{patron().photo_url()}}" alt=""></div>
     </div>
-    <div class="row" 
-      ng-class="{'patron-summary-divider' : alert_penalties().length || patron().alert_message()}">
+    <div class="row">
       <div class="col-md-5">[% l('Profile') %]</div>
       <div class="col-md-7">{{patron().profile().name()}}</div>
     </div>
@@ -83,6 +112,50 @@
       <div class="col-md-5">[% l('Expire Date') %]</div>
       <div class="col-md-7">{{patron().expire_date() | date:$root.egDateFormat}}</div>
     </div>
+
+    <div class="row patron-summary-divider">
+      <div class="col-md-5">[% l('Card') %]</div>
+      <div class="col-md-7">{{patron().card().barcode()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('Username') %]</div>
+      <div class="col-md-7">{{patron().usrname()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('Day Phone') %]</div>
+      <div class="col-md-7">{{patron().day_phone()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('Evening Phone') %]</div>
+      <div class="col-md-7">{{patron().evening_phone()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('Other Phone') %]</div>
+      <div class="col-md-7">{{patron().other_phone()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('ID1') %]&nbsp;<span ng-if="hasIdentTypeName" class="ident_type">({{patron().ident_type().name()}})</span></div>
+      <div class="col-md-7">{{patron().ident_value()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('ID2') %]</div>
+      <div class="col-md-7">{{patron().ident_value2()}}</div>
+    </div>
+    <div class="row">
+      <div class="col-md-5">[% l('Email') %]</div>
+         <!-- Bound href="mailto: patron().email()" to an anchor tag to allow 
+      the patrons email address to be clicked directly from the summary. -->
+      <div class="col-md-7"><a ng-href="mailto:{{patron().email()}}">{{patron().email()}}</a></div>
+    </div>
+    <div class="row" ng-repeat="map in summary_stat_cats()">
+      <div class="col-md-5">{{map.stat_cat().name()}}</div>
+      <div class="col-md-7">{{map.stat_cat_entry()}}</div>
+    </div>
+    <div class="row" ng-if="patron().name_keywords()">
+      <div class="col-md-5">[% l('Name Keywords') %]</div>
+      <div class="col-md-7">{{patron().name_keywords()}}</div>
+    </div>
+
     <div class="row patron-summary-divider" 
       ng-class="{'patron-summary-alert' : patron_stats().fines.balance_owed}">
       <div class="col-md-5">[% l('Fines Owed') %]</div>
@@ -132,76 +205,6 @@
         {{patron_stats().holds.ready}} / {{patron_stats().holds.total}}
       </div>
     </div>
-    <div class="row patron-summary-divider">
-      <div class="col-md-5">[% l('Card') %]</div>
-      <div class="col-md-7">{{patron().card().barcode()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('Username') %]</div>
-      <div class="col-md-7">{{patron().usrname()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('Day Phone') %]</div>
-      <div class="col-md-7">{{patron().day_phone()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('Evening Phone') %]</div>
-      <div class="col-md-7">{{patron().evening_phone()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('Other Phone') %]</div>
-      <div class="col-md-7">{{patron().other_phone()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('ID1') %]&nbsp;<span ng-if="hasIdentTypeName" class="ident_type">({{patron().ident_type().name()}})</span></div>
-      <div class="col-md-7">{{patron().ident_value()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('ID2') %]</div>
-      <div class="col-md-7">{{patron().ident_value2()}}</div>
-    </div>
-    <div class="row">
-      <div class="col-md-5">[% l('Email') %]</div>
-         <!-- Bound href="mailto: patron().email()" to an anchor tag to allow the patron's email address to be clicked directly from the summary. -->
-      <div class="col-md-7"><a ng-href="mailto:{{patron().email()}}">{{patron().email()}}</a></div>
-    </div>
-    <div class="row" ng-repeat="map in summary_stat_cats()">
-      <div class="col-md-5">{{map.stat_cat().name()}}</div>
-      <div class="col-md-7">{{map.stat_cat_entry()}}</div>
-    </div>
-    <div class="row" ng-if="patron().name_keywords()">
-      <div class="col-md-5">[% l('Name Keywords') %]</div>
-      <div class="col-md-7">{{patron().name_keywords()}}</div>
-    </div>
   </div>
 
-  <div class="row" ng-repeat="addr in patron().addresses()">
-    <div class="panel">
-      <div class="panel-body">
-        <fieldset>
-          <legend ng-class="{'patron-summary-alert': addr.valid() == 'f'}">
-            {{addr.address_type()}} 
-            (<a href class="patron-summary-act-link" 
-                ng-click="copy_address(addr)">[%- l('copy') -%]</a><a 
-                href class="patron-summary-act-link" 
-                ng-click="print_address(addr)">[%- l('/print') -%]</a>)
-          </legend>
-          <div>{{addr.street1()}} {{addr.street2()}}</div>
-          <div>{{addr.city()}}, {{addr.state()}} {{addr.post_code()}}</div>
-        </fieldset>
-        <textarea id="patron-address-copy-{{addr.id()}}" rows="2" 
-          style="visibility:hidden">[%- l(
-            '[_1] [_2] [_3]&#13;&#10;[_4] [_5]&#13;&#10;[_6], [_7] [_8]', 
-            '{{patron().first_given_name()}}',
-            '{{patron().second_given_name()}}',
-            '{{patron().family_name()}}',
-            '{{addr.street1()}}',
-            '{{addr.street2()}}',
-            '{{addr.city()}}',
-            '{{addr.state()}}',
-            '{{addr.post_code()}}') 
-          -%]</textarea>
-      </div>
-    </div>
-  </div>
 </div>

diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
index d007257..267d27a 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
@@ -347,6 +347,7 @@ function($scope,  $q , $location , $filter , egCore , egNet , egUser , egAlertDi
         // Using node.style instead of ng-show/ng-hide in hopes it 
         // will be quicker, so the user never sees the textarea.
         lNode.style.visibility = 'visible';
+        lNode.style.display = 'block';
         lNode.focus();
         lNode.select();
 
@@ -355,6 +356,7 @@ function($scope,  $q , $location , $filter , egCore , egNet , egUser , egAlertDi
         }
 
         lNode.style.visibility = 'hidden';
+        lNode.style.display = 'none';
     }
 
     $scope.toggle_expand_summary = function() {