Refactor 'category' setttings

InvenTree/templates/InvenTree/settings/category.html

@@ -1,114 +1,33 @@
-{% extends "InvenTree/settings/settings.html" %}
+{% extends "panel.html" %}
 {% load i18n %}
 
-{% block tabs %}
-{% include "InvenTree/settings/tabs.html" with tab='category' %}
-{% endblock %}
+{% block label %}category{% endblock %}
 
-{% block subtitle %}
+{% block heading %}
 {% trans "Category Settings" %}
 {% endblock %}
 
-{% block settings %}
+{% block content %}
 
-<form action="{% url 'settings-category' %}" method="post">
-    {% csrf_token %}
-    {% load crispy_forms_tags %}
-    <div id="category-select">
-        {% crispy form %}
-    </div>
-</form>
+<div class='row'>
+    <form action=''>
+        <div class='col-sm-6' style='width: 250px'>
+            <div class='form-group'><div class='controls'>
+                <select name='category' id='category-select'>
+                    <!-- Will be filled by API -->
+                </select>
+            </div></div>
+        </div>
+    </form>
+</div>
 
-{% if category %}
-<hr>
-
-<h4>{% trans "Category Parameter Templates" %}</h4>
-
-<div id='param-buttons'>
-    <button class='btn btn-success' id='new-param'>
-        <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
+<div id='cat-param-buttons'>
+    <button class='btn btn-success' id='new-cat-param' disabled=''>
+        <div class='fas fa-plus-circle'></div> {% trans "New Parameter" %}
     </button>
 </div>
 
-<table class='table table-striped table-condensed' id='param-table' data-toolbar='#param-buttons'>
+<table class='table table-striped table-condensed' id='cat-param-table' data-toolbar='#cat-param-buttons'>
 </table>
