Attachment 125683 Details for Bug 27725 – Bug 27725: Use JavaScript to set history state during patron search

[patch] Bug 27725: Use JavaScript to set history state during patron search

Bug-27725-Use-JavaScript-to-set-history-state-duri.patch (text/plain), 5.97 KB, created by Katrin Fischer on 2021-10-03 14:35:37 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2021-10-03 14:35:37 UTC

Size: 5.97 KB

patch

obsolete

>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

Actions: View | Diff | Splinter Review

Attachments on bug 27725: 117009 | 117123 | 123881 | 123913 | 125683 | 125821