Bug 20468: Add multi-select to staff article request form
authorMarcel de Rooy <m.de.rooy@rijksmuseum.nl>
Thu, 22 Mar 2018 14:47:45 +0000 (15:47 +0100)
committerNick Clemens <nick@bywatersolutions.com>
Fri, 10 Aug 2018 10:00:56 +0000 (10:00 +0000)
Adds a column with a checkbox. Adds buttons under the table for Select,
Clear and Actions menu.
An additional javascript function HandleMulti is placed between the form
and the functions handling individual requests.

Note: The Actions menu below does not contain Print slip. This does not
work in its current form. This could be handled on a separate report.

Test plan:
[1] Enable Article Requests. Add a few requests.
[2] Test the Select all / Clear all functionality on the form.
[3] Verify that the menu options Process, Complete and Cancel work as
    expected both from the individual Actions menu as from the shared
    Actions menu for selected requests.

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>

Patch applies and functions as described.
Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

koha-tmpl/intranet-tmpl/prog/en/modules/circ/article-requests.tt

index 744bb54..f983545 100644 (file)
@@ -9,6 +9,38 @@
 <style type="text/css"> p { margin-top: 0; }</style>
 </head>
 
+[% BLOCK actions %]
+        <a class="btn btn-default btn-xs dropdown-toggle ar-actions" role="button" data-toggle="dropdown" href="#">
+            Actions <b class="caret"></b>
+        </a>
+
+        <ul class="dropdown-menu [% pull_right %]" role="menu" aria-labelledby="[% aria_menu %]">
+            <li>
+                <a class="ar-process-request" href="#" onclick="HandleMulti( Process, [% id_arg %], $(this) ); return false;">
+                    <i class="fa fa-cog"></i>
+                    Process request
+                </a>
+
+                <a class="ar-complete-request" href="#" onclick="HandleMulti( Complete, [% id_arg %], $(this) ); return false;">
+                    <i class="fa fa-check-circle"></i>
+                    Complete request
+                </a>
+
+                <a class="ar-cancel-request" href="#" onclick="HandleMulti( Cancel, [% id_arg %], $(this) ); return false;">
+                    <i class="fa fa-minus-circle"></i>
+                    Cancel request
+                </a>
+
+                [% IF id_arg %][%# TODO: Does not work with multi-select %]
+                <a class="ar-print-request" href="#" onclick="HandleMulti( PrintSlip, [% id_arg %], $(this) ); return false;">
+                    <i class="fa fa-print"></i>
+                    Print slip
+                </a>
+                [% END %]
+            </li>
+        </ul>
+[% END %]
+
 <body id="circ_article-requests" class="circ">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
@@ -62,6 +94,7 @@
                         <table id="article-requests-pending-table">
                             <thead>
                                 <tr>
+                                    <th/>
                                     <th class="ar-title">Title</th>
                                     <th class="ar-request">Requested article</th>
                                     <th class="ar-collection">Collection</th>
 
                              <tbody>
                                 <tr class="ar-pending-none">
-                                    <td colspan="11">
+                                    <td colspan="12">
                                         There are no pending article requests at this time.
                                     </td>
                                 </tr>
 
                                 [% FOREACH ar IN article_requests_pending %]
                                     <tr class="ar-row ar-pending">
+                                        <td><input type="checkbox" reqid="[% ar.id %]"/></td>
                                         <td class="ar-title">
                                             <p>
                                                 <a href="/cgi-bin/koha/circ/request-article.pl?biblionumber=[% ar.biblionumber %]">
                                         </td>
                                         <td class="ar-date"><span title="[% ar.created_on %]">[% ar.created_on | $KohaDates %]</span></td>
                                         <td class="ar-actions">
-                                            <div class="dropdown">
-                                                <a class="btn btn-default btn-xs dropdown-toggle" id="ar-actions" role="button" data-toggle="dropdown" href="#">
-                                                    Actions <b class="caret"></b>
-                                                </a>
-
-                                                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="ar-actions">
-                                                    <li>
-                                                        <a class="ar-process-request" href="#" onclick="Process( [% ar.id %], $(this) ); return false;">
-                                                            <i class="fa fa-cog"></i>
-                                                            Process request
-                                                        </a>
-
-                                                        <a class="ar-complete-request" href="#" onclick="Complete( [% ar.id %], $(this) ); return false;">
-                                                            <i class="fa fa-check-circle"></i>
-                                                            Complete request
-                                                        </a>
-
-                                                        <a class="ar-cancel-request" href="#" onclick="Cancel( [% ar.id %], $(this) ); return false;">
-                                                            <i class="fa fa-minus-circle"></i>
-                                                            Cancel request
-                                                        </a>
-
-                                                        <a class="ar-print-request" href="#" onclick="PrintSlip('article-request-slip.pl?id=[% ar.id %]'); return false;">
-                                                            <i class="fa fa-print"></i>
-                                                            Print slip
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </div>
+                                        <div class="dropdown">
+                                            [% PROCESS actions id_arg=ar.id pull_right='pull-right' aria_menu='ar-actions' %]
+                                        </div>
                                         </td>
                                     </tr>
                                 [% END %]
                         <table id="article-requests-processing-table">
                             <thead>
                                 <tr>
+                                    <th/>
                                     <th class="ar-title">Title</th>
                                     <th class="ar-request">Requested article</th>
                                     <th class="ar-collection">Collection</th>
 
                              <tbody>
                                 <tr class="ar-processing-none">
-                                    <td colspan="11">
+                                    <td colspan="12">
                                         There are no article requests in processing at this time.
                                     </td>
                                 </tr>
 
                                 [% FOREACH ar IN article_requests_processing %]
                                     <tr class="ar-row ar-processing">
+                                        <td><input type="checkbox" reqid="[% ar.id %]"/></td>
                                         <td class="ar-title">
                                             <p>
                                                 <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% ar.biblionumber %]">
                                         </td>
                                         <td class="ar-date"><span title="[% ar.created_on %]">[% ar.created_on | $KohaDates %]</span></td>
                                         <td class="ar-actions">
