Modal form for part creation

InvenTree/part/forms.py

@@ -12,10 +12,7 @@ class EditPartForm(forms.ModelForm):
         super(EditPartForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
 
-        self.helper.form_id = 'id-edit-part-form'
-        self.helper.form_method = 'post'
-
-        self.helper.add_input(Submit('submit', 'Submit'))
+        self.helper.form_tag = False
 
     class Meta:
         model = Part

InvenTree/part/templates/part/category_detail.html

@@ -22,12 +22,10 @@
 {% endif %}
 
 <div class='container-fluid'>
-    <button type='button' class='btn btn-primary js-create-cat'>
+    <button type='button' class='btn btn-primary' id='create-cat'>
         New Category
     </button>
-<a href="{% url 'part-create' %}?category={{ category.id }}">
-    <button class="btn btn-success">New Part</button>
-</a>
+<button class="btn btn-success" id='create-part'>New Part</button>
 
 <a href="{% url 'category-edit' category.id %}">
     <button class="btn btn-info">Edit Category</button>
@@ -39,12 +37,7 @@
 
 </div>
 
-<div class='modal fade' id='modal-cat'>
-    <div class='modal-dialog'>
-        <div class='modal-content'>
-        </div>
-    </div>
-</div>
+{% include 'modal.html' %}
 
 {% endblock %}
 
@@ -54,10 +47,18 @@
 
 <script type='text/javascript'>
 
-    $(".js-create-cat").click(function() {
-        launchModalForm("#modal-cat",
+    $("#create-cat").click(function() {
+        launchModalForm("#modal-form",
                         "{% url 'category-create' %}",
-                        {category: {{ category.id }} });
+                        {category: {{ category.id }}
+                    });
+    });
+
+    $("#create-part").click( function() {
+        launchModalForm("#modal-form",
+                        "{% url 'part-create' %}",
+                        {category: {{ category.id }}
+                    });
     });
 
 

InvenTree/part/templates/part/index.html

@@ -5,12 +5,7 @@
 
 {% include "part/cat_link.html" with category=category %}
 
-<div class='modal fade' id='modal-cat'>
-    <div class='modal-dialog'>
-        <div class='modal-content'>
-        </div>
-    </div>
-</div>
+{% include 'modal.html' %}
 
 {% if children.all|length > 0 %}
 <h4>Part Categories</h4>
@@ -21,12 +16,10 @@
 {% include "part/category_parts.html" with parts=parts %}
 
 <div class='container-fluid'>
-<button type='button' class='btn btn-primary js-create-cat'>
+<button type='button' class='btn btn-primary' id='create-cat'>
     New Category
 </button>
-<a href="{% url 'part-create' %}">
-    <button class="btn btn-success">New Part</button>
-</a>
+<button class="btn btn-success" id='create-part'>New Part</button>
 </div>
 {% endblock %}
 
@@ -37,8 +30,12 @@
 <script type="text/javascript">
 $(document).ready(function () {
 
-    $(".js-create-cat").click(function() {
-        launchModalForm("#modal-cat", "{% url 'category-create' %}");
+    $("#create-cat").click(function() {
+        launchModalForm("#modal-form", "{% url 'category-create' %}");
+    });
+
+    $("#create-part").click(function() {
+        launchModalForm("#modal-form", "{% url 'part-create' %}");
     });
 });
 </script>

InvenTree/part/views.py

@@ -41,7 +41,7 @@ class PartIndex(ListView):
         return context
 
 
-class PartCreate(CreateView):
+class PartCreate(AjaxCreateView):
     """ Create a new part
     - Optionally provide a category object as initial data
     """
@@ -49,6 +49,9 @@ class PartCreate(CreateView):
     form_class = EditPartForm
     template_name = 'part/create.html'
 
+    ajax_form_title = 'Create new part'
+    ajax_template_name = 'modal_form.html'
+
     def get_category_id(self):
         return self.request.GET.get('category', None)
 

InvenTree/templates/modal.html

@@ -0,0 +1,6 @@
+<div class='modal fade modal-fixed-footer' role='dialog' id='modal-form'>
+    <div class='modal-dialog'>
+        <div class='modal-content'>
+        </div>
+    </div>
+</div>