webapp/phpmyadmin
1
0
Fork 0
mirror of https://github.com/phpmyadmin/phpmyadmin.git synced 2026-10-28 07:41:55 +03:00
Code Activity

Replace zoom plot dialogs with modals

Browse Source 
Signed-off-by: Saksham Gupta <shucon01@gmail.com>
This commit is contained in:
Saksham Gupta
2021-06-03 20:39:57 +05:30
committed by William Desportes
parent f357a5d7c3
commit 63eac2a103
2 changed files with 90 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
js/src/table/zoom_plot_jqplot.js
View File

@@ -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');
}
);
}

121
templates/table/zoom_search/result_form.twig
View File

@@ -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>