mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Refactor display toggle for part list and part category list
This commit is contained in:
Oliver
parent
3bd59728db
commit
be23634c5d
@ -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
|
||||
$('#view-cat-list').click(function() {
|
||||
$('#view-cat-list').hide();
|
||||
$('#view-cat-tree').show();
|
||||
|
||||
inventreeSave('category-tree-view', '');
|
||||
|
||||
loadPartCategoryTable($('#subcategory-table'), {
|
||||
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 %}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
{
|
||||
|
||||
@ -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'
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user