From 63eac2a10359dfee25c1eaaccb30cd425af4deec Mon Sep 17 00:00:00 2001
From: Saksham Gupta <shucon01@gmail.com>
Date: Thu, 3 Jun 2021 20:39:57 +0530
Subject: [PATCH] Replace zoom plot dialogs with modals

Signed-off-by: Saksham Gupta <shucon01@gmail.com>
---
 js/src/table/zoom_plot_jqplot.js             |  43 +++----
 templates/table/zoom_search/result_form.twig | 121 ++++++++++++-------
 2 files changed, 90 insertions(+), 74 deletions(-)

diff --git a/js/src/table/zoom_plot_jqplot.js b/js/src/table/zoom_plot_jqplot.js
index 6f33b2059f..b4ba935b48 100644
--- a/js/src/table/zoom_plot_jqplot.js
+++ b/js/src/table/zoom_plot_jqplot.js
@@ -13,14 +13,10 @@
  * @return {false}
  **/
 function displayHelp () {
-    $('<div></div>')
-        .append(Messages.strDisplayHelp)
-        .appendTo('#page_content')
-        .dialog({
-            width: 450,
-            height: 'auto',
-            title: Messages.strHelpTitle
-        });
+    var modal = $('#helpModal');
+    modal.modal('show');
+    modal.find('.modal-body').first().html(Messages.strDisplayHelp);
+    $('#helpModalLabel').first().html(Messages.strHelpTitle);
     return false;
 }
 
@@ -280,13 +276,9 @@ AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
         });
 
     /**
-     ** Set dialog properties for the data display form
-     **/
-    var buttonOptions = {};
-    /*
      * Handle saving of a row in the editor
      */
-    buttonOptions[Messages.strSave] = function () {
+    var dataPointSave = function () {
         // Find changed values by comparing form values with selectedRow Object
         var newValues = {};// Stores the values changed from original
         var sqlTypes = {};
@@ -412,21 +404,14 @@ AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
                 }
             }); // End $.post
         }// End database update
-        $('#dataDisplay').dialog('close');
     };
