From ee39b8feffb2418a8c5e557efb1db2b9b816936d Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 4 Jan 2024 16:13:49 +0100
Subject: [PATCH] Bug 35329: move patron search to modal - Add guarantor

This is the first of many patches to come.

We will rewrite the patron search popup to convert it to a Bootstrap's modal.

I faced different problems on different pages, it is preferable to test
each page on top of the whole patchset, to make sure a futur change will
not break previous pages (and this is why they are all on the same bug
report).

For each page we will test that:
* the different filters work
* the "Clear" filters button work
* the "Add" or "Select" patron button works
* the nested modal to display patron's details (when clicking on their
  name or cardnumber) works

On this patch we are testing the guarantor search:
Create a edit a patron and click "Add guarantor" to open the modal.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/css/src/staff-global.scss            |  32 +++++
 .../prog/en/includes/patron-search.inc        | 117 +++++++++++-------
 .../prog/en/modules/members/memberentrygen.tt |   9 +-
 koha-tmpl/intranet-tmpl/prog/js/members.js    |   5 -
 4 files changed, 113 insertions(+), 50 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 fe046ab43d..ca9e31e956 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2367,6 +2367,38 @@ td.bundle {
     &.modal-wide {
         width: 80%;
     }
+
+}
+
+.modal-full {
+    top: -5px;
+
+    .modal-dialog {
+        width: 95%;
+    }
+}
+
+.basicModal {
+    background: #FFF;
+    left: 50%;
+    margin-left: -300px;
+    max-height: 100%;
+    max-width: 600px;
+    min-height: 350px;
+    min-width: 575px;
+    opacity: 0;
+    padding: 1em;
+    pointer-events: none;
+    position: fixed;
+    top: 25%;
+    transition: all .1s ease-out;
+    z-index: 1100;
+}
+
+.basicModal.show {
+    box-shadow: 0 5px 15px rgba( 0, 0, 0, .5 );
+    opacity: 1;
+    pointer-events: auto;
 }
 
 #cartDetails {
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 e11c0cdc34..4a18c0ffe0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
@@ -2,6 +2,7 @@
 [% USE I18N %]
 [% USE Branches %]
 [% USE ExtendedAttributeTypes %]
+[% USE Categories %]
 [% USE raw %]
 [% USE Asset %]
 [% USE To %]
@@ -55,7 +56,7 @@
                             <label for="categorycode_filter">Category:</label>
                             <select id="categorycode_filter">
                                 <option value="">Any</option>
-                                [% FOREACH category IN categories %]
+                                [% FOREACH category IN Categories.limited.unblessed %]
                                     <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
                                 [% END %]
                             </select>
