Refactor display toggle for part list and part category list

InvenTree/part/templates/part/category.html

@@ -146,13 +146,6 @@
                     <li><a class='dropdown-item' href='#' id='multi-part-export' title='{% trans "Export" %}'>{% trans "Export Data" %}</a></li>
                 </ul>
             </div>
-            <!-- Buttons to toggle between grid and table view -->
-            <button id='view-list' class='btn btn-outline-secondary' type='button' title='{% trans "View list display" %}'>
-                <span class='fas fa-th-list'></span>
-            </button>
-            <button id='view-grid' class='btn btn-outline-secondary' type='button' title='{% trans "View grid display" %}'>
-                <span class='fas fa-th'></span>
-            </button>
             <div class='filter-list' id='filter-list-parts'>
                 <!-- Empty div -->
             </div>
@@ -181,15 +174,6 @@
     <div class='panel-content'>
         <div id='subcategory-button-toolbar'>
             <div class='btn-group' role='group'>
-    
-                <!-- Buttons to toggle between tree and table view -->
-                <button id='view-cat-list' class='btn btn-outline-secondary' type='button' title='{% trans "View list display" %}'>
-                    <span class='fas fa-th-list'></span>
-                </button>
-                <button id='view-cat-tree' class='btn btn-outline-secondary' type='button' title='{% trans "View tree display" %}'>
-                    <span class='fas fa-sitemap'></span>
-                </button>
-
                 <div class='filter-list' id='filter-list-category'>
                     <!-- An empty div in which the filter list will be constructed -->
                 </div>
@@ -222,65 +206,17 @@
 
     enableSidebar('category');
 
-    // Callback to view the category table in "list" mode
+    loadPartCategoryTable(
-    $('#view-cat-list').click(function() {
+        $('#subcategory-table'), {
-        $('#view-cat-list').hide();
-        $('#view-cat-tree').show();
-
-        inventreeSave('category-tree-view', '');
-
-        loadPartCategoryTable($('#subcategory-table'), {
             params: {
                 {% if category %}
-                parent: {{ category.pk }}
+                parent: {{ category.pk }},
                 {% else %}
-                parent: 'null'
+                parent: null,
                 {% endif %}
-            },
+            }
-            tree_view: false,
+        }
-        });
+    );
-
-        $('#subcategory-table').bootstrapTable('resetView');
-    });
-
-    // Callback to view the category table in "tree" mode
-    $('#view-cat-tree').click(function() {
-        $('#view-cat-list').show();
-        $('#view-cat-tree').hide();
-
-        inventreeSave('category-tree-view', 1);
-
-        loadPartCategoryTable($('#subcategory-table'), {
-            params: {
-                {% if category %}
-                parent: {{ category.pk }}
-                {% else %}
-                parent: 'null'
-                {% endif %}
-            },
-            tree_view: true,
-        });
-
-        $('#subcategory-table').bootstrapTable('resetView');
-    });
-
-    // Callback to view the part table in "list" mode
-    $('#view-list').click(function() {
-        $('#view-list').hide();
-        $('#view-grid').show();
-        
-        $('#part-table').bootstrapTable('toggleCustomView');
-        inventreeSave('part-grid-view', '');
-    });
-    
-    // Callback to view the part table in "grid" mode
-    $('#view-grid').click(function() {
-        $('#view-grid').hide();
-        $('#view-list').show();
-
-        $('#part-table').bootstrapTable('toggleCustomView');
-        inventreeSave('part-grid-view', 1);
-    });
 
     $("#cat-create").click(function() {
 
@@ -368,33 +304,4 @@
         },
     );
 
-    if (inventreeLoad("part-grid-view")) {
-        $('#view-grid').hide();
-        $('#part-table').bootstrapTable('toggleCustomView');
-    } else {
-        $('#view-list').hide();
-    }
-
-    var tree_view = false;
-
-    if (inventreeLoad('category-tree-view')) {
-        $('#view-cat-tree').hide();
-
-        tree_view = true;
-    } else {
-        $('#view-cat-list').hide();
-    }
-
-    loadPartCategoryTable($('#subcategory-table'), {
-        params: {
-            {% if category %}
-            parent: {{ category.pk }}
-            {% else %}
-            parent: 'null'
-            {% endif %}
-        },
-        tree_view: tree_view
-    });
-
-
 {% endblock %}

InvenTree/templates/js/translated/part.js

@@ -983,6 +983,10 @@ function loadPartTable(table, url, options={}) {
         }
     });
 
