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> <li><a href='#' id='multi-part-export' title='{% trans "Export" %}'>{% trans "Export Data" %}</a></li>
</ul> </ul>
</div> </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'> <div class='filter-list' id='filter-list-parts'>
<!-- Empty div --> <!-- Empty div -->
</div> </div>
@ -169,6 +176,22 @@
toggleId: '#category-menu-toggle', 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() { $("#cat-create").click(function() {
launchModalForm( launchModalForm(
"{% url 'category-create' %}", "{% url 'category-create' %}",
@ -273,6 +296,7 @@
}, },
buttons: ['#part-options'], buttons: ['#part-options'],
checkbox: true, checkbox: true,
gridView: true,
}, },
); );

View File

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