From 40560b571d40c7e287c5ec6cee64044c0b347200 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 6 Dec 2023 17:26:27 +0000
Subject: [PATCH] Bug 35511: Add visual indicators of patron edit form
 collapsible sections

This patch updates CSS and markup in the patron add/edit form so that
there is better visual indication that sections can be collapsed by
clicking headings.

The JS function for showing and hiding sections has also been updated to
reduce verbosity.

Unrelated markup change for the sake of accessibility: A <label> has
been added to the "Show collapsed fields" checkbox which is seen when
CollapseFieldsPatronAddForm is active.

To test, apply the patch and go to Patrons -> New patron.

- Each section of the form should have an arrow indicator by the section
  heading indicating whether it is expanded or collapsed.
- Mousing over the heading should show a border to help show the
  clickable region.
- Clicking the header should collapse the section and the arrow
  indicator should change to reflect that the section is collapsed.
- Go to Administration -> Sytem preferences and search for
  CollapseFieldsPatronAddForm.
- Make some selections from the dropdown and save your changes.
- Return to the patron entry form and confirm that your selections are
  collapsed by default.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../en/includes/member-alt-address-style.inc  |   5 +-
 .../en/includes/member-alt-contact-style.inc  |   5 +-
 .../en/includes/member-main-address-style.inc |   5 +-
 .../prog/en/modules/members/memberentrygen.tt | 135 +++++++++++++-----
 4 files changed, 112 insertions(+), 38 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
index f358763c3b..5d7fd1b78e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
@@ -2,7 +2,10 @@
 [% USE AuthorisedValues %]
 [% BLOCK 'alt-address-style' %]
     <fieldset class="rows" id="memberentry_address">
