Fixed position header + footer for modals

- Fun with CSS!
- Header title provided by AJAX data
- Footer static
- Submit button text can be customized via JSON dat

InvenTree/InvenTree/views.py

@@ -23,12 +23,13 @@ class AjaxView(object):
 
     def renderJsonResponse(self, request, form, data={}):
 
-        context = {'form': form,
+        context = {'form': form
-                   'form_action': self.ajax_form_action,
-                   'form_title': self.ajax_form_title,
-                   'submit_text': self.ajax_submit_text,
                   }
 
+        data['title'] = self.ajax_form_title
+
+        data['submit_text'] = self.ajax_submit_text
+
         data['html_form'] = render_to_string(
             self.getAjaxTemplate(),
             context,

InvenTree/static/css/inventree.css

@@ -40,7 +40,12 @@
   overflow: hidden;
 }
 
-.modal-content {
+.modal-content h3 {
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+.modal-form-content {
   border-radius: 0;
   position:relative;
   height: auto !important;

InvenTree/static/script/modal_form.js

@@ -1,7 +1,17 @@
+function attachSelect(modal) {
+
+    // Attach to any 'select' inputs on the modal
+    // Provide search filtering of dropdown items
+    $(modal + ' .select').select2({
+        dropdownParent: $(modal),
+        dropdownAutoWidth: true,
+    });
+}
+
 function launchModalForm(modal, url, data) {
 
     $(modal).on('shown.bs.modal', function () {
-        $(modal + ' .modal-content').scrollTop(0); // animate({ scrollTop: 0 }, 'fast');
+        $(modal + ' .modal-form-content').scrollTop(0);
     });
 
     $.ajax({
@@ -13,15 +23,17 @@ function launchModalForm(modal, url, data) {
             $(modal).modal('show');
         },
         success: function(response) {
+            if (response.title) {
+                $(modal + ' #modal-title').html(response.title);
+            }
+            if (response.submit_text) {
+                $(modal + ' #modal-form-submit').html(response.submit_text);
+            }
             if (response.html_form) {
-                var target = modal + ' .modal-content';
+                var target = modal + ' .modal-form-content';
                 $(target).html(response.html_form);
 
-                var select = modal + ' .select';
+                attachSelect(modal);
-                $(select).select2({
-                    dropdownParent: $(modal),
-                    dropdownAutoWidth: true
-                });
 
             } else {
                 alert('JSON response missing form data');
@@ -34,8 +46,10 @@ function launchModalForm(modal, url, data) {
         }
     });
 
-    $(modal).on('submit', '.js-modal-form', function() {
+    $(modal).on('click', '#modal-form-submit', function() {
-        var form = $(this);
+
+        // Extract the form from the modal dialog
+        var form = $(modal).find(".js-modal-form");
 
         $.ajax({
             url: url,
@@ -48,14 +62,10 @@ function launchModalForm(modal, url, data) {
                     $(modal).modal('hide');
                 }
                 else if (response.html_form) {
-                    var target = modal + ' .modal-content';
+                    var target = modal + ' .modal-form-content';
                     $(target).html(response.html_form);
 
-                    var select = modal + ' .select';
+                    attachSelect(modal);
-                    $(select).select2({
-                        dropdownParent: $(modal),
-                        dropdownAutoWidth: true
-                    });
                 }
                 else {
                     alert('JSON response missing form data');

InvenTree/templates/modal.html

@@ -1,6 +1,18 @@
 <div class='modal fade modal-fixed-footer' tabindex='-1' role='dialog' id='modal-form'>
     <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'></h3>
+            </div>
+            <div class='modal-form-content'>
+            </div>
+            <div class='modal-footer'>
+                <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
+                <button type='button' class='btn btn-primary' id='modal-form-submit'>Submit</button>
+            </div>
         </div>
     </div>
 </div>

InvenTree/templates/modal_form.html

@@ -1,17 +1,5 @@
-<form method="post" action='{{ form_action }}' class='js-modal-form'>
+<form method="post" action='' class='js-modal-form'>
   {% csrf_token %}
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-    <h4 class="modal-title">{{ form_title }}</h4>
-  </div>
-  <div class="modal-body">
   {% load crispy_forms_tags %}
   {% crispy form %}
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-    <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
-  </div>
 </form>