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:
Maurício Meneghini Fauth 2025-05-14 12:51:40 -03:00
parent dd0c8a4c88
commit 65a4eed88f
No known key found for this signature in database
GPG Key ID: 6A16FD38AFC89CC8
4 changed files with 62 additions and 34 deletions

View File

@ -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;
/**

View File

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

View File

@ -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'),

View File

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