From a027cffcf40bbac85d84e92e8316ffa121da7fa6 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 28 Jan 2022 17:14:15 +0000
Subject: [PATCH] Bug 29971: Remember selections across patron search pages

This patch modifies the patron search results page to enable checkbox
selections to be remembered in the browser's localStorage. This allows
checkbox selections to persist while navigating through multiple pages
of search results or even across multiple different searches.

Once selected, these values can be added to a patron list or submitted
for merging. Selections can be cleared manually and will be
automatically be removed upon logout.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the staff interface perform a patron search in the Patrons module
  which will return multiple pages of results..
- Check checkboxes next to several patrons.
  - After one checkbox is checked the "Add to patron list" button should
    be enabled.
  - After more than one checkbox is checked the "Merge selected patrons"
    button should be enabled.
- A box should appear in the toolbar above the search results, "Patrons
  selected: X"
- Navigate to another page of results. Check more checkboxes. The
  "Patrons selected" information should be updated.
- Return to the first page of results. Your original selections should
  still be checked.
- Test that the correct set of patrons is used when clicking "Merge
  selected patrons" or when using "Add to patron list."
- Click the "Clear" button in the selections information box. Checkboxes
  should be cleared on every page of results you previously checked.
  - The "Add to patron list" and "Merge selected patrons" buttons should
    become disabled.
- After making several selections, log out of the staff interface and
  log back in, returning to the same patron search. Your selections
  should have been forgotten.

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/css/src/staff-global.scss            |  20 +++
 .../prog/en/includes/patron-search.inc        |   5 +-
 .../prog/en/modules/members/member.tt         | 128 +++++++++++++-----
 .../intranet-tmpl/prog/js/staff-global.js     |   1 +
 4 files changed, 117 insertions(+), 37 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 214a4434d2..23726640d8 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2223,6 +2223,26 @@ li {
     }
 }
 
+#patron_search_selected {
+    background-color: #F9FEFF;
+    border: 1px solid #B9D8D9;
+    border-color: #A2CBCC #CEE0E3 #CEE0E3 #A2CBCC;
+    border-radius: 3px;
+    color: #333;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 1.5;
+    padding: 5px 10px;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+#clear-patron-selection {
+    display: inline-block;
+    margin-left: 1em;
+}
+
 #search-facets {
     border: 1px solid #B9D8D9;
     border-radius: 5px 5px 0 0;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
index 52f9da0105..9f2d98a972 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
@@ -368,7 +368,7 @@
                         return json.data;
                     }
                 },
-                [% IF open_on_row_click OR preview_on_name_click %]
+                [% IF open_on_row_click OR preview_on_name_click OR remember_selections %]
                 "drawCallback": function( settings ) {
                     var api = this.api();
                     var data = api.data();
@@ -388,6 +388,9 @@
                         $(tr).find("a.patron_name").addClass("patron_preview");
                     });
                     [% END %]
+                    [% IF remember_selections %]
+                        prepSelections();
+                    [% END %]
                 },
                 [% END %]
                 "iDeferLoading": defer_loading,
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 03c2fe768d..747920f760 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
@@ -95,6 +95,10 @@
                     [% IF CAN_user_borrowers_edit_borrowers %]
                           <button id="merge-patrons" class="btn btn-sm btn-default disabled" disabled="disabled" type="submit"><i class="fa fa-compress" aria-hidden="true"></i> Merge selected patrons</button>
                     [% END %]
+                    <div id="patron_search_selected" class="btn-group" style="display:none;">
+                        <span></span>
+                        <a href="#" id="clear-patron-selection"><i class="fa fa-remove"></i> Clear</a>
+                    </div>
                   </div>
                 </div>
             [% END %]
@@ -147,15 +151,38 @@
     [% INCLUDE 'str/members-menu.inc' %]
     [% Asset.js("js/members-menu.js") | $raw %]
     <script>
