From 78d9f1cabe5e0ac62f3ad8ef645b199aaa014a17 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 18 Jun 2024 18:47:08 +0000
Subject: [PATCH] Bug 7508: Collapsable items on items tab

Since we recently updated the patron entry form in the staff interface
to have more visibly-collapsible sections I thought there might be
interest in picking up this old bug.

The patch implements collapsible sections on the item detail page,
allowing the user to hide sections by clicking the item barcode header.
The patch includes relocation of some JS code from the authority and
MARC editors into the global JS file. This is the code that helps jump
the user to a certain scroll point on the page.

To test, apply the patch and clear your browser cache.

- In the staff interface, locate a bibliographic record with items and
  view the detail page.
- Click the "Items" tab in the sidebar.
- On the item detail page, each section should have an icon indicating
  that they are expanded. Hovering your mouse over the section heading
  should highlight the clickable area.
- Test that each section collapses correctly and that the next section
  is moved into view.

- Go to Cataloging -> New record. Test that the links to specific tags
  under the main tab bar still work to jump you to the correct part of
  the page.
- Go to Authorities -> New authority and perform the same test.

Sponsored-by: Athens County Public Libraries
---
 .../en/modules/authorities/authorities.tt     | 21 -------
 .../prog/en/modules/catalogue/moredetail.tt   | 56 +++++++++++++++++--
 .../prog/en/modules/cataloguing/addbiblio.tt  | 20 -------
 .../intranet-tmpl/prog/js/staff-global.js     | 20 +++++++
 4 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
index 230b683801..80b9f55b0c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
@@ -186,27 +186,6 @@
         $(".tag_anchors_" + tabid ).addClass("tab_selected").show();
     }
 
-    /**
-    * Returns a roughly ideal position to scroll an element into view
-    * @param {string} target - The HTML id of the element to scroll into view
-    * @param {string} elemid - The HTML id of the element which might obscure
-    *                          the view of the target element e.g. a floating toolbar
-    * @return {number} - The y-coordinate to pass to window.scrollTo()
-    */
-    function getScrollto( target, elemid ){
-        var dest = $("#" + target );
-        var yoffset = dest.offset();
-
-        if( elemid != "" ){
-            var element = $("#" + elemid );
-            var elem_height = element.outerHeight();
-        } else {
-            elem_height = 0;
-        }
-        return yoffset.top - elem_height - 20;
-    }
-
-
     /**
     * check if z3950 mandatories are set or not
     */
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
index 6ef020cecb..817eb604a5 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
@@ -15,7 +15,31 @@
     [% t("Koha") | html %]
 [% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<style>.listgroup .rows{margin-left:1em;}</style>
+[% FILTER collapse %]
+    <style>
+        .listgroup .rows{
+            margin-left: 1em;
+        }
+        h3 {
+            background-color: #FFF;
+            border: 1px solid #FFF;
+            margin-bottom: 0;
+            padding: 1rem;
+        }
+        h3:hover {
+            border: 1px solid #6FAF44;
+            cursor: pointer;
+        }
+        h3 i {
+            color: #4C7AA8;
+            font-size: 80%;
+            padding-right: .2rem;
+        }
+        h3.collapsed i.fa.fa-caret-down::before {
+           content: "\f0da";
+        }
+    </style>
+[% END %]
 </head>
 <body id="catalog_moredetail" class="catalog">
 [% USE KohaDates %]
@@ -108,6 +132,10 @@
                     [% END %]
 
                     [% FOREACH ITEM_DAT IN ITEM_DATA %]
+                        <h3 id="item[% ITEM_DAT.itemnumber | html %]" class="expanded">
+                            <i class="fa fa-caret-down" title="Collapse this section"></i>
+                            Barcode [% ITEM_DAT.barcode | html %]  [% IF not_for_loan %][% not_for_loan_description | html %] [% END %]
+                        </h3>
                         <div class="page-section clearfix">
                             [% SET not_for_loan = 0 %]
                             [% IF ITEM_DAT.notforloan || ITEM_DAT.effective_itemtype.notforloan %]
@@ -115,9 +143,6 @@
                                 [% SET not_for_loan_description = AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.notforloan', authorised_value => item.notforloan ) %]
                             [% END %]
                             <div class="listgroup">
-                                <h3 id="item[% ITEM_DAT.itemnumber | html %]">
-                                    Barcode [% ITEM_DAT.barcode | html %]  [% IF not_for_loan %][% not_for_loan_description | html %] [% END %]
-                                </h3>
 
                                 <h4>
                                     Item information
@@ -533,8 +558,27 @@
         [% Asset.js("js/modals/add_catalog_concern.js") | $raw %]
     [% END %]
     <script>
-        var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
-        browser.show();
+        $(document).ready(function(){
+            var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
+            browser.show();
+            $(".collapsed, .expanded").on("click",function(e){
+                e.preventDefault();
+                var linkid = this.id;
+                window.scrollTo( 0, getScrollto( linkid, "" ) );
+                togglePanel( $(this) );
+            });
+        });
+
+        function togglePanel( node ){
+            var panel = node.next( ".page-section" );
+            if(panel.is(":visible")){
+                node.addClass("collapsed").removeClass("expanded").attr("title", __("Click to expand this section") );
+                panel.hide();
+            } else {
+                node.addClass("expanded").removeClass("collapsed").attr("title", __("Click to collapse this section") );
+                panel.show();
+            }
+        }
     </script>
 [% END %]
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
index 85b41b2daf..06dc78a93b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
@@ -219,26 +219,6 @@
         $(".tag_anchors_" + tabid ).addClass("tab_selected").show();
     }
 
-    /**
-    * Returns a roughly ideal position to scroll an element into view
-    * @param {string} target - The HTML id of the element to scroll into view
-    * @param {string} elemid - The HTML id of the element which might obscure
-    *                          the view of the target element e.g. a floating toolbar
-    * @return {number} - The y-coordinate to pass to window.scrollTo()
-    */
-    function getScrollto( target, elemid ){
-        var dest = $("#" + target );
-        var yoffset = dest.offset();
-
-        if( elemid != "" ){
-            var element = $("#" + elemid );
-            var elem_height = element.outerHeight();
-        } else {
-            elem_height = 0;
-        }
-        return yoffset.top - elem_height - 20;
-    }
-
     function redirect(dest){
         $("#redirect").attr("value",dest);
         return Check();
diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index ceaf8b8d57..813b6d6223 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -879,3 +879,23 @@ function toggleBtnIcon( element, start, replacement ){
         });
     });
 }
+
+/**
+* Returns a roughly ideal position to scroll an element into view
+* @param {string} target - The HTML id of the element to scroll into view
+* @param {string} elemid - The HTML id of the element which might obscure
+*                          the view of the target element e.g. a floating toolbar
+* @return {number} - The y-coordinate to pass to window.scrollTo()
+*/
+function getScrollto( target, elemid ){
+    var dest = $("#" + target );
+    var yoffset = dest.offset();
+
+    if( elemid != "" ){
+        var element = $("#" + elemid );
+        var elem_height = element.outerHeight();
+    } else {
+        elem_height = 0;
+    }
+    return yoffset.top - elem_height - 20;
+}
-- 
2.39.2