LP1907863 Bootstrap Opac: My Lists formatting

This patch moves the buttons for each list row underneath the title and descriptions fields.
It makes the create list form collapsible using a button.
If there are lists, the create form is collapsed.
The create form is expanded on load, if the user selects move bucket to new list, or add rec to new list from a menu or button from another page.
The "Move contents of basket to this list?" in the creation form now defaults to 'yes' if an option to move a basket to a new list is chosen from a menu.
It adds localization functions to the button texts and removes a dangling </div> in anon-list.tt2
It moves the create form from a <table> design and uses Bootstrap elements instead.

To Test.

1. After applying the patch view the list page and notice that the form is expanded.
2. Create a list.  The form is now collapse.
3. Perform a search and add some of the titles to a basket.
4. From one of the result rows drop-down the Add to My List menu and select 'Add to New List'.
   The form is expanded and the "Move contents of basket to this list" should be 'yes'.
5. From the basket screen or from the lists screen click on the 'Add to New List' button.  The results should be the same as step 4.
6. After creating a few lists, notice that the buttons for each list are now displayed under the list title and description and
   each row is distinguished by a bottom border.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Michele Morgan <mmorgan@noblenet.org>

diff --git a/Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2 b/Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2
index 4ddd11f..0cad483 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/myopac/lists.tt2
@@ -5,6 +5,7 @@
     limit = ctx.bookbags_limit;
     offset = ctx.bookbags_offset;
     item_page = ctx.bookbags_item_page;
+    move_cart_by_default = CGI.param('move_cart_by_default') || 0;
     bb_publish_text = l(
 "Sharing a list means that the contents " _
 "of the list will be visible to others. " _
@@ -13,85 +14,72 @@
 %]
 
 
-<h3>[% l('My Lists') %]</h3>
-<div id='myopac_bookbag_div'>
+<div id='myopac_bookbag_div container'>
 
     <!-- new list creation -->
