lp1422802: Improve visibility of parts on Place Holds screen

Users often miss the list of parts on the Place Holds screen, leading to
many title-level holds on records where only one or two libraries have
'unparted' copies. This branch adds some styling to add padding around the
parts selector and to bold the Select a Part text. Many thanks to Christine
Morgan whose custom work at NOBLE served as an inspiration for this styling.

The branch also adds a new config.tt2 option to display parts with
radio buttons instead of a select menu so that all of the parts will display on
the screen. With this option, no parts are pre-selected, forcing the users to
actively choose a part.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Ben Shum <ben@evergreener.net>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index f91b504..2bfe26b 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1221,11 +1221,24 @@ a.dash-link:hover { text-decoration: underline !important; }
 .unread-patron-message { font-weight: bold; }
 
 #hold-items-list td { padding: 5px; margin-bottom: 20px; }
-.hold-items-list-title { font-size: [% css_fonts.size_bigger %]; }
+.hold-items-list-title { 
+  font-size: [% css_fonts.size_bigger %];
+  margin-bottom: 20px;
+}
 .hold-items-list-problem { color: [% css_colors.text_alert %]; }
 
 .hold_success_links > span { margin: 0 2em; }
 
+.radio-parts-selection { 
+   width: 75%;
+   margin-bottom: 20px;
+}
+
+.parts-radio-option { 
+  display: inline-block;
+  width:15em;
+}
+
 .mr_holds_no_formats { 
   padding: 5px;
   margin-left: 25px;
@@ -1753,9 +1766,10 @@ a.preflib_change {
     #acct_select, #acct_prefs_select {
         display: inline-block;
     }
-#acct_tabs, #acct_prefs_tabs {
+    #acct_tabs, #acct_prefs_tabs {
          display:none;
      }
+    .radio-parts-selection { width: 90%; }
 }
 
 @media only screen and (max-width: 600px) {

diff --git a/Open-ILS/src/templates/opac/parts/config.tt2 b/Open-ILS/src/templates/opac/parts/config.tt2
index 47df01b..15ffda2 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/config.tt2
+++ b/Open-ILS/src/templates/opac/parts/config.tt2
@@ -72,6 +72,13 @@ disable_email_change = 'false';
 allow_phone_notifications = 'true';
 
 ##############################################################################
+# Format of parts selection on Place Holds screen
+# Set to true to use radio buttons for parts selection on the Place Holds
+# screen. The default behavior is to to display them in a select menu.
+#############################################################################
+enable.radio.parts = 'false';
+
+##############################################################################
 # Misc. UI Settings
 ##############################################################################
 # Option for full details as a default, esp. impt. for e-content

diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index f9600a5..e6ec184 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -122,4 +122,28 @@ var aou_hash = {
 };
 </script>
 
+<!-- Require radio parts selection for browsers that don't support required form field element -->
+[% IF ctx.page == 'place_hold' %]
+  <script type="text/javascript">
+    function validateRadioSelection (radios) {
+       for (i = 0; i < radios.length; ++ i)
+       {
+         if (radios[i].checked) return true;
+       }
+       return false;
+    }
+    function validateHoldForm() {
+      if (validateRadioSelection (document.forms["PlaceHold"]["part"]))
+      {
+        return true;
+       }
+       else
+       {
+          alert ("Please select a part");
+          return false;
+        }
+     }
+  </script>
+[% END %]
+
 [%- END; # want_dojo -%]

diff --git a/Open-ILS/src/templates/opac/parts/place_hold.tt2 b/Open-ILS/src/templates/opac/parts/place_hold.tt2
index e9fc008..8fa5c44 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/parts/place_hold.tt2
@@ -7,8 +7,23 @@
     <h1>[% l('Place Hold') %]</h1>
 
     [% some_holds_allowed = -1 %]
+
+    <!-- loop through the holds and display status of request where appropriate -->
+        [% FOR hdata IN ctx.hold_data;
+            attrs = {marc_xml => hdata.marc_xml};
+            PROCESS get_marc_attrs args=attrs;
+            this_hold_disallowed = 0;
+
+            IF CGI.param('hold_type') == 'M';
+              IF hdata.metarecord_filters.formats.size == 0;
+                this_hold_disallowed = 1;
+                # if this is the first hold and it's disallowed,
+                # assume all holds are, until we proven otherwise
+                SET some_holds_allowed = 0 IF some_holds_allowed == -1;
+              ELSE; some_holds_allowed = 1; END;
+            END %]
       
-    <form method="post">
+    <form method="post" name="PlaceHold" [% IF hdata.parts.size > 0 AND enable.radio.parts == 'true' %] onsubmit="return validateHoldForm()" [% END %] >
         <input type="hidden" name="hold_type" value="[% CGI.param('hold_type') | html %]" />
         [%  
             redirect = CGI.param('hold_source_page') || CGI.param('redirect_to') || CGI.referer;
@@ -60,22 +75,7 @@
         </p>
         [% END %]
 
-        <!-- loop through the holds and display status of request where appropriate -->
         <table id='hold-items-list'>
-        [% FOR hdata IN ctx.hold_data;
-            attrs = {marc_xml => hdata.marc_xml};
-            PROCESS get_marc_attrs args=attrs;
-            this_hold_disallowed = 0;
-
-            IF CGI.param('hold_type') == 'M';
-              IF hdata.metarecord_filters.formats.size == 0;
-                this_hold_disallowed = 1;
-                # if this is the first hold and it's disallowed, 
-                # assume all holds are, until we proven otherwise
-                SET some_holds_allowed = 0 IF some_holds_allowed == -1;
-              ELSE; some_holds_allowed = 1; END;
-            END %]
-
             <tr>
                 <td>
                     [% IF !this_hold_disallowed %]
@@ -84,8 +84,23 @@
                     <div class='hold-items-list-title'>[% attrs.title_extended | html %]</div>
                     [% IF hdata.parts AND !this_hold_disallowed %]
                         [% IF hdata.parts.size > 0 %]
-                        <div style='padding-left: 10px'>
-                            <span><label for='select_hold_part'>[%
+                        <div style='padding-left: 10px; padding-bottom: 15px;'>
+                            [% IF enable.radio.parts == 'true' %]
+                                <span style='font-weight: bold;'><label for='select_hold_part'>[%
+                               l('Select a Part:')
+                               %]</label></span>
+                             <div class='radio-parts-selection'>
+                             [% IF !hdata.part_required %]
+                                <span class='parts-radio-option'>
+                                 <input type='radio' name='part' value='' required>[% l('All Parts') %]</span>
+                              [% END %]
+                               [% FOR part IN hdata.parts %]
+                                 <span class='parts-radio-option'><input type='radio' name='part' id=[% part.id %] value=[% part.id %] required>
+                                  <label for=[% part.id %]>[% part.label | html %]</label></span>
+                              [% END %]
+                              </div>
+                          [% ELSE %]
+                            <span style='font-weight: bold;'><label for='select_hold_part'>[%
                                 hdata.part_required ? l('Select a Part:') : l('Select a Part (optional):')
                             %]</label></span>
                             <select id='select_hold_part' name='part'>
@@ -96,6 +111,7 @@
                                 <option value='[% part.id %]'>[% part.label | html %]</option>
                                 [% END %]
                             </select>
+                          [% END %]
                         </div>
                         [% ELSE %]
                         <input type='hidden' name='part' value=''/>