From 729e70822b0fda077cc22c7b381e5203f1361b13 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berick@esilibrary.com>
Date: Wed, 11 Dec 2013 15:11:50 -0500
Subject: [PATCH] web log : patron search, use bootstrap grid/form for layout

Signed-off-by: Bill Erickson <berick@esilibrary.com>
---
 .../src/templates/staff/circ/patron/t_search.tt2   | 126 ++++++++++++++++-----
 .../staff/circ/patron/t_search_actions.tt2         |   2 +-
 Open-ILS/src/templates/staff/css/style.css.tt2     |   9 +-
 .../web/js/ui/default/staff/circ/patron/app.js     |   2 +
 4 files changed, 103 insertions(+), 36 deletions(-)

diff --git a/Open-ILS/src/templates/staff/circ/patron/t_search.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_search.tt2
index ff97a2f125..edd0e93ece 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_search.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_search.tt2
@@ -1,69 +1,137 @@
 
 <br/><br/> <!-- css -->
 
+<!-- TODO: inputs need sr-only labels
+   <label class="sr-only" for="input-id">label</label>
+-->
+
 <div class="row">
-  <div class="col-lg-10">
-    <form ng-submit="search(args)" id="patron-search-form" role="form" class="form-inline">
+  <div class="col-lg-11">
+    <form ng-submit="search(args)" id="patron-search-form" 
+        role="form" class="form-horizontal">
+
       <div class="form-group">
+        <div class="col-lg-2">
+          <input type="text" class="form-control" ng-model="args.card" 
+            placeholder="[% l('Barcode') %]" focus-me="focusMe"/><!--"vim-->
+        </div>
+
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.family_name" placeholder="[% l('Last Name') %]"/>
+        </div>
+
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.first_given_name" placeholder="[% l('First Name') %]"/>
+        </div>
 
-        <!-- TODO: inputs need sr-only labels
-           <label class="sr-only" for="input-id">label</label>
-        -->
-        <input type="text" class="form-control" ng-model="args.card" placeholder="[% l('Barcode') %]" focus-me="focusMe"/>
-        <input type="text" class="form-control" ng-model="args.family_name" placeholder="[% l('Last Name') %]"/>
-        <input type="text" class="form-control" ng-model="args.first_given_name" placeholder="[% l('First Name') %]"/>
-        <input type="submit" class="btn btn-default" value="[% l('Search') %]"/>
-        <input type="reset" class="btn btn-default" value="[% l('Clear Form') %]"/>
-
-        <button class="btn btn-default" ng-click="applyShowExtras($event, true)" 
-          title="[% l('Show More Fields') %]" ng-show="!showExtras">
-          <span class="glyphicon glyphicon-circle-arrow-down"></span></button>
-        <button class="btn btn-default" ng-click="applyShowExtras($event, false)" 
-          title="[% l('Show Fewer Fields') %]" ng-show="showExtras">
-          <span class="glyphicon glyphicon-circle-arrow-up"></span></button>
+        <div class="col-lg-2">
+          <input type="submit" class="btn btn-default" value="[% l('Search') %]"/>
+        </div>
+
+        <div class="col-lg-2">
+          <input type="reset" class="btn btn-default" ng-click="args={}" 
+            value="[% l('Clear Form') %]"/>
+        </div>
+
+        <div class="col-lg-2">
+          <button class="btn btn-default" ng-click="applyShowExtras($event, true)" 
+            title="[% l('Show More Fields') %]" ng-show="!showExtras">
+            <span class="glyphicon glyphicon-circle-arrow-down"></span>
+          </button>
+          <button class="btn btn-default" ng-click="applyShowExtras($event, false)" 
+            title="[% l('Show Fewer Fields') %]" ng-show="showExtras">
+            <span class="glyphicon glyphicon-circle-arrow-up"></span>
+          </button>
+        </div>
       </div>
+
       <div class="form-group" ng-show="showExtras">