-                                            <div class="dropdown">
-                                                <a class="btn btn-default btn-xs dropdown-toggle" id="ar-actions" role="button" data-toggle="dropdown" href="#">
-                                                    Actions <b class="caret"></b>
-                                                </a>
-
-                                                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="ar-actions">
-                                                    <li>
-                                                        <a href="#" onclick="Complete( [% ar.id %], $(this) ); return false;">
-                                                            <i class="icon-ok-circle"></i>
-                                                            Complete request
-                                                        </a>
-
-                                                        <a href="#" onclick="Cancel( [% ar.id %], $(this) ); return false;">
-                                                            <i class="icon-remove-circle"></i>
-                                                            Cancel request
-                                                        </a>
-
-                                                        <a href="#" onclick="PrintSlip('article-request-slip.pl?id=[% ar.id %]'); return false;">
-                                                            <i class="icon-print"></i>
-                                                            Print slip
-                                                        </a>
-                                                    </li>
-                                                </ul>
-                                            </div>
+                                        <div class="dropdown">
+                                            [% PROCESS actions id_arg=ar.id pull_right='pull-right' aria_menu='ar-actions' %]
+                                        </div>
                                         </td>
                                     </tr>
                                 [% END %]
                             </tbody>
                         </table>
-
+                    </div>
+                    <br/>
+                    <div class="table_controls row" id="table_controls">
+                        <a href="#" class="SelectAll"><i class="fa fa-check"></i> Select all</a> <a href="#" class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
+                        [% PROCESS actions id_arg=0 pull_right='' aria_menu='table_controls' %]
+                    </div>
                 </div>
             </div>
         </div>
             [% IF article_requests_processing.count %]
                 $(".ar-processing-none").hide();
             [% END %]
+
+            $(".SelectAll").on("click", function(e) {
+                e.preventDefault();
+                if( $('table#article-requests-pending-table').is(":visible") )
+                    var table='article-requests-pending-table';
+                else table='article-requests-processing-table';
+                $("table#"+table+" input[type='checkbox']").prop('checked', true);
+            });
+            $(".ClearAll").on("click", function(e) {
+                e.preventDefault();
+                if( $('table#article-requests-pending-table').is(":visible") )
+                    var table='article-requests-pending-table';
+                else table='article-requests-processing-table';
+                $("table#"+table+" input[type='checkbox']").prop('checked', false);
+            });
+            $("a.ar-actions").on('click', function(e) {
+                // Hide menu option ?
+                if( $('table#article-requests-processing-table').is(":visible") )
+                    $('a.ar-process-request').hide();
+                else $('a.ar-process-request').show();
+            });
         });
 
-        function PrintSlip(link) {
+        function HandleMulti( fnHandler, id, a ) {
+            if( id !== 0 ) { fnHandler( id, a ); return; }
+            if( $('table#article-requests-pending-table').is(":visible") )
+                var table='article-requests-pending-table';
+            else table='article-requests-processing-table';
+            $("table#"+table+" input[type='checkbox']:checked").each(function() {
+                fnHandler( $(this).attr('reqid'), $(this).closest('tr').find('td.ar-actions div a') );
+            });
+        }
+
+        function PrintSlip(id, a) {
+            var link = 'article-request-slip.pl?id='+id;
             window.open(link, 'popup', 'width=600,height=400,resizable=1,toolbar=0,scrollbars=1,top');
         }
 
                 return;
             }
 
-            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/spinner-small.gif"/>');
-            a.closest('div').hide();
+            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/loading-small.gif"/>').find('div.dropdown').hide();
             $.ajax({
                 type: "POST",
                 url: '/cgi-bin/koha/svc/article_request',
         function Process( id, a ) {
             var table_row = a.closest('tr').clone();
             table_row.find('.ar-process-request').remove();
+            table_row.find('input[type="checkbox"]').prop('checked', false);
 
-            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/spinner-small.gif"/>');
-            a.closest('div').hide();
+            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/loading-small.gif"/>').find('div.dropdown').hide();
             $.ajax({
                 type: "POST",
                 url: '/cgi-bin/koha/svc/article_request',
         }
 
         function Complete( id, a ) {
-            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/spinner-small.gif"/>');
-            a.closest('div').hide();
+            a.closest('td').prepend('<img src="[% interface %]/[% theme %]/img/loading-small.gif"/>').find('div.dropdown').hide();
             $.ajax({
                 type: "POST",
                 url: '/cgi-bin/koha/svc/article_request',