inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-11-03 22:55:43 +00:00
Code Activity

Add a secondary modal in modals.html

Browse Source
This commit is contained in:
Oliver Walters
2019-05-14 22:30:24 +10:00
parent a96cd2240c
commit dc3abec899
5 changed files with 76 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
InvenTree/static/css/inventree.css
View File

@@ -51,7 +51,7 @@
background: #eee; background: #eee;
display: none; display: none;
position: absolute; position: absolute;
z-index: 999; z-index: 400;
border: 1px solid #555; border: 1px solid #555;
max-width: 250px; max-width: 250px;
} }
@@ -159,7 +159,15 @@
.modal { .modal {
overflow: hidden; overflow: hidden;
z-index: 99999999; z-index: 9999;
}
.modal-primary {
z-index: 10000;
}
.modal-secondary {
z-index: 11000;
} }
.js-modal-form .checkbox { .js-modal-form .checkbox {
@@ -227,7 +235,7 @@
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
z-index: 999999; z-index: 5000;
pointer-events: none; // Prevent this div from blocking links underneath pointer-events: none; // Prevent this div from blocking links underneath
} }

32
InvenTree/static/script/inventree/modals.js
View File

@@ -354,15 +354,41 @@ function injectModalForm(modal, form_html) {
} }
function insertNewItemButton(modal, field, text) { function insertNewItemButton(modal, options) {
/* Insert a button into a modal form, after a field label.
* Looks for a <label> tag inside the form with the attribute "for='id_<field>'"
* Inserts a button at the end of this lael element.
*/
var html = "<span style='float: right;'>"; var html = "<span style='float: right;'>";
html += "<div type='button' class='btn btn-primary' id='btn-new-" + field + "'>" + text + "</div>"; html += "<div type='button' class='btn btn-primary'";
if (options.title) {
html += " title='" + options.title + "'";
}
html += " id='btn-new-" + options.field + "'>" + options.label + "</div>";
html += "</span>"; html += "</span>";
$(modal).find('label[for="id_'+ field + '"]').append(html); $(modal).find('label[for="id_'+ options.field + '"]').append(html);
}
function attachSecondaryModal(modal, options) {
/* Attach a secondary modal form to the primary modal form.
* Inserts a button into the primary form which, when clicked,
* will launch the secondary modal to do /something/ and then return a result.
*
* options:
* field: Name of the field to attach to
* label: Button text
* title: Hover text to display over button (optional)
*/
// Insert the button
insertNewItemButton(modal, options);
} }

26
InvenTree/static/script/inventree/stock.js
View File

@@ -345,32 +345,6 @@ function moveStockItems(items, options) {
}); });
} }
function deleteStockItems(items, options) {
var modal = '#modal-delete';
if ('modal' in options) {
modal = options.modal;
}
if (items.length == 0) {
alert('No stock items selected');
return;
}
function doDelete(parts) {
//TODO
}
openModal({
modal: modal,
title: 'Delete ' + items.length + ' stock items'
});
}
function loadStockTable(table, options) { function loadStockTable(table, options) {
table.bootstrapTable({ table.bootstrapTable({

19
InvenTree/stock/templates/stock/location.html
View File

@@ -123,9 +123,28 @@
{% if location %} {% if location %}
location: {{ location.id }} location: {{ location.id }}
{% endif %} {% endif %}
},
after_render: function(modal, response) {
attachSecondaryModal(modal,
{
'field': 'part',
'label': 'New Part',
'title': 'Create New Part',
}
);
attachSecondaryModal(modal,
{
'field': 'location',
'label': 'New Location',
'title': 'Create New Location'
}
);
} }
}); });
return false; return false;
}); });

36
InvenTree/templates/modals.html
View File

@@ -1,4 +1,4 @@
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-form'> <div class='modal fade modal-fixed-footer modal-primary' tabindex='-1' role='dialog' id='modal-form'>
<div class='modal-dialog'> <div class='modal-dialog'>
<div class='modal-content'> <div class='modal-content'>
<div class="modal-header"> <div class="modal-header">
@@ -17,27 +17,25 @@
</div> </div>
</div> </div>
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-delete'> <div class='modal fade modal-fixed-footer modal-secondary' tabindex='-1' role='dialog' id='modal-form-secondary'>
<div class='modal-dialog'> <div class='modal-dialog'>
<div class='modal-content'> <div class='modal-content'>
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h3 id='modal-title'>Confirm Item Deletion</h3> <h3 id='modal-title'>Form Title Here</h3>
</div> </div>
<form action='' method='post' id='delete-form'> <div class='modal-form-content'>
{% csrf_token %} </div>
</form> <div class='modal-footer'>
<div class='modal-form-content'> <button type='button' class='btn btn-default' id='modal-form-close' data-dismiss='modal'>Close</button>
</div> <button type='button' class='btn btn-primary' id='modal-form-submit'>Submit</button>
<div class='modal-footer'> </div>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type='button' class='btn btn-danger' id='modal-form-delete'>Delete</button>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'> <div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'>
<div class='modal-dialog'> <div class='modal-dialog'>