diff options
| author | Saksham Gupta <shucontech@gmail.com> | 2021-08-13 10:26:32 +0300 |
|---|---|---|
| committer | Saksham Gupta <shucontech@gmail.com> | 2021-09-09 23:43:43 +0300 |
| commit | 8301118f21c4b5a70c437d155ce67e36ec2ffb50 (patch) | |
| tree | 93c44d8316d26500cbcd03257daa1425dc876339 | |
| parent | c60b78691597cec8fe31f35f2dc085f2b119312d (diff) | |
Replace Confirm Preview SQL dialog with modal
Signed-off-by: Saksham Gupta <shucontech@gmail.com>
Final commit
Signed-off-by: Saksham Gupta <shucontech@gmail.com>
Fix code quality
Signed-off-by: Saksham Gupta <shucontech@gmail.com>
Fix line end
Signed-off-by: Saksham Gupta <shucontech@gmail.com>
| -rw-r--r-- | js/src/functions.js | 42 | ||||
| -rw-r--r-- | templates/indexes.twig | 1 | ||||
| -rw-r--r-- | templates/modals/preview_sql_confirmation.twig | 19 | ||||
| -rw-r--r-- | templates/table/structure/display_structure.twig | 1 |
4 files changed, 30 insertions, 33 deletions
diff --git a/js/src/functions.js b/js/src/functions.js index b683cf16c2..d586302055 100644 --- a/js/src/functions.js +++ b/js/src/functions.js @@ -2000,39 +2000,15 @@ Functions.previewSql = function ($form) { * @return {void} */ Functions.confirmPreviewSql = function (sqlData, url, callback) { - var $dialogContent = $('<div class="preview_sql"><code class="sql"><pre>' - + sqlData - + '</pre></code></div>' - ); - var buttonOptions = [ - { - text: Messages.strOK, - class: 'submitOK', - click: function () { - callback(url); - } - }, - { - text: Messages.strCancel, - class: 'submitCancel', - click: function () { - $(this).dialog('close'); - } - } - ]; - $dialogContent.dialog({ - minWidth: 550, - maxHeight: 400, - modal: true, - buttons: buttonOptions, - title: Messages.strPreviewSQL, - close: function () { - $(this).remove(); - }, - open: function () { - // Pretty SQL printing. - Functions.highlightSql($(this)); - } + $('#previewSqlConfirmModal').modal('show'); + $('#previewSqlConfirmModalLabel').first().html(Messages.strPreviewSQL); + $('#previewSqlConfirmCode').first().text(sqlData); + $('#previewSqlConfirmModal').on('shown.bs.modal', function () { + Functions.highlightSql($('#previewSqlConfirmModal')); + }); + $('#previewSQLConfirmOkButton').on('click', function () { + callback(url); + $('#previewSqlConfirmModal').modal('hide'); }); }; diff --git a/templates/indexes.twig b/templates/indexes.twig index 4692fe6f0e..e7ebd66beb 100644 --- a/templates/indexes.twig +++ b/templates/indexes.twig @@ -7,6 +7,7 @@ {% if indexes is not empty %} {{ indexes_duplicates|raw }} + {{ include('modals/preview_sql_confirmation.twig') }} <div class="table-responsive jsresponsive"> <table class="table table-light table-striped table-hover table-sm w-auto align-middle" id="table_index"> <thead class="table-light"> diff --git a/templates/modals/preview_sql_confirmation.twig b/templates/modals/preview_sql_confirmation.twig new file mode 100644 index 0000000000..a2916c2fd6 --- /dev/null +++ b/templates/modals/preview_sql_confirmation.twig @@ -0,0 +1,19 @@ +<div class="modal fade" id="previewSqlConfirmModal" tabindex="-1" aria-labelledby="previewSqlConfirmModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="previewSqlConfirmModalLabel">{% trans 'Loading' %}</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button> + </div> + <div class="modal-body preview_sql"> + <code class="sql"> + <pre id="previewSqlConfirmCode"></pre> + </code> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" id="previewSQLConfirmOkButton">{% trans 'Ok' %}</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button> + </div> + </div> + </div> +</div> diff --git a/templates/table/structure/display_structure.twig b/templates/table/structure/display_structure.twig index 328fadc9f7..eff88cd0a0 100644 --- a/templates/table/structure/display_structure.twig +++ b/templates/table/structure/display_structure.twig @@ -405,6 +405,7 @@ {% if indexes is not empty %} {{ indexes_duplicates|raw }} + {{ include('modals/preview_sql_confirmation.twig') }} <div class="table-responsive jsresponsive"> <table class="table table-light table-striped table-hover table-sm w-auto align-middle" id="table_index"> <thead class="table-light"> |