Split "part category" view into separate pages

InvenTree/part/templates/part/category.html

@@ -2,6 +2,10 @@
 {% load static %}
 {% load i18n %}
 
+{% block menubar %}
+{% include 'part/category_navbar.html' with tab='parts' %}
+{% endblock %}
+
 {% block content %}
 
 <div class='panel panel-default panel-inventree'>
@@ -100,14 +104,10 @@
         </div>
     </div>
 
-    {% if category and category.children.all|length > 0 %}
-    {% include "part/subcategories.html" with children=category.children.all collapse_id="categories" %}
-    {% elif children|length > 0 %}
-    {% include "part/subcategories.html" with children=children collapse_id="categories" %}
-    {% endif %}
-
 </div>
 
+{% block category_content %}
+
 <div id='button-toolbar'>
     <div class='btn-group'>
         <button class='btn btn-default' id='part-export' title='{% trans "Export Part Data" %}'>
@@ -150,6 +150,8 @@
     </div>
 </div>
 
+{% endblock %}
+
 
 {% block category_tables %}
 {% endblock category_tables %}
@@ -162,24 +164,10 @@
 {% block js_ready %}
 {{ block.super }}
 
-    {% if category %}
     enableNavbar({
         label: 'category',
         toggleId: '#category-menu-toggle',
     });
