Bug 21573: Move lists barcode and biblionumber entry form to modal

This patch modifies the staff client lists page so that the
barcode/biblionumber entry form from the left hand sidebar into a modal
window, triggered by a button in the toolbar.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - View the contents of a list in the staff client, logged in as a user
   who has permission to add items.
 - Click the "Add items" button. A modal window should appear with the
   barcode/biblionumber entry form.
 - Submit barcodes and/or biblionumbers and confirm that the correct
   titles are added to the list.
 - Log in again as a user who does not have permission to add to the
   list. Confirm that the button isn't present.

Signed-off-by: Mackey Johnstone <mackeyfj@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 56f34da..e98bb38 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -3493,6 +3493,14 @@ label {
 .modal-body {
     background-color: #FFF;
     overflow-y: auto;
+
+    fieldset,
+    ol {
+        background-color: transparent;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
 }
 
 .modal-content {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/virtualshelves-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/virtualshelves-toolbar.inc
index 2409a58..19b1746 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/virtualshelves-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/virtualshelves-toolbar.inc
@@ -3,6 +3,14 @@
 <div id="toolbar" class="btn-toolbar">
     <div class="btn-group"><a id="newshelf" class="btn btn-default btn-sm" href="/cgi-bin/koha/virtualshelves/shelves.pl?op=add_form&amp;referer=[% op | html %]"><i class="fa fa-plus"></i> New list</a></div>
 
+    [% IF ( can_add_biblios ) %]
+        <div class="btn-group">
+            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#addToList">
+                <i class="fa fa-plus"></i> Add items
+            </button>
+        </div>
+    [% END %]
+
     [% IF shelf AND op == 'view' %]
         [% IF can_manage_shelf %]
         <div class="btn-group">

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
index 84bfc52..8e6a75a 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/virtualshelves/shelves.tt
@@ -59,16 +59,10 @@
 
 [% IF op == 'view' %]&rsaquo; Contents of <i>[% shelf.shelfname | html %]</i>[% END %][% IF op == 'add_form' %] &rsaquo; Create new list[% END %][% IF op == 'edit_form' %] &rsaquo; Edit list <i>[% shelf.shelfname | html %]</i>[% END %]</div>
 
-[% IF ( can_add_biblios ) %]
-    <div class="main container-fluid">
-        <div class="row">
-            <div class="col-sm-10 col-sm-push-2">
-[% ELSE %]
     <div class="main container-fluid">
         <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-[% END %]
-            <main>
+            <div class="col-sm-10 col-sm-push-1">
+                <main>
 
                 [% INCLUDE 'virtualshelves-toolbar.inc' %]
 
@@ -393,38 +387,48 @@
 
             </main>
         </div> <!-- /.col-sm-10.col-sm-push-2 -->
-        [% IF ( can_add_biblios ) %]
-            <div class="col-sm-2 col-sm-pull-10">
-                <aside>
-                        <form action="/cgi-bin/koha/virtualshelves/shelves.pl" method="post">
-                            <fieldset class="brief noprint">
-                                <h4>Add items</h4>
-                                <ol>
-                                    <li>
-                                        <label for="barcodes">Barcodes:</label>
-                                        <textarea name="barcodes" id="barcodes" class="focus" autocomplete="off" rows="5"></textarea>
-                                        <input type="hidden" name="op" value="add_biblio" />
-                                        <input type="hidden" name="referer" value="view" />
-                                        <input type="hidden" name="shelfnumber" value="[% shelf.shelfnumber | html %]" />
-                                    </li>
-                                    <li>
-                                        <label for="biblionumbers">Biblio numbers:</label>
-                                        <textarea name="biblionumbers" id="biblionumbers" class="focus" autocomplete="off" rows="5"></textarea>
-                                        <input type="hidden" name="op" value="add_biblio" />
-                                        <input type="hidden" name="referer" value="view" />
-                                        <input type="hidden" name="shelfnumber" value="[% shelf.shelfnumber | html %]" />
-                                    </li>
-                                </ol>
-                                <fieldset class="action">
-                                    <input type="submit" value="Add" />
-                                </fieldset>
-                            </fieldset>
-                        </form>
-                </aside>
-            </div> <!-- /.col-sm-2.col-sm-pull-10 -->
-        [% END %]
     </div> <!-- /.row -->
 
+[% IF ( can_add_biblios ) %]
+    <!-- Modal -->
+    <div class="modal" id="addToList" tabindex="-1" role="dialog" aria-labelledby="addToListLabel">
+        <div class="modal-dialog" role="document">
+            <form action="/cgi-bin/koha/virtualshelves/shelves.pl" method="post">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" id="addToListLabel">Add items</h4>
+                    </div>
+                    <div class="modal-body">
+                        <fieldset class="brief">
+                        <ol>
+                            <li>
+                                <label for="barcodes">Barcodes:</label>
+                                <textarea name="barcodes" id="barcodes" rows="5"></textarea>
+                                <input type="hidden" name="op" value="add_biblio" />
+                                <input type="hidden" name="referer" value="view" />
+                                <input type="hidden" name="shelfnumber" value="[% shelf.shelfnumber | html %]" />
+                            </li>
+                            <li>
+                                <label for="biblionumbers">Biblio numbers:</label>
+                                <textarea name="biblionumbers" id="biblionumbers" rows="5"></textarea>
+                                <input type="hidden" name="op" value="add_biblio" />
+                                <input type="hidden" name="referer" value="view" />
+                                <input type="hidden" name="shelfnumber" value="[% shelf.shelfnumber | html %]" />
+                            </li>
+                        </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-default">Save</button>
+                        <a href="#" data-dismiss="modal" class="cancel">Cancel</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+[% END %]
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
@@ -453,8 +457,8 @@
                 [% ELSE %]
                     var type = [% PRIVATE | html %];
                 [% END %]
-                var dtListResults = $("#listresultst").dataTable($.extend(true, {}, dataTablesDefaults, {
 
+                var dtListResults = $("#listresultst").dataTable($.extend(true, {}, dataTablesDefaults, {
                 "aaSorting": [[ 5, "asc" ]],
                     'bServerSide': true,
                     'sAjaxSource': "/cgi-bin/koha/svc/virtualshelves/search",
@@ -612,6 +616,9 @@
                         e.preventDefault();
                     }
                 });
+                $("#addToList").on("shown.bs.modal", function(e){
+                    $("#barcodes").focus();
+                });
             });
         [% END %]