Treegrid display for part variants

InvenTree/part/templates/part/variants.html

@@ -1,5 +1,6 @@
 {% extends "part/part_base.html" %}
 {% load static %}
+{% load i18n %}
 {% load inventree_extras %}
 
 {% block details %}
@@ -7,7 +8,7 @@
 
 <div class='row'>
     <div class='col-sm-6'>
-        <h4>Part Variants</h4>
+        <h4>{% trans "Part Variants" %}</h4>
     </div>
     <div class='col-sm-6'>
     </div>
@@ -17,45 +18,32 @@
 <div id='button-toolbar'>
     <div class='btn-group'>
         {% if part.is_template and part.active %}
-        <button class='btn btn-success' id='new-variant' title='Create new variant'>New Variant</button>
+        <button class='btn btn-success' id='new-variant' title='{% trans "Create new variant" %}'>{% trans "New Variant" %}</button>
         {% endif %}
     </div>
 </div>
 
-<table class='table table-striped table-condensed' id='variant-table' data-toolbar='#button-toolbar'>
+<table class='table table-striped table-condensed' id='variants-table' data-toolbar='#button-toolbar'>
-    <thead>
-        <tr>
-            <th data-sortable='true'>Variant</th>
-            <th data-sortable='true'>Description</th>
-            <th data-sortable='true'>Stock</th>
-        </tr>
-    </thead>
-    <tbody>
-    {% for variant in part.variants.all %}
-        <tr>
-            <td>
-                {% include "hover_image.html" with image=variant.image hover=True %}
-                <a href="{% url 'part-detail' variant.id %}">{{ variant.full_name }}</a>
-                {% if not variant.active %}
-                <span class='label label-warning' style='float: right;'>INACTIVE</span>
-                {% endif %}
-            </td>
-            <td>{{ variant.description }}</td>
-            <td>{% decimal variant.total_stock %}</td>
-        </tr>
-    {% endfor %}
-    </tbody>
 </table>
 
 {% endblock %}
 
+{% block js_load %}
+{{ block.super }}
+
+<!-- jquery-treegrid -->
+<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.js" %}'></script>
+<script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.bootstrap3.js" %}'></script>
+
+<!-- boostrap-table-treegrid -->
+<script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js" %}'></script>
+
+{% endblock %}
 
 {% block js_ready %}
 {{ block.super }}
 
-
+    loadPartVariantTable($('#variants-table'), {{ part.pk }});
-    $('#variant-table').inventreeTable({
-    });
 
     $('#new-variant').click(function() {
         launchModalForm(

InvenTree/templates/js/part.html

@@ -60,6 +60,98 @@ function toggleStar(options) {
     );
 }
 
+
+function loadPartVariantTable(table, partId, options) {
+    /* Load part variant table
+     */
+
+    var params = {
+        ancestor: partId,
+    };
+
+    var cols = [
+        {
+            field: 'pk',
+            title: 'ID',
+            visible: false,
+            switchable: false,
+        },
+        {
+            field: 'name',
+            title: '{% trans "Name" %}',
+            switchable: false,
+            formatter: function(value, row, index, field) {
+                var html = '';
+
+                var name = '';
+
+                if (row.IPN) {
+                    name += row.IPN;
+                    name += ' | ';
+                }
+    
+                name += value;
+    
+                if (row.revision) {
+                    name += ' | ';
+                    name += row.revision;
+                }
+    
+                if (row.is_template) {
+                    name = '<i>' + name + '</i>';
+                }
+
+                html += imageHoverIcon(row.thumbnail);
+                html += renderLink(name, `/part/${row.pk}/`);
+
+                return html;
+            },
+        },
+        {
+            field: 'IPN',
+            title: '{% trans 'IPN' %}',
+        },
+        {
+            field: 'revision',
+            title: '{% trans 'Revision' %}',
+        },
+        {
+            field: 'description',
+            title: '{% trans "Description" %}',
+        },
+        {
+            field: 'in_stock',
+            title: '{% trans "Stock" %}',
+        }
+    ];
+
+    table.inventreeTable({
+        url: "{% url 'api-part-list' %}",
+        name: 'partvariants',
+        showColumns: true,
+        original: params,
+        queryParams: params,
+        formatNoMatches: function() { return "{% trans "No variants found" %}"; },
+        columns: cols,
+        treeEnable: true,
+        rootParentId: partId,
+        parentIdField: 'variant_of',
+        idField: 'pk',
+        uniqueId: 'pk',
+        treeShowField: 'name',
+        sortable: true,
+        search: true,
+        onPostBody: function() {
+            table.treegrid({
+                treeColumn: 0,
+            });
+
+            table.treegrid('collapseAll');
+        }
+    });
+}
+
+
 function loadPartTable(table, url, options={}) {
     /* Load part listing data into specified table.
      *