From 76f929f7600417cd15d046a7c6e0c6edf74c96e9 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 4 Mar 2021 18:39:15 +0000
Subject: [PATCH] Bug 27682: (follow-up) Make sure table is drawn with correct
 width

The DataTables plugin calculates the width of the fixed header based on
the initial width of the corresponding table. Since these tables are
inside jQueryUI tabs, the width changes when the tabs are initialized
and jQueryUI adds its classes to the table's container.

This patch "manually" adds the relevant classes to the markup so that
the table's container is drawn with the right padding from the start.

Also fixed: Don't try to destroy "oldTableId" if the tableInit function
didn't pass an oldtabid.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../admin/searchengine/elasticsearch/mappings.tt       |  8 ++++----
 .../intranet-tmpl/prog/js/elasticsearch-mappings.js    | 10 ++++++----
 2 files changed, 10 insertions(+), 8 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 7d9d9c8b08..9a886bd9bc 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
@@ -97,7 +97,7 @@ a.add, a.delete {
         </div>
     [% END %]
     <form method="post">
-        <div id="tabs" class="toptabs" style="clear:both">
+        <div id="tabs" class="toptabs ui-tabs" style="clear:both">
             <ul>
                 <li><a href="#search_fields">Search fields</a></li>
                 [% FOREACH index IN indexes %]
@@ -107,7 +107,7 @@ a.add, a.delete {
                     [% END %]
                 [% END %]
             </ul>
-            <div id="search_fields">
+            <div id="search_fields" class="ui-tabs-panel">
               <table class="search_fields" id="search_fields_table">
                 <thead>
                   <tr>
@@ -229,7 +229,7 @@ a.add, a.delete {
               </table>
             </div>
             [% FOREACH index IN indexes %]
-                <div id="mapping_[% index.index_name | html %]">
+                <div id="mapping_[% index.index_name | html %]" class="ui-tabs-panel">
                     <table class="mappings" data-index_name="[% index.index_name | html %]" data-ordering="false" id="mapping_[% index.index_name | html %]_table">
                       <thead>
                         <tr class="nodrag nodrop">
@@ -398,7 +398,7 @@ a.add, a.delete {
 
                     [% IF index.index_name == 'biblios' %]
                         <h3>Facet order</h3>
-                        <div id="facet_[% index.index_name | html %]">
+                        <div id="facet_[% index.index_name | html %]" class="ui-tabs-panel">
                             <table>
                                 <thead>
                                     <tr>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
index 99d9185a4b..a6bd0baa41 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/elasticsearch-mappings.js
@@ -1,4 +1,4 @@
-/* global __ */
+/* global __ dataTablesDefaults */
 
 function clean_line(line) {
     $(line).find('input[type="text"]').val("");
@@ -22,10 +22,12 @@ function clone_line(line) {
 
 function tableInit( oldtabid, newtabid ) {
 
-    var oldTableId = $("#" + oldtabid + "_table");
-    var newTableId = $("#" + newtabid + "_table");
+    if ( oldtabid ){
+        var oldTableId = $("#" + oldtabid + "_table");
+        oldTableId.DataTable().destroy();
+    }
 
-    oldTableId.DataTable().destroy();
+    var newTableId = $("#" + newtabid + "_table");
     newTableId.DataTable(
         $.extend(true, {}, dataTablesDefaults, {
             "columnDefs": [
-- 
2.39.5