Replace events export jQuery UI's dialog with a modal
Signed-off-by: Maurício Meneghini Fauth <mauricio@mfauth.net>
This commit is contained in:
parent
dd0c8a4c88
commit
65a4eed88f
@ -107,41 +107,23 @@ const DatabaseEvents = {
|
||||
}
|
||||
|
||||
ajaxRemoveMessage($msg);
|
||||
/**
|
||||
* @var buttonOptions Object containing options
|
||||
* for jQueryUI dialog buttons
|
||||
*/
|
||||
var buttonOptions = {
|
||||
[window.Messages.strClose]: {
|
||||
text: window.Messages.strClose,
|
||||
class: 'btn btn-primary',
|
||||
click: function () {
|
||||
$(this).dialog('close').remove();
|
||||
},
|
||||
},
|
||||
};
|
||||
/**
|
||||
* Display the dialog to the user
|
||||
*/
|
||||
data.message = '<textarea cols="40" rows="15" class="w-100">' + data.message + '</textarea>';
|
||||
var $ajaxDialog = $('<div>' + data.message + '</div>').dialog({
|
||||
classes: {
|
||||
'ui-dialog-titlebar-close': 'btn-close'
|
||||
},
|
||||
width: 500,
|
||||
// @ts-ignore
|
||||
buttons: buttonOptions,
|
||||
title: data.title
|
||||
|
||||
const eventsExportTextarea = '<textarea id="eventsExportTextarea" cols="40" rows="15" class="form-control" aria-label="' + window.Messages.strEvent + '"></textarea>';
|
||||
const eventsExportModal = document.getElementById('eventsExportModal');
|
||||
eventsExportModal.addEventListener('shown.bs.modal', function () {
|
||||
eventsExportModal.querySelector('.modal-title').textContent = data.title;
|
||||
eventsExportModal.querySelector('.modal-body').innerHTML = eventsExportTextarea;
|
||||
document.getElementById('eventsExportTextarea').textContent = data.message;
|
||||
getSqlEditor($('#eventsExportTextarea'));
|
||||
});
|
||||
// Attach syntax highlighted editor to export dialog
|
||||
/**
|
||||
* @var $elm jQuery object containing the reference
|
||||
* to the Export textarea.
|
||||
*/
|
||||
var $elm = $ajaxDialog.find('textarea');
|
||||
getSqlEditor($elm);
|
||||
} // end showExport()
|
||||
}, // end exportDialog()
|
||||
|
||||
eventsExportModal.addEventListener('hidden.bs.modal', function () {
|
||||
eventsExportModal.querySelector('.modal-body').innerHTML = eventsExportTextarea;
|
||||
});
|
||||
|
||||
window.bootstrap.Modal.getOrCreateInstance(eventsExportModal).show();
|
||||
}
|
||||
},
|
||||
editorDialog: function (isNew, $this) {
|
||||
var that = this;
|
||||
/**
|
||||
|
||||
@ -173,4 +173,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="eventsExportModalLabel">{{ t('Export event') }}</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
|
||||
</div>
|
||||
<div class="modal-body"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -392,6 +392,7 @@ final class JavaScriptMessagesController implements InvocableController
|
||||
'NoExportable' => __('No routine is exportable. Required privileges may be lacking.'),
|
||||
'strRoutine' => __('Routine'),
|
||||
'strTrigger' => __('Trigger'),
|
||||
'strEvent' => __('Event'),
|
||||
|
||||
/* For ENUM/SET editor*/
|
||||
'enum_columnVals' => __('Values for column %s'),
|
||||
|
||||
@ -201,6 +201,21 @@ final class EventsControllerTest extends AbstractTestCase
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="eventsExportModalLabel">Export event</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
HTML;
|
||||
@ -347,6 +362,21 @@ HTML;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="eventsExportModalLabel">Export event</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
HTML;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user