-    <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post" id="create_form">
-        <h4>[% l('Create New List') %]</h4><a id="createnewlist"></a>
-        <table class="table" >
-            <tr>
-                <td class="list_create_table_label">
-                    <label for="list_create_name">[% l('Enter the name of the new list:') %]</label>
-                </td>
-                <td class="px-3 my-2">
-                    [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                    <input id="list_create_name" type="text" name="name" class="form-control"/>
-                    <input type="hidden" name="action" value="create" class="form-control" />
-                    [% IF ctx.add_rec %]
-                    <input type="hidden" name="add_rec" value="[% ctx.add_rec %]" class="form-control" />
-                    [% END %]
-                    [% IF ctx.where_from %]
-                    <input type="hidden" name="where_from" value="[% ctx.where_from %]" class="form-control" />
-                    [% END %]
-                </td>
-            </tr>
-            <tr>
-                <td class="list_create_table_label">
-                    <label for="list_description">[% l("List description (optional):") %]</label>
-                </td>
-                <td class="px-3">
-                    <textarea name="description" id="list_description" class="form-control"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td class="list_create_table_label">
-                    <label for="list_create_shared">[% l('Share this list?') %]</label>
-                </td>
-                <td class="px-3">
-                    <select class="d-inline-block form-control mini-control" name="shared" id="list_create_shared">
-                        <option value="0">[% l('No') %]
-                        <option value="1">[% l('Yes') %]
-                    </select>
-                    <a href="#" title="Allows the list to be shared through a link or RSS." data-toggle="tooltip">
-                        <i class="fas fa-question-circle" aria-hidden="true"></i>
-                    </a>
-                </td>
-            </tr>
+    <div class="row">
+    <button class="btn btn-sm btn-opac my-2" data-toggle="collapse" data-target="#create_form" aria-expanded="false" aria-controls="create_form">[% l('Create New List') %]</button>
+    </div>
+    <div id="create_form" [% IF ctx.add_rec || move_cart_by_default || !ctx.bookbags.size %] class="collapse show my-3"[% ELSE %] class="row collapse my-3"[% END %]>
+        <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post">
+            [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
+            <input type="hidden" name="action" value="create" class="form-control" />
+            [% IF ctx.add_rec %]
+                <input type="hidden" name="add_rec" value="[% ctx.add_rec %]" class="form-control" />
+            [% END %]
+            [% IF ctx.where_from %]
+                 <input type="hidden" name="where_from" value="[% ctx.where_from %]" class="form-control" />
+            [% END %]
+            <div class="form-group">
+                <label for="list_create_name">[% l('Enter the name of the new list:') %]</label>
+                <input id="list_create_name" type="text" name="name" class="form-control" autofocus>
+            </div>
+            <div class="form-group">
+                <label for="list_description">[% l("List description (optional):") %]</label>
+                <textarea name="description" id="list_description" class="form-control"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="list_create_shared">[% l('Share this list?') %]</label>
+                <select class="d-inline-block form-control mini-control" name="shared" id="list_create_shared">
+                    <option value="0">[% l('No') %]
+                    <option value="1">[% l('Yes') %]
+                </select>
+                <a href="#" title="Allows the list to be shared through a link or RSS." data-toggle="tooltip">
+                <i class="fas fa-question-circle" aria-hidden="true"></i>
+                </a>
+            </div>
             [% IF ctx.mylist.size %]
-            <tr>
-                <td class="list_create_table_label">
-                    <label for="list_move_cart">[% l('Move contents of basket to this list?') %]</label>
-                </td>
-                <td>
-                    <select class="d-inline-block form-control mini-control" name="move_cart" id="list_move_cart">
-                        <option value="0">[% l('No') %]
-                        <option value="1" [% IF CGI.param('move_cart_by_default') %]selected="selected"[% END%]>[% l('Yes') %]
-                    </select>
-                </td>
-            </tr>
+            <div class="form-group">
+                <label for="list_move_cart">[% l('Move contents of basket to this list?') %]</label>
+                <select class="d-inline-block form-control mini-control" name="move_cart" id="list_move_cart">
+                    <option value="0">[% l('No') %]
+                    <option value="1" [% IF move_cart_by_default %]selected="selected"[% END%]>[% l('Yes') %]
+                </select>
+            </div>
             [% END %]
-            <tr>
-                <td>&nbsp;</td>
-                <td class="list-create-table-buttons">
-                                    <button type="submit" class="btn btn-confirm"><i class="fas fa-plus-square" aria-hidden="true"></i> [% l('Create List') %]</button>
-
-                    <button type="reset" class="btn btn-deny" ><i class="fas fa-ban" aria-hidden="true"></i> [% l('Cancel') %]</button>
-                </td>
-            </tr>
-        </table>
-    </form>
+            <button type="submit" class="btn btn-confirm"><i class="fas fa-plus-square" aria-hidden="true"></i> [% l('Create List') %]</button>
+            <button type="reset" class="btn btn-deny" ><i class="fas fa-ban" aria-hidden="true"></i> [% l('Cancel') %]</button>
+        </form>
+    </div>
 
+    <div class="row">
       [% IF (CGI.param('from_basket') && ctx.mylist.size)  %]
     <h3>[% l("... from basket") %]</h3>
     [% INCLUDE "opac/parts/anon_list.tt2" %]
     [% ELSE %]
-    <h3>[% l("My Existing Basket and Lists") %]</h3>
     [% INCLUDE "opac/parts/anon_list.tt2" %]
+    </div>
+
+    <div class="row border-top pt-4">
+    <h3>[% l('Saved Lists') %]</h3>
+   
 
-    [% IF ctx.bookbags.size %]
-    <div class="header_middle">
-        <span class="float-left">[% l('Saved Lists') %]</span>
+        [% IF !ctx.bookbags.size %]
+        <div class="container pb-2 mt-2 pt-2">
+                <h4>[% l("You don't have any lists yet") %]</h4>
+                <a href='[% mkurl(ctx.opac_root _ '/myopac/lists', {}) %]'>[% l('Create a list with the form above') %]</a>
+  
+        [% ELSE %]
         [% IF limit < ctx.bookbag_count; %]
         <span class='float-left' style='padding-left: 10px;'>
             [%- IF offset > 0 -%]
@@ -141,40 +129,40 @@
 
     <div id='acct_lists_prime'>
         [% FOR bbag IN ctx.bookbags %]
-        <div>
-         <table class="table"><tr>
-            <td class="listTitleText">
-            <div class="bookbag-controls-title-block">
-                [% baseurl = ctx.opac_root _ '/myopac/lists';
-                IF bbag.id != CGI.param("bbid");
-                    url = mkurl(baseurl,{bbid => bbag.id, item_page => 1},['edit_notes','sort']);
-                    ltitle = l("Show items in list");
-                ELSE;
-                    url = mkurl(baseurl, {}, ['bbid', 'edit_notes', 'sort']);
-                    ltitle = l("Hide items in list");
-                END %]
-                <h4 class="bookbag-name"><a title="[% ltitle %]" href="[% url %]">[% bbag.name | html %]</a>[% IF bbag.pub == 't'; %]
-                <a target='_blank' href='/opac/extras/feed/bookbag/rss2-full/[% bbag.id %]' aria-label="RSS Feed">
-                <i class="fas fa-rss-square" aria-hidden="true"></i></a>
-                [% END %]</h4>
-                [% IF bbag.description %]<div class="bookbag-description">[% bbag.description | html %]</div>[% END %]
+        <div class="container border-bottom pb-2">
+            <div class="row mt-2">
+                    [% baseurl = ctx.opac_root _ '/myopac/lists';
+                    IF bbag.id != CGI.param("bbid");
+                        url = mkurl(baseurl,{bbid => bbag.id, item_page => 1},['edit_notes','sort']);
+                        ltitle = l("Show items in list");
+                    ELSE;
+                        url = mkurl(baseurl, {}, ['bbid', 'edit_notes', 'sort']);
+                        ltitle = l("Hide items in list");
+                    END %]
+                    <h4 class="bookbag-name"><a title="[% ltitle %]" href="[% url %]">[% bbag.name | html %]</a>[% IF bbag.pub == 't'; %]
+                    <a target='_blank' href='/opac/extras/feed/bookbag/rss2-full/[% bbag.id %]' aria-label="RSS Feed">
+                    <i class="fas fa-rss-square" aria-hidden="true"></i></a>
+                    [% END %]</h4>
             </div>
-            </td>
-
-            <td>
-            [% IF ctx.add_rec %]
-            <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update', {}, 1) %]" method="post">
-                <div class="bookbag-controls">
-                    <input type="hidden" name="action" value="add_rec" />
-                    <input type="hidden" name="list" value="[% bbag.id %]" />
-                    <input type="hidden" name="add_rec" value="[% ctx.add_rec %]" />
-                    [% IF ctx.where_from %]
-                    <input type="hidden" name="where_from" value="[% ctx.where_from %]" />
+            <div class="row bookbag-description">
+                     [% bbag.description | html %]
+            </div>
+            <div class="row">
+                <div class="col-9">
+                    [% IF ctx.add_rec %]
+                    <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update', {}, 1) %]" method="post">
+                    <div class="bookbag-controls">
+                        <input type="hidden" name="action" value="add_rec" />
+                        <input type="hidden" name="list" value="[% bbag.id %]" />
+                        <input type="hidden" name="add_rec" value="[% ctx.add_rec %]" />
+                        [% IF ctx.where_from %]
+                        <input type="hidden" name="where_from" value="[% ctx.where_from %]" />
+                        [% END %]
+                        <button class="fixed btn btn-success btn-sm m-1" type="submit" ><i class="fas fa-plus-square" aria-hidden="true"></i> [% l('Add to this list') %]</button>
+                    </div>
+                    </form>
                     [% END %]
-                    <button class="fixed btn btn-success btn-sm m-1" type="submit" ><i class="fas fa-plus-square" aria-hidden="true"></i> [% l('Add to this list') %]</button>
-                </div>
-            </form>
-            [% END %]
+
             <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post">
                 <div class="bookbag-share">
                     <input type="hidden" name="list" value="[% bbag.id %]" />
@@ -197,6 +185,7 @@
                     <button type="submit" class="btn btn-action btn-sm m-1"><i class="fas fa-file-download" aria-hidden="true"></i> [% l('Download CSV') %]</button>
                 </div>
             </form>
+
             [% setting = 'opac.default_list'; %]
             <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post">
                 <div class="bookbag-controls">
@@ -211,6 +200,8 @@
                     [% END %]
                 </div>
             </form>
+
+
             [% IF ctx.is_staff %]
             <div class="bookbag-controls">
                 <button
@@ -232,6 +223,7 @@
                 ><i class="fas fa-external-link-alt" aria-hidden="true"></i></button>
             </div>
             [% END %]
+
             [% IF bbag.pub == 't'; %]
             <div class="bookbag-controls">
                 <a class="btn btn-sm btn-opac m-1" href='[%-
@@ -244,18 +236,22 @@
 
             </div>
                [% END %]
-                 <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post" onsubmit="return confirm('[% l('Do you really want to delete this list?') %]')">
-                <div class="bookbag-controls float-right">
-                    <input type="hidden" name="list" value="[% bbag.id %]" />
-                    <input type="hidden" name="action" value="delete" />
-                    [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
-                    <button type="submit" class="btn btn-deny btn-sm m-1"><i class="fas fa-trash-alt" aria-hidden="true"></i> [% l('Delete List') %]</button>
+
+                    </div>
+                <div class="col-3">
+                    <form action="[% mkurl(ctx.opac_root _ '/myopac/list/update') %]" method="post" onsubmit="return confirm('[% l('Do you really want to delete this list?') %]')">
+                    <div class="bookbag-controls float-right">
+                        <input type="hidden" name="list" value="[% bbag.id %]" />
+                        <input type="hidden" name="action" value="delete" />
+                        [%- INCLUDE "opac/parts/preserve_params.tt2"; %]
+                        <button type="submit" class="btn btn-deny btn-sm m-1"><i class="fas fa-trash-alt" aria-hidden="true"></i> [% l('Delete List') %]</button>
+                    </div>
+                   </form>
                 </div>
-            </form>
-            </td>
-            </tr>
-            </table>
+            </div>
         </div>
+
+        
         [% IF CGI.param("bbid") == bbag.id %]
 
         <div>
@@ -266,10 +262,10 @@
         <div>
         [% IF bbag.items.size %]
             <div class="my-2">
-                <button name="action" class="btn btn-action" type="submit" value="place_hold" id="place_hold">[% l('Place hold') %]</button>
-                <button name="action" class="btn btn-action" type="submit" value="print">[% l('Print title details') %]</button>
-                <button name="action" class="btn btn-action" type="submit" value="email">[% l('Email title details') %]</button>
-                <button name="action" class="btn btn-action" type="submit" value="del_item">[% l('Remove from list') %]</button>
+                <button name="action" class="btn btn-action btn-sm" type="submit" value="place_hold" id="place_hold">[% l('Place hold') %]</button>
+                <button name="action" class="btn btn-action btn-sm" type="submit" value="print">[% l('Print title details') %]</button>
+                <button name="action" class="btn btn-action btn-sm" type="submit" value="email">[% l('Email title details') %]</button>
+                <button name="action" class="btn btn-action btn-sm" type="submit" value="del_item">[% l('Remove from list') %]</button>
             </div>
         [% END %]
 

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2
index 5aa3181..aa28996 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/anon_list.tt2
@@ -10,12 +10,12 @@
         <div class="bbag-action" style="clear:both;">
         <div class="input-group my-3">
 
-            <button class="btn btn-success m-1" name="action" value="place_hold" id="place_hold" type="submit"><i class="fas fa-book" aria-hidden="true"></i> Place Hold</button>
-            <button class="btn btn-danger m-1" name="action" value="delete" id="delete" type="submit"><i class="fas fa-trash" aria-hidden="true"></i> Delete</button>
-            <button class="btn btn-action m-1" name="action" value="print" id="print" type="submit"><i class="fas fa-print" aria-hidden="true"></i> Print Details</button>
-            <button class="btn btn-action m-1" name="action" value="email" id="email" type="submit"><i class="fas fa-envelope-open-text" aria-hidden="true"></i> Email Details</button>
+            <button class="btn btn-success m-1" name="action" value="place_hold" id="place_hold" type="submit"><i class="fas fa-book" aria-hidden="true"></i> [% l('Place Hold')%]</button>
+            <button class="btn btn-danger m-1" name="action" value="delete" id="delete" type="submit"><i class="fas fa-trash" aria-hidden="true"></i> [% l('Delete') %]</button>
+            <button class="btn btn-action m-1" name="action" value="print" id="print" type="submit"><i class="fas fa-print" aria-hidden="true"></i> [% l('Print Details') %]</button>
+            <button class="btn btn-action m-1" name="action" value="email" id="email" type="submit"><i class="fas fa-envelope-open-text" aria-hidden="true"></i> [% l('Email Details') %]</button>
 
-            <button class="btn btn-action m-1" name="action" value="new_list" id="new_list" type="submit"><i class="fas fa-plus" aria-hidden="true"></i> Add to New List</button>
+            <a class="btn btn-action m-1" id="new_list" href=[% mkurl(ctx.opac_root _ '/myopac/lists', { move_cart_by_default => 1, from_basket => 1}) %]><i class="fas fa-plus" aria-hidden="true"></i> [% l('Add to New List') %]</a>
             <div class="dropdown show m-1">
                 [% IF ctx.user AND ctx.bookbags.size %]
                  <a class="btn btn-action dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -36,7 +36,7 @@
                    [% l('Clear entire basket when the above action is complete.') %]
                 </label>
             </div>
-</div>
+
 
 
 
@@ -111,7 +111,6 @@
 
 
 
-
             <br /><br />
         </div>
         </form>

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/bookbag_actions.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/bookbag_actions.tt2
index bf2c6f8..7b0aeb0 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/bookbag_actions.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/bookbag_actions.tt2
@@ -79,7 +79,7 @@
         [% l('See All') %]
         </a>
     <a class="dropdown-item" href="[% opac_wrap(mkurl(ctx.opac_root _ '/myopac/lists', {
-        add_rec => ctx.bre_id, anchor => rec_anchor
+        move_cart_by_default => 1, add_rec => ctx.bre_id, anchor => rec_anchor
     }, stop_parms)) %]">
     [% l('Add to new list') %]
     </a>