From 9b058f499b0e6cdd5580c401e5d660007f909e37 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.

EDIT 2: Fixed handling of history state changes so that forward and back
buttons work correctly.

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

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
---
 .../prog/en/modules/members/member.tt              | 50 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 9 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 f3c14cc6fc..ff2d02a323 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
@@ -218,6 +218,13 @@
     [% Asset.js("js/members-menu.js") | $raw %]
     <script>
         var singleBranchMode = '[% singleBranchMode | html %]';
+        var dtMemberResults;
+        var search = 1;
+        /* popstate event triggered by forward and back button. Need to refresh search */
+        window.addEventListener('popstate', (event) => {
+            getSearchByLocation( false );
+        });
+
         $(document).ready(function() {
             $('#merge-patrons').prop('disabled', true);
             $('#memberresultst').on('change', 'input.selection', function() {
@@ -319,7 +326,7 @@
             });
             $(".filterByLetter").on("click",function(e){
                 e.preventDefault();
-                filterByFirstLetterSurname($(this).text());
+                filterByFirstLetterSurname( $(this).text(), true );
             });
             $("#select_all").on("click",function(e){
                 e.preventDefault();
@@ -335,11 +342,6 @@
             });
             $("#searchform").on("submit", filter);
 
-        });
-
-        var dtMemberResults;
-        var search = 1;
-        $(document).ready(function() {
             [% IF searchmember %]
                 $("#searchmember_filter").val("[% searchmember | html %]");
             [% END %]
@@ -451,6 +453,8 @@
                             // redirect if there is only 1 result.
                             if ( json.aaData.length == 1 ) {
                                 var borrowernumber = json.aaData[0].borrowernumber;
+                                /* Overwrite history state of firstletter search since only one result was returned; This prevents a loop upon clicking back */
+                                history.replaceState( {}, null, window.location.href.split("?" )[0]);
                                 document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
                                 return false;
                             }
@@ -501,8 +505,30 @@
                 }
             }, columns_settings);
             update_searched();
+            /* Initial page load doesn't trigger the popstate event, so we explicitly call this */
+            getSearchByLocation( false );
+
         });
 
+        function getSearchByLocation( setstate ){
+            /* Check to see if the URL contains a search parameter */
+            if( location.search != ""){
+                var params = new URLSearchParams( location.search );
+                var firstletter = params.get("firstletter");
+                /* Check to see if search is a first letter param */
+                if( firstletter ){
+                    /* Trigger function to return search results by letter */
+                    filterByFirstLetterSurname( firstletter, setstate );
+                }
+            } else {
+                /* No letter search param; Return page to default state with no results */
+                update_searched();
+                search = 0;
+                $("#searchresults").hide();
+                dtMemberResults.fnDraw();
+            }
+        }
+
         // Update the string "Results found ..."
         function update_searched(){
             var searched = $("#searchfieldstype_filter").find("option:selected").text();
@@ -542,16 +568,22 @@
             $("#firstletter_filter").val('');
             $("#searchmember_filter").val('');
             if(redraw) {
-                search = 1;
-                $("#searchresults").show();
+                /* remove any search string added by firstletter search */
+                history.pushState( {}, null, window.location.href.split("?" )[0]);
+                update_searched();
+                search = 0;
+                $("#searchresults").hide();
                 dtMemberResults.fnDraw();
             }
         }
 
         // User has clicked on a letter
-        function filterByFirstLetterSurname(letter) {
+        function filterByFirstLetterSurname( letter, setstate ) {
             clearFilters(false);
             $("#firstletter_filter").val(letter);
+            if( setstate ){
+                history.pushState( null, null, "?firstletter=" + letter );
+            }
             update_searched();
             search = 1;
             $("#searchresults").show();
-- 
2.11.0