-        <input type="text" class="form-control" ng-model="args.second_given_name" placeholder="[% l('Middle Name') %]"/>
-        <input type="text" class="form-control" ng-model="args.alias" placeholder="[% l('Alias') %]"/>
-        <input type="text" class="form-control" ng-model="args.usrname" placeholder="[% l('Username') %]"/>
-        <input type="text" class="form-control" ng-model="args.email" placeholder="[% l('Email') %]"/>
-        <input type="text" class="form-control" ng-model="args.ident" placeholder="[% l('Identification') %]"/>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.second_given_name" placeholder="[% l('Middle Name') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.alias" placeholder="[% l('Alias') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.usrname" placeholder="[% l('Username') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.email" placeholder="[% l('Email') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.ident" placeholder="[% l('Identification') %]"/>
+        </div>
       </div>
+
       <div class="form-group" ng-show="showExtras">
-        <input type="text" class="form-control" ng-model="args.id" placeholder="[% l('Database ID') %]"/>
-        <input type="text" class="form-control" ng-model="args.phone" placeholder="[% l('Phone') %]"/>
-        <input type="text" class="form-control" ng-model="args.street1" placeholder="[% l('Street 1') %]"/>
-        <input type="text" class="form-control" ng-model="args.street2" placeholder="[% l('Street 2') %]"/>
-        <input type="text" class="form-control" ng-model="args.city" placeholder="[% l('City') %]"/>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.id" placeholder="[% l('Database ID') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.phone" placeholder="[% l('Phone') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.street1" placeholder="[% l('Street 1') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.street2" placeholder="[% l('Street 2') %]"/>
+        </div>
+        <div class="col-lg-2">
+          <input type="text" class="form-control" 
+            ng-model="args.city" placeholder="[% l('City') %]"/>
+        </div>
       </div>
+
       <div class="form-group" ng-show="showExtras">
+        <div class="col-lg-2">
           <input type="text" class="form-control" ng-model="args.state" 
             placeholder="[% l('State') %]" title="[% l('State') %]"/>
+        </div>
+
+        <div class="col-lg-2">
           <input type="text" class="form-control" ng-model="args.post_code" 
             placeholder="[% l('Post Code') %]" title="[% l('Post Code') %]"/>
+        </div>
 
+        <div class="col-lg-2">
           <input type="text" class="form-control"  
             placeholder="[% l('Profile Group') %]"
             ng-model="args.profile"
             typeahead="grp as grp.name for grp in profiles | filter:$viewValue" 
             typeahead-editable="false" />
+        </div>
 
+        <div class="col-lg-2">
           <input type="text" class="form-control" 
             placeholder="[% l('Home Library') %]"
             ng-model="args.home_ou"
             typeahead="org as org.shortname for org in org_units | filter:$viewValue" 
             typeahead-editable="false" />
+        </div>
 
+        <div class="col-lg-2">
           <div class="checkbox">
             <label>
-              <input type="checkbox" ng-model="args.inactive">
+              <input type="checkbox" ng-model="args.inactive"/>
               [% l('Include Inactive?') %]
             </label>
           </div>
+        </div>
       </div>
     </form>
   </div>
-  <div class="col-lg-2 text-right">
+  <div class="col-lg-1 text-right">
     [% INCLUDE 'staff/circ/patron/t_search_actions.tt2' %]
   </div>
 </div>
diff --git a/Open-ILS/src/templates/staff/circ/patron/t_search_actions.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_search_actions.tt2
index 3cf7724d26..6e4786b08f 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_search_actions.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_search_actions.tt2
@@ -3,7 +3,7 @@
   <!-- 
     patron search API call does not support paging.  For now, hide paging
     options and show all retrieved users with a limit (like the xul client).
-  <!--
+  -->
 
   <!--
   <button type="button" class="btn btn-default" 
diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 3ebfb96201..f398665b2a 100644
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -101,10 +101,7 @@ but the ones I'm finding aren't quite cutting it..*/
   margin-bottom: 5px;
 }
 
-#patron-search-form input[type="text"], 
-#patron-search-form input[type="submit"],
-#patron-search-form input[type="reset"] {
-  width: 10em;
-}
-
+/* let form elements fill their containers w/ slight padding */
+#patron-search-form div.col-lg-2 { padding: 2px; }
+#patron-search-form input:not([type="checkbox"]) { width: 100%; }
 
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 48840daacb..cc4233c17f 100644
--- a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
+++ b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js
@@ -281,6 +281,8 @@ function($scope,  $q,  $routeParams,  $timeout,  $window,  $location,  egEnv,
                 search.profile = {value : args.profile.id, group : 0};
             } else if (key == 'home_ou') {
                 search.home_ou = args.home_ou.id; // passed separately
+            } else if (key == 'inactive') {
+                search.inactive = val;
             } else {
                 search[key] = {value : val, group : 0};
             }
-- 
2.11.0