Modal forms for stock app

InvenTree/part/templates/part/index.html

@@ -33,7 +33,11 @@ $(document).ready(function () {
     $('#part-list').footable();
 
     $("#create-cat").click(function() {
-        launchModalForm("#modal-form", "{% url 'category-create' %}");
+        launchModalForm("#modal-form",
+                        "{% url 'category-create' %}",
+                        {
+                            follow: true
+                        });
     });
 
     $("#create-part").click(function() {

InvenTree/part/templates/part/stock.html

@@ -1,25 +1,32 @@
 {% extends "part/part_base.html" %}
-
+{% load static %}
 {% block details %}
 
 {% include 'part/tabs.html' with tab='stock' %}
 
 <h3>Part Stock</h3>
 
-<table class="table table-striped">
+<table class="table table-striped" id='stock-table' data-sorting='true'>
+<thead>
 <tr>
-    <th>Link</th>
+    <th data-sortable='false'>Link</th>
     <th>Quantity</th>
     <th>Location</th>
     <th>Supplier part</th>
     <th>Stocktake</th>
     <th>Notes</th>
 </tr>
+</thead>
+<tbody>
 {% for stock in part.locations.all %}
 <tr>
     <td><a href="{% url 'stock-item-detail' stock.id %}">Click</a></td>
     <td>{{ stock.quantity }}</td>
-    <td><a href="{% url 'stock-location-detail' stock.location.id %}">{{ stock.location.name }}</a></td>
+    <td>
+        {% if stock.location %}
+        <a href="{% url 'stock-location-detail' stock.location.id %}">{{ stock.location.name }}</a>
+        {% endif %}
+    </td>
     <td>
         {% if stock.supplier_part %}
     <a href="{% url 'supplier-part-detail' stock.supplier_part.id %}">
@@ -31,12 +38,38 @@
     <td>{{ stock.notes }}</td>
 </tr>
 {% endfor %}
+</tbody>
 </table
 
 <div class='container-fluid'>
-<a href="{% url 'stock-item-create' %}?part={{ part.id }}">
-    <button class='btn btn-success'>Add new Stock Item</button>
-</a>
+<button class='btn btn-success' id='add-stock-item'>Add new Stock Item</button>
 </div>
 
+{% include 'modals.html' %}
+
+{% endblock %}
+
+{% block javascript %}
+
+<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
+
+<script type="text/javascript">
+$(document).ready(function () {
+
+    $('#stock-table').footable();
+
+    $('#add-stock-item').click(function () {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-item-create' %}",
+                        {
+                            reload: true,
+                            data: {
+                                part: {{ part.id }}
+                            }
+                        });
+    });
+});
+</script>
+
 {% endblock %}

InvenTree/stock/forms.py

@@ -14,11 +14,7 @@ class EditStockLocationForm(forms.ModelForm):
         super(EditStockLocationForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
 
-        self.helper.form_id = 'id-edit-part-form'
-        self.helper.form_class = 'blueForms'
-        self.helper.form_method = 'post'
-
-        self.helper.add_input(Submit('submit', 'Submit'))
+        self.helper.form_tag = False
 
     class Meta:
         model = StockLocation
@@ -35,11 +31,7 @@ class EditStockItemForm(forms.ModelForm):
         super(EditStockItemForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
 
-        self.helper.form_id = 'id-edit-part-form'
-        self.helper.form_class = 'blueForms'
-        self.helper.form_method = 'post'
-
-        self.helper.add_input(Submit('submit', 'Submit'))
+        self.helper.form_tag = False
 
     class Meta:
         model = StockItem

InvenTree/stock/templates/stock/index.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-
+{% load static %}
 {% block content %}
 
 {% include "stock/loc_link.html" with location=None %}
@@ -9,14 +9,65 @@
 {% include "stock/location_list.html" with locations=locations %}
 {% endif %}
 
-{% if items|length > 0 %}
-{% include "stock/stock_table.html" with items=items %}
-{% endif %}
+<table class="table table-striped" id='stock-table' data-sorting='true'>
+<thead>
+<tr>
+    <th>Part</th>
+    <th>Location</th>
+    <th>Stock</th>
+    <th>Status</th>
+    <th>Stocktake</th>
+    <th data-sortable='false'></th>
+</tr>
+</thead>
+<tbody>
+{% for item in items.all %}
+<tr>
+    <td><a href="{% url 'part-stock' item.part.id %}">{{ item.part.name }}</a></td>
+    <td>
+        {% if item.location %}
+        <a href="{% url 'stock-location-detail' item.location.id %}">
+            {{ item.location.pathstring }}
+        </a>
+        {% endif %}
+    </td>
+    <td>{{ item.quantity }}</td>
+    <td>{{ item.status }}</td>
+    <td>{{ item.stocktake_date }}</td>
+    <td><a href="{% url 'stock-item-detail' item.id %}">Click</a></td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
 
 <div class='container-fluid'>
-<a href="{% url 'stock-location-create' %}">
-    <button class="btn btn-success">New Stock Location</button>
-</a>
+<button class="btn btn-success" id='location-create'>New Stock Location</button>
 </div>
 
+{% include 'modals.html' %}
+
+{% endblock %}
+
+{% block javascript %}
+
+<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
+
+<script type="text/javascript">
+$(document).ready(function () {
+
+    $('#stock-table').footable();
+
+    $('#location-create').click(function () {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-location-create' %}",
+                        {
+                            follow: true
+                        });
+    });
+
+});
+
+</script>
+
 {% endblock %}

InvenTree/stock/templates/stock/item.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-
+{% load static %}
 {% block content %}
 
 {% include "stock/loc_link.html" with location=item.location %}
@@ -94,12 +94,38 @@
 {% endif %}
 
 <div class='container-fluid'>
-<a href="{% url 'stock-item-edit' item.id %}">
-    <button class='btn btn-info'>Edit Stock Item</button>
-</a>
-<a href="{% url 'stock-item-delete' item.id %}">
-    <button class='btn btn-danger'>Delete Stock Item</button>
-</a>
+<button class='btn btn-info' id='edit-item'>Edit Stock Item</button>
+<button class='btn btn-danger' id='delete-item'>Delete Stock Item</button>
 </div>
 
+{% include 'modals.html' %}
+
+{% endblock %}
+
+{% block javascript %}
+
+<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
+
+<script type="text/javascript">
+$(document).ready(function () {
+    $("#edit-item").click(function () {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-item-edit' item.id %}",
+                        {
+                            reload: true
+                        });
+    });
+
+    $("#delete-item").click(function () {
+        launchDeleteForm("#modal-delete",
+                         "{% url 'stock-item-delete' item.id %}",
+                         {
+                             redirect: "{% url 'part-stock' item.part.id %}"
+                         });
+    });
+});
+
+</script>
+
 {% endblock %}

InvenTree/stock/templates/stock/item_delete.html

@@ -1,9 +1,5 @@
-{% extends "delete_obj.html" %}
-
-{% block del_title %}
 Are you sure you want to delete this stock item?
-{% endblock %}
 
-{% block del_body %}
-This will remove <b>{{ item.quantity }}</b> units of <b>'{{ item.part.name }}'</b> from stock.
-{% endblock %}
+<br>
+
+This will remove <b>{{ item.quantity }}</b> units of <b>{{ item.part.name }}</b> from stock.

InvenTree/stock/templates/stock/location.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-
+{% load static %}
 {% block content %}
 
 {% include "stock/loc_link.html" with location=location %}
@@ -12,27 +12,70 @@
 {% include "stock/location_list.html" with locations=location.children %}
 {% endif %}
 
-{% if location.has_items %}
 <h4>Stock Items</h4>
 {% include "stock/stock_table.html" with items=location.items %}
-{% endif %}
 
 <div class='container-fluid'>
-<a href="{% url 'stock-location-create' %}?location={{ location.id }}">
-    <button class='btn btn-success'>New Stock Location</button>
-</a>
-<a href="{% url 'stock-item-create' %}?location={{ location.id }}">
-    <button class='btn btn-success'>New Stock Item</button>
-</a>
-
-<a href="{% url 'stock-location-edit' location.id %}">
-    <button class="btn btn-info">Edit Location</button>
-</a>
-
-<a href="{% url 'stock-location-delete' location.id %}">
-    <button class="btn btn-danger">Delete Location</button>
-</a>
+<button class='btn btn-success' id='location-create'>New Stock Location</button>
+<button class='btn btn-success' id='new-item'>New Stock Item</button>
+<button class="btn btn-info" id='location-edit'>Edit Location</button>
+<button class="btn btn-danger" id='location-delete'>Delete Location</button>
 
 </div>
 
-{% endblock %}
+{% include 'modals.html' %}
+
+{% endblock %}
+
+{% block javascript %}
+
+<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
+
+<script type="text/javascript">
+$(document).ready(function () {
+
+    $('#stock-table').footable();
+
+    $('#location-create').click(function () {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-location-create' %}",
+                        {
+                            data: {
+                                location: {{ location.id }}
+                            },
+                            follow: true
+                        });
+    });
+
+    $('#location-edit').click(function() {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-location-edit' location.id %}",
+                        {
+                            reload: true
+                        });
+    });
+
+    $('#location-delete').click(function() {
+        launchDeleteForm("#modal-delete",
+                         "{% url 'stock-location-delete' location.id %}",
+                         {
+                             redirect: "{% url 'stock-index' %}"
+                         });
+    })
+
+    $('#new-item').click(function () {
+        launchModalForm("#modal-form",
+                        "{% url 'stock-item-create' %}",
+                        {
+                            reload: true,
+                            data: {
+                                location: {{ location.id }}
+                            }
+                        });
+    });
+
+});
+</script>
+
+{% endblock %}

InvenTree/stock/templates/stock/location_delete.html

@@ -1,10 +1,7 @@
-{% extends 'delete_obj.html' %}
-
-{% block del_title %}
 Are you sure you want to delete stock location '{{ location.name }}'?
-{% endblock %}
 
-{% block del_body %}
+<br>
+
 {% if location.children.all|length > 0 %}
 <p>This location contains {{ location.children.all|length }} child locations.<br>
 If this location is deleted, these child locations will be moved to
@@ -37,5 +34,3 @@ If this location is deleted, these items will be moved to the top level 'Stock'
     {% endfor %}
 </ul>
 {% endif %}
-
-{% endblock %}

InvenTree/stock/templates/stock/location_list.html

@@ -1,5 +1,5 @@
 <ul class="list-group">
 {% for child in locations.all %}
-<li class="list-group-item"><a href="{% url 'stock-location-detail' child.id %}">{{ child.name }}</a></li>
+<li class="list-group-item"><a href="{% url 'stock-location-detail' child.id %}">{{ child.name }}</a> - <i>{{ child.description }}</li>
 {% endfor %}
 </ul>

InvenTree/stock/templates/stock/stock_table.html

@@ -1,11 +1,14 @@
-<table class="table table-striped">
+<table class="table table-striped" id='stock-table' data-sorting='true'>
+<thead>
 <tr>
     <th>Part</th>
     <th>Stock</th>
     <th>Status</th>
     <th>Stocktake</th>
-    <th></th>
+    <th data-sortable='false'></th>
 </tr>
+</thead>
+<tbody>
 {% for item in items.all %}
 <tr>
     <td><a href="{% url 'part-stock' item.part.id %}">{{ item.part.name }}</a></td>
@@ -15,4 +18,5 @@
     <td><a href="{% url 'stock-item-detail' item.id %}">Click</a></td>
 </tr>
 {% endfor %}
+</tbody>
 </table>

InvenTree/stock/views.py

@@ -4,6 +4,8 @@ from django.http import HttpResponseRedirect
 from django.views.generic import DetailView, ListView
 from django.views.generic.edit import UpdateView, DeleteView, CreateView
 
+from InvenTree.views import AjaxUpdateView, AjaxDeleteView, AjaxCreateView
+
 from part.models import Part
 from .models import StockItem, StockLocation
 
@@ -14,18 +16,16 @@ from .forms import EditStockItemForm
 class StockIndex(ListView):
     model = StockItem
     template_name = 'stock/index.html'
-    context_obect_name = 'items'
-    paginate_by = 50
-
-    def get_queryset(self):
-        return StockItem.objects.filter(location=None)
+    context_obect_name = 'locations'
 
     def get_context_data(self, **kwargs):
         context = super(StockIndex, self).get_context_data(**kwargs).copy()
 
+        # Return all top-level locations
         locations = StockLocation.objects.filter(parent=None)
 
         context['locations'] = locations
+        context['items'] = StockItem.objects.all()
 
         return context
 
@@ -44,25 +44,31 @@ class StockItemDetail(DetailView):
     model = StockItem
 
 
-class StockLocationEdit(UpdateView):
+class StockLocationEdit(AjaxUpdateView):
     model = StockLocation
     form_class = EditStockLocationForm
     template_name = 'stock/location_edit.html'
     context_object_name = 'location'
+    ajax_template_name = 'modal_form.html'
+    ajax_form_title = 'Edit Stock Location'
 
 
-class StockItemEdit(UpdateView):
+class StockItemEdit(AjaxUpdateView):
     model = StockItem
     form_class = EditStockItemForm
     template_name = 'stock/item_edit.html'
     context_object_name = 'item'
+    ajax_template_name = 'modal_form.html'
+    ajax_form_title = 'Edit Stock Item'
 
 
-class StockLocationCreate(CreateView):
+class StockLocationCreate(AjaxCreateView):
     model = StockLocation
     form_class = EditStockLocationForm
     template_name = 'stock/location_create.html'
     context_object_name = 'location'
+    ajax_template_name = 'modal_form.html'
+    ajax_form_title = 'Create new Stock Location'
 
     def get_initial(self):
         initials = super(StockLocationCreate, self).get_initial().copy()
@@ -75,11 +81,13 @@ class StockLocationCreate(CreateView):
         return initials
 
 
-class StockItemCreate(CreateView):
+class StockItemCreate(AjaxCreateView):
     model = StockItem
     form_class = EditStockItemForm
     template_name = 'stock/item_create.html'
     context_object_name = 'item'
+    ajax_template_name = 'modal_form.html'
+    ajax_form_title = 'Create new Stock Item'
 
     def get_initial(self):
         initials = super(StockItemCreate, self).get_initial().copy()
@@ -100,27 +108,17 @@ class StockItemCreate(CreateView):
         return initials
 
 
-class StockLocationDelete(DeleteView):
+class StockLocationDelete(AjaxDeleteView):
     model = StockLocation
     success_url = '/stock'
     template_name = 'stock/location_delete.html'
     context_object_name = 'location'
-
-    def post(self, request, *args, **kwargs):
-        if 'confirm' in request.POST:
-            return super(StockLocationDelete, self).post(request, *args, **kwargs)
-        else:
-            return HttpResponseRedirect(self.get_object().get_absolute_url())
+    ajax_form_title = 'Delete Stock Location'
 
 
-class StockItemDelete(DeleteView):
+class StockItemDelete(AjaxDeleteView):
     model = StockItem
     success_url = '/stock/'
     template_name = 'stock/item_delete.html'
     context_object_name = 'item'
-
-    def post(self, request, *args, **kwargs):
-        if 'confirm' in request.POST:
-            return super(StockItemDelete, self).post(request, *args, **kwargs)
-        else:
-            return HttpResponseRedirect(self.get_object().get_absolute_url())
+    ajax_form_title = 'Delete Stock Item'