Merge pull request #348 from SchrodingersGat/build-page

Build page

InvenTree/build/templates/build/allocate.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "build/build_base.html" %}
 {% load static %}
 {% load inventree_extras %}
 
@@ -6,15 +6,14 @@
 InvenTree | Allocate Parts
 {% endblock %}
 
-{% block content %}
+{% block details %}
 
-<h3>Allocate Parts for Build</h3>
+{% include "build/tabs.html" with tab='allocate' %}
+
+<h4>Allocate Parts for Build</h4>
 
 <div class='row'>
     <div class='col-sm-6'>
-        
-        <h4><a href="{% url 'build-detail' build.id %}">{{ build.title }}</a></h4>
-        {{ build.quantity }} x {{ build.part.lonname }}    
     </div>
     <div class='col-sm-6'>
         <div class='btn-group' style='float: right;'>
@@ -25,6 +24,21 @@ InvenTree | Allocate Parts
 </div>
 <hr>
 
+<div class='row'>
+    <div class='col-sm-6'>
+        <h4>Part</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Available</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Required</h4>
+    </div>
+    <div class='col-sm-2'>
+        <h4>Allocated</h4>
+    </div>
+</div>
+
 {% for bom_item in bom_items.all %}
 {% include "build/allocation_item.html" with item=bom_item build=build collapse_id=bom_item.id %}
 {% endfor %}

InvenTree/build/templates/build/allocation_item.html

@@ -3,33 +3,30 @@
 {% load static %}
 {% load inventree_extras %}
 
+{% block collapse_panel_setup %}class='panel part-allocation' id='allocation-panel-{{ item.sub_part.id }}'{% endblock %}
+
 {% block collapse_title %}
     <div class='hover-icon media-left' style='float: left;'>
         <img class='hover-img-thumb' src="{% if item.sub_part.image %}{{ item.sub_part.image.url }}{% endif %}">
         <img class='hover-img-large' src="{% if item.sub_part.image %}{{ item.sub_part.image.url }}{% endif %}">
     </div>
     <div>
-        {{ item.sub_part.full_name }}<br>
+        {{ item.sub_part.full_name }}
         <small><i>{{ item.sub_part.description }}</i></small>
     </div>
 {% endblock %}
 
 {% block collapse_heading %}
-<div class='col-sm-1' align='right'>
+    <div class='col-sm-2'>
-        Required:
+        <b>{{ item.sub_part.available_stock }}</b>
-    </div>
-    <div class='col-sm-1'>   
-        <b>{% multiply build.quantity item.quantity %}</b>
-    </div>
-    <div class='col-sm-1' align='right'>
-        Allocated:
-    </div>
-    <div class='col-sm-1' id='allocation-panel-{{ item.sub_part.id }}'>
-        <b><span id='allocation-total-{{ item.sub_part.id }}'>0</span></b>
     </div>
     <div class='col-sm-2'>
+        <b>{% multiply build.quantity item.quantity %}</b>
+    </div>
+    <div class='col-sm-2'>
+        <b><span id='allocation-total-{{ item.sub_part.id }}'>{% part_allocation_count build item.sub_part %}</span></b>
         <div class='btn-group' style='float: right;'>
-            <button class='btn btn-success btn-sm' id='new-item-{{ item.sub_part.id }}' url="{% url 'build-item-create' %}?part={{ item.sub_part.id }}&build={{ build.id }}">Allocate Parts</button>
+            <button class='btn btn-success btn-sm' title='Allocate stock for {{ item.sub_part}}' id='new-item-{{ item.sub_part.id }}' url="{% url 'build-item-create' %}?part={{ item.sub_part.id }}&build={{ build.id }}">Allocate</button>
         </div>
 </div>
 {% endblock %}

