From 37abbcaf4cafb0e4d9a8c9f04f862a39a567d191 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 1 Feb 2022 16:34:38 +0000
Subject: [PATCH] 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.

Note: This patch includes some whitespace changes, so diff accordingly.

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.
- Perform the same test when placing a hold on multiple titles. Confirm
  that each table of items is sortable.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../bootstrap/en/modules/opac-reserve.tt      | 193 +++++++++---------
 1 file changed, 101 insertions(+), 92 deletions(-)

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 2d84cdffb44..424a26bac19 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
@@ -345,112 +345,115 @@
                                             [% IF bibitemloo.itemholdable %]
                                                 <table class="copiesrow table table-bordered table-striped" id="copiesrow_[% bibitemloo.biblionumber | html %]">
                                                     <caption>Select a specific item:</caption>
-                                                    <tr>
-                                                        <th>Copy number</th>
-                                                        [% IF ( item_level_itypes ) %]
-                                                            <th>Item type</th>
-                                                        [% END %]
-                                                        <th>Barcode</th>
-                                                        [% UNLESS ( singleBranchMode ) %]
-                                                            <th>Home library</th>
-                                                            <th>Last location</th>
-                                                        [% END %]
-                                                        [% IF ( itemdata_ccode ) %]
-                                                            <th>Collection</th>
-                                                        [% END %]
-                                                        <th>Call number</th>
-                                                        [% IF ( itemdata_enumchron ) %]
-                                                            <th>Vol info</th>
-                                                        [% END %]
-                                                        <th>Notes</th>
-                                                        <th>Information</th>
-                                                    </tr>
-
-                                                    [% FOREACH itemLoo IN bibitemloo.itemLoop %]
-                                                        <tr class="[% itemLoo.backgroundcolor | html %]">
-                                                            <td class="copynumber">
-                                                                [% IF ( itemLoo.available ) %]
-                                                                    <input type="radio" class="checkitem checkitem_[% bibitemloo.biblionumber | html %]" name="checkitem_[% bibitemloo.biblionumber | html %]" value="[% itemLoo.itemnumber | html %]" />
-                                                                [% ELSE %]
-                                                                    <input disabled="disabled" type="radio" aria-label="Cannot be put on hold" class="checkitem" name="checkitem" value="[% itemLoo.itemnumber | html %]"
-                                                                           style="display:none;" />
-                                                                    <i class="fa fa-remove danger" aria-hidden="true" title="Cannot be put on hold"></i>
-                                                                [% END %]
-
-                                                                [% IF ( itemLoo.copynumber ) %]
-                                                                    [% itemLoo.copynumber | html %]
-                                                                [% END %]
-                                                            </td>
-
+                                                    <thead>
+                                                        <tr>
+                                                            <th>Copy number</th>
                                                             [% IF ( item_level_itypes ) %]
-                                                                <td class="itype">
-                                                                    [% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
-                                                                        [% IF ( itemLoo.imageurl ) %]
-                                                                            <img src="[% itemLoo.imageurl | html %]" alt="" />
-                                                                        [% END %]
-                                                                    [% END %]
-                                                                    [% itemLoo.translated_description | html %]
-                                                                </td>
+                                                                <th>Item type</th>
                                                             [% END %]
-
-                                                            <td class="barcode">[% itemLoo.barcode | html %]</td>
+                                                            <th>Barcode</th>
                                                             [% UNLESS ( singleBranchMode ) %]
-                                                                <td class="homebranch">[% Branches.GetName( itemLoo.homeBranchName ) | html %]</td>
-                                                                <td class="holdingbranch">[% Branches.GetName( itemLoo.holdingBranchName ) | html %]</td>
+                                                                <th>Home library</th>
+                                                                <th>Last location</th>
                                                             [% END %]
                                                             [% IF ( itemdata_ccode ) %]
-                                                                <td class="ccode"> [% IF ( itemLoo.ccode ) %][% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => itemLoo.ccode, opac => 1 ) | html %][% END %]</td>
+                                                                <th>Collection</th>
                                                             [% END %]
-                                                            <td class="call_no">[% itemLoo.callNumber | html %]</td>
+                                                            <th>Call number</th>
                                                             [% IF ( itemdata_enumchron ) %]
