Add a secondary modal in modals.html

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

View File

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

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;'>";
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>";
$(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);
}

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) {
table.bootstrapTable({

View File

@ -123,9 +123,28 @@
{% if location %}
location: {{ location.id }}
{% 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;
});

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