Add a secondary modal in modals.html

InvenTree/static/css/inventree.css

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

InvenTree/static/script/inventree/modals.js

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

InvenTree/static/script/inventree/stock.js

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

InvenTree/stock/templates/stock/location.html

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

InvenTree/templates/modals.html

@@ -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-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 class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-question-dialog'>
         <div class='modal-dialog'>