Replace export SQL and rename exported dialogs with modal
Signed-off-by: Saksham Gupta <shucon01@gmail.com>
This commit is contained in:
Saksham Gupta
William Desportes
parent
f357a5d7c3
commit
ed4e2bce55
112
js/src/export.js
112
js/src/export.js
@ -230,22 +230,11 @@ AJAX.registerTeardown('export.js', function () {
|
||||
AJAX.registerOnload('export.js', function () {
|
||||
$('#showsqlquery').on('click', function () {
|
||||
// Creating a dialog box similar to preview sql container to show sql query
|
||||
var modalOptions = {};
|
||||
modalOptions[Messages.strClose] = function () {
|
||||
$(this).dialog('close');
|
||||
};
|
||||
$('#export_sql_modal_content').clone().dialog({
|
||||
minWidth: 550,
|
||||
maxHeight: 400,
|
||||
modal: true,
|
||||
buttons: modalOptions,
|
||||
title: Messages.strQuery,
|
||||
close: function () {
|
||||
$(this).remove();
|
||||
}, open: function () {
|
||||
// Pretty SQL printing.
|
||||
Functions.highlightSql($(this));
|
||||
}
|
||||
var modal = $('#showSqlQueryModal');
|
||||
modal.modal('show');
|
||||
modal.on('shown.bs.modal', function () {
|
||||
$('#showSqlQueryModalLabel').first().html(Messages.strQuery);
|
||||
Functions.highlightSql(modal);
|
||||
});
|
||||
});
|
||||
|
||||
@ -804,59 +793,50 @@ Export.aliasSelectHandler = function (event) {
|
||||
*/
|
||||
Export.createAliasModal = function (event) {
|
||||
event.preventDefault();
|
||||
var dlgButtons = {};
|
||||
dlgButtons[Messages.strSaveAndClose] = function () {
|
||||
$(this).dialog('close');
|
||||
$('#alias_modal').parent().appendTo($('form[name="dump"]'));
|
||||
};
|
||||
$('#alias_modal').dialog({
|
||||
width: Math.min($(window).width() - 100, 700),
|
||||
maxHeight: $(window).height(),
|
||||
modal: true,
|
||||
dialogClass: 'alias-dialog',
|
||||
buttons: dlgButtons,
|
||||
create: function () {
|
||||
$(this).closest('.ui-dialog').find('.ui-button').addClass('btn btn-secondary');
|
||||
$(this).css('maxHeight', $(window).height() - 150);
|
||||
var db = CommonParams.get('db');
|
||||
if (db) {
|
||||
var option = $('<option></option>');
|
||||
option.text(db);
|
||||
option.attr('value', db);
|
||||
$('#db_alias_select').append(option).val(db).trigger('change');
|
||||
} else {
|
||||
var params = {
|
||||
'ajax_request': true,
|
||||
'server': CommonParams.get('server')
|
||||
};
|
||||
$.post('index.php?route=/databases', params, function (response) {
|
||||
if (response.success === true) {
|
||||
$.each(response.databases, function (idx, value) {
|
||||
var option = $('<option></option>');
|
||||
option.text(value);
|
||||
option.attr('value', value);
|
||||
$('#db_alias_select').append(option);
|
||||
});
|
||||
} else {
|
||||
Functions.ajaxShowMessage(response.error, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
close: function () {
|
||||
var isEmpty = true;
|
||||
$(this).find('input[type="text"]').each(function () {
|
||||
// trim empty input fields on close
|
||||
if ($(this).val()) {
|
||||
isEmpty = false;
|
||||
var modal = $('#renameExportModal');
|
||||
modal.modal('show');
|
||||
modal.on('shown.bs.modal', function () {
|
||||
modal.closest('.ui-dialog').find('.ui-button').addClass('btn btn-secondary');
|
||||
var db = CommonParams.get('db');
|
||||
if (db) {
|
||||
var option = $('<option></option>');
|
||||
option.text(db);
|
||||
option.attr('value', db);
|
||||
$('#db_alias_select').append(option).val(db).trigger('change');
|
||||
} else {
|
||||
var params = {
|
||||
'ajax_request': true,
|
||||
'server': CommonParams.get('server')
|
||||
};
|
||||
$.post('index.php?route=/databases', params, function (response) {
|
||||
if (response.success === true) {
|
||||
$.each(response.databases, function (idx, value) {
|
||||
var option = $('<option></option>');
|
||||
option.text(value);
|
||||
option.attr('value', value);
|
||||
$('#db_alias_select').append(option);
|
||||
});
|
||||
} else {
|
||||
$(this).parents('tr').remove();
|
||||
Functions.ajaxShowMessage(response.error, false);
|
||||
}
|
||||
});
|
||||
// Toggle checkbox based on aliases
|
||||
$('input#btn_alias_config').prop('checked', !isEmpty);
|
||||
},
|
||||
position: { my: 'center top', at: 'center top', of: window }
|
||||
}
|
||||
});
|
||||
modal.on('hidden.bs.modal', function () {
|
||||
var isEmpty = true;
|
||||
$(this).find('input[type="text"]').each(function () {
|
||||
// trim empty input fields on close
|
||||
if ($(this).val()) {
|
||||
isEmpty = false;
|
||||
} else {
|
||||
$(this).parents('tr').remove();
|
||||
}
|
||||
});
|
||||
// Toggle checkbox based on aliases
|
||||
$('input#btn_alias_config').prop('checked', !isEmpty);
|
||||
});
|
||||
$('#saveAndCloseBtn').on('click', function () {
|
||||
$('#alias_modal').parent().appendTo($('form[name="dump"]'));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -52,15 +52,29 @@
|
||||
{# l10n: Button to show the SQL query on the export page #}
|
||||
<input class="btn btn-secondary" type="submit" id="showsqlquery" value="{% trans 'Show SQL query' %}">
|
||||
</div>
|
||||
<div class="d-none">
|
||||
<div id="export_sql_modal_content">
|
||||
<code class="sql">
|
||||
<pre id="sql_preview_query">{{ sql_query }}</pre>
|
||||
</code>
|
||||
<div class="d-none"></div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
<div class="modal fade" id="showSqlQueryModal" tabindex="-1" aria-labelledby="showSqlQueryModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="showSqlQueryModalLabel">{% trans 'Loading' %}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="export_sql_modal_content">
|
||||
<code class="sql">
|
||||
<pre id="sql_preview_query">{{ sql_query }}</pre>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -154,125 +168,140 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="alias_modal" class="hide" title="{% trans 'Rename exported databases/tables/columns' %}">
|
||||
<table class="table align-middle mb-3" id="alias_data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">
|
||||
{% trans 'Defined aliases' %}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for db, db_data in aliases %}
|
||||
{% if db_data.alias is defined and db_data.alias is not null %}
|
||||
<tr>
|
||||
<th>{% trans %}Database{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}</td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][alias]" value="{{ db_data.alias }}" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% for table, table_data in db_data.tables ?? [] %}
|
||||
{% if table_data.alias is defined and table_data.alias is not null %}
|
||||
<div class="modal fade" id="renameExportModal" tabindex="-1" aria-labelledby="renameExportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="renameExportModalLabel">{% trans 'Rename exported databases/tables/columns' %}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow: auto;">
|
||||
<table class="table align-middle mb-3" id="alias_data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans %}Table{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}.{{ table }}</td>
|
||||
<th colspan="4">
|
||||
{% trans 'Defined aliases' %}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for db, db_data in aliases %}
|
||||
{% if db_data.alias is defined and db_data.alias is not null %}
|
||||
<tr>
|
||||
<th>{% trans %}Database{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}</td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][alias]" value="{{ db_data.alias }}" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% for table, table_data in db_data.tables ?? [] %}
|
||||
{% if table_data.alias is defined and table_data.alias is not null %}
|
||||
<tr>
|
||||
<th>{% trans %}Table{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}.{{ table }}</td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][tables][{{ table }}][alias]" value="{{ table_data.alias }}" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% for column, column_name in table_data.columns ?? [] %}
|
||||
<tr>
|
||||
<th>{% trans %}Column{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}.{{ table }}.{{ column }}</td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][tables][{{ table }}][colums][{{ column }}]" value="{{ column_name }}" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
{# Empty row for javascript manipulations. #}
|
||||
<tfoot class="hide">
|
||||
<tr>
|
||||
<th></th>
|
||||
<td></td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][tables][{{ table }}][alias]" value="{{ table_data.alias }}" type="text">
|
||||
<input name="aliases_new" value="" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
{% for column, column_name in table_data.columns ?? [] %}
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">{% trans 'Define new aliases' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th>{% trans %}Column{% context %}Alias{% endtrans %}</th>
|
||||
<td>{{ db }}.{{ table }}.{{ column }}</td>
|
||||
<td>
|
||||
<input name="aliases[{{ db }}][tables][{{ table }}][colums][{{ column }}]" value="{{ column_name }}" type="text">
|
||||
<label>{% trans 'Select database:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
<select id="db_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="db_alias_name" placeholder="{% trans 'New database name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="db_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
{# Empty row for javascript manipulations. #}
|
||||
<tfoot class="hide">
|
||||
<tr>
|
||||
<th></th>
|
||||
<td></td>
|
||||
<td>
|
||||
<input name="aliases_new" value="" type="text">
|
||||
</td>
|
||||
<td>
|
||||
<button class="alias_remove btn btn-secondary">{% trans 'Remove' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4">{% trans 'Define new aliases' %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>
|
||||
<label>{% trans 'Select database:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="db_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="db_alias_name" placeholder="{% trans 'New database name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="db_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>{% trans 'Select table:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="table_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="table_alias_name" placeholder="{% trans 'New table name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="table_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>{% trans 'Select column:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="column_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="column_alias_name" placeholder="{% trans 'New column name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="column_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<tr>
|
||||
<td>
|
||||
<label>{% trans 'Select table:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="table_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="table_alias_name" placeholder="{% trans 'New table name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="table_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>{% trans 'Select column:' %}</label>
|
||||
</td>
|
||||
<td>
|
||||
<select id="column_alias_select"><option value=""></option></select>
|
||||
</td>
|
||||
<td>
|
||||
<input id="column_alias_name" placeholder="{% trans 'New column name' %}" disabled="1">
|
||||
</td>
|
||||
<td>
|
||||
<button id="column_alias_button" class="btn btn-secondary" disabled="1">{% trans 'Add' %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="saveAndCloseBtn" data-bs-dismiss="modal">
|
||||
{% trans 'Save & close' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exportoptions" id="output">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
