From ac35ef738523b9d234b338c5d81daeb21d4833d5 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 13 May 2021 15:17:29 +0000
Subject: [PATCH] Bug 16785: Remove Autocomplete from overdues report filter

This patch removes code and markup related to an autocomplete input
field in the overdues report filter. The autocomplete was intended
to enable easy entry of patron attributes, but it's simpler to use a
Select2-styled <select>

The patch removes circ/ypattrodue-attr-search-authvalue.pl, which was
only used on this page and is now obsolete.

To test, apply the patch and create at least one patron attribute type
which is linked to an authorized value:

 - Administration -> Authorized values -> New category
   - Create a new category to test with
   - Add multiple authorized values under this category
 - Administration -> Patron attribute types -> New patron attribute
   type.
   - Create an attribute which is linked to the authorized value
     category you created AND which is marked "Searchable."
 - Go to Circulation -> Overdues.
   - In the sidebar filter you should see your patron attribute as an
     option, styled as a Select2 dropdown.
   - Clicking the dropdown should trigger a list of the authorized
     values you created above.
   - Test that the search field at the top of the list works correctly
     to filter the results.
   - Test that any repeatable attribute field can be cloned by clicking
     the "Add" link, and that cloned fields can be removed using the
     "Delete" links.
   - Test that cloned fields remain in place after submitting the fitler
     form, and that any selected entry in a Select2 widget is
     preselected.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 circ/ypattrodue-attr-search-authvalue.pl      |  58 ---------
 .../prog/en/modules/circ/overdue.tt           | 122 +++++++++---------
 2 files changed, 61 insertions(+), 119 deletions(-)
 delete mode 100755 circ/ypattrodue-attr-search-authvalue.pl

diff --git a/circ/ypattrodue-attr-search-authvalue.pl b/circ/ypattrodue-attr-search-authvalue.pl
deleted file mode 100755
index f0a694db86..0000000000
--- a/circ/ypattrodue-attr-search-authvalue.pl
+++ /dev/null
@@ -1,58 +0,0 @@
-#!/usr/bin/perl
-
-# This software is placed under the gnu General Public License, v2 (http://www.gnu.org/licenses/gpl.html)
-
-# Parts copyright 2012 Athens County Public Libraries
-# This file is part of Koha.
-#
-# Koha is free software; you can redistribute it and/or modify it
-# under the terms of the GNU General Public License as published by
-# the Free Software Foundation; either version 3 of the License, or
-# (at your option) any later version.
-#
-# Koha is distributed in the hope that it will be useful, but
-# WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-# GNU General Public License for more details.
-#
-# You should have received a copy of the GNU General Public License
-# along with Koha; if not, see <http://www.gnu.org/licenses>.
-
-use Modern::Perl;
-use CGI qw ( -utf8 );
-use C4::Context;
-use C4::Auth qw/check_cookie_auth/;
-use C4::Debug;
-
-my $input    = CGI->new;
-my $query    = $input->param('term');
-my $attrcode = $input->path_info || '';
-$attrcode =~ s|^/||;
-
-my ( $auth_status, $sessionID ) = check_cookie_auth( $input->cookie('CGISESSID'), { circulate => '*' } );
-exit 0 if $auth_status ne "ok";
-
-binmode STDOUT, ":encoding(UTF-8)";
-print $input->header( -type => 'text/plain', -charset => 'UTF-8' );
-
-print STDERR ">> CALLING $0 (attrcode=$attrcode, query=$query)\n" if $debug;
-
-my $dbh = C4::Context->dbh;
-my $sql = qq(SELECT authorised_value, lib description
-		FROM borrower_attribute_types b, authorised_values v
-		WHERE b.code=?
-			AND b.authorised_value_category = v.category
-			AND v.lib like ?);
-my $sth = $dbh->prepare($sql);
-$sth->execute( $attrcode, "$query%" );
-
-print "[";
-my $i = 0;
-while ( my $rec = $sth->fetchrow_hashref ) {
-    print STDERR ">> attrcode=$attrcode match '$query' ==> $rec->{description} ($rec->{authorised_value})\n" if $debug;
-    print "{\"description\":\"" . $rec->{description} . "\",\"" .
-    "authorised_value\":\"" . $rec->{authorised_value} . "\"" .
-    "}";
-    $i++;
-}
-print "]";
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/overdue.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/overdue.tt
index b6c72e88c9..3723357b3a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/overdue.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/overdue.tt
@@ -1,5 +1,6 @@
 [% USE raw %]
 [% USE Asset %]