InvenTree/build/templates/build/build_base.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block page_title %}
+InvenTree | Build - {{ build }}
+{% endblock %}
+
+{% block content %}
+
+<div class='row'>
+    <div class='col-sm-6'>
+        <div class="media">
+            <div class="media-left">
+                <div class='dropzone' id='part-thumb'>
+                    <img class="part-thumb"
+                    {% if build.part.image %}
+                    src="{{ build.part.image.url }}"
+                    {% else %}
+                    src="{% static 'img/blank_image.png' %}"
+                    {% endif %}/>
+                </div>
+            </div>
+            <div class='media-body'>
+                <h4>Build Details</h4>
+                <table class='table table-striped table-condensed'>
+                    <tr>
+                        <td>{{ build.title }}</td>
+                        <td>{% include "build_status.html" with build=build %}</td>
+                    </tr>
+                    <tr>
+                        <td>Part</td>
+                        <td>{{ build.part.full_name }}</td>
+                    </tr>
+                    <tr>
+                        <td>Quantity</td>
+                        <td>{{ build.quantity }}</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div class='col-sm-6'>
+        <h3>
+        <div style='float: right;'>
+        <div class="dropdown" style="float: right;">
+            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
+            <span class="caret"></span></button>
+            <ul class="dropdown-menu">
+                <li><a href='#' id='build-edit' title='Edit build'>Edit build</a></li>
+                {% if build.is_active %}
+                <li><a href='#' id='build-complete' title='Complete Build'>Complete Build</a></li>
+                <li><a href='#' id='build-cancel' title='Cancel build'>Cancel build</a></li>
+                {% endif %}
+            </ul>
+        </div>
+        </div>
+        </h3>
+    </div>
+</div>
+
+<hr>
+
+<div class='container-fluid'>
+{% block details %}
+
+{% endblock %}
+
+</div>
+
+{% include "modals.html" %}
+
+{% endblock %}
+
+{% block js_ready %}
+
+    $("#build-edit").click(function () {
+        launchModalForm("{% url 'build-edit' build.id %}",
+                        {
+                            reload: true
+                        });
+    });
+
+    $("#build-cancel").click(function() {
+        launchModalForm("{% url 'build-cancel' build.id %}",
+                        {
+                            reload: true,
+                            submit_text: "Cancel Build",
+                        });
+    });
+
+    $("#build-complete").on('click', function() {
+        launchModalForm(
+            "{% url 'build-complete' build.id %}",
+            {
+                reload: true,
+                submit_text: "Complete Build",
+            }
+        );
+    });
+    
+{% endblock %}

InvenTree/build/templates/build/create_build_item.html

@@ -0,0 +1,9 @@
+{% extends "modal_form.html" %}
+
+{% block pre_form_content %}
+{% if no_stock %}
+<div class='alert alert-danger alert-block' role='alert'>
+    No stock available for {{ part }}
+</div>
+{% endif %}
+{% endblock %}

InvenTree/build/templates/build/detail.html

@@ -1,39 +1,11 @@
-{% extends "base.html" %}
+{% extends "build/build_base.html" %}
 {% load static %}
 
-{% block page_title %}
+{% block details %}
-InvenTree | Build - {{ build }}
-{% endblock %}
 
-{% block content %}
+{% include "build/tabs.html" with tab='details' %}
 
-<div class='row'>
+<h4>Build Details</h4>
-<div class='col-sm-6'>
-    <h3>Build Details</h3>
-    <p><b>{{ build.title }}</b>{% include "build_status.html" with build=build %}</p>
-    <p>Building {{ build.quantity }} &times {{ build.part.full_name }}</p>
-</div>
-<div class='col-sm-6'>
-    <h3>
-    <div style='float: right;'>
-    <div class="dropdown" style="float: right;">
-        <a href="{% url 'build-allocate' build.id %}">
-            <button class='btn btn-info' type='button' title='Allocate Parts' id='build-allocate'>Allocate Parts</button>
-        </a>
-        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
-        <span class="caret"></span></button>
-        <ul class="dropdown-menu">
-          <li><a href='#' id='build-edit' title='Edit build'>Edit build</a></li>
-          {% if build.is_active %}
-          <li><a href='#' id='build-complete' title='Complete Build'>Complete Build</a></li>
-          <li><a href='#' id='build-cancel' title='Cancel build'>Cancel build</a></li>
-          {% endif %}
-        </ul>
-    </div>
-    </div>
-    </h3>
-</div>
-</div>
 
 <table class='table table-striped'>
 <tr>
@@ -88,67 +60,13 @@ InvenTree | Build - {{ build }}
     <td>Completed</td><td>{{ build.completion_date }}{% if build.completed_by %}<span class='badge'>{{ build.completed_by }}</span>{% endif %}</td>
 </tr>
 {% endif %}
+</table>
+
 {% if build.notes %}
-<tr>
+<div class="panel panel-default">
-    <td>Notes</td><td>{{ build.notes }}</td>
+  <div class="panel-heading"><b>Notes</b></div>
-</tr>
+  <div class="panel-body">{{ build.notes }}</div>
-{% endif %}
+</div>
-</table>
-
-{% if build.is_active %}
-<h3>Required Parts</h3>
-<table class='table table-striped' id='build-list' data-sorting='true'>
-<thead>
-<tr>
-    <th>Part</th>
-    <th>Required</th>
-    <th>Available</th>
-    <th>Allocated</th>
-</tr>
-</thead>
-<tbody>
-    {% for item in build.required_parts %}
-    <tr>
-        <td><a href="{% url 'part-detail' item.part.id %}">{{ item.part.full_name }}</a></td>
-        <td>{{ item.quantity }}</td>
-        <td>{{ item.part.total_stock }}</td>
-        <td>{{ item.allocated }}</td>
-    </tr>
-    {% endfor %}
-</tbody>
-</table>
-
 {% endif %}
 
