From e5dc48cba63ee15268696e89174b16402627d8d4 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 18 Feb 2021 16:37:37 +0000
Subject: [PATCH] Bug 27725: Use JavaScript to set history state during patron
 search

This patch modifies the patron search page so that clicks on the "Browse
by last name" letters add an entry to the browser history, allowing the
user to click back and forth from results while preserving their search.

To test, apply the patch and go to Patrons in the staff interface.

- Click one of the "Browse by last name" letters.
- The table of search results should load the correct data.
- In the browser's location bar you should see a query string added to
  the URL, e.g. /cgi-bin/koha/members/members-home.pl?firstletter=Q
- Click another letter.
- Click the back button. You should be returned to the search results
  for your first letter choice.
- Clicking the forward button should work correctly as well.
- Other patron searches (header search, sidebar search) should continue
  to work as expected.
---
 .../prog/en/modules/members/member.tt              | 28 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
index 2ab9c823a2..90158179f1 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
@@ -195,6 +195,13 @@
     [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% Asset.js("js/members-menu.js") | $raw %]
     <script>
+        var dtMemberResults;
+        var search = 1;
+        /* popstate event triggered by forward and back button. Need to refresh search */
+        window.addEventListener('popstate', (event) => {
+            getSearchByLocation();
+        });
+
         $(document).ready(function() {
             $('#merge-patrons').prop('disabled', true);
             $('#memberresultst').on('change', 'input.selection', function() {
@@ -312,11 +319,6 @@
             });
             $("#searchform").on("submit", filter);
 
-        });
-
-        var dtMemberResults;
-        var search = 1;
-        $(document).ready(function() {
             [% IF searchmember %]
                 $("#searchmember_filter").val("[% searchmember | html %]");
             [% END %]
@@ -461,8 +463,21 @@
                 }
             }, columns_settings);
             update_searched();
+            /* Initial page load doesn't trigger the popstate event, so we explicitly call this */
+            getSearchByLocation();
+
         });
 
+        function getSearchByLocation(){
+            if( location.search != ""){
+                var params = new URLSearchParams( location.search );
+                var firstletter = params.get("firstletter");
+                if( firstletter ){
+                    filterByFirstLetterSurname( firstletter );
+                }
+            }
+        }
+
         // Update the string "Results found ..."
         function update_searched(){
             var searched = $("#searchfieldstype_filter").find("option:selected").text();
@@ -502,6 +517,8 @@
             $("#firstletter_filter").val('');
             $("#searchmember_filter").val('');
             if(redraw) {
+                /* remove any search string added by firstletter search */
+                history.pushState( {}, null, window.location.href.split("?" )[0]);
                 search = 1;
                 $("#searchresults").show();
                 dtMemberResults.fnDraw();
@@ -512,6 +529,7 @@
         function filterByFirstLetterSurname(letter) {
             clearFilters(false);
             $("#firstletter_filter").val(letter);
+            history.pushState( null, null, "?firstletter=" + letter );
             update_searched();
             search = 1;
             $("#searchresults").show();
-- 
2.11.0