+    var grid_view = inventreeLoad('part-grid-view') == 1;
+
+    console.log("grid view:", grid_view);
+
     $(table).inventreeTable({
         url: url,
         method: 'get',
@@ -997,8 +1001,52 @@ function loadPartTable(table, url, options={}) {
         },
         columns: columns,
         showColumns: true,
-        showCustomView: false,
+        showCustomView: grid_view,
         showCustomViewButton: false,
+        onPostBody: function() {
+            grid_view = inventreeLoad('part-grid-view') == 1;
+            if (grid_view) {
+                $('#view-part-list').removeClass('btn-secondary').addClass('btn-outline-secondary');
+                $('#view-part-grid').removeClass('btn-outline-secondary').addClass('btn-secondary');
+            } else {
+                $('#view-part-grid').removeClass('btn-secondary').addClass('btn-outline-secondary');
+                $('#view-part-list').removeClass('btn-outline-secondary').addClass('btn-secondary');
+            }
+        },
+        buttons: [
+            {
+                icon: 'fas fa-bars',
+                attributes: {
+                    title: '{% trans "Display as list" %}',
+                    id: 'view-part-list',
+                },
+                event: () => {
+                    inventreeSave('part-grid-view', 0);
+                    $(table).bootstrapTable(
+                        'refreshOptions',
+                        {
+                            showCustomView: false,
+                        }
+                    );
+                }
+            },
+            {
+                icon: 'fas fa-th',
+                attributes: {
+                    title: '{% trans "Display as grid" %}',
+                    id: 'view-part-grid',
+                },
+                event: () => {
+                    inventreeSave('part-grid-view', 1);
+                    $(table).bootstrapTable(
+                        'refreshOptions',
+                        {
+                            showCustomView: true,
+                        }
+                    );
+                }
+            }
+        ],
         customView: function(data) {
 
             var html = '';
@@ -1092,6 +1140,10 @@ function loadPartCategoryTable(table, options) {
 
     var params = options.params || {};
 
+    if (tree_view) {
+        params.cascade = true;
+    }
+
     var filterListElement = options.filterList || '#filter-list-category';
 
     var filters = {};
@@ -1111,14 +1163,88 @@ function loadPartCategoryTable(table, options) {
 
     setupFilterList(filterKey, table, filterListElement);
 
+    var tree_view = inventreeLoad('category-tree-view') == 1;
+
     table.inventreeTable({
+        treeEnable: tree_view,
+        rootParentId: options.params.parent,
+        uniqueId: 'pk',
+        idField: 'pk',
+        treeShowField: 'name',
+        parentIdField: 'parent',
         method: 'get',
         url: options.url || '{% url "api-part-category-list" %}',
         queryParams: filters,
-        sidePagination: 'server',
+        disablePagination: tree_view,
+        sidePagination: tree_view ? 'client' : 'server',
+        serverSort: !tree_view, 
+        search: !tree_view,
         name: 'category',
         original: original,
         showColumns: true,
+        buttons: [
+            {
+                icon: 'fas fa-bars',
+                attributes: {
+                    title: '{% trans "Display as list" %}',
+                    id: 'view-category-list',
+                },
+                event: () => {
+                    inventreeSave('category-tree-view', 0);
+                    table.bootstrapTable(
+                        'refreshOptions',
+                        {
+                            treeEnable: false,
+                            serverSort: true,
+                            search: true,
+                            pagination: true,
+                        }
+                    );
+                }
+            },
+            {
+                icon: 'fas fa-sitemap',
+                attributes: {
+                    title: '{% trans "Display as tree" %}',
+                    id: 'view-category-tree',
+                },
+                event: () => {
+                    inventreeSave('category-tree-view', 1);
+                    table.bootstrapTable(
+                        'refreshOptions',
+                        {
+                            treeEnable: true,
+                            serverSort: false,
+                            search: false,
+                            pagination: false,
+                        }
+                    );
+                }
+            }
+        ],
+        onPostBody: function() {
+
+            tree_view = inventreeLoad('category-tree-view') == 1;
+
+            if (tree_view) {
+
+                $('#view-category-list').removeClass('btn-secondary').addClass('btn-outline-secondary');
+                $('#view-category-tree').removeClass('btn-outline-secondary').addClass('btn-secondary');
+                
+                table.treegrid({
+                    treeColumn: 0,
+                    onChange: function() {
+                        table.bootstrapTable('resetView');
+                    },
+                    onExpand: function() {
+                        
+                    }
+                });
+            } else {
+                $('#view-category-tree').removeClass('btn-secondary').addClass('btn-outline-secondary');
+                $('#view-category-list').removeClass('btn-outline-secondary').addClass('btn-secondary');
+            }
+        },
         columns: [
             {
                 checkbox: true,
@@ -1148,7 +1274,8 @@ function loadPartCategoryTable(table, options) {
             {
                 field: 'pathstring',
                 title: '{% trans "Path" %}',
-                switchable: true,
+                switchable: !tree_view,
+                visible: !tree_view,
                 sortable: false,
             },
             {

InvenTree/templates/js/translated/tables.js

@@ -399,3 +399,8 @@ function customGroupSorter(sortName, sortOrder, sortData) {
     $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US-custom']);
 
 })(jQuery);
+
+$.extend($.fn.treegrid.defaults, {
+    expanderExpandedClass: 'treegrid-expander-expanded',
+    expanderCollapsedClass: 'treegrid-expander-collapsed'
+});