-{% include 'modals.html' %}
-
-{% endblock %}
-
-{% block js_ready %}
-{{ block.super }}
-    $("#build-edit").click(function () {
-        launchModalForm("{% url 'build-edit' build.id %}",
-                        {
-                            reload: true
-                        });
-    });
-
-    $("#build-cancel").click(function() {
-        launchModalForm("{% url 'build-cancel' build.id %}",
-                        {
-                            reload: true,
-                            submit_text: "Cancel Build",
-                        });
-    });
-
-    $("#build-complete").on('click', function() {
-        launchModalForm(
-            "{% url 'build-complete' build.id %}",
-            {
-                reload: true,
-                submit_text: "Complete Build",
-            }
-        );
-    });
-
 {% endblock %}

InvenTree/build/templates/build/required.html

@@ -0,0 +1,36 @@
+{% extends "build/build_base.html" %}
+{% load static %}
+
+{% block details %}
+
+{% include "build/tabs.html" with tab='required' %}
+
+<h4>Required Parts</h4>
+<table class='table table-striped table-condensed' id='build-list' data-sorting='true'>
+<thead>
+<tr>
+    <th>Part</th>
+    <th>Available</th>
+    <th>Required</th>
+    <th>Allocated</th>
+</tr>
+</thead>
+<tbody>
+    {% for item in build.required_parts %}
+    <tr>
+        <td>
+            <a class='hover-icon'>
+                <img class='hover-img-thumb' src='{% if item.part.image %}{{ item.part.image.url }}{% endif %}'>
+                <img class='hover-img-large' src='{% if item.part.image %}{{ item.part.image.url }}{% endif %}'>
+            </a>
+            <a class='hover-icon'a href="{% url 'part-detail' item.part.id %}">{{ item.part.full_name }}</a>
+        </td>
+        <td>{{ item.part.total_stock }}</td>
+        <td>{{ item.quantity }}</td>
+        <td>{{ item.allocated }}</td>
+    </tr>
+    {% endfor %}
+</tbody>
+</table>
+
+{% endblock %}

InvenTree/build/templates/build/tabs.html

@@ -0,0 +1,13 @@
+<ul class='nav nav-tabs'>
+    <li{% if tab == 'details' %} class='active'{% endif %}>
+        <a href="{% url 'build-detail' build.id %}">Details</a>
+    </li>
+    <li{% if tab == 'required' %} class='active'{% endif %}>
+        <a href="{% url 'build-required' build.id %}">Required</a>
+    </li>
+    <li{% if tab == 'allocate' %} class='active'{% endif %}>
+        <a href="{% url 'build-allocate' build.id %}">Allocate</a>
+    </li>
+</ul>
+
+<br>

InvenTree/build/urls.py

@@ -24,6 +24,8 @@ build_detail_urls = [
     url(r'^auto-allocate/?', views.BuildAutoAllocate.as_view(), name='build-auto-allocate'),
     url(r'^unallocate/', views.BuildUnallocate.as_view(), name='build-unallocate'),
 
+    url(r'^required/', views.BuildDetail.as_view(template_name='build/required.html'), name='build-required'),
+
     url(r'^.*$', views.BuildDetail.as_view(), name='build-detail'),
 ]
 

InvenTree/build/views.py

@@ -355,9 +355,25 @@ class BuildItemCreate(AjaxCreateView):
 
     model = BuildItem
     form_class = forms.EditBuildItemForm
-    ajax_template_name = 'modal_form.html'
+    ajax_template_name = 'build/create_build_item.html'
     ajax_form_title = 'Allocate new Part'
 
+    part = None
+    available_stock = None
+
+    def get_context_data(self):
+        ctx = super(AjaxCreateView, self).get_context_data()
+
+        if self.part:
+            ctx['part'] = self.part
+
+        if self.available_stock:
+            ctx['stock'] = self.available_stock
+        else:
+            ctx['no_stock'] = True
+
+        return ctx
+
     def get_form(self):
         """ Create Form for making / editing new Part object """
 
@@ -375,7 +391,7 @@ class BuildItemCreate(AjaxCreateView):
 
         if part_id:
             try:
-                Part.objects.get(pk=part_id)
+                self.part = Part.objects.get(pk=part_id)
 
                 query = form.fields['stock_item'].queryset
                 
@@ -399,6 +415,8 @@ class BuildItemCreate(AjaxCreateView):
                 form.fields['stock_item'].queryset = query
 
                 stocks = query.all()
+                self.available_stock = stocks
+
                 # If there is only one item selected, select it
                 if len(stocks) == 1:
                     form.fields['stock_item'].initial = stocks[0].id
