From 88b99dca3d34d74a967d0a97db577d1c1f39ed71 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.

EDIT: Clear single-letter querystring history item if only one result
was returned.
---
 .../prog/en/modules/members/member.tt              | 30 ++++++++++++++++++----
 1 file changed, 25 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..5cd93fc367 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 %]
@@ -419,6 +421,8 @@
                             // redirect if there is only 1 result.
                             if ( json.aaData.length == 1 ) {
                                 var borrowernumber = json.aaData[0].borrowernumber;
+                                /* remove any search string added by firstletter search since only one result was returned */
+                                history.pushState( {}, null, window.location.href.split("?" )[0]);
                                 document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
                                 return false;
                             }
@@ -461,8 +465,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 +519,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 +531,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