Bug 29713: Make item table when placing an item level hold sortable

This patch modifies the holds page in the OPAC so that users selecting a
specific item to place a hold on can sort the table of items.

This patch also removes some obsolete JavaScript left over from before
Flatpickr.

To test, apply the patch and go to Administration -> Circulation and
fine rules to make sure at least one item type in your system has
"OPAC item level holds" set to "allow."

- Log in to the OPAC as a user who can place holds.
- Search the catalog for items which will accept item-level holds.
- Place a hold on one of the results, and click the "Show more options"
  link on the holds page.
  - Check the "specific item" radio button.
  - A table of items should be displayed. Confirm that the table is
    sortable.
  - The first entry in the table should be selected.
  - Perform the same test when placing a hold on multiple titles.
    Confirm that each table of items is sortable.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
index 896cf88..45e7b20 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
@@ -346,7 +346,7 @@
 
                                             [% IF bibitemloo.itemholdable %]
                                                 <div id="copiesrow_[% bibitemloo.biblionumber | html %]" class="copiesrow">
-                                                <table class="table table-bordered table-striped">
+                                                <table class="table table-bordered table-striped itemstable">
                                                     <caption>Select a specific item:</caption>
                                                     <thead>
                                                         <tr>
@@ -380,7 +380,7 @@
                                                             [% ELSE %]
                                                                 <tr class="holdable">
                                                             [% END %]
-                                                                    <td class="copynumber">
+                                                                    <td class="copynumber" data-order="[% itemLoo.copynumber | html %]">
                                                                         <input type="radio" class="checkitem checkitem_[% bibitemloo.biblionumber | html %]" name="checkitem_[% bibitemloo.biblionumber | html %]" value="[% itemLoo.itemnumber | html %]" />
                                                         [% ELSE %]
                                                             [% SET unholdable_items = 1 %]
@@ -495,21 +495,10 @@
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
 [% INCLUDE 'calendar.inc' %]
+[% INCLUDE 'datatables.inc' %]
 <script>
     var MSG_NO_ITEM_SELECTED = _("Expecting a specific item selection.");
 
-        // Clear the contents of an input field
-        $(".clearfield").on("click",function(e){
-            $(this).closest("td").find("input").val("");
-            e.preventDefault();
-        });
-
-    // Select the first item available
-    function select_first_available(id){
-        var radios = $("input:radio[name='checkitem_" + id + "']");
-        $(radios).first().attr("checked", "checked");
-    }
-
     $(document).ready(function() {
 
         $(".toggle_unholdable").click(function(e){
@@ -602,12 +591,6 @@
         // onload, selectany is checked
         $(".selectany").attr("checked", "checked");
 
-        // If the user is *allowed* to choose a specific item
-        // The first one is preselected
-        $(".copiesrow table").each(function(){
-            var id = suffixOf($(this).closest('div').attr("id"), "_");
-            select_first_available(id);
-        });
 
         // On confirmsjs change
         $(".confirmjs").change(function(){
@@ -701,7 +684,14 @@
 
             return true;
         });
-
+        $(".itemstable").each(function(){
+            $(this).DataTable({
+                dom: "t",
+                initComplete: function() {
+                    this.find("input:radio").first().prop("checked", true );
+                }
+            });
+        });
     });
 </script>
 [% END %]