-        <legend id="alt_address_lgd">Alternate address</legend>
+        <legend class="expanded" id="alt_address_lgd">
+            <i class="fa fa-caret-down"></i>
+            Alternate address
+        </legend>
         <ol>
             [% IF Koha.Preference( 'AddressFormat' ) %]
                 [% PROCESS "member-alt-address-style-${ Koha.Preference( 'AddressFormat' ) }" %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
index 6211c412af..c2b3cbb092 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
@@ -1,7 +1,10 @@
 [% USE Koha %]
 [% BLOCK 'alt-contact-style' %]
     <fieldset class="rows" id="memberentry_altaddress">
-        <legend id="alt_contact_lgd">Alternate contact</legend>
+        <legend class="expanded" id="alt_contact_lgd">
+            <i class="fa fa-caret-down"></i>
+            Alternate contact
+        </legend>
         <ol>
             [% IF Koha.Preference( 'AddressFormat' ) %]
                 [% PROCESS "member-alt-contact-style-${ Koha.Preference( 'AddressFormat' ) }" %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
index a5c95b9c55..9b82d34c04 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
@@ -2,7 +2,10 @@
 [% USE AuthorisedValues %]
 [% BLOCK 'main-address-style' %]
     <fieldset class="rows" id="memberentry_mainaddress">
-        <legend id="main_address_lgd">Main address</legend>
+        <legend class="expanded" id="main_address_lgd">
+            <i class="fa fa-caret-down"></i>
+            Main address
+        </legend>
         <ol>
             [% IF Koha.Preference( 'AddressFormat' ) %]
                 [% PROCESS "member-main-address-style-${ Koha.Preference( 'AddressFormat' ) }" %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
index f684abe2d2..b5337fc6d4 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
@@ -25,12 +25,27 @@
     [% t("Patrons") | html %] &rsaquo;
     [% t("Koha") | html %]
 [% END %]</title>
-<style>
-legend:hover {
+[% INCLUDE 'doc-head-close.inc' %]
+<style>[% FILTER collapse %]
+fieldset legend {
+    border: 1px solid #FFF;
+    padding: .7em;
+}
+fieldset legend:hover {
+    border: 1px solid #6FAF44;
     cursor: pointer;
 }
-</style>
-[% INCLUDE 'doc-head-close.inc' %]
+
+fieldset legend i {
+    color: #4C7AA8;
+    font-size: 80%;
+    padding-right: .2rem;
+}
+
+legend.collapsed i.fa.fa-caret-down::before {
+    content: "\f0da";
+}
+[% END %]</style>
 </head>
 
 <body id="pat_memberentrygen" class="pat">
@@ -200,7 +215,7 @@ legend:hover {
                         [% SET fieldstohide = Koha.Preference('CollapseFieldsPatronAddForm') %]
                         [% IF Koha.Preference('CollapseFieldsPatronAddForm') %][% UNLESS step %]
                             <p id="selections">
-                                <input type="checkbox" id="toggle_hidden_fields" title="These fields are collapsed by default by the CollapseFieldsPatronAddForm system preference"><strong>Show collapsed fields:</strong>
+                                <label><input type="checkbox" id="toggle_hidden_fields" title="These fields are collapsed by default by the CollapseFieldsPatronAddForm system preference"><strong>Show collapsed fields:</strong></label>
                                 [% FOREACH field IN fieldstohide.split(',') %]
                                     [% SWITCH field %]
                                         [% CASE 'identity' %] <span>Patron identity</span> |
@@ -271,7 +286,10 @@ legend:hover {
                             [% IF ( step_1 ) %]
                                 [% UNLESS notitle && nosurname && nofirstname && nomiddle_name && nodateofbirth && noinitials && noothernames &&nosex && nopronouns %]
                                     <fieldset class="rows" id="memberentry_identity">
-                                        <legend id="identity_lgd">[% IF ( patron_category.category_type == 'I' ) %]<span>Organization [% ELSE %]Patron [% END %]identity</span></legend>
+                                        <legend class="expanded" id="identity_lgd">
+                                            <i class="fa fa-caret-down" title="Collapse this section"></i>
+                                            [% IF ( patron_category.category_type == 'I' ) %]<span>Organization [% ELSE %]Patron [% END %]identity</span>
+                                        </legend>
                                         <ol>
                                             [% UNLESS ( patron_category.category_type == 'I' ) %]
                                                 [% UNLESS notitle %]
@@ -466,7 +484,10 @@ legend:hover {
                                     [% SET possible_relationships = Koha.Preference('borrowerRelationship') %]
                                     <div id="memberentry_guarantor_anchor">
                                         <fieldset id="memberentry_guarantor" class="rows">
-                                            <legend>Patron guarantor</legend>
+                                            <legend class="expanded" id="patron_guarantor_lgd">
+                                                <i class="fa fa-caret-down"></i>
+                                                Patron guarantor
+                                            </legend>
 
                                             <div id="guarantor_relationships">
                                                 [% FOREACH r IN relationships %]
@@ -628,7 +649,10 @@ legend:hover {
 
                                     [% UNLESS nocontactname && nocontactfirstname && norelationship %]
                                         <fieldset class="rows" id="non_patron_guarantor">
-                                            <legend>Non-patron guarantor</legend>
+                                            <legend class="expanded" id="non_patron_guarantor_lgd">
+                                                <i class="fa fa-caret-down"></i>
+                                                Non-patron guarantor
+                                            </legend>
                                             <ol>
                                                 [% UNLESS nocontactname %]
                                                     <li>
@@ -698,7 +722,10 @@ legend:hover {
 
                                 [% UNLESS nophone && nophonepro && nomobile && noemail && noemailpro && nofax %]
                                     <fieldset class="rows" id="memberentry_contact">
-                                        <legend id="contact_lgd">Contact information</legend>
+                                        <legend class="expanded" id="contact_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            Contact information
+                                        </legend>
                                         <ol>
                                             [% UNLESS nophone %]
                                                 <li>
@@ -887,7 +914,10 @@ legend:hover {
                             [% IF ( step_3 ) %]
                                 [% SET autoMemberNum = Koha.Preference('autoMemberNum') %]
                                 <fieldset class="rows" id="memberentry_library_management">
-                                    <legend id="library_management_lgd">Library management</legend>
+                                    <legend class="expanded" id="library_management_lgd">
+                                        <i class="fa fa-caret-down"></i>
+                                        Library management
+                                    </legend>
                                     <ol>
                                         [% UNLESS nocardnumber %]
                                             <li>
@@ -1118,7 +1148,11 @@ legend:hover {
 
                                 [% UNLESS nodateenrolled &&  noopacnote && noborrowernotes %]
                                     <fieldset class="rows" id="memberentry_subscription">
-                                        <legend id="library_setup_lgd">Library setup</legend><ol>
+                                        <legend class="expanded" id="library_setup_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            Library setup
+                                        </legend>
+                                        <ol>
                                         [% UNLESS nodateenrolled %]
                                             <li>
                                                 [% IF ( mandatorydateenrolled ) %]
@@ -1204,7 +1238,10 @@ legend:hover {
 
                                 [% UNLESS nouserid && nopassword && !CanUpdatePasswordExpiration %]
                                     <fieldset class="rows" id="memberentry_userid">
-                                        <legend id="opac_staff_login_lgd">OPAC/Staff interface login</legend>
+                                        <legend class="expanded" id="opac_staff_login_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            OPAC/Staff interface login
+                                        </legend>
                                         <ol>
                                             [% UNLESS nouserid %]
                                                 <li>
@@ -1360,7 +1397,10 @@ legend:hover {
                                 <!--this zones are not necessary in modif mode -->
                                 [% UNLESS ( op == 'add_form' || op == 'duplicate' || ( nogonenoaddress && nolost ) ) %]
                                     <fieldset class="rows" id="memberentry_account_flags">
-                                        <legend id="account_flags_lgd">Patron account flags</legend>
+                                        <legend class="expanded" id="account_flags_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            Patron account flags
+                                        </legend>
                                         <p>Setting a value here will prevent patron from circulating materials and placing holds on the OPAC</p>
                                         <ol class="radio">
                                             [% UNLESS nogonenoaddress %]
@@ -1436,7 +1476,10 @@ legend:hover {
                                     </fieldset> <!-- /#memberentry_account_flags -->
                                 [% END %]
                                     <fieldset class="rows" id="memberentry_restrictions">
-                                        <legend id="restrictions_lgd">Patron restrictions</legend>
+                                        <legend class="expanded" id="restrictions_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            Patron restrictions
+                                        </legend>
                                         [% IF ( patron.restrictions.count ) %]
                                             <table>
                                                 <thead>
@@ -1525,7 +1568,10 @@ legend:hover {
                             [% IF ( step_7 ) %]
                                 [% IF Koha.Preference('HouseboundModule') %]
                                     <fieldset class="rows" id="memberentry_housebound_roles">
-                                        <legend id="housebound_roles">Housebound roles</legend>
+                                        <legend class="expanded" id="housebound_roles">
+                                            <i class="fa fa-caret-down"></i>
+                                            Housebound roles
+                                        </legend>
                                         <ol class="radio">
                                             <li>
                                                 <label class="radio" for="housebound_chooser">
@@ -1566,7 +1612,10 @@ legend:hover {
                                 [% IF Koha.Preference('ExtendedPatronAttributes') %]
                                     [% UNLESS ( no_patron_attribute_types ) %]
                                         <fieldset class="rows" id="memberentry_patron_attributes">
-                                            <legend id="patron_attributes_lgd">Additional attributes and identifiers</legend>
+                                            <legend class="expanded" id="patron_attributes_lgd">
+                                                <i class="fa fa-caret-down"></i>
+                                                Additional attributes and identifiers
+                                            </legend>
                                             <input type="hidden" name="setting_extended_patron_attributes" value="1" />
                                             [% FOREACH pa_loo IN patron_attributes %]
                                                 <ol class="attributes_table">
@@ -1626,7 +1675,10 @@ legend:hover {
                             [% IF ( step_5 ) %]
                                 [% IF ( EnhancedMessagingPreferences ) %]
                                     <fieldset class="rows" id="memberentry_messaging_prefs">
-                                        <legend id="patron_messaging_prefs_lgd">Patron messaging preferences</legend>
+                                        <legend class="expanded" id="patron_messaging_prefs_lgd">
+                                            <i class="fa fa-caret-down"></i>
+                                            Patron messaging preferences
+                                        </legend>
                                         <div id="messaging_prefs_loading" class="form-message" style="display:none">
                                             <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading new messaging defaults
                                         </div>
@@ -1697,92 +1749,105 @@ legend:hover {
             }
         }
         var Sticky;
+
         function showHideFields(){
+            $("#messaging_prefs_loading, #guarantor_template").hide();
             [% UNLESS step == 1 %]
                 [% IF fieldstohide.match('identity') %]
-                    $("#memberentry_identity").find('legend').nextAll().toggle();
+                    togglePanel( $("#identity_lgd") );
                 [% END %]
                 [% IF show_guarantor || guarantor %]
                     [% IF fieldstohide.match('guarantor') %]
-                        $("#memberentry_guarantor").find('legend').nextAll().toggle();
-                        $("#guarantor_template").toggle();
+                        togglePanel( $("#patron_guarantor_lgd") );
                     [% END %]
                     [% IF fieldstohide.match('nonpatron_guarantor') %]
-                        $("#non_patron_guarantor").find('legend').nextAll().toggle();
+                        togglePanel( $("#non_patron_guarantor_lgd") );
                     [% END %]
                 [% END %]
                 [% IF fieldstohide.match('primary_address') %]
-                    $("#memberentry_mainaddress").find('legend').nextAll().toggle();
+                    togglePanel( $("#main_address_lgd") );
                 [% END %]
                 [% IF fieldstohide.match('primary_contact') %]
-                    $("#memberentry_contact").find('legend').nextAll().toggle();
+                    togglePanel( $("#contact_lgd") );
                 [% END %]
             [% END %]
             [% UNLESS step == 6 %]
                 [% IF fieldstohide.match('alt_address') %]
-                    $("#memberentry_address").find('legend').nextAll().toggle();
+                    togglePanel( $("#alt_address_lgd") );
                 [% END %]
             [% END %]
             [% UNLESS step == 2 %]
                 [% IF fieldstohide.match('alt_contact') %]
-                    $("#memberentry_altaddress").find('legend').nextAll().toggle();
+                    togglePanel( $("#alt_contact_lgd") );
                 [% END %]
             [% END %]
             [% UNLESS step == 3 %]
                 [% IF fieldstohide.match('lib_mgmt') %]
-                        $("#memberentry_library_management").find('legend').nextAll().toggle();
+                    togglePanel( $("#library_management_lgd") );
                 [% END %]
                 [% UNLESS nodateenrolled && noopacnote && noborrowernotes %]
                     [% IF fieldstohide.match('lib_setup') %]
-                        $("#memberentry_subscription").find('legend').nextAll().toggle();
+                        togglePanel( $("#library_setup_lgd") );
                     [% END %]
                 [% END %]
                 [% UNLESS nouserid && nopassword %]
                     [% IF fieldstohide.match('login') %]
-                        $("#memberentry_userid").find('legend').nextAll().toggle();
+                        togglePanel( $("#opac_staff_login_lgd") );
                     [% END %]
                 [% END %]
                 [% UNLESS ( op == 'add_form' || op == 'duplicate' ) %]
                     [% IF fieldstohide.match('flags') %]
-                        $("#memberentry_account_flags").find('legend').nextAll().toggle();
+                        togglePanel( $("#account_flags_lgd") );
                     [% END %]
                 [% END %]
                 [% IF fieldstohide.match('debarments') %]
-                    $("#memberentry_restrictions").find('legend').nextAll().toggle();
+                    togglePanel( $("#restrictions_lgd") );
                 [% END %]
             [% END %]
             [% UNLESS step == 7 %]
                 [% IF Koha.Preference('HouseboundModule') %]
                     [% IF fieldstohide.match('housebound') %]
-                        $("#memberentry_housebound_roles").find('legend').nextAll().toggle();
+                        togglePanel( $("#housebound_roles") );
                     [% END %]
                 [% END %]
             [% END %]
             [% UNLESS step == 4 %]
                 [% IF Koha.Preference('ExtendedPatronAttributes') %]
                     [% IF fieldstohide.match('additional') %]
-                        $("#memberentry_patron_attributes").find('legend').nextAll().toggle();
+                        togglePanel( $("#patron_attributes_lgd") );
                     [% END %]
                 [% END %]
             [% END %]
             [% UNLESS step == 5 %]
                 [% IF Koha.Preference('EnhancedMessagingPreferences') %]
                     [% IF fieldstohide.match('messaging') %]
-                        $("#memberentry_messaging_prefs").find('legend').nextAll().toggle();
+                        togglePanel( $("#patron_messaging_prefs_lgd") );
                         $("#messaging_prefs_loading").toggle();
                     [% END %]
                 [% END %]
             [% END %]
         }
 
+        function togglePanel( node ){
+            var panel = node.nextAll();
+            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();
+                panel.find("input, select, textarea").eq(0).focus();
+            }
+        }
+
         $(document).ready(function() {
             showHideFields();
             $("#toggle_hidden_fields").change(function(){
                 showHideFields();
             });
 
-            $("legend").click(function(){
-                $(this).nextAll().toggle();
+            $(".collapsed,.expanded").on("click",function(){
+                togglePanel( $(this) );
                 $("#messaging_prefs_loading").hide();
                 $("#guarantor_template").hide();
             });
-- 
2.39.5