+[% USE AuthorisedValues %]
 [% USE KohaDates %]
 [%- USE Branches -%]
 [%- USE Price -%]
@@ -10,9 +11,21 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Items overdue as of [% todaysdate | html %] &rsaquo; Circulation &rsaquo; Koha</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<style>
-    .sql {display:none;}
-</style>
+[% FILTER collapse %]
+    <style>
+        .sql {display:none;}
+        .select2-container--open .select2-dropdown--below,
+        .select2-search.select2-search--dropdown {
+            border: 1px solid #AAA;
+        }
+        .select2-container--open .select2-dropdown--below,
+        .select2-search.select2-search--dropdown,
+        .select2-results {
+            background-color: #FFF;
+            width: 20em !important;
+        }
+    </style>
+[% END %]
 </head>
 
 <body id="circ_overdue" class="circ">
@@ -32,6 +45,7 @@
                 Overdues as of [% todaysdate | html %]
             </a>
         </li>
+    </ol>
 </nav>
 
 <div class="main container-fluid">
@@ -173,23 +187,28 @@
 		<li>
 			<label>[% patron_attr_filter_loo.description | html %]:</label>
             [% IF ( patron_attr_filter_loo.authorised_value_category ) %]
-                <script type="text/javascript" x-code="[% patron_attr_filter_loo.code | html %]">create_auto_completion_responder([% patron_attr_filter_loo.domid | html %],"[% patron_attr_filter_loo.code | html %]");</script>
-				<span id="pattrodue-getready-[% patron_attr_filter_loo.domid | html %]">
-						<div class="pattrodue-autocomplete">
-                            <input autocomplete="off" id="pattrodue-input-[% patron_attr_filter_loo.domid | html %]" name="patron_attr_filter_[% patron_attr_filter_loo.code | html %]" value="[% patron_attr_filter_loo.cgivalue | html %]"  class="pattrodue-input" type="text" />
-						</div>
-				</span>
+                [% SET authvals = AuthorisedValues.GetAuthValueDropbox( patron_attr_filter_loo.authorised_value_category ) %]
+                <select id="pattrodue-input-[% patron_attr_filter_loo.domid | html %]" name="patron_attr_filter_[% patron_attr_filter_loo.code | html %]" class="pattrodue-input">
+                    <option></option>
+                    [% FOREACH authval IN authvals %]
+                        [% IF ( patron_attr_filter_loo.cgivalue == authval.authorised_value ) -%]
+                            <option value="[% authval.authorised_value | html %]" selected="selected">[% authval.lib | html %]</option>
+                        [% ELSE -%]
+                            <option value="[% authval.authorised_value | html %]">[% authval.lib | html %]</option>
+                        [% END %]
+                    [% END %]
+                </select>
 			[% ELSE %]
                 <input type="text" name="patron_attr_filter_[% patron_attr_filter_loo.code | html %]" value="[% patron_attr_filter_loo.cgivalue | html %]"/>
 			[% END %]
 			[% IF ( patron_attr_filter_loo.repeatable ) %]
-                <a href="#" onclick="clone_parent(this); return false;">Add</a>
+                <a href="#" class="btn btn-link clone-attribute" data-original-id="pattrodue-input-[% patron_attr_filter_loo.domid | html %]"><i class="fa fa-plus"></i> Add</a>
                 [% IF ( patron_attr_filter_loo.isclone ) %]
-				    <a href="#" onclick="delete_parent(this); return false;" style="visibility: visible">Delete</a>
+                    <a href="#" class="btn btn-link delete_clone"><i class="fa fa-remove"></i> Delete</a>
                 [% ELSIF ( patron_attr_filter_loo.ismany ) %]
