From a324b05341f79da5b534a606b91707126830f905 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Wed, 9 Oct 2024 14:08:26 +0200
Subject: [PATCH] Bug 38116: Build patron search descriptions using DT's search
 settings

The goal of this patch is to move the construction of the patron search description
to datatables.js in order to make it generic and reusable.

With bug 33484 and the restoration of the state from localStorage or the
URL could lead to confusion when the table is displayed. It could also
be problematic when an hidden column has a search pattern.

Note that if a column has a dropdown list with an option selected AND is hidden,
the description won't display the value but the code (eg. ^CPL$ if
library Centerville is selected)
---
 .../prog/en/includes/patron-search.inc        | 105 ++++++++----------
 koha-tmpl/intranet-tmpl/prog/js/datatables.js |  59 +++++++++-
 2 files changed, 106 insertions(+), 58 deletions(-)

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 d2eef529c7c..90b08479e5f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc
@@ -150,7 +150,7 @@
         [% END %]
     </div>
 
-    <h3 style="display: none;">Patrons found for: <span class="searchpattern"></span></h3>
+    <h3 style="display: none;" class="search_description" data-prefix="[% I18N.t("Patrons found for: %s") %]"></h3>
 
     <div id="[% table_id | html %]_search_results" style="display:none;">
 
@@ -419,6 +419,52 @@
                 };
             [% END %]
 
+            let additional_search_descriptions = {};
+            [% IF display_search_description %]
+                additional_search_descriptions = {
+                    main: function(){
+                        let parent_block = $("#[% search_results_block_id | html %]");
+                        let patron_search_form = get_patron_search_form();
+                        let searched = "";
+                        let pattern = patron_search_form.find(".search_patron_filter").val();
+                        if ( pattern ) {
+                            let field = patron_search_form.find(".searchfieldstype_filter").find("option:selected").text();
+                            if ( patron_search_form.find(".searchtype_filter").val() == 'starts_with' ) {
+                                searched += _("%s starting with '%s'".format(field, pattern));
+                            } else {
+                                searched += _("%s containing '%s'".format(field, pattern));
+                            }
+                        }
+
+                        if ( patron_search_form.find("select[name='sort1_filter']").val() ) {
+                            searched += _(" with sort1 ")
+                            if ( patron_search_form.find("select[name='sort1_filter']") ) {
+                                searched += patron_search_form.find("select[name='sort1_filter'] option:selected").text();
+                            }
+                            else {
+                                searched += paron_search_form.find("select[name='sort1_filter']").val();
+                            }
+                        }
+                        if ( patron_search_form.find("select[name='sort2_filter']").val() ) {
+                            searched += _(" with sort2 ")
+                            if ( patron_search_form.find("select[name='sort2_filter']") ) {
+                                searched += patron_search_form.find("select[name='sort2_filter'] option:selected").text();
+                            }
+                            else {
+                                searched += paron_search_form.find("select[name='sort2_filter']").val();
+                            }
+                        }
+                        return searched;
+                    },
+                    surname: function(){
+                        let parent_block = $("#[% search_results_block_id | html %]");
+                        let start_with = parent_block.find(".firstletter_filter").val()
+                        if (!start_with) return "";
+                        return _("Surname begins with '%s'".format(start_with));
+                    },
+                };
+            [% END %]
+
             [% UNLESS default_sort_column %]
                 [% default_sort_column = "name" %]
             [% END %]
@@ -730,7 +776,7 @@
                     },
                 [% END %]
                 fixedHeader: false,
-            }, typeof table_settings !== 'undefined' ? table_settings : null, 1, additional_filters, undefined, external_filter_nodes);
+            }, typeof table_settings !== 'undefined' ? table_settings : null, 1, additional_filters, undefined, external_filter_nodes, parent_block.find(".search_description"), additional_search_descriptions );
 
             patron_search_form.on('submit', filter);
             patron_search_form.on('submit', update_search_type);
@@ -776,7 +822,6 @@
             patron_search_form.find(".clear_search").on("click",function(e){
                 e.preventDefault();
                 clearFilters();
-                parent_block.find(".searchpattern").parent().hide();
             });
 
             let table_dt = patrons_table.DataTable();
@@ -810,51 +855,6 @@
             $("#searchtype").val($("#searchtype_filter").val());
         }
 