+        function showPatronSelections( number ){
+            $("#patron_search_selected").show().find("span").text(_("Patrons selected: " + number ) );
+        }
 
         $(document).ready(function() {
             $('#merge-patrons').prop('disabled', true);
             $('#memberresultst').on('change', 'input.selection', function() {
-                if ( $('.selection:checked').length > 1 ) {
+                var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
+                var borrowernumber = $(this).val();
+                if( $(this).prop("checked") ){
+                    patron_search_selections.push( $(this).val() );
+                    localStorage.setItem('patron_search_selections', JSON.stringify( patron_search_selections ));
+                    showPatronSelections( patron_search_selections.length );
+                } else {
+                    var filtered = patron_search_selections.filter(function( value ){
+                        return value !== borrowernumber;
+                    });
+                    if( filtered.length > 0 ){
+                        localStorage.setItem('patron_search_selections', JSON.stringify( filtered ));
+                        patron_search_selections = filtered;
+                        showPatronSelections( filtered.length );
+                    } else {
+                        patron_search_selections = [];
+                        localStorage.removeItem('patron_search_selections');
+                        $("#patron_search_selected").hide();
+                    }
+                }
+                if ( patron_search_selections.length > 1 ) {
                     /* More than one checkbox has been checked */
                     $('#merge-patrons').prop('disabled', false).removeClass("disabled");
                     $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
-                } else if ( $('.selection:checked').length == 1 ) {
+                } else if ( patron_search_selections.length == 1 ) {
                     /* At least one checkbox has been checked */
                     $('#merge-patrons').prop('disabled', true).addClass("disabled");
                     $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
@@ -167,17 +194,24 @@
             });
 
             $('#merge-patrons').on('click', function() {
-                var merge_patrons_url = 'merge-patrons.pl?' + $('.selection:checked')
-                    .map(function() {
-                       return "id=" + $(this).val()
-                    }).get().join('&');
+                var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
+                var merge_patrons_url = 'merge-patrons.pl?id=' + patron_search_selections.join("&id=");
                 window.location.href = merge_patrons_url;
             });
 
-            $("#patronlist-dropdown").on("click", ".patron-list-add", function(e){
+            $("#clear-patron-selection").on("click", function(e){
                 e.preventDefault();
+                $(".selection").prop("checked", false).change();
+                localStorage.removeItem("patron_search_selections");
+                $("#patron_search_selected").hide();
+                $('#merge-patrons').prop('disabled', true).addClass("disabled");
+                $("#patronlist-menu").addClass("disabled").prop("disabled", true);
+            });
 
-                if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
+            $("#patronlist-dropdown").on("click", ".patron-list-add", function(e){
+                e.preventDefault();
+                var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
+                if ( patron_search_selections.length == 0 ) {
                     alert( _("You have not selected any patrons to add to a list!") );
                     $(".btn-group").removeClass("open"); /* Close button menu */
                     return false;
@@ -247,35 +281,57 @@
         });
 
         function patronListAdd(){
-            var borrowernumbers = [];
-            $("#memberresultst").find("input:checkbox:checked").each(function(){
-                borrowernumbers.push($(this).val());
-            });
-            var data = {
-                add_to_patron_list: $("#add_to_patron_list").val(),
-                new_patron_list: $("#new_patron_list").val(),
-                borrowernumbers: borrowernumbers
-            };
-            $.ajax({
-                data: data,
-                type: 'POST',
-                url: '/cgi-bin/koha/svc/members/add_to_list',
-                success: function(data) {
-                    $("#patron_list_dialog").show();
-                    $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
-                    $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
-                    $("#patron_list_dialog > a").html(data.patron_list.name);
-
-                    if ( $('#add_to_patron_list').val() == 'new' ) {
-                        /* Add a new entry to the menu */
-                        $("#patronlist-dropdown .divider").before('<li><a class="patron-list-add" href="#" data-listid="' + data.patron_list.patron_list_id + '">' + data.patron_list.name + '</li>');
+            var borrowernumbers = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
+            if ( borrowernumbers.length > 0 ){
+                var data = {
+                    add_to_patron_list: $("#add_to_patron_list").val(),
+                    new_patron_list: $("#new_patron_list").val(),
+                    borrowernumbers: borrowernumbers
+                };
+                $.ajax({
+                    data: data,
+                    type: 'POST',
+                    url: '/cgi-bin/koha/svc/members/add_to_list',
+                    success: function(data) {
+                        $("#patron_list_dialog").show();
+                        $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
+                        $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
+                        $("#patron_list_dialog > a").html(data.patron_list.name);
+
+                        if ( $('#add_to_patron_list').val() == 'new' ) {
+                            /* Add a new entry to the menu */
+                            $("#patronlist-dropdown .divider").before('<li><a class="patron-list-add" href="#" data-listid="' + data.patron_list.patron_list_id + '">' + data.patron_list.name + '</li>');
+                        }
+                    },
+                    error: function() {
+                        alert( _("An error occurred. Patron list could not be updated.") );
+                    }
+                });
+                return true;
+            } else {
+                alert( _("You have not selected any patrons to add to a list!") );
+                return false;
+            }
+        }
+
+        function prepSelections(){
+            var selected_patrons = JSON.parse( localStorage.getItem("patron_search_selections") );
+            if( selected_patrons && selected_patrons.length > 0 ){
+                showPatronSelections( selected_patrons.length );
+
+                $('#merge-patrons').prop('disabled', true);
+                $("input.selection").each(function(){
+                    var cardnumber = $(this).val();
+                    if( selected_patrons.indexOf( cardnumber ) >= 0 ){
+                        $(this).prop("checked", true );
                     }
-                },
-                error: function() {
-                    alert( _("An error occurred. Patron list could not be updated.") );
+                });
+
+                if( selected_patrons.length > 1 ){
+                    $('#merge-patrons').removeClass("disabled").prop('disabled', false);
+                    $('#patronlist-menu').removeClass("disabled").prop('disabled', false);
                 }
-            });
-            return true;
+            }
         }
 
         $('#memberresultst tbody').on('click','td',function(e){
@@ -302,7 +358,7 @@
     [% ELSE %]
         [% SET redirect_url = '/cgi-bin/koha/members/moremember.pl' %]
     [% END %]
-    [% PROCESS patron_search_js table_id => 'memberresultst', categories => categories, libraries => libraries, extended_attribute_types => attribute_type_codes, columns => columns,actions => ['edit', 'checkout'], redirect_if_one_result => 1, redirect_url => redirect_url, sticky_header => "searchheader", sticky_to => "searchresults", default_sort_column => 'name-address', display_search_description => 1 %]
+    [% PROCESS patron_search_js table_id => 'memberresultst', categories => categories, libraries => libraries, extended_attribute_types => attribute_type_codes, columns => columns,actions => ['edit', 'checkout'], redirect_if_one_result => 1, redirect_url => redirect_url, sticky_header => "searchheader", sticky_to => "searchresults", default_sort_column => 'name-address', display_search_description => 1, remember_selections => 1 %]
 
 [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index f2becd2a7f..ad62c347cf 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -213,6 +213,7 @@ function logOut(){
     localStorage.removeItem("sql_reports_activetab");
     localStorage.removeItem("searches");
     localStorage.removeItem("bibs_selected");
+    localStorage.removeItem("patron_search_selections");
 }
 
 function openHelp(){
-- 
2.39.5