@@ -109,6 +110,10 @@
 [%# columns: See patron_search_js %]
 [% BLOCK patron_search_table %]
 
+    [% UNLESS table_id %]
+        [% SET table_id = "memberresultst" %]
+    [% END %]
+
     [% IF filter == 'suggestions_managers' %]
         <div class="hint">Only staff with superlibrarian or suggestions_manage permissions are returned in the search results</div>
     [% ELSIF filter == 'orders_managers' OR filter == 'baskets_managers' %]
@@ -130,7 +135,6 @@
         [% END %]
     </div>
 
-
     <h3 style="display: none;">Patrons found for: <span id="searchpattern"></span></h3>
 
     <div id="[% table_id | html %]_search_results" style="display:none;">
@@ -175,18 +179,11 @@
 <div class="modal" id="patronPreview" tabindex="-1" role="dialog" aria-labelledby="patronPreviewLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="patronPreviewLabel"></h4>
-            </div>
             <div class="modal-body">
                 <div id="loading">
                     <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading
                 </div>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-            </div>
         </div>
     </div>
 </div>
@@ -213,6 +210,8 @@
     [% END %]
 
     <script>
+        [% SET libraries = Branches.all %]
+        [% SET categories = Categories.limited.unblessed %]
         let categories = [% To.json(categories) | $raw %].map(e => {
             e['_id'] = e.categorycode.toLowerCase();
             e['_str'] = e.description;
@@ -650,22 +649,26 @@
                 e.preventDefault();
                 var borrowernumber = $(this).data("borrowernumber");
                 var borrower_data = JSON.parse($("#borrower_data"+borrowernumber).val());
-                add_user( borrowernumber, $patron_to_html( borrower_data, { display_cardnumber: false, url: false } ) );
+                modal_add_user( borrowernumber, $patron_to_html( borrower_data, { display_cardnumber: false, url: false } ) );
             });
-
             $("body").on("click",".select_user",function(e){
                 e.preventDefault();
                 var borrowernumber = $(this).data("borrowernumber");
                 var borrower_data = JSON.parse($("#borrower_data"+borrowernumber).val());
-                select_user( borrowernumber, borrower_data );
+                modal_select_user( borrowernumber, borrower_data );
+                $(this).closest(".modal").modal('hide');
             });
 
             $("body").on("click",".patron_preview", function( e ){
                 e.preventDefault();
                 var borrowernumber = $(this).data("borrowernumber");
                 var page = "/cgi-bin/koha/members/moremember.pl?print=brief&borrowernumber=" + borrowernumber;
-                $("#patronPreview .modal-body").load( page + " div.container-fluid" );
-                $('#patronPreview').modal({show:true});
+                $("#patron_preview_modal").load( page + " div.container-fluid", function(){
+                    $("#patron_preview_modal").find(".close").on("click", function(){
+                        $('#patron_preview_modal').html(_("Loading...")).removeClass("show");
+                    });
+                });
+                $("#patron_preview_modal").addClass("show");
             });
 
             $("#patronPreview").on('hidden.bs.modal', function (e) {
@@ -827,40 +830,68 @@
         }
 
         // modify parent window owner element
-        function add_user(borrowernumber, borrowername) {
-            var p = window.opener;
-            // In one place (serials/routing.tt), the page is reload on every add
-            // We have to wait for the page to be there
-            function wait_for_opener () {
-                if ( ! $(opener.document).find('body').size() ) {
-                    setTimeout(wait_for_opener, 500);
-                } else {
-                    [%# Note that add_user could sent data instead of borrowername too %]
-                    $("#info").hide();
-                    $("#error").hide();
-                    if ( p.add_user(borrowernumber, borrowername) < 0 ) {
-                        $("#error").html(_("Patron '%s' is already in the list.").format(borrowername));
-                        $("#error").show();
-                    } else {
-                        $("#info").html(_("Patron '%s' added.").format(borrowername));
-                        $("#info").show();
-                    }
-                }
+        function modal_add_user(borrowernumber, borrowername) {
+            [%# Note that add_user could sent data instead of borrowername too %]
+            $("#info").hide();
+            $("#error").hide();
+            if ( add_user(borrowernumber, borrowername) < 0 ) {
+                $("#error").html(_("Patron '%s' is already in the list.").format(borrowername));
+                $("#error").show();
+            } else {
+                $("#info").html(_("Patron '%s' added.").format(borrowername));
+                $("#info").show();
             }
-            wait_for_opener();
         }
-        function select_user(borrowernumber, data) {
-            var p = window.opener;
-            if ( p.document.getElementById("selected_patron_id") ) {
-                p.document.getElementById("selected_patron_id").value = borrowernumber;
+        function modal_select_user(borrowernumber, data) {
+            if ( document.getElementById("selected_patron_id") ) {
+                document.getElementById("selected_patron_id").value = borrowernumber;
             } else {
-                [%  IF callback %]
-                    p.[% callback | html %](borrowernumber, data);
-                [%  ELSE %]
-                    p.select_user(borrowernumber, data);
+                [% IF callback %]
+                    [% callback | html %](borrowernumber, data);
+                [% ELSE %]
+                    select_user(borrowernumber, data);
                 [% END %]
             }
-            window.close();
         }
     </script>
 [% END %]
+
+
+[% BLOCK patron_search_modal %]
+    [% UNLESS patron_search_modal_id %]
+        [% patron_search_modal_id = "patron_search_modal" %]
+    [% END %]
+    <div id="[% patron_search_modal_id | html %]" class="modal modal-full" tabindex="-1" role="dialog" aria-labelledby="patronSearchLabel" aria-hidden="true" data-backdrop="">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="patronSearchLabel">[% modal_title | html %]</h4>
+                </div>
+                <div class="modal-body">
+                    [% PROCESS patron_search_filters filters => ['branch','category','sort1','sort2'] %]
+
+                    <div id="searchresults">
+                        [% IF columns.grep('checkbox').size %]
+                            <div class="searchheader fh-fixedHeader" id="searchheader" style="display:none;">
+                                <div>
+                                    <a href="#" class="btn btn-link" id="select_all"><i class="fa fa-check"></i> Select all</a>
+                                    |
+                                    <a href="#" class="btn btn-link" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
+                                    [% IF selection_type == 'add' %]
+                                    <button id="add-selected" class="btn btn-sm btn-default" type="submit">Add selected patrons</button>
+                                    [% END %]
+                                </div>
+                            </div>
+                        [% END %]
+                        [% PROCESS patron_search_table table_id => 'memberresultst' columns => columns %]
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <a href="#" class="btn btn-default cancel" data-dismiss="modal" aria-hidden="true">Close</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="patron_preview_modal" class="basicModal"></div>
+[% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
index 14f40da9ef..a85d6b2a7a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
@@ -10,6 +10,7 @@
 [% PROCESS 'restriction-types.inc' %]
 [% PROCESS 'i18n.inc' %]
 [% SET footerjs = 1 %]
+[% PROCESS 'patron-search.inc' %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>[% FILTER collapse %]
         [% UNLESS blocking_error %]
@@ -588,7 +589,7 @@ legend:hover {
                                                 <input name="guarantor_firstname" id="guarantor_firstname" type="hidden" />
 
                                                 <li>
-                                                    <a href="#" id="guarantor_search" class="btn btn-default"><i class="fa fa-plus"></i> Add guarantor</a>
+                                                    <a href="#patron_search_modal" class="btn btn-default" data-toggle="modal"><i class="fa fa-plus"></i> Add guarantor</a>
                                                 </li>
 
                                                 [% IF Koha.Preference('AllowStaffToSetCheckoutsVisibilityForGuarantor') %]
@@ -1675,7 +1676,6 @@ legend:hover {
                 </div> <!-- /.col-sm-2.col-sm-pull-10 -->
             [% END %]
         </div> <!-- /.row -->
-
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("lib/hc-sticky.js") | $raw %]
     [% INCLUDE 'calendar.inc' %]
@@ -1976,6 +1976,11 @@ legend:hover {
     [% Asset.js("js/members.js") | $raw %]
     [% Asset.js("js/messaging-preference-form.js") | $raw %]
     [% PROCESS 'password_check.inc' new_password => 'password', category_selector => '#categorycode_entry', minPasswordLength => patron.category.effective_min_password_length, RequireStrongPassword => patron.category.effective_require_strong_password %]
+
+    [% INCLUDE 'select2.inc' %]
+    [% SET columns = ['cardnumber','name','category','branch','dateofbirth','address-library','action'] %]
+    [% PROCESS patron_search_modal columns => columns, modal_title => t("Add guarantor") %]
+    [% PROCESS patron_search_js columns => columns, actions => ["select"], preview_on_name_click => 1 %]
 [% END %]
 
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/members.js b/koha-tmpl/intranet-tmpl/prog/js/members.js
index dad7ead3a3..f2e2e22681 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/members.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/members.js
@@ -199,11 +199,6 @@ $(document).ready(function(){
 
     $("fieldset.rows input, fieldset.rows select").addClass("noEnterSubmit");
 
-    $('body').on('click', '#guarantor_search', function(e) {
-        e.preventDefault();
-        var newin = window.open('/cgi-bin/koha/members/search.pl?columns=cardnumber,name,category,branch,dateofbirth,address-library,action','popup','width=1024,height=768,resizable=no,toolbar=false,scrollbars=yes,top');
-    });
-
     $('#guarantor_relationships').on('click', '.guarantor_cancel', function(e) {
         e.preventDefault();
         $(this).parents('fieldset').first().remove();
-- 
2.39.5