Buttons to toggle between list and grid views

This commit is contained in:
Oliver Walters 2021-05-30 00:23:05 +10:00
parent ee95cf5c21
commit e846c744f4
2 changed files with 27 additions and 4 deletions

View File

@ -128,6 +128,13 @@
<li><a 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-default' type='button' title='{% trans "View list display" %}'>
<span class='fas fa-th-list'></span>
</button>
<button id='view-grid' class='btn btn-default' 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>
@ -169,6 +176,22 @@
toggleId: '#category-menu-toggle',
});
$('#view-list').hide();
$('#view-list').click(function() {
$('#view-list').hide();
$('#view-grid').show();
$('#part-table').bootstrapTable('toggleCustomView');
});
$('#view-grid').click(function() {
$('#view-grid').hide();
$('#view-list').show();
$('#part-table').bootstrapTable('toggleCustomView');
});
$("#cat-create").click(function() {
launchModalForm(
"{% url 'category-create' %}",
@ -273,6 +296,7 @@
},
buttons: ['#part-options'],
checkbox: true,
gridView: true,
},
);

View File

@ -347,7 +347,6 @@ function loadPartTable(table, url, options={}) {
* query: extra query params for API request
* buttons: If provided, link buttons to selection status of this table
* disableFilters: If true, disable custom filters
* gridView: If true, display as grid rather than standard table
*/
// Ensure category detail is included
@ -511,8 +510,8 @@ function loadPartTable(table, url, options={}) {
formatNoMatches: function() { return '{% trans "No parts found" %}'; },
columns: columns,
showColumns: true,
showCustomView: true,
showCustomViewButton: true,
showCustomView: false,
showCustomViewButton: false,
customView: function(data) {
var html = '';