Add tabs to part detail view

- Currently each "tab" reloads the entire page but with the new tab selected
- We could use bootstrap js to do this without reloading (load ALL part data)

InvenTree/InvenTree/urls.py

@@ -17,6 +17,8 @@ from supplier.urls import supplier_urls
 from django.conf import settings
 from django.conf.urls.static import static
 
+from django.views.generic.base import RedirectView
+
 #from project.urls import prj_urls, prj_part_urls, prj_cat_urls, prj_run_urls
 #from track.urls import unique_urls, part_track_urls
 
@@ -83,4 +85,7 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
 
 if settings.DEBUG:
     # Media file access
-    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+
+# Send any unknown URLs to the parts page
+urlpatterns += [url(r'^.*$', RedirectView.as_view(url='part/', permanent=False), name='part-index')]

InvenTree/part/templates/base.html

@@ -10,8 +10,16 @@
 
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
+
+<!-- Local stylesheet -->
 <link rel="stylesheet" href="{% static 'css/inventree.css' %}">
 
+<!-- Bootstrap javascript -->
+<!--
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+-->
+
 <title>
 {% block title %}
 InvenTree

InvenTree/part/templates/part/bom.html

@@ -2,6 +2,8 @@
 
 {% block details %}
 
+{% include 'part/tabs.html' with tab='bom' %}
+
 <table>
 <tr>
     <th>Part</th>

InvenTree/part/templates/part/detail.html

@@ -2,25 +2,9 @@
 
 {% block details  %}
 
-<br>
+{% include 'part/tabs.html' with tab='detail' %}
-<a href="{% url 'part-bom' part.id %}">There are <b>{{ part.bomItemCount }}</b> BOM items for this part.</a>
-<br>
-Used in {{ part.usedInCount }} other parts.<br>
 
-<a href="{% url 'part-stock' part.id %}">There are {{ part.stock }} units in stock.</a>
 
-<br>
+Part details go here...
-{% if part.supplier_parts.all|length > 0 %}
-This part is available from <a href="{% url 'part-suppliers' part.id %}">{{ part.supplier_parts.all|length }} suppliers</a>.
-{% else %}
-There are no suppliers defined for this part.
-{% endif %}
-
-<br><br>
-{% if part.trackable %}
-<a href="{% url 'part-track' part.id %}">Part tracking</a>
-{% else %}
-{{ part.name }} does not have part tracking enabled
-{% endif %}
 
 {% endblock %}

InvenTree/part/templates/part/index.html

@@ -7,11 +7,13 @@
 {% if children|length > 0 %}
 <table>
     <tr>
-        <th>Subcategories</th>
+        <th>Subcategory</th>
+        <th>Description</th>
     </tr>
 {% for child in children %}
 <tr>
     <td><a href="/part/list/?category={{ child.id }}">{{ child.name }}</a></td>
+    <td>{{ child.description }}</td>
 {% endfor %}
 </table>
 {% endif %}

InvenTree/part/templates/part/stock.html

@@ -2,6 +2,8 @@
 
 {% block details %}
 
+{% include 'part/tabs.html' with tab='stock' %}
+
 <br>
 Total in stock: {{ part.stock }}
 <br>

InvenTree/part/templates/part/supplier.html

@@ -2,6 +2,8 @@
 
 {% block details %}
 
+{% include 'part/tabs.html' with tab='suppliers' %}
+
 {% if part.supplier_parts.all|length > 0 %}
 <table>
 <tr>

InvenTree/part/templates/part/tabs.html