-                                                                <td class="vol_info">[% itemLoo.enumchron | html %]</td>
+                                                                <th>Vol info</th>
                                                             [% END %]
-                                                            <td class="itemnotes">
-                                                                [% itemLoo.itemnotes | html %]
-                                                            </td>
-                                                            <td class="information">
-                                                                [% IF ( itemLoo.dateDue ) %]
-                                                                    <span class="checkedout">Due [% itemLoo.dateDue | html %]</span>
-                                                                [% ELSIF ( itemLoo.transfertwhen ) %]
-                                                                    <span class="intransit">In transit from [% Branches.GetName( itemLoo.transfertfrom ) | html %] to [% Branches.GetName( itemLoo.transfertto ) | html %] since [% itemLoo.transfertwhen | html %]</span>
-                                                                [% END %]
+                                                            <th>Notes</th>
+                                                            <th>Information</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                        [% FOREACH itemLoo IN bibitemloo.itemLoop %]
+                                                            <tr class="[% itemLoo.backgroundcolor | html %]">
+                                                                <td class="copynumber" data-order="[% itemLoo.copynumber | html %]">
+                                                                    [% IF ( itemLoo.available ) %]
+                                                                        <input type="radio" class="checkitem checkitem_[% bibitemloo.biblionumber | html %]" name="checkitem_[% bibitemloo.biblionumber | html %]" value="[% itemLoo.itemnumber | html %]" />
+                                                                    [% ELSE %]
+                                                                        <input disabled="disabled" type="radio" aria-label="Cannot be put on hold" class="checkitem" name="checkitem" value="[% itemLoo.itemnumber | html %]"
+                                                                            style="display:none;" />
+                                                                        <i class="fa fa-remove danger" aria-hidden="true" title="Cannot be put on hold"></i>
+                                                                    [% END %]
+
+                                                                    [% IF ( itemLoo.copynumber ) %]
+                                                                        [% itemLoo.copynumber | html %]
+                                                                    [% END %]
+                                                                </td>
 
-                                                                [% IF ( itemLoo.message ) %]
-                                                                    <span class="lost">Unavailable (lost or missing)</span>
+                                                                [% IF ( item_level_itypes ) %]
+                                                                    <td class="itype">
+                                                                        [% UNLESS ( Koha.Preference('OpacNoItemTypeImages') ) %]
+                                                                            [% IF ( itemLoo.imageurl ) %]
+                                                                                <img src="[% itemLoo.imageurl | html %]" alt="" />
+                                                                            [% END %]
+                                                                        [% END %]
+                                                                        [% itemLoo.translated_description | html %]
+                                                                    </td>
                                                                 [% END %]
 
-                                                                [% IF ( itemLoo.notforloan ) %]
-                                                                    <span class="notforloan">Not for loan ([% itemLoo.notforloanvalue | html %])</span>
+                                                                <td class="barcode">[% itemLoo.barcode | html %]</td>
+                                                                [% UNLESS ( singleBranchMode ) %]
+                                                                    <td class="homebranch">[% Branches.GetName( itemLoo.homeBranchName ) | html %]</td>
+                                                                    <td class="holdingbranch">[% Branches.GetName( itemLoo.holdingBranchName ) | html %]</td>
+                                                                [% END %]
+                                                                [% IF ( itemdata_ccode ) %]
+                                                                    <td class="ccode"> [% IF ( itemLoo.ccode ) %][% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => itemLoo.ccode, opac => 1 ) | html %][% END %]</td>
                                                                 [% END %]
+                                                                <td class="call_no">[% itemLoo.callNumber | html %]</td>
+                                                                [% IF ( itemdata_enumchron ) %]
+                                                                    <td class="vol_info">[% itemLoo.enumchron | html %]</td>
+                                                                [% END %]
+                                                                <td class="itemnotes">
+                                                                    [% itemLoo.itemnotes | html %]
+                                                                </td>
+                                                                <td class="information">
+                                                                    [% IF ( itemLoo.dateDue ) %]
+                                                                        <span class="checkedout">Due [% itemLoo.dateDue | html %]</span>
+                                                                    [% ELSIF ( itemLoo.transfertwhen ) %]
+                                                                        <span class="intransit">In transit from [% Branches.GetName( itemLoo.transfertfrom ) | html %] to [% Branches.GetName( itemLoo.transfertto ) | html %] since [% itemLoo.transfertwhen | html %]</span>
+                                                                    [% END %]
 
