Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modals can now be created programatically

Browse Source 
- INFINITE MODALS
- API forms now create a new modal as required
This commit is contained in:
Oliver 2021-07-02 10:52:56 +10:00
parent 74d2334f36
commit 2f1dea1123
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
InvenTree/templates/js/forms.js
View File

@ -237,6 +237,11 @@ function constructForm(url, options) {
// Default HTTP method
options.method = options.method || 'PATCH';
// Create a new modal if one does not exists
if (!options.modal) {
options.modal = createNewModal();
}
// Request OPTIONS endpoint from the API
getApiEndpointOptions(url, function(OPTIONS) {
@ -413,6 +418,7 @@ function constructFormBody(fields, options) {
insertConfirmButton(options);
}
// Display the modal
$(modal).modal('show');
updateFieldValues(fields, options);
@ -433,7 +439,6 @@ function constructFormBody(fields, options) {
modalShowSubmitButton(modal, true);
$(modal).off('click', '#modal-form-submit');
$(modal).on('click', '#modal-form-submit', function() {
submitFormData(fields, options);
@ -1163,6 +1168,7 @@ function constructField(name, parameters, options) {
case 'float':
case 'decimal':
case 'related field':
case 'date':
extra = true;
break;
default:

53
InvenTree/templates/js/modals.js
View File

@ -1,5 +1,58 @@
{% load i18n %}
/*
* Create and display a new modal dialog
*/
function createNewModal(options={}) {
var id = options.id || 0;
// Always increment the ID of the modal
id += 1;
var html = `
<div class='modal fade modal-fixed-footer modal-primary' role='dialog' id='modal-form-${id}'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label='{% trans "Close" %}'>
<span aria-hidden="true">&times;</span>
</button>
<h3 id='modal-title'><i>Form Title Here</i></h3>
</div>
<div class='modal-form-content-wrapper'>
<div class='alert alert-block alert-danger' id='form-validation-warning' style='display: none;'>
{% trans "Form errors exist" %}
</div>
<div class='modal-form-content'>
<!-- Form content will be injected here-->
</div>
</div>
<div class='modal-footer'>
<div id='modal-footer-buttons'></div>
<button type='button' class='btn btn-default' id='modal-form-cancel' data-dismiss='modal'>{% trans "Cancel" %}</button>
<button type='button' class='btn btn-primary' id='modal-form-submit'>{% trans "Submit" %}</button>
</div>
</div>
</div>
</div>
`;
$('body').append(html);
var modal_name = `#modal-form-${id}`;
// Automatically remove the modal when it is deleted!
$(modal_name).on('hidden.bs.modal', function(e) {
$(modal_name).remove();
});
// Return the "name" of the modal
return modal_name;
}
function makeOption(text, value, title) {
/* Format an option for a select element
*/