-        function update_search_description(){
-            let parent_block = $("#[% search_results_block_id | html %]");
-            let patron_search_form = get_patron_search_form();
-            var searched = patron_search_form.find(".searchfieldstype_filter").find("option:selected").text();
-            let pattern = patron_search_form.find(".search_patron_filter").val();
-            if ( pattern ) {
-                if ( patron_search_form.find(".searchtype_filter").val() == 'starts_with' ) {
-                    searched += _(" starting with ");
-                } else {
-                    searched += _(" containing ");
-                }
-                searched += "'" + pattern + "'";
-            }
-            let firstletter_filter = parent_block.find(".firstletter_filter").val();
-            if ( firstletter_filter ) {
-                searched += _(" begins with ") + "'" + firstletter_filter +"'";
-            }
-
-            if ( patron_search_form.find(".categorycode_filter").val() ) {
-                searched += _(" with category ") + "'" + patron_search_form.find(".categorycode_filter option:selected").text() + "'";
-            }
-            if ( patron_search_form.find(".branchcode_filter").val() ) {
-                searched += _(" in library ") + patron_search_form.find(".branchcode_filter option:selected").text();
-            }
-            if ( patron_search_form.find("select[name='sort1_filter']").val() ) {
-                searched += _(" with sort1 ")
-                if ( patron_search_form.find("select[name='sort1_filter']") ) {
-                    searched += patron_search_form.find("select[name='sort1_filter'] option:selected").text();
-                }
-                else {
-                    searched += paron_search_form.find("select[name='sort1_filter']").val();
-                }
-            }
-            if ( patron_search_form.find("select[name='sort2_filter']").val() ) {
-                searched += _(" with sort2 ")
-                if ( patron_search_form.find("select[name='sort2_filter']") ) {
-                    searched += patron_search_form.find("select[name='sort2_filter'] option:selected").text();
-                }
-                else {
-                    searched += paron_search_form.find("select[name='sort2_filter']").val();
-                }
-            }
-            parent_block.find(".searchpattern").text(searched).parent().show();
-        }
-
         function filter() {
             let parent_block = $("#[% search_results_block_id | html %]");
             let patron_search_form = get_patron_search_form();
@@ -903,9 +903,6 @@
             table_dt.settings()[0].loaded_from_state = false;
             first_draw = 1; // Only redirect if we are coming from here
             table_dt.draw();
-            [% IF display_search_description %]
-                update_search_description();
-            [% END %]
             return false;
         }
 
@@ -925,9 +922,6 @@
                 history.pushState( {}, null, window.location.href.split("?" )[0]);
             [% END %]
             $("#[% table_id | html %]_search_results").hide();
-            [% IF display_search_description %]
-                update_search_description();
-            [% END %]
         }
 
         // User has clicked on a letter
@@ -944,9 +938,6 @@
             [% END %]
 
             patrons_table.DataTable().draw();
-            [% IF display_search_description %]
-                update_search_description();
-            [% END %]
         }
 
         // modify parent window owner element
diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
index 257eb8b1c76..8f5fbf3a3a9 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js
@@ -1077,6 +1077,50 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){
     };
 }
 
+function update_search_description(table_node, table_dt, additional_search_descriptions) {
+    let description_node = additional_search_descriptions.node;
+    let description_fns  = additional_search_descriptions.additional_search_descriptions;
+    let description = [];
+    let global_search = table_dt.search()
+    if ( global_search.length ) {
+        description.push(__("Anywhere: %s").format(global_search));
+    }
+    let additional_searches = [];
+    for ( f in description_fns ) {
+        let d = description_fns[f]();
+        if (d.length){
+            additional_searches.push(d);
+        }
+    }
+    if (additional_searches.length){
+        description.push(additional_searches.join(", "));
+    }
+    let column_searches = [];
+    table_dt.columns().search().each((search, i) => {
+        if( search.length ) {
+            // Retrieve the value from the dropdown list if there is one
+            var visible_i = table_dt.column.index('fromData', i);
+            let option = $(table_node).find('thead tr:eq(1) th:eq(%s) select option:selected'.format(visible_i));
+            if ( option.length ) {
+                search = $(option).text();
+            }
+
+            column_searches.push("%s=%s".format(table_dt.column(i).header().innerHTML, search));
+        }
+    });
+    if(column_searches.length){
+        description.push(column_searches.join(", "));
+    }
+
+    if ( description.length ) {
+        let display = description.length ? "block" : "none";
+        let description_str = $(description_node).data('prefix').format(description.join("<br/>"));
+        $(description_node).html(description_str).show();
+    } else {
+        $(description_node).html("").hide();
+    }
+}
+
 (function($) {
 
     /**
@@ -1092,9 +1136,15 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){
     *                                                available from the columns_settings template toolkit include
     * @param  {Boolean} add_filters                  Add a filters row as the top row of the table
     * @param  {Object}  default_filters              Add a set of default search filters to apply at table initialisation
+    * @param  {Object}  filters_options              Build selects for the filters row, and pass their value.
+    *                                                eg. { 1 => vendors } will build a select with the vendor list in the second column
+    * @param  {Object}  show_search_descriptions     Whether or not display the search descriptions when the table is drawn
+    *                                                Expect a node in which to place the descriptions. It must have a data-prefix attribute to build the description properly.
+    * @param  {Object}  aditional_search_descriptions Pass additional descriptions
+    *                                                 eg. { surname => () => { 'Surname with '.format($("#surname_form").val()) } }
     * @return {Object}                               The dataTables instance
     */
-    $.fn.kohaTable = function(options, table_settings, add_filters, default_filters, filters_options, external_filter_nodes) {
+    $.fn.kohaTable = function(options, table_settings, add_filters, default_filters, filters_options, external_filter_nodes, show_search_descriptions, additional_search_descriptions) {
         var settings = null;
 
         if(options) {
@@ -1163,6 +1213,13 @@ function _dt_save_restore_state(table_settings, external_filter_nodes={}){
             toggledClearFilter(settings.oPreviousSearch.sSearch, settings.nTable.id);
         });
 
+        if ( show_search_descriptions !== undefined ) {
+            table_dt.on( 'draw', function ( e, settings ) {
+                update_search_description(table, table_dt, { node: show_search_descriptions, additional_search_descriptions } );
+            });
+            update_search_description(table, table_dt, { node: show_search_descriptions, additional_search_descriptions } );
+        }
+
         return table;
     };
 
-- 
2.34.1