From b1f33f34b3b9d7c3b04e2ffd648a84018d346780 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 21 Mar 2024 14:47:27 +0100
Subject: [PATCH] Bug 35138: A bit of cleaning - UI

This can be moved to its own bug report, it's only a bit of cleaning
trying to keep the code cleaner after than before.
No behaviour changes expected.

Sponsored-by: The Research University in the Helmholtz Association (KIT)
Signed-off-by: Clemens Tubach <clemens.tubach@kit.edu>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../searchengine/elasticsearch/mappings.tt    | 16 ++---
 .../prog/js/elasticsearch-mappings.js         | 58 +++++++++----------
 2 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
index 5ee9404227..95a5c076ad 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/searchengine/elasticsearch/mappings.tt
@@ -263,16 +263,16 @@ a.add, a.delete {
                                     </td>
                                     <td>
                                         [% IF search_field.is_mapped %]
-                                            <a class="btn btn-default btn-xs disabled delete" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
+                                            <a class="btn btn-default btn-xs disabled delete-search-field" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
                                         [% ELSE %]
-                                            <a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
+                                            <a class="btn btn-default btn-xs delete-search-field" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
                                         [% END %]
                                     </td>
                                 </tr>
                             [% END %]
                         </tbody>
                         <tfoot>
-                            <tr>
+                            <tr data-type="search-field">
                                 <td>
                                     <input type="text" data-id="search_field_name"/>
                                 </td>
@@ -434,16 +434,16 @@ a.add, a.delete {
                                                 <input name="mapping_marc_field" type="text" value="[% mapping.marc_field | html %]" />
                                             </td>
                                             [% IF mapping.search_field_mandatory %]
-                                                <td><a class="btn btn-default btn-xs delete mandatory" data-field_name="[% mapping.search_field_name | html %]" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a></td>
+                                                <td><a class="btn btn-default btn-xs delete-mapping mandatory" data-field_name="[% mapping.search_field_name | html %]" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a></td>
                                             [% ELSE %]
-                                                <td><a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a></td>
+                                                <td><a class="btn btn-default btn-xs delete-mapping" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a></td>
                                             [% END %]
                                         </tr>
                                     [% END %]
                                 [% END %]
                             </tbody>
                             <tfoot>
-                                <tr>
+                                <tr data-type="mapping">
                                     <td>
                                         <input data-id="mapping_index_name" type="hidden" value="[% index.index_name | html %]" />
                                         <select data-id="mapping_search_field_name">
@@ -525,13 +525,13 @@ a.add, a.delete {
                                                     <input type="hidden" name="facet_name" value="[% f.name | html %]" />
                                                 </td>
                                                 <td>
-                                                    <a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
+                                                    <a class="btn btn-default btn-xs delete-facet" style="cursor: pointer;"><i class="fa fa-trash"></i> Delete</a>
                                                 </td>
                                             </tr>
                                         [% END %]
                                     </tbody>
                                     <tfoot>
-                                        <tr>
+                                        <tr data-type="facet">
                                             <td></td>
                                             <td>
                                                 <select data-id="facet-search-field">
diff --git a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
index d4806d16e0..23cabf0bb6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
@@ -5,9 +5,20 @@ function clean_line(line) {
     $(line).find('select').find('option:first').prop("selected", true);
 }
 
+function build_delete_link(del_class){
+    return '<a class="btn btn-default btn-xs %s" style="cursor: pointer;"><i class="fa fa-trash"></i> %s</a>'.format(del_class, __("Delete"));
+}
+
+function remove_line(line){
+    var table = $(line).closest('table');
+    let dt = $(table).DataTable();
+    dt.row(line).remove().draw();
+}
+
 function clone_line(line) {
     var new_line = $(line).clone();
-    $(new_line).find('td:last-child>a').removeClass("add").addClass("delete").html('<i class="fa fa-trash"></i> %s'.format(__("Delete") ));
+    let type = $(line).data('type');
+    $(new_line).find('td:last-child').html(build_delete_link('delete-%s'.format(type)));
     $(new_line).find('[data-id]').each(function () {
         $(this).attr({ name: $(this).attr('data-id') }).removeAttr('data-id');
     });
@@ -47,15 +58,19 @@ $(document).ready(function () {
         tableInit( oldtabid, newtabid );
     });
 
-    $(document).on('click', '.delete', function() {
+    $(document).on('click', '.delete-facet', function() {
+        var line = $(this).closest("tr");
+        remove_line(line);
+    });
+    $(document).on('click', '.delete-mapping', function() {
+        var line = $(this).closest("tr");
+        remove_line(line);
+    });
+    $(document).on('click', '.delete-search-field', function() {
         if ($(this).hasClass('mandatory') && $(".mandatory[data-field_name=" + $(this).attr('data-field_name') + "]").length < 2) {
             alert( __("This field is mandatory and must have at least one mapping") );
             return;
         } else {
-            var table = $(this).closest('table');
-            let dt = $(table).DataTable();
-            dt.row( $(this).closest('tr') ).remove().draw();
-            $(this).parents('tr').remove();
             var line = $(this).closest("tr");
 
             var name;
@@ -74,28 +89,24 @@ $(document).ready(function () {
                 var search_field_line = $('input[name="search_field_name"][value="' + search_field_name + '"]').closest("tr");
                 $(search_field_line).find('a.btn-default').removeClass('disabled');
             }
+
+            remove_line(line);
         }
     });
 
     $('.add').click(function () {
         var table = $(this).closest('table');
         let table_id = table.attr('id');
-        var index_name = $(table).attr('data-index_name');
+        let dt = $('#' + table_id).DataTable();
         var line = $(this).closest("tr");
         var marc_field = $(line).find('input[data-id="mapping_marc_field"]').val();
-        if (marc_field.length > 0) {
+        let dt_data = dt.data();
+        if ( marc_field.length ) {
             var new_line = clone_line(line);
-            var search_field_name = $(line).find('select[data-id="mapping_search_field_name"] option:selected').text();
-            new_line.appendTo($('table[data-index_name="' + index_name + '"]>tbody'));
+            var index_name = $(table).attr('data-index_name');
             let dt = $('#' + table_id).DataTable();
             dt.row.add(new_line).draw();
 
-            $(table).on( 'click', '.delete', function () {
-                var table = $(this).closest('table');
-                let dt = $(table).DataTable();
-                dt.row( $(this).closest('tr') ).remove().draw();
-            } );
-
             clean_line(line);
         }
     });
@@ -144,15 +155,8 @@ $(document).ready(function () {
         if (search_field_name.length > 0) {
             var new_line = clone_line(line);
             new_line.find('td:first').attr({'data-order': search_field_name});
-            new_line.appendTo($('table#' + table_id + '>tbody'));
             dt.row.add(new_line).draw();
 
-            $(table).on( 'click', '.delete', function () {
-                var table = $(this).closest('table');
-                let dt = $(table).DataTable();
-                dt.row( $(this).closest('tr') ).remove().draw();
-            } );
-
             clean_line(line);
         }
     });
@@ -173,15 +177,9 @@ $(document).ready(function () {
         if (search_field_name.length > 0) {
             const next_id = Math.max.apply(null, dt_data.map(row => row[0])) + 1;
             const label = selected_option.data('label');
-            new_line = [next_id, search_field_name, '<span>%s</span><input type="hidden" name="facet_name" value="%s" />'.format(label.escapeHtml(), search_field_name.escapeHtml()), '<a class="btn btn-default btn-xs delete" style="cursor: pointer;"><i class="fa fa-trash"></i> %s</a>'.format(__("Delete"))];
+            new_line = [next_id, search_field_name, '<span>%s</span><input type="hidden" name="facet_name" value="%s" />'.format(label.escapeHtml(), search_field_name.escapeHtml()), build_delete_link()]
             dt.row.add(new_line).draw();
 
-            $(table).on( 'click', '.delete', function () {
-                var table = $(this).closest('table');
-                let dt = $(table).DataTable();
-                dt.row( $(this).closest('tr') ).remove().draw();
-            } );
-
             clean_line(line);
         }
     });
-- 
2.39.5