-{% endif %}
-{% endblock %}
-
-{% block js_ready %}
-{{ block.super }}
-
-    {# Convert dropdown to select2 format #}
-    $(document).ready(function() {
-        attachSelect('#category-select');
-    });
-
-{% if category %}
-    $("#param-table").inventreeTable({
-        url: "{% url 'api-part-category-parameters' pk=category.pk %}",
-        queryParams: {
-            ordering: 'name',
-        },
-        formatNoMatches: function() { return '{% trans "No category parameter templates found" %}'; },
-        columns: [
-            {
-                field: 'pk',
-                title: 'ID',
-                visible: false,
-                switchable: false,
-            },
-            {
-                field: 'parameter_template.name',
-                title: '{% trans "Parameter Template" %}',
-                sortable: 'true',
-            },
-            {
-                field: 'default_value',
-                title: '{% trans "Default Value" %}',
-                sortable: 'true',
-                formatter: function(value, row, index, field) {
-                    var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
-                    var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
-
-                    var html = value
-                    html += "<div class='btn-group float-right' role='group'>" + bEdit + bDel + "</div>";
-
-                    return html;
-                }
-            }
-        ]
-    });
-
-    $("#new-param").click(function() {
-        launchModalForm("{% url 'category-param-template-create' category.pk %}", {
-            success: function() {
-                $("#param-table").bootstrapTable('refresh');
-            },
-        });
-    });
-
-    $("#param-table").on('click', '.template-edit', function() {
-        var button = $(this);
-
-        var url = "/part/category/{{ category.pk }}/parameters/" + button.attr('pk') + "/edit/";
-
-        launchModalForm(url, {
-            success: function() {
-                $("#param-table").bootstrapTable('refresh');
-            }
-        });
-    });
-
-    $("#param-table").on('click', '.template-delete', function() {
-        var button = $(this);
-
-        var url = "/part/category/{{ category.pk }}/parameters/" + button.attr('pk') + "/delete/";
-
-        launchModalForm(url, {
-            success: function() {
-                $("#param-table").bootstrapTable('refresh');
-            }
-        });
-    });
-{% endif %}
+
 {% endblock %}

InvenTree/templates/InvenTree/settings/navbar.html

@@ -74,6 +74,12 @@
         </a>
     </li>
 
+    <li class='list-group-item' title='{% trans "Categories" %}'>
+        <a href='#' class='nav-toggle' id='select-category'>
+            <span class='fas fa-shapes'></span> {% trans "Categories" %}
+        </a>
+    </li>
+
     <li class='list-group-item' title='{% trans "Stock" %}'>
         <a href='#' class='nav-toggle' id='select-stock'>
             <span class='fas fa-boxes'></span> {% trans "Stock" %}

InvenTree/templates/InvenTree/settings/settings.html

@@ -26,6 +26,7 @@
 {% include "InvenTree/settings/currencies.html" %}
 {% include "InvenTree/settings/report.html" %}
 {% include "InvenTree/settings/part.html" %}
+{% include "InvenTree/settings/category.html" %}
 {% include "InvenTree/settings/stock.html" %}
 {% include "InvenTree/settings/build.html" %}
 {% include "InvenTree/settings/po.html" %}
@@ -86,6 +87,159 @@ $("#edit-password").on('click', function() {
 });
 
 
+$('#category-select').select2({
+    placeholder: '',
+    width: '100%',
+    ajax: {
+        url: '{% url "api-part-category-list" %}',
+        dataType: 'json',
+        delay: 250,
+        cache: false,
+        data: function(params) {
+            if (!params.page) {
+                offset = 0;
+            } else {
+                offset = (params.page - 1) * 25;
+            }
+
+            return {
+                search: params.term,
+                offset: offset,
+                limit: 25,
+            };
+        },
+        processResults: function(response) {
+            var data = [];
+
+            var more = false;
+
+            if ('count' in response && 'results' in response) {
+                // Response is paginated
+                data = response.results;
+
+                // Any more data available?
+                if (response.next) {
+                    more = true;
+                }
+
+            } else {
+                // Non-paginated response
+                data = response;
+            }
+
+            // Each 'row' must have the 'id' attribute
+            for (var idx = 0; idx < data.length; idx++) {
+                data[idx].id = data[idx].pk;
+                data[idx].text = data[idx].pathstring;
+            }
+
+            // Ref: https://select2.org/data-sources/formats
+            var results = {
+                results: data,
+                pagination: {
+                    more: more,
+                }
+            };
+
+            return results;
+        }
+    },
+});
+
+$('#cat-param-table').inventreeTable({
+    formatNoMatches: function() { return '{% trans "No category parameter templates found" %}'; },
+    columns: [
+        {
+            field: 'pk',
+            title: 'ID',
+            visible: false,
+            switchable: false,
+        },
+        {
+            field: 'parameter_template.name',
+            title: '{% trans "Parameter Template" %}',
+            sortable: 'true',
+        },
+        {
+            field: 'category_detail.pathstring',
+            title: '{% trans "Category" %}',
+        },
+        {
+            field: 'default_value',
+            title: '{% trans "Default Value" %}',
+            sortable: 'true',
+            formatter: function(value, row, index, field) {
+                var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
+                var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-default btn-glyph' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
+
+                var html = value
+                html += "<div class='btn-group float-right' role='group'>" + bEdit + bDel + "</div>";
+
+                return html;
+            }
+        }
+    ]
+});
+
+function loadTemplateTable(pk) {
+
+    console.log('refresh:', pk);
+
+    // Enable the buttons
+    $('#new-cat-param').removeAttr('disabled');
+
+    // Load the parameter table
+    $("#cat-param-table").bootstrapTable('refresh', {
+        query: {
+            category: pk,
+        },
+        url: '{% url "api-part-category-parameter-list" %}',
+    });
+}
+
+$('body').on('change', '#category-select', function() {
+    var pk = $(this).val();
+    loadTemplateTable(pk);
+});
+
+$("#new-cat-param").click(function() {
+
+    var pk = $('#category-select').val();
+
+    launchModalForm(`/part/category/${pk}/parameters/new/`, {
+        success: function() {
+            $("#cat-param-table").bootstrapTable('refresh');
+        },
+    });
+});
+
+$("#cat-param-table").on('click', '.template-edit', function() {
+
+    var category = $('#category-select').val();
+    var pk = $(this).attr('pk');
+
+    var url = `/part/category/${category}/parameters/${pk}/edit/`;
+
+    launchModalForm(url, {
+        success: function() {
+            $("#cat-param-table").bootstrapTable('refresh');
+        }
+    });
+});
+
+$("#cat-param-table").on('click', '.template-delete', function() {
+
+    var category = $('#category-select').val();
+    var pk = $(this).attr('pk');
+
+    var url = `/part/category/${category}/parameters/${pk}/delete/`;
+
+    launchModalForm(url, {
+        success: function() {
+            $("#cat-param-table").bootstrapTable('refresh');
+        }
+    });
+});
 
 enableNavbar({
     label: 'settings',