@@ -0,0 +1,12 @@
+<ul class="nav nav-tabs">
+    <li{% ifequal tab 'detail' %} class="active"{% endifequal %}><a href="{% url 'part-detail' part.id %}">Details</a></li>
+    <li{% ifequal tab 'bom' %} class="active"{% endifequal %}><a href="{% url 'part-bom' part.id %}">BOM ({{ part.bomItemCount }})</a></li>
+    {% if part.usedInCount > 0 %}
+    <li{% ifequal tab 'used' %} class="active"{% endifequal %}><a href="{% url 'part-used-in' part.id %}">Used In ({{ part.usedInCount }})</a></li>
+    {% endif %}
+    <li{% ifequal tab 'stock' %} class="active"{% endifequal %}><a href="{% url 'part-stock' part.id %}">Stock ({{ part.stock }})</a></li>
+    <li{% ifequal tab 'suppliers' %} class="active"{% endifequal %}><a href="{% url 'part-suppliers' part.id %}">Suppliers ({{ part.supplier_parts.all|length }})</a></li>
+    {% if part.trackable %}
+    <li{% ifequal tab 'track' %} class="active"{% endifequal %}><a href="{% url 'part-track' part.id %}">Tracking</a></li>
+    {% endif %}
+</ul>

InvenTree/part/templates/part/track.html

@@ -2,6 +2,8 @@
 
 {% block details %}
 
+{% include 'part/tabs.html' with tab='track' %}
+
 Part tracking for {{ part.name }}
 
 <table>

InvenTree/part/templates/part/used_in.html

@@ -0,0 +1,22 @@
+{% extends "part/part_base.html" %}
+
+{% block details %}
+
+{% include 'part/tabs.html' with tab='used' %}
+
+This part is used to make the following parts:
+
+<table>
+<tr>
+    <th>Part</th>
+    <th>Description</th>
+</tr>
+{% for item in part.used_in.all %}
+<tr>
+    <td><a href="{% url 'part-detail' item.part.id %}">{{ item.part.name }}</a></td>
+    <td>{{ item.part.description }}</td>
+</tr>
+{% endfor %}
+</table>
+
+{% endblock %}

InvenTree/part/urls.py

@@ -42,6 +42,7 @@ part_detail_urls = [
     url(r'^track/?', views.track, name='part-track'),
     url(r'^bom/?', views.bom, name='part-bom'),
     url(r'^stock/?', views.stock, name='part-stock'),
+    url(r'^used/?', views.used, name='part-used-in'),
     url(r'^suppliers/?', views.suppliers, name='part-suppliers'),
     url('', views.detail, name='part-detail'),
 ]

InvenTree/part/views.py

@@ -54,6 +54,11 @@ def bom(request, pk):
 
     return render(request, 'part/bom.html', {'part': part})
 
+def used(request, pk):
+    part = get_object_or_404(Part, pk=pk)
+
+    return render(request, 'part/used_in.html', {'part': part})
+
 def stock(request, pk):
     part = get_object_or_404(Part, pk=pk)
 

InvenTree/static/css/inventree.css

@@ -19,14 +19,18 @@ table tr:nth-child(odd) {
 }
 
 .part-thumb {
-    width: 250px;
+    width: 150px;
-    height: 250px;
+    height: 150px;
     border: 1px black solid;
     margin: 5px;
     padding: 5px;
     object-fit: contain;
 }
 
+.media {
+    padding-top: 15px;
+}
+
 .media-body {
     padding-top: 10px;
 }
@@ -40,4 +44,65 @@ table tr:nth-child(odd) {
 .inventree-content {
     padding-left: 15px;
     padding-right: 15px;
+}
+
+.nav-tabs>.active li {
+    border-color: #d45500;
+    border-bottom-color: transparent;
+}
+
+.nav-tabs li {
+    padding-left: 10px;
+    padding-right: 10px;
+    border-bottom: 1px solid #d45500;
+}
+
+.tab-content {
+  color : white;
+  background-color: #428bca;
+  padding : 5px 15px;
+}
+
+.nav-tabs:after,
+.nav-pills:after {
+  clear: both;
+}
+.nav-tabs > li,
+.nav-pills > li {
+  float: left;
+}
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px;
+}
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+.nav-tabs > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+  border-color: #eeeeee #eeeeee #dddddd;
+}
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+  color: #555555;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
 }