-    {% endif %}
-
-    if (inventreeLoadInt("show-part-cats") == 1) {
-        $("#collapse-item-categories").collapse('show');
-    }
-
-    $("#collapse-item-categories").on('shown.bs.collapse', function() {
-        inventreeSave('show-part-cats', 1);
-    });
-    
-    $("#collapse-item-categories").on('hidden.bs.collapse', function() {
-        inventreeDel('show-part-cats');
-    });
 
     $("#cat-create").click(function() {
         launchModalForm(

InvenTree/part/templates/part/category_navbar.html

@@ -8,17 +8,34 @@
         </a>
     </li>
 
+    <li class='list-group-item {% if tab == "subcategories" %}active{% endif %}' title='{% trans "Subcategories" %}'>
+        {% if category %}
+        <a href='{% url "category-subcategory" category.id %}'>
+        {% else %}
+        <a href='{% url "category-index-subcategory" %}'>
+        {% endif %}
+            <span class='fas fa-sitemap'></span>
+            {% trans "Subcategories" %}
+        </a>
+    </li>
+
     <li class='list-group-item {% if tab == "parts" %}active{% endif %}' title='{% trans "Parts" %}'>
+        {% if category %}
         <a href='{% url "category-detail" category.id %}'>
+        {% else %}
+        <a href='{% url "part-index" %}'>
+        {% endif %}
             <span class='fas fa-shapes'></span>
             {% trans "Parts" %}
         </a>
     </li>
 
+    {% if category %}
     <li class='list-group-item {% if tab == "parameters" %}active{% endif %}' title='{% trans "Parameters" %}'>
         <a href='{% url "category-parametric" category.id %}'>
             <span class='fas fa-tasks'></span>
             {% trans "Parameters" %}
         </a>
     </li>
+    {% endif %}
 </ul>

InvenTree/part/templates/part/category_subcategory.html

@@ -0,0 +1,42 @@
+{% extends "part/category.html" %}
+
+{% load i18n %}
+{% load inventree_extras %}
+{% load static %}
+
+{% block menubar %}
+{% include 'part/category_navbar.html' with tab='subcategories' %}
+{% endblock %}
+
+{% block category_content %}
+
+<div class='panel panel-default panel-inventree'>
+    
+    <div class='panel-heading'>
+        <h4>{% trans "Subcategories" %}</h4>
+    </div>
+
+    <table class='table table-striped table-condensed' id='subcategory-table'></table>
+
+</div>
+{% endblock %}
+
+{% block js_ready %}
+{{ block.super }}
+
+    enableNavbar({
+        label: 'category',
+        toggleId: '#category-menu-toggle',
+    });
+
+    loadPartCategoryTable($('#subcategory-table'), {
+        params: {
+            {% if category %}
+            parent: {{ category.pk }}
+            {% else %}
+            parent: 'null'
+            {% endif %}
+        }
+    });
+
+{% endblock %}

InvenTree/part/templates/part/subcategories.html

@@ -1,22 +0,0 @@
-{% extends "collapse.html" %}
-{% load i18n %}
-
-{% block collapse_title %}
-{{ children | length }} {% trans 'Child Categories' %}
-{% endblock %}
-
-{% block collapse_content %}
-<ul class="list-group">
-{% for child in children %}
-<li class="list-group-item">
-    <strong><a href="{% url 'category-detail' child.id %}">{{ child.name }}</a></strong>
-    {% if child.description %}
-    <em> - {{ child.description }}</em>
-    {% endif %}
-    {% if child.partcount > 0 %}
-    <span class='badge'>{{ child.partcount }} {% trans 'Part' %}{% if child.partcount > 1 %}s{% endif %}</span>
-    {% endif %}
-</li>
-{% endfor %}
-</ul>
-{% endblock %}

InvenTree/part/urls.py

@@ -88,14 +88,26 @@ category_parameter_urls = [
     url(r'^(?P<pid>\d+)/delete/', views.CategoryParameterTemplateDelete.as_view(), name='category-param-template-delete'),
 ]
 
-part_category_urls = [
-    url(r'^edit/?', views.CategoryEdit.as_view(), name='category-edit'),
-    url(r'^delete/?', views.CategoryDelete.as_view(), name='category-delete'),
+category_urls = [
 
-    url(r'^parameters/', include(category_parameter_urls)),
+    # Create a new category
+    url(r'^new/', views.CategoryCreate.as_view(), name='category-create'),
 
-    url(r'^parametric/?', views.CategoryParametric.as_view(), name='category-parametric'),
-    url(r'^.*$', views.CategoryDetail.as_view(), name='category-detail'),
+    # Top level subcategory display
+    url(r'^subcategory/', views.PartIndex.as_view(template_name='part/category_subcategory.html'), name='category-index-subcategory'),
+
+    # Category detail views
+    url(r'(?P<pk>\d+)/', include([
+        url(r'^edit/', views.CategoryEdit.as_view(), name='category-edit'),
+        url(r'^delete/', views.CategoryDelete.as_view(), name='category-delete'),
+        url(r'^parameters/', include(category_parameter_urls)),
+
+        url(r'^subcategory/', views.CategoryDetail.as_view(template_name='part/category_subcategory.html'), name='category-subcategory'),
+        url(r'^parametric/', views.CategoryParametric.as_view(), name='category-parametric'),
+    
+        # Anything else
+        url(r'^.*$', views.CategoryDetail.as_view(), name='category-detail'),
+    ]))
 ]
 
 part_bom_urls = [
@@ -106,9 +118,6 @@ part_bom_urls = [
 # URL list for part web interface
 part_urls = [
 
-    # Create a new category
-    url(r'^category/new/?', views.CategoryCreate.as_view(), name='category-create'),
-
     # Create a new part
     url(r'^new/?', views.PartCreate.as_view(), name='part-create'),
 
@@ -125,7 +134,7 @@ part_urls = [
     url(r'^(?P<pk>\d+)/', include(part_detail_urls)),
 
     # Part category
-    url(r'^category/(?P<pk>\d+)/', include(part_category_urls)),
+    url(r'^category/', include(category_urls)),
 
     # Part related
     url(r'^related-parts/', include(part_related_urls)),

InvenTree/templates/js/part.js

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load inventree_extras %}
 
 /* Part API functions
  * Requires api.js to be loaded first
@@ -506,6 +507,75 @@ function loadPartTable(table, url, options={}) {
     });
 }
 
+
+function loadPartCategoryTable(table, options) {
+    /* Display a table of part categories */
+
+    var params = options.params || {};
+
+    var filterListElement = options.filterList || '#filter-list-category';
+
+    var filters = {};
+
+    var filterKey = options.filterKey || options.name || 'category';
+
+    if (!options.disableFilters) {
+        filters = loadTableFilters(filterKey);
+    }
+
+    var original = {};
+
+    for (var key in params) {
+        original[key] = params[key];
+        filters[key] = params[key];
+    }
+
+    setupFilterList(filterKey, table, filterListElement);
+
+    table.inventreeTable({
+        method: 'get',
+        url: options.url || '{% url "api-part-category-list" %}',
+        queryParams: filters,
+        sidePagination: 'server',
+        name: 'category',
+        original: original,
+        showColumns: true,
+        columns: [
+            {
+                checkbox: true,
+                title: '{% trans "Select" %}',
+                searchable: false,
+                switchable: false,
+            },
+            {
+                field: 'name',
+                title: '{% trans "Name" %}',
+                switchable: true,
+                sortable: true,
+                formatter: function(value, row) {
+                    return renderLink(
+                        value,
+                        `/part/category/${row.pk}/`
+                    );
+                }
+            },
+            {
+                field: 'description',
+                title: '{% trans "Description" %}',
+                switchable: true,
+                sortable: false,
+            },
+            {
+                field: 'parts',
+                title: '{% trans "Parts" %}',
+                switchable: true,
+                sortable: false,
+            }
+        ]
+    });
+}
+
+
 function yesNoLabel(value) {
     if (value) {
         return `<span class='label label-green'>{% trans "YES" %}</span>`;