-				    <a href="#" onclick="delete_parent(this); return false;" style="visibility: visible">Delete</a>
+                    <a href="#" class="btn btn-link delete_clone"><i class="fa fa-remove"></i> Delete</a>
                 [% ELSE %]
-				    <a href="#" onclick="delete_parent(this); return false;" style="visibility: hidden">Delete</a>
+                    <a href="#" class="btn btn-link delete_clone" style="display:none"><i class="fa fa-remove"></i> Delete</a>
                 [% END %]
 			[% END %]
 		</li>
@@ -243,58 +262,25 @@
     [% INCLUDE 'calendar.inc' %]
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
+    [% INCLUDE 'select2.inc' %]
     <script>
-        function clone_parent(node) {
-            var parent = node.parentNode;
-            var clone = parent.cloneNode(true);
-            parent.parentNode.insertBefore(clone, parent.nextSibling);
-            $("a", clone).attr("style", "visibility: visible");
-            $("input", clone).attr("value", "");
-
-            var theid = $("span", clone).attr("id") || "";
-            var theid = $("span", clone).attr("id") || "";
-            var parts = theid.match(/^pattrodue-getready-(.*)$/);
-            if (parts && parts.length > 1){
-                var appendid = "-" + Math.floor(Math.random()*1000+1);
-                $("span", clone).attr("id",theid+appendid);
-
-                theid = $("input", clone).attr("id");
-                $("input", clone).attr("id",theid+appendid);
-
-                theid = $("div[id]", clone).attr("id");
-                $("div[id]", clone).attr("id",theid+appendid);
-
-                var attrcode = $("script", clone).attr("x-code");
-                var newsuffix = parts[1] + appendid;
-                create_auto_completion_responder(newsuffix,attrcode);
+        function clone_input( node, original_id ) {
+            var original = node;
+            var clone = original.clone();
+            var appendid = original_id + "-" + Math.floor(Math.random()*1000+1);
+            clone.find(".delete_clone").show();
+            if( clone.find("select").length ){
+                /* <select> element is present */
+                clone.find("select").removeClass("select2-hidden-accessible").removeAttr("data-select2-id").attr("id", appendid );
+                clone.find(".select2").remove();
+                original.after( clone );
+                $("#" + appendid ).select2();
+            } else {
+                clone.attr("id", appendid );
+                original.after( clone );
             }
         }
 
-
-        function delete_parent(node) {
-            var parent = node.parentNode;
-            parent.parentNode.removeChild(parent);
-        }
-
-        function create_auto_completion_responder(uniqueid,attrcode) {
-            $("#pattrodue-getready-" + uniqueid).ready(function(){
-                $( "#pattrodue-input-" + uniqueid ).autocomplete({
-                    source: "/cgi-bin/koha/circ/ypattrodue-attr-search-authvalue.pl/"+attrcode,
-                    select: function( event, ui ) {
-                        $( "#pattrodue-input-"+uniqueid ).val( ui.item.description );
-                        return false;
-                    }
-                })
-                .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
-                    return $( "<li></li>" )
-                    .data( "ui-autocomplete-item", item )
-                    .append( "<a>" + item.description + " (" + item.authorised_value + ")</a>" )
-                    .appendTo( ul )
-                    .css("font-size","90%").css("width","13em");
-                };
-            });
-        }
-
         function update_date_due_filters_visibility(){
             if( $("#showall").is(":checked")) {
                 $(".date_due_filter").hide();
@@ -320,6 +306,20 @@
                 update_date_due_filters_visibility();
             });
             update_date_due_filters_visibility();
+
+            $(".pattrodue-input").each(function(){
+                $(this).select2();
+            });
+
+            $("body").on("click", ".delete_clone", function(e){
+                e.preventDefault();
+                $(this).parent().remove();
+            });
+
+            $("body").on("click", ".clone-attribute", function(e){
+                e.preventDefault();
+                clone_input( $(this).parent(), $(this).data("original-id") );
+            })
         });
   </script>
 [% END %]
-- 
2.39.2