Revert to bootstrap-treeview

- More "bootstrappy" design
- Already in code base
- Cleaner API

InvenTree/InvenTree/static/css/inventree.css

@@ -215,7 +215,7 @@
 }
 
 .treeview .list-group-item {
-    padding: 10px 5px;
+    padding: 3px 5px;
 }
 
 .treeview .list-group-item .indent {
@@ -1013,24 +1013,3 @@ a {
     text-decoration: none;
     background-color: transparent;
 }
-
-/* .jstree CSS classes */
-
-.jstree-container-ul {
-    background-color: var(--secondary-color);
-}
-
-.jstree-node {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    width: 100% !important;
-}
-
-.jstree-hovered {
-    color: var(--highlight-color) !important;
-    background-color: var(--bs-body-color) !important;
-}
-
-.breadcrumb-tree-collapse {
-    margin-bottom: 10px;
-}

InvenTree/part/api.py

@@ -240,12 +240,21 @@ class CategoryParameterList(generics.ListAPIView):
 
 
 class CategoryTree(generics.ListAPIView):
-    """ API endpoint for accessing a list of PartCategory objects ready for rendering a jstree.
+    """
+    API endpoint for accessing a list of PartCategory objects ready for rendering a tree.
     """
 
     queryset = PartCategory.objects.all()
     serializer_class = part_serializers.CategoryTree
 
+    filter_backends = [
+        DjangoFilterBackend,
+        filters.OrderingFilter,
+    ]
+
+    # Order by tree level (top levels first) and then name
+    ordering = ['level', 'name']
+
 
 class PartSalePriceList(generics.ListCreateAPIView):
     """

InvenTree/part/serializers.py

@@ -71,29 +71,16 @@ class CategorySerializer(InvenTreeModelSerializer):
 
 
 class CategoryTree(InvenTreeModelSerializer):
-    """ Serializer for PartCategory """
+    """
-
+    Serializer for PartCategory tree
-    id = serializers.IntegerField(source='pk', read_only=True)
+    """
-
-    text = serializers.CharField(source='name', read_only=True)
-
-    parent = serializers.SerializerMethodField()
-
-    def get_parent(self, obj):
-        return obj.parent.pk if obj.parent else '#'
-
-    a_attr = serializers.SerializerMethodField()
-
-    def get_a_attr(self, obj):
-        return {'href': obj.get_absolute_url()}
 
     class Meta:
         model = PartCategory
         fields = [
-            'id',
+            'pk',
-            'text',
+            'name',
             'parent',
-            'a_attr',
         ]
 
 

InvenTree/part/templates/part/category.html

@@ -247,7 +247,19 @@
     enableSidebar('category');
 
     // Enable breadcrumb tree view
-    enableBreadcrumbTree('category');
+    enableBreadcrumbTree({
+        label: 'category',
+        url: '{% url "api-part-category-tree" %}',
+        {% if category %}
+        selected: {{ category.pk }},
+        {% endif %}
+        processNode: function(node) {
+            node.text = node.name;
+            node.href = `/part/category/${node.pk}/`;
+
+            return node;
+        }
+    });
 
     loadPartCategoryTable(
         $('#subcategory-table'), {

InvenTree/part/templates/part/detail.html

@@ -1066,6 +1066,18 @@
 
     enableSidebar('part');
 
-    enableBreadcrumbTree('part');
+    enableBreadcrumbTree({
+        label: 'part',
+        url: '{% url "api-part-category-tree" %}',
+        {% if part.category %}
+        selected: {{ part.category.pk }},
+        {% endif %}
+        processNode: function(node) {
+            node.text = node.name;
+            node.href = `/part/category/${node.pk}/`;
+
+            return node;
+        }
+    });
 
 {% endblock %}

InvenTree/part/templates/part/part_app_base.html

@@ -20,4 +20,4 @@
 {% else %}
 {% include 'part/cat_link.html' with category=category %}
 {% endif %}
-{% endblock %}
+{% endblock breadcrumbs %}

InvenTree/templates/base.html

@@ -46,7 +46,6 @@
 <link rel="stylesheet" href="{% static 'select2/css/select2-bootstrap-5-theme.css' %}">
 <link rel="stylesheet" href="{% static 'fullcalendar/main.css' %}">
 <link rel="stylesheet" href="{% static 'script/jquery-ui/jquery-ui.min.css' %}">
-<link rel="stylesheet" href="{% static 'script/jstree/themes/default/style.min.css' %}">
 
 <link rel="stylesheet" href="{% static 'css/inventree.css' %}">
 
@@ -157,7 +156,6 @@
 <script type='text/javascript' src="{% static 'script/chart.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/clipboard.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>
-<script type='text/javascript' src="{% static 'script/jstree/jstree.js' %}"></script>
 
 <!-- general InvenTree -->
 <script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>

InvenTree/templates/js/dynamic/nav.js

@@ -149,24 +149,82 @@ function enableSidebar(label, options={}) {
 /**
  * Enable support for breadcrumb tree navigation on this page
  */
-function enableBreadcrumbTree(label) {
+function enableBreadcrumbTree(options) {
-    $('#breadcrumb-tree').jstree({
+
-        'core': {
+    var label = options.label;
-            'data': {
+
-                'url': '/api/part/category/tree/',
+    if (!label) {
-                'data': function(node) {
+        console.log("ERROR: enableBreadcrumbTree called without supplying label");
-                    return {'id': node.id};
+        return;
     }
-            },
+
-            'themes': {
+    var filters = options.filters || {};
-                'icons': false,
+
-                'responsive': true,
+    function list_to_tree(data) {
-            },
+
+        
+
+        return roots;
     }
-    }).bind('select_node.jstree', function(e, data) {
+
-        window.location.href = data.node.a_attr.href;
+    inventreeGet(
+        options.url,
+        filters,
+        {
+            success: function(data) {
+
+                // Data are returned from the InvenTree server as a flattened list;
+                // We need to convert this into a tree structure
+
+                var nodes = {};
+                var roots = [];
+                var node = null;
+
+                for (var i = 0; i < data.length; i++) {
+                    node = data[i];
+                    node.nodes = [];    // Initialize with empty node set
+
+                    nodes[node.pk] = node;
+                    node.selectable = false;
+
+                    if (options.processNode) {
+                        node = options.processNode(node);
+                    }
+
+                    node.state = {
+                        expanded: node.pk == options.selected,
+                        selected: node.pk == options.selected,
+                    };
+                }
+
+                for (var i = 0; i < data.length; i++) {
+                    node = data[i];
+
+                    if (node.parent != null) {
+                        nodes[node.parent].nodes.push(node);
+
+                        if (node.state.expanded) {
+                            nodes[node.parent].state.expanded = true;
+                        }
+                        
+                    } else {
+                        roots.push(node);
+                    }
+                }
+
+                $('#breadcrumb-tree').treeview({
+                    data: roots,
+                    showTags: true,
+                    enableLinks: true,
+                    expandIcon: 'fas fa-chevron-right',
+                    collapseIcon: 'fa fa-chevron-down',
                 });
 
+                setBreadcrumbTreeState(label, state);
+            }
+        }
+    );
+
     $('#breadcrumb-tree-toggle').click(function() {
         // Add callback to "collapse" and "expand" the sidebar
 
@@ -180,8 +238,6 @@ function enableBreadcrumbTree(label) {
     // Set the initial state (default = expanded)
     var state = localStorage.getItem(`inventree-tree-state-${label}`) || 'expanded';
 
-    setBreadcrumbTreeState(label, state);
-
     function setBreadcrumbTreeState(label, state) {
 
         if (state == 'collapsed') {