Replace Create view dialog with modal

Signed-off-by: Saksham Gupta <shucontech@gmail.com> Fix code quality Signed-off-by: Saksham Gupta <shucontech@gmail.com>
phpmyadmin · Oct 2, 2021 · 3149ee8 · 3149ee8
1 parent c68b6a0
commit 3149ee8
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 30 deletions.
diff --git a/js/src/functions.js b/js/src/functions.js
@@ -4000,7 +4000,7 @@ Functions.printPage = function () {
 AJAX.registerTeardown('functions.js', function () {
     $('input#print').off('click');
     $(document).off('click', 'a.create_view.ajax');
-    $(document).off('keydown', '#createViewDialog input, #createViewDialog select');
+    $(document).off('keydown', '#createViewModal input, #createViewModal select');
     $(document).off('change', '#fkc_checkbox');
 });
 
@@ -4022,14 +4022,14 @@ AJAX.registerOnload('functions.js', function () {
      */
     $(document).on('click', 'a.create_view.ajax', function (e) {
         e.preventDefault();
-        Functions.createViewDialog($(this));
+        Functions.createViewModal($(this));
     });
     /**
      * Attach Ajax event handlers for input fields in the editor
      * and used to submit the Ajax request when the ENTER key is pressed.
      */
-    if ($('#createViewDialog').length !== 0) {
-        $(document).on('keydown', '#createViewDialog input, #createViewDialog select', function (e) {
+    if ($('#createViewModal').length !== 0) {
+        $(document).on('keydown', '#createViewModal input, #createViewModal select', function (e) {
             if (e.which === 13) { // 13 is the ENTER key
                 e.preventDefault();
 
@@ -4047,48 +4047,38 @@ AJAX.registerOnload('functions.js', function () {
     }
 });
 
-Functions.createViewDialog = function ($this) {
+Functions.createViewModal = function ($this) {
     var $msg = Functions.ajaxShowMessage();
     var sep = CommonParams.get('arg_separator');
     var params = Functions.getJsConfirmCommonParam(this, $this.getPostData());
     params += sep + 'ajax_dialog=1';
     $.post($this.attr('href'), params, function (data) {
         if (typeof data !== 'undefined' && data.success === true) {
             Functions.ajaxRemoveMessage($msg);
-            var buttonOptions = {};
-            buttonOptions[Messages.strGo] = function () {
+            $('#createViewModalGoButton').on('click', function () {
                 if (typeof CodeMirror !== 'undefined') {
                     codeMirrorEditor.save();
                 }
                 $msg = Functions.ajaxShowMessage();
-                $.post('index.php?route=/view/create', $('#createViewDialog').find('form').serialize(), function (data) {
+                $.post('index.php?route=/view/create', $('#createViewModal').find('form').serialize(), function (data) {
                     Functions.ajaxRemoveMessage($msg);
                     if (typeof data !== 'undefined' && data.success === true) {
-                        $('#createViewDialog').dialog('close');
+                        $('#createViewModal').modal('hide');
                         $('.result_query').html(data.message);
                         Navigation.reload();
                     } else {
                         Functions.ajaxShowMessage(data.error);
                     }
                 });
-            };
-            buttonOptions[Messages.strClose] = function () {
-                $(this).dialog('close');
-            };
-            var $dialog = $('<div></div>').attr('id', 'createViewDialog').append(data.message).dialog({
-                width: 600,
-                minWidth: 400,
-                height: $(window).height(),
-                modal: true,
-                buttons: buttonOptions,
-                title: Messages.strCreateView,
-                close: function () {
-                    $(this).remove();
-                }
             });
+            $('#createViewModal').find('.modal-body').first().html(data.message);
             // Attach syntax highlighted editor
-            codeMirrorEditor = Functions.getSqlEditor($dialog.find('textarea'));
-            $('input:visible[type=text]', $dialog).first().trigger('focus');
+            $('#createViewModal').on('shown.bs.modal', function () {
+                codeMirrorEditor = Functions.getSqlEditor($('#createViewModal').find('textarea'));
+                $('input:visible[type=text]', $('#createViewModal')).first().trigger('focus');
+                $('#createViewModal').off('shown.bs.modal');
+            });
+            $('#createViewModal').modal('show');
         } else {
             Functions.ajaxShowMessage(data.error);
         }

diff --git a/js/src/navigation.js b/js/src/navigation.js
@@ -467,7 +467,7 @@ $(function () {
     /** New view */
     $(document).on('click', 'li.new_view a.ajax', function (event) {
         event.preventDefault();
-        Functions.createViewDialog($(this));
+        Functions.createViewModal($(this));
     });
 
     /** Hide navigation tree item */

diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php
@@ -614,7 +614,6 @@ private function setMessages(): void
             'strLatestAvailable' => __(', latest stable version:'),
             'strUpToDate' => __('up to date'),
 
-            'strCreateView' => __('Create view'),
 
             /* Error Reporting */
             'strErrorOccurred' => __('A fatal JavaScript error has occurred. Would you like to send an error report?'),

diff --git a/templates/header.twig b/templates/header.twig
@@ -59,3 +59,4 @@
     {{ recent_table|raw }}
     {{ include('modals/preview_sql_modal.twig') }}
     {{ include('modals/enum_set_editor.twig') }}
+    {{ include('modals/create_view.twig') }}
diff --git a/templates/modals/create_view.twig b/templates/modals/create_view.twig
@@ -0,0 +1,15 @@
+<div class="modal fade" id="createViewModal" tabindex="-1" aria-labelledby="createViewModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" id="createViewModalDialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="createViewModalLabel">{% trans 'Create view' %}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
+      </div>
+      <div class="modal-body"></div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" id="createViewModalGoButton">{% trans 'Go' %}</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/themes/bootstrap/scss/_codemirror.scss b/themes/bootstrap/scss/_codemirror.scss
@@ -83,7 +83,7 @@ span {
 }
 
 .CodeMirror-hints {
-  z-index: 999;
+  z-index: 1999;
 }
 
 .CodeMirror-lint-tooltip {

diff --git a/themes/metro/scss/_codemirror.scss b/themes/metro/scss/_codemirror.scss
@@ -92,5 +92,5 @@ span {
 }
 
 .CodeMirror-hints {
-  z-index: 999;
+  z-index: 1999;
 }
diff --git a/themes/pmahomme/scss/_codemirror.scss b/themes/pmahomme/scss/_codemirror.scss
@@ -80,7 +80,7 @@ span {
 }
 
 .CodeMirror-hints {
-  z-index: 999;
+  z-index: 1999;
 }
 
 .CodeMirror-lint-tooltip {