-                                                                [% IF ( itemLoo.reservedate ) %]
-                                                                    <span class="waiting">
-                                                                        [% IF ( itemLoo.waitingdate ) %]
-                                                                            Waiting
-                                                                        [% ELSE %]
-                                                                            On hold
-                                                                        [% END %]
-                                                                        for patron
-                                                                        [% IF ( itemLoo.waitingdate ) %]
-                                                                            at
-                                                                        [% ELSE %]
-                                                                            expected at
-                                                                        [% END %]
-                                                                        [% itemLoo.ExpectedAtLibrary | html %] since
-                                                                        [% IF ( itemLoo.waitingdate ) %]
-                                                                            [% itemLoo.waitingdate | $KohaDates %]
-                                                                        [% ELSE %]
-                                                                            [% IF ( itemLoo.reservedate ) %]
-                                                                                [% itemLoo.reservedate | html %]
+                                                                    [% IF ( itemLoo.message ) %]
+                                                                        <span class="lost">Unavailable (lost or missing)</span>
+                                                                    [% END %]
+
+                                                                    [% IF ( itemLoo.notforloan ) %]
+                                                                        <span class="notforloan">Not for loan ([% itemLoo.notforloanvalue | html %])</span>
+                                                                    [% END %]
+
+                                                                    [% IF ( itemLoo.reservedate ) %]
+                                                                        <span class="waiting">
+                                                                            [% IF ( itemLoo.waitingdate ) %]
+                                                                                Waiting
+                                                                            [% ELSE %]
+                                                                                On hold
                                                                             [% END %]
-                                                                        [% END %].
-                                                                    </span>
-                                                                [% ELSE %]
-                                                                    <span class="notonhold">Not on hold</span>
-                                                                [% END # / IF ( itemLoo.reservedate )%]
-                                                            </td>
-                                                        </tr>
-                                                    [% END # / FOREACH itemLoo IN bibitemloo.itemLoop%]
+                                                                            for patron
+                                                                            [% IF ( itemLoo.waitingdate ) %]
+                                                                                at
+                                                                            [% ELSE %]
+                                                                                expected at
+                                                                            [% END %]
+                                                                            [% itemLoo.ExpectedAtLibrary | html %] since
+                                                                            [% IF ( itemLoo.waitingdate ) %]
+                                                                                [% itemLoo.waitingdate | $KohaDates %]
+                                                                            [% ELSE %]
+                                                                                [% IF ( itemLoo.reservedate ) %]
+                                                                                    [% itemLoo.reservedate | html %]
+                                                                                [% END %]
+                                                                            [% END %].
+                                                                        </span>
+                                                                    [% ELSE %]
+                                                                        <span class="notonhold">Not on hold</span>
+                                                                    [% END # / IF ( itemLoo.reservedate )%]
+                                                                </td>
+                                                            </tr>
+                                                        [% END # / FOREACH itemLoo IN bibitemloo.itemLoop%]
+                                                    </tbody>
                                                 </table> <!-- / #copiesrow_[% bibitemloo.biblionumber | html %] -->
                                             [% END # / IF ( bibitemloo.itemholdable )%]
                                         </div> <!-- / #hold-options-[% bibitemloo.biblionumber | html %] -->
@@ -472,6 +475,7 @@
 [% INCLUDE 'opac-bottom.inc' %]
 [% BLOCK jsinclude %]
 [% INCLUDE 'calendar.inc' %]
+    [% INCLUDE 'datatables.inc' %]
 <script>
     var MSG_NO_ITEM_SELECTED = _("Expecting a specific item selection.");
 
@@ -673,6 +677,11 @@
             return true;
         });
 
+        $(".copiesrow").each(function(){
+            $(this).DataTable({
+                dom: "t"
+            });
+        });
     });
 </script>
 [% END %]
-- 
2.25.1