From cc754839e7c4387a268cdae04f55e66dcc827edc Mon Sep 17 00:00:00 2001 From: Piyush Vijay Date: Sun, 15 Jul 2018 00:26:18 +0530 Subject: [PATCH] Updating Sql utility function file, sql source file containing code for various sql related events, adding function for sql editor and inline sql editor in functions.js Signed-Off-By: Piyush Vijay --- js/src/functions.js | 147 ++++++++++++++++++++++++++++++++++++++++++++ js/src/sql.js | 119 ++++++++++++----------------------- js/src/utils/sql.js | 123 +++++++++++++++--------------------- 3 files changed, 234 insertions(+), 155 deletions(-) diff --git a/js/src/functions.js b/js/src/functions.js index 85f852c2b6..ac0cbe4b6d 100644 --- a/js/src/functions.js +++ b/js/src/functions.js @@ -1,4 +1,11 @@ import { AJAX } from './ajax'; +import CommonParams from './variables/common_params'; + +// Sql based imports +import { PMA_getSQLEditor, bindCodeMirrorToInlineEditor } from './functions/Sql/SqlEditor'; +import { sqlQueryOptions, updateQueryParameters, PMA_highlightSQL } from './utils/sql'; +import { PMA_handleSimulateQueryButton, insertQuery, checkSqlQuery } from './functions/Sql/SqlQuery'; + /** * Here we register a function that will remove the onsubmit event from all * forms that will be handled by the generic page loader. We then save this @@ -109,3 +116,143 @@ export function onload1 () { return true; }); } + +/** + * Attach CodeMirror2 editor to SQL edit area. + */ +export function onloadSqlEditor () { + var $elm = $('#sqlquery'); + if ($elm.length > 0) { + if (CommonParams.get('CodemirrorEnable') === true) { + sqlQueryOptions.codemirror_editor = PMA_getSQLEditor($elm); + sqlQueryOptions.codemirror_editor.focus(); + sqlQueryOptions.codemirror_editor.on('blur', updateQueryParameters); + } else { + // without codemirror + $elm.focus().on('blur', updateQueryParameters); + } + } + PMA_highlightSQL($('body')); +} +export function teardownSqlEditor () { + if (sqlQueryOptions.codemirror_editor) { + $('#sqlquery').text(sqlQueryOptions.codemirror_editor.getValue()); + sqlQueryOptions.codemirror_editor.toTextArea(); + sqlQueryOptions.codemirror_editor = false; + } +} + +/** + * Unbind all event handlers before tearing down a page + */ +export function teardownSqlInlineEditor () { + $(document).off('click', 'a.inline_edit_sql'); + $(document).off('click', 'input#sql_query_edit_save'); + $(document).off('click', 'input#sql_query_edit_discard'); + $('input.sqlbutton').off('click'); + if (sqlQueryOptions.codemirror_editor) { + sqlQueryOptions.codemirror_editor.off('blur'); + } else { + $(document).off('blur', '#sqlquery'); + } + $(document).off('change', '#parameterized'); + $(document).off('click', 'input.sqlbutton'); + $('#sqlquery').off('keydown'); + $('#sql_query_edit').off('keydown'); + + if (sqlQueryOptions.codemirror_inline_editor) { + // Copy the sql query to the text area to preserve it. + $('#sql_query_edit').text(sqlQueryOptions.codemirror_inline_editor.getValue()); + $(sqlQueryOptions.codemirror_inline_editor.getWrapperElement()).off('keydown'); + sqlQueryOptions.codemirror_inline_editor.toTextArea(); + sqlQueryOptions.codemirror_inline_editor = false; + } + if (sqlQueryOptions.codemirror_editor) { + $(sqlQueryOptions.codemirror_editor.getWrapperElement()).off('keydown'); + } +} + +/** + * Jquery Coding for inline editing SQL_QUERY + */ +export function onloadSqlInlineEditor () { + // If we are coming back to the page by clicking forward button + // of the browser, bind the code mirror to inline query editor. + bindCodeMirrorToInlineEditor(); + $(document).on('click', 'a.inline_edit_sql', function () { + if ($('#sql_query_edit').length) { + // An inline query editor is already open, + // we don't want another copy of it + return false; + } + + var $form = $(this).prev('form'); + var sql_query = $form.find('input[name=\'sql_query\']').val().trim(); + var $inner_sql = $(this).parent().prev().find('code.sql'); + var old_text = $inner_sql.html(); + + var new_content = '\n'; + // new_content += getForeignKeyCheckboxLoader(); + new_content += '\n'; + new_content += '\n'; + var $editor_area = $('div#inline_editor'); + if ($editor_area.length === 0) { + $editor_area = $('
'); + $editor_area.insertBefore($inner_sql); + } + $editor_area.html(new_content); + loadForeignKeyCheckbox(); + $inner_sql.hide(); + + bindCodeMirrorToInlineEditor(); + return false; + }); + + $(document).on('click', 'input#sql_query_edit_save', function (e) { + // hide already existing success message + var sql_query; + if (sqlQueryOptions.codemirror_inline_editor) { + sqlQueryOptions.codemirror_inline_editor.save(); + sql_query = sqlQueryOptions.codemirror_inline_editor.getValue(); + } else { + sql_query = $(this).parent().find('#sql_query_edit').val(); + } + var fk_check = $(this).parent().find('#fk_checks').is(':checked'); + + var $form = $('a.inline_edit_sql').prev('form'); + var $fake_form = $('
', { action: 'import.php', method: 'post' }) + .append($form.find('input[name=server], input[name=db], input[name=table], input[name=token]').clone()) + .append($('', { type: 'hidden', name: 'show_query', value: 1 })) + .append($('', { type: 'hidden', name: 'is_js_confirmed', value: 0 })) + .append($('', { type: 'hidden', name: 'sql_query', value: sql_query })) + .append($('', { type: 'hidden', name: 'fk_checks', value: fk_check ? 1 : 0 })); + if (! checkSqlQuery($fake_form[0])) { + return false; + } + $('.success').hide(); + $fake_form.appendTo($('body')).submit(); + }); + + $(document).on('click', 'input#sql_query_edit_discard', function () { + var $divEditor = $('div#inline_editor_outer'); + $divEditor.siblings('code.sql').show(); + $divEditor.remove(); + }); + + $(document).on('click', 'input.sqlbutton', function (evt) { + insertQuery(evt.target.id); + PMA_handleSimulateQueryButton(); + return false; + }); + + $(document).on('change', '#parameterized', updateQueryParameters); + + var $inputUsername = $('#input_username'); + if ($inputUsername) { + if ($inputUsername.val() === '') { + $inputUsername.trigger('focus'); + } else { + $('#input_password').trigger('focus'); + } + } +} diff --git a/js/src/sql.js b/js/src/sql.js index 962c33f0bf..8ae7b158ba 100644 --- a/js/src/sql.js +++ b/js/src/sql.js @@ -2,15 +2,28 @@ import { $ } from './utils/extend_jquery'; import './plugins/jquery/jquery.uitablefilter'; import { PMA_Messages as PMA_messages } from './variables/export_variables'; -import { setShowThisQuery, PMA_autosaveSQL, PMA_autosaveSQLSort, PMA_showThisQuery } from './functions/Sql'; +import PMA_commonParams from './variables/common_params'; +import { PMA_commonActions } from './classes/CommonActions'; +import PMA_MicroHistory from './classes/MicroHistory'; + + import { isStorageSupported } from './functions/config'; import { PMA_sprintf } from './utils/sprintf'; import { escapeHtml } from './utils/Sanitise'; -import PMA_commonParams from './variables/common_params'; import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage } from './utils/show_ajax_messages'; import { initStickyColumns, rearrangeStickyColumns, handleStickyColumns } from './functions/Grid/StickyColumns'; import { PMA_makegrid } from './utils/makegrid'; import { AJAX } from './ajax'; +import { initProfilingTables, makeProfilingChart } from './functions/Sql/SqlProfiling'; +import { PMA_highlightSQL } from './utils/sql'; +import { sqlQueryOptions } from './utils/sql'; +import Cookies from 'js-cookie'; +import { printPreview } from './functions/Print'; + +import { + setShowThisQuery, PMA_autosaveSQL, PMA_autosaveSQLSort, PMA_showThisQuery, + checkSavedQuery, setQuery, checkSqlQuery, PMA_handleSimulateQueryButton +} from './functions/Sql/SqlQuery'; /** * @fileoverview functions used wherever an sql query form is used @@ -44,8 +57,8 @@ export function teardown1 () { $(window).off('scroll'); $(document).off('keyup', '.filter_rows'); $(document).off('click', '#printView'); - if (codemirror_editor) { - codemirror_editor.off('change'); + if (sqlQueryOptions.codemirror_editor) { + sqlQueryOptions.codemirror_editor.off('change'); } else { $('#sqlquery').off('input propertychange'); } @@ -73,13 +86,13 @@ export function teardown1 () { * @memberOf jQuery */ export function onload1 () { - if (codemirror_editor || document.sqlform) { + if (sqlQueryOptions.codemirror_editor || document.sqlform) { setShowThisQuery(); } $(function () { - if (codemirror_editor) { - codemirror_editor.on('change', function () { - PMA_autosaveSQL(codemirror_editor.getValue()); + if (sqlQueryOptions.codemirror_editor) { + sqlQueryOptions.codemirror_editor.on('change', function () { + PMA_autosaveSQL(sqlQueryOptions.codemirror_editor.getValue()); }); } else { $('#sqlquery').on('input propertychange', function () { @@ -91,15 +104,23 @@ export function onload1 () { PMA_autosaveSQLSort($('select[name="sql_query"]').val()); }); } else { - if (isStorageSupported('localStorage') && window.localStorage.auto_saved_sql_sort !== undefined) { + if (isStorageSupported('localStorage') + && window.localStorage.auto_saved_sql_sort !== undefined + ) { window.localStorage.removeItem('auto_saved_sql_sort'); } else { Cookies.set('auto_saved_sql_sort', ''); } } // If sql query with sort for current table is stored, change sort by key select value - var sortStoredQuery = (isStorageSupported('localStorage') && typeof window.localStorage.auto_saved_sql_sort !== 'undefined') ? window.localStorage.auto_saved_sql_sort : Cookies.get('auto_saved_sql_sort'); - if (typeof sortStoredQuery !== 'undefined' && sortStoredQuery !== $('select[name="sql_query"]').val() && $('select[name="sql_query"] option[value="' + sortStoredQuery + '"]').length !== 0) { + var sortStoredQuery = (isStorageSupported('localStorage') + && typeof window.localStorage.auto_saved_sql_sort !== 'undefined') + ? window.localStorage.auto_saved_sql_sort : + Cookies.get('auto_saved_sql_sort'); + if (typeof sortStoredQuery !== 'undefined' + && sortStoredQuery !== $('select[name="sql_query"]').val() + && $('select[name="sql_query"] option[value="' + sortStoredQuery + '"]').length !== 0 + ) { $('select[name="sql_query"]').val(sortStoredQuery).trigger('change'); } } @@ -335,8 +356,8 @@ export function onload1 () { var db = $('input[name="db"]').val(); var table = $('input[name="table"]').val(); var query; - if (codemirror_editor) { - query = codemirror_editor.getValue(); + if (sqlQueryOptions.codemirror_editor) { + query = sqlQueryOptions.codemirror_editor.getValue(); } else { query = $('#sqlquery').val(); } @@ -406,8 +427,8 @@ export function onload1 () { event.preventDefault(); var $form = $(this); - if (codemirror_editor) { - $form[0].elements.sql_query.value = codemirror_editor.getValue(); + if (sqlQueryOptions.codemirror_editor) { + $form[0].elements.sql_query.value = sqlQueryOptions.codemirror_editor.getValue(); } if (! checkSqlQuery($form[0])) { return false; @@ -607,8 +628,8 @@ export function onload1 () { var delimiter = $('#id_sql_delimiter').val(); var db_name = $form.find('input[name="db"]').val(); - if (codemirror_editor) { - query = codemirror_editor.getValue(); + if (sqlQueryOptions.codemirror_editor) { + query = sqlQueryOptions.codemirror_editor.getValue(); } else { query = $('#sqlquery').val(); } @@ -789,12 +810,6 @@ function browseForeignDialog ($this_a) { }); } -function checkSavedQuery () { - if (isStorageSupported('localStorage') && window.localStorage.auto_saved_sql !== undefined) { - PMA_ajaxShowMessage(PMA_messages.strPreviousSaveQuery); - } -} - export function onload2 () { $('body').on('click', 'a.browse_foreign', function (e) { e.preventDefault(); @@ -826,67 +841,11 @@ export function onload2 () { /** * Check if there is any saved query */ - if (codemirror_editor || document.sqlform) { + if (sqlQueryOptions.codemirror_editor || document.sqlform) { checkSavedQuery(); } } -/* - * Profiling Chart - */ -function makeProfilingChart () { - if ($('#profilingchart').length === 0 || - $('#profilingchart').html().length !== 0 || - !$.jqplot || !$.jqplot.Highlighter || !$.jqplot.PieRenderer - ) { - return; - } - - var data = []; - $.each(JSON.parse($('#profilingChartData').html()), function (key, value) { - data.push([key, parseFloat(value)]); - }); - - // Remove chart and data divs contents - $('#profilingchart').html('').show(); - $('#profilingChartData').html(''); - - PMA_createProfilingChart('profilingchart', data); -} - -/* - * initialize profiling data tables - */ -function initProfilingTables () { - if (!$.tablesorter) { - return; - } - - $('#profiletable').tablesorter({ - widgets: ['zebra'], - sortList: [[0, 0]], - textExtraction: function (node) { - if (node.children.length > 0) { - return node.children[0].innerHTML; - } else { - return node.innerHTML; - } - } - }); - - $('#profilesummarytable').tablesorter({ - widgets: ['zebra'], - sortList: [[1, 1]], - textExtraction: function (node) { - if (node.children.length > 0) { - return node.children[0].innerHTML; - } else { - return node.innerHTML; - } - } - }); -} - export function onload4 () { makeProfilingChart(); initProfilingTables(); diff --git a/js/src/utils/sql.js b/js/src/utils/sql.js index b842503792..10b05b2b2b 100644 --- a/js/src/utils/sql.js +++ b/js/src/utils/sql.js @@ -1,13 +1,13 @@ import CodeMirror from 'codemirror'; -import '../../../node_modules/codemirror/mode/sql/sql.js'; -import '../../../node_modules/codemirror/addon/runmode/runmode.js'; -import '../../../node_modules/codemirror/addon/hint/show-hint.js'; -import '../../../node_modules/codemirror/addon/hint/sql-hint.js'; -import '../../../node_modules/codemirror/addon/lint/lint.js'; -// import '../../../node_modules/codemirror/addon/lint/sql-lint.js'; +import 'codemirror/mode/sql/sql.js'; +import 'codemirror/addon/runmode/runmode.js'; +import 'codemirror/addon/hint/show-hint.js'; +import 'codemirror/addon/hint/sql-hint.js'; +import 'codemirror/addon/lint/lint.js'; +import '../plugins/codemirror/sql-lint'; import { mysql_doc_builtin, mysql_doc_keyword } from '../consts/doclinks'; - -window.cm = CodeMirror; +import CommonParams from '../variables/common_params'; +import { GlobalVariables, PMA_Messages as PMA_messages } from '../variables/export_variables'; /** * Adds doc link to single highlighted SQL element @@ -18,7 +18,7 @@ function PMA_doc_add ($elm, params) { } var url = PMA_sprintf( - decodeURIComponent(mysql_doc_template), + decodeURIComponent(GlobalVariables.mysql_doc_template), params[0] ); if (params.length > 1) { @@ -106,6 +106,12 @@ export function PMA_highlightSQL ($base) { let sql_autocomplete_in_progress = false; let sql_autocomplete = false; var sql_autocomplete_default_table = ''; + +export var sqlQueryOptions = { + codemirror_editor: false, + codemirror_inline_editor: false +}; + export function codemirrorAutocompleteOnInputRead (instance) { if (!sql_autocomplete_in_progress && (!instance.options.hintOptions.tables || !sql_autocomplete)) { @@ -119,8 +125,8 @@ export function codemirrorAutocompleteOnInputRead (instance) { var href = 'db_sql_autocomplete.php'; var params = { 'ajax_request': true, - 'server': PMA_commonParams.get('server'), - 'db': PMA_commonParams.get('db'), + 'server': CommonParams.get('server'), + 'db': CommonParams.get('db'), 'no_debug': true }; @@ -140,7 +146,7 @@ export function codemirrorAutocompleteOnInputRead (instance) { success: function (data) { if (data.success) { var tables = JSON.parse(data.tables); - sql_autocomplete_default_table = PMA_commonParams.get('table'); + sql_autocomplete_default_table = CommonParams.get('table'); sql_autocomplete = []; for (var table in tables) { if (tables.hasOwnProperty(table)) { @@ -197,76 +203,43 @@ export function codemirrorAutocompleteOnInputRead (instance) { } /** - * Creates an SQL editor which supports auto completing etc. - * - * @param $textarea jQuery object wrapping the textarea to be made the editor - * @param options optional options for CodeMirror - * @param resize optional resizing ('vertical', 'horizontal', 'both') - * @param lintOptions additional options for lint + * Updates the input fields for the parameters based on the query */ -export function PMA_getSQLEditor ($textarea, options, resize, lintOptions) { - if ($textarea.length > 0 && typeof CodeMirror !== 'undefined') { - // merge options for CodeMirror - var defaults = { - lineNumbers: true, - matchBrackets: true, - extraKeys: { 'Ctrl-Space': 'autocomplete' }, - hintOptions: { 'completeSingle': false, 'completeOnSingleClick': true }, - indentUnit: 4, - mode: 'text/x-mysql', - lineWrapping: true - }; +export function updateQueryParameters () { + if ($('#parameterized').is(':checked')) { + var query = sqlQueryOptions.codemirror_editor + ? sqlQueryOptions.codemirror_editor.getValue() + : $('#sqlquery').val(); - if (CodeMirror.sqlLint) { - $.extend(defaults, { - gutters: ['CodeMirror-lint-markers'], - lint: { - 'getAnnotations': CodeMirror.sqlLint, - 'async': true, - 'lintOptions': lintOptions + var allParameters = query.match(/:[a-zA-Z0-9_]+/g); + var parameters = []; + // get unique parameters + if (allParameters) { + $.each(allParameters, function (i, parameter) { + if ($.inArray(parameter, parameters) === -1) { + parameters.push(parameter); } }); + } else { + $('#parametersDiv').text(PMA_messages.strNoParam); + return; } - $.extend(true, defaults, options); + var $temp = $('
'); + $temp.append($('#parametersDiv').children()); + $('#parametersDiv').empty(); - // create CodeMirror editor - var codemirrorEditor = CodeMirror.fromTextArea($textarea[0], defaults); - // allow resizing - if (! resize) { - resize = 'vertical'; - } - var handles = ''; - if (resize === 'vertical') { - handles = 's'; - } - if (resize === 'both') { - handles = 'all'; - } - if (resize === 'horizontal') { - handles = 'e, w'; - } - $(codemirrorEditor.getWrapperElement()) - .css('resize', resize) - .resizable({ - handles: handles, - resize: function () { - codemirrorEditor.setSize($(this).width(), $(this).height()); - } - }); - // enable autocomplete - codemirrorEditor.on('inputRead', codemirrorAutocompleteOnInputRead); - - // page locking - codemirrorEditor.on('change', function (e) { - e.data = { - value: 3, - content: codemirrorEditor.isClean(), - }; - AJAX.lockPageHandler(e); + $.each(parameters, function (i, parameter) { + var paramName = parameter.substring(1); + var $param = $temp.find('#paramSpan_' + paramName); + if (! $param.length) { + $param = $(''); + $('