-    buttonOptions[Messages.strCancel] = function () {
-        $(this).dialog('close');
-    };
-    $('#dataDisplay').dialog({
-        autoOpen: false,
-        title: Messages.strDataPointContent,
-        modal: true,
-        buttons: buttonOptions,
-        width: $('#dataDisplay').width() + 80,
-        open: function () {
-            $(this).find('input[type=checkbox]').css('margin', '0.5em');
-        }
+
+    $('#dataPointSaveButton').on('click', function () {
+        dataPointSave();
     });
+
+    $('#dataPointModalLabel').first().html(Messages.strDataPointContent);
+
     /**
      * Attach Ajax event handlers for input fields
      * in the dialog. Used to submit the Ajax
@@ -435,8 +420,8 @@ AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
     $(document).on('keydown', '#dataDisplay :input', function (e) {
         if (e.which === 13) { // 13 is the ENTER key
             e.preventDefault();
-            if (typeof buttonOptions[Messages.strSave] === 'function') {
-                buttonOptions[Messages.strSave].call();
+            if (typeof dataPointSave === 'function') {
+                dataPointSave();
             }
         }
     });
@@ -619,7 +604,7 @@ AJAX.registerOnload('table/zoom_plot_jqplot.js', function () {
                     selectedRow = data.row_info;
                 });
 
-                $('#dataDisplay').dialog('open');
+                $('#dataPointModal').modal('show');
             }
         );
     }
diff --git a/templates/table/zoom_search/result_form.twig b/templates/table/zoom_search/result_form.twig
index e730934b9c..936d941da9 100644
--- a/templates/table/zoom_search/result_form.twig
+++ b/templates/table/zoom_search/result_form.twig
@@ -19,53 +19,84 @@
         {% endif %}
       </div>
 
-      {# Displays rows in point edit form #}
-      <div id="dataDisplay" class="hide">
-        <table class="table align-middle">
-          <thead>
-            <tr>
-              <th>{% trans 'Column' %}</th>
-              <th>{% trans 'Null' %}</th>
-              <th>{% trans 'Value' %}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for column_index in 0..column_names|length - 1 %}
-              {% set field_popup = column_names[column_index] %}
-              {% set foreign_data = get_foreign_data(foreigners, field_popup, false, '', '') %}
-              <tr class="noclick">
-                <th>{{ column_names[column_index] }}</th>
-                {# Null checkbox if column can be null #}
-                <th>
-                  {% if column_null_flags[column_index] == 'YES' %}
-                    <input type="checkbox" class="checkbox_null" name="criteriaColumnNullFlags[{{ column_index }}]" id="edit_fields_null_id_{{ column_index }}">
-                  {% endif %}
-                </th>
-                {# Column's Input box #}
-                <th>
-                  {% include 'table/search/input_box.twig' with {
-                    'str': '',
-                    'column_type': column_types[column_index],
-                    'column_id': column_types[column_index] ? 'edit_fieldID_' : 'fieldID_',
-                    'in_zoom_search_edit': true,
-                    'foreigners': foreigners,
-                    'column_name': field_popup,
-                    'column_name_hash': column_name_hashes[field_popup],
-                    'foreign_data': foreign_data,
-                    'table': table,
-                    'column_index': column_index,
-                    'foreign_max_limit': foreign_max_limit,
-                    'criteria_values': '',
-                    'db': db,
-                    'in_fbs': false
-                  } only %}
-                </th>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
+      <div class="modal fade" id="dataPointModal" tabindex="-1" aria-labelledby="dataPointModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="dataPointModalLabel">{% trans 'Loading' %}</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+            </div>
+            <div class="modal-body" style="overflow: auto;">
+              {# Displays rows in point edit form #}
+              <div id="dataDisplay">
+                <table class="table align-middle">
+                  <thead>
+                  <tr>
+                    <th>{% trans 'Column' %}</th>
+                    <th>{% trans 'Null' %}</th>
+                    <th>{% trans 'Value' %}</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  {% for column_index in 0..column_names|length - 1 %}
+                    {% set field_popup = column_names[column_index] %}
+                    {% set foreign_data = get_foreign_data(foreigners, field_popup, false, '', '') %}
+                    <tr class="noclick">
+                      <th>{{ column_names[column_index] }}</th>
+                      {# Null checkbox if column can be null #}
+                      <th>
+                        {% if column_null_flags[column_index] == 'YES' %}
+                          <input type="checkbox" class="checkbox_null" name="criteriaColumnNullFlags[{{ column_index }}]" id="edit_fields_null_id_{{ column_index }}">
+                        {% endif %}
+                      </th>
+                      {# Column's Input box #}
+                      <th>
+                        {% include 'table/search/input_box.twig' with {
+                          'str': '',
+                          'column_type': column_types[column_index],
+                          'column_id': column_types[column_index] ? 'edit_fieldID_' : 'fieldID_',
+                          'in_zoom_search_edit': true,
+                          'foreigners': foreigners,
+                          'column_name': field_popup,
+                          'column_name_hash': column_name_hashes[field_popup],
+                          'foreign_data': foreign_data,
+                          'table': table,
+                          'column_index': column_index,
+                          'foreign_max_limit': foreign_max_limit,
+                          'criteria_values': '',
+                          'db': db,
+                          'in_fbs': false
+                        } only %}
+                      </th>
+                    </tr>
+                  {% endfor %}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" id="dataPointSaveButton" data-bs-dismiss="modal">{% trans 'Save' %}</button>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+            </div>
+          </div>
+        </div>
       </div>
+
+
       <input type="hidden" id="queryID" name="sql_query">
     </div>
   </div>
 </form>
+
+<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="helpModalLabel">{% trans 'Loading' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>