@@ -408,6 +426,7 @@ class BuildItemCreate(AjaxCreateView):
                     pass
 
             except Part.DoesNotExist:
+                self.part = None
                 pass
 
         return form

InvenTree/part/templates/part/stock.html

@@ -44,4 +44,29 @@
         url: "{% url 'api-stock-list' %}",
     });
 
+    $('#item-create').click(function () {
+        launchModalForm("{% url 'stock-item-create' %}", {
+            reload: true,
+            data: {
+                part: {{ part.id }}
+            },
+            secondary: [
+                {
+                    field: 'part',
+                    label: 'New Part',
+                    title: 'Create New Part',
+                    url: "{% url 'part-create' %}",
+                },
+                {
+                    field: 'location',
+                    label: 'New Location',
+                    title: 'Create New Location',
+                    url: "{% url 'stock-location-create' %}",
+                }
+            ]
+        });
+
+        return false;
+    });
+
 {% endblock %}

InvenTree/part/templatetags/inventree_extras.py

@@ -14,6 +14,13 @@ def multiply(x, y, *args, **kwargs):
     return x * y
 
 
+@register.simple_tag()
+def part_allocation_count(build, part, *args, **kwargs):
+    """ Return the total number of <part> allocated to <build> """
+
+    return build.getAllocatedQuantity(part)
+
+
 @register.simple_tag()
 def inventree_version(*args, **kwargs):
     """ Return InvenTree version string """

InvenTree/static/css/inventree.css

@@ -14,7 +14,6 @@
     color: #ffcc00;
 }
 
-
 /* CSS overrides for treeview */
 .expand-icon {
     font-size: 11px;
@@ -32,6 +31,14 @@
     padding: 5px 10px;
 }
 
+/* Extra label styles */
+
+.label-large {
+    padding: 5px;
+    margin: 3px;
+    font-size: 100%;
+}
+
 /* Force select2 elements in modal forms to be full width */
 .select-full-width {
     width: 100%;
@@ -269,11 +276,12 @@
 }
 
 .panel-group .panel {
-    border-radius: 8px;
+    border-radius: 2px;
 }
 
 .panel-heading {
     padding: 5px 10px;
+    background-color: #fafafa;
 }
 
 .float-right {
@@ -291,16 +299,22 @@
     transform: translate(-50%, -50%);
 }
 
+.part-allocation {
+    padding: 3px 10px;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+}
+
 .part-allocation-pass {
-    background: #dbf0db;
+    background-color: #dbf0db;
 }
 
 .part-allocation-underallocated {
-    background: #f0dbdb;
+    background-color: #f0dbdb;
 }
 
 .part-allocation-overallocated {
-    background: #ccf5ff;
+    background-color: #ccf5ff;
 }
 
 .glyphicon-refresh-animate {

InvenTree/static/script/inventree/build.js

@@ -56,7 +56,7 @@ function loadAllocationTable(table, part_id, part, url, required, button) {
         launchModalForm(button.attr('url'), {
             success: function() {
                 table.bootstrapTable('refresh');
-            }
+            },
         });
     });
 

InvenTree/templates/build_status.html

@@ -1,11 +1,11 @@
 {% if build.status == build.PENDING %}
-<span class='label label-info'>
+<span class='label label-large label-info'>
 {% elif build.status == build.ALLOCATED %}
-<span class='label label-primary'>
+<span class='label label-large label-primary'>
 {% elif build.status == build.CANCELLED %}
-<span class='label label-danger'>
+<span class='label label-large label-danger'>
 {% elif build.status == build.COMPLETE %}
-<span class='label label-success'>
+<span class='label label-large label-success'>
 {% endif %}
 {{ build.get_status_display }}
 </span>

InvenTree/templates/collapse.html

@@ -2,7 +2,7 @@
 {% endblock %}
 <div class='panel-group'>
     <div class='panel panel-default'>
-        <div class='panel panel-heading'>
+        <div {% block collapse_panel_setup %}class='panel panel-heading'{% endblock %}>
             <div class='row'>
                 <div class='col-sm-6'>
                     <div class='panel-title'>

InvenTree/templates/modal_form.html

@@ -5,13 +5,13 @@
 </div>
 {% endif %}
 {% if form.pre_form_warning %}
-<div class='alert alert-warning' role='alert' style='display: block;'>
+<div class='alert alert-warning alert-block' role='alert'>
 {{ form.pre_form_warning }}
 </div>
 {% endif %}
 {% block non_field_error %}
 {% if form.non_field_errors %}
-<div class='alert alert-danger' role='alert' style='display: block;'>
+<div class='alert alert-danger alert-block' role='alert'>
   <b>Error Submitting Form:</b>
   {{ form.non_field_errors }}
 </div>