[WIP] Simplified overviews on mobile (#1115)

* Simplified stock overview on mobile.

* Stock table horizontally scrollable

* Use the new mobile views for all pages (except the shopping list page, use the existing special handling there for now)
And add a clear filter button to all pages

Co-authored-by: Bernd Bestel <bernd@berrnd.de>

public/css/grocy.css

@@ -337,8 +337,12 @@ input::-webkit-inner-spin-button {
 	display: none;
 }
 
-.dataTables_scrollBody {
-	overflow: visible !important;
+.grab-cursor {
+	cursor: grab;
+}
+
+.grab-cursor:active {
+	cursor: grabbing;
 }
 
 /* Third party component customizations - toastr */
@@ -396,6 +400,12 @@ input::-webkit-inner-spin-button {
 	}
 }
 
+@media (max-width: 767.98px) {
+	.width-xs-sm-100 {
+		width: 100%;
+	}
+}
+
 body.fixed-nav {
 	padding-top: 54px;
 }

public/js/grocy.js

@@ -650,6 +650,7 @@ $.extend(true, $.fn.dataTable.defaults, {
 	'deferRender': true,
 	'language': IsJsonString(__t('datatables_localization')) ? JSON.parse(__t('datatables_localization')) : {},
 	'scrollY': false,
+	'scrollX': true,
 	'colReorder': true,
 	'stateSave': true,
 	'stateSaveParams': function(settings, data)

public/viewjs/batteries.js

@@ -7,6 +7,8 @@
 });
 $('#batteries-table tbody').removeClass("d-none");
 batteriesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	batteriesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	batteriesTable.search("").draw();
+});
+
 $(document).on('click', '.battery-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-battery-name');

public/viewjs/batteriesjournal.js

@@ -8,6 +8,8 @@
 });
 $('#batteries-journal-table tbody').removeClass("d-none");
 batteriesJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#battery-filter").on("change", function()
 {
@@ -32,6 +34,14 @@ $("#search").on("keyup", Delay(function()
 	batteriesJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#battery-filter").val("all");
+	batteriesJournalTable.column(1).search("").draw();
+	batteriesJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("battery") !== "undefined")
 {
 	$("#battery-filter").val(GetUriParam("battery"));

public/viewjs/batteriesoverview.js

@@ -7,6 +7,8 @@
 });
 $('#batteries-overview-table tbody').removeClass("d-none");
 batteriesOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,14 @@ $("#search").on("keyup", Delay(function()
 	batteriesOverviewTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	batteriesOverviewTable.column(4).search("").draw();
+	batteriesOverviewTable.search("").draw();
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();
@@ -135,8 +145,8 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-batteries").text(__n(dueCount, '%s battery is due to be charged', '%s batteries are due to be charged') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-batteries").text(__n(overdueCount, '%s battery is overdue to be charged', '%s batteries are overdue to be charged'));
+			$("#info-due-batteries").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s battery is due to be charged', '%s batteries are due to be charged') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-overdue-batteries").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s battery is overdue to be charged', '%s batteries are overdue to be charged'));
 		},
 		function(xhr)
 		{

public/viewjs/chores.js

@@ -7,6 +7,8 @@
 });
 $('#chores-table tbody').removeClass("d-none");
 choresTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	choresTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	choresTable.search("").draw();
+});
+
 $(document).on('click', '.chore-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-chore-name');

public/viewjs/choresjournal.js

@@ -8,6 +8,8 @@
 });
 $('#chores-journal-table tbody').removeClass("d-none");
 choresJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#chore-filter").on("change", function()
 {
@@ -32,6 +34,14 @@ $("#search").on("keyup", Delay(function()
 	choresJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#chore-filter").val("all");
+	choresJournalTable.column(1).search("").draw();
+	choresJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("chore") !== "undefined")
 {
 	$("#chore-filter").val(GetUriParam("chore"));

public/viewjs/choresoverview.js

@@ -7,6 +7,8 @@
 });
 $('#chores-overview-table tbody').removeClass("d-none");
 choresOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -52,6 +54,16 @@ $("#user-filter").on("change", function()
 	}
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#user-filter").val("all");
+	choresOverviewTable.column(5).search("").draw();
+	choresOverviewTable.column(6).search("").draw();
+	choresOverviewTable.search("").draw();
+});
+
 $(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
@@ -200,9 +212,9 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-chores").text(__n(dueCount, '%s chore is due to be done', '%s chores are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-chores").text(__n(overdueCount, '%s chore is overdue to be done', '%s chores are overdue to be done'));
-			$("#info-assigned-to-me-chores").text(__n(assignedToMeCount, '%s chore is assigned to me', '%s chores are assigned to me'));
+			$("#info-due-chores").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s chore is due to be done', '%s chores are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-overdue-chores").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s chore is overdue to be done', '%s chores are overdue to be done'));
+			$("#info-assigned-to-me-chores").html('<span class="d-block d-md-none">' + assignedToMeCount + ' <i class="fas fa-exclamation-circle"></i></span><span class="d-none d-md-block">' + __n(assignedToMeCount, '%s chore is assigned to me', '%s chores are assigned to me'));
 		},
 		function(xhr)
 		{

public/viewjs/equipment.js

@@ -9,6 +9,8 @@
 });
 $('#equipment-table tbody').removeClass("d-none");
 equipmentTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 equipmentTable.on('select', function(e, dt, type, indexes)
 {
@@ -66,6 +68,12 @@ $("#search").on("keyup", Delay(function()
 	equipmentTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	equipmentTable.search("").draw();
+});
+
 $(document).on('click', '.equipment-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-equipment-name');

public/viewjs/locations.js

@@ -7,6 +7,8 @@
 });
 $('#locations-table tbody').removeClass("d-none");
 locationsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	locationsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	locationsTable.search("").draw();
+});
+
 $(document).on('click', '.location-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-location-name');

public/viewjs/manageapikeys.js

@@ -7,6 +7,8 @@
 });
 $('#apikeys-table tbody').removeClass("d-none");
 apiKeysTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');
 if (createdApiKeyId !== undefined)
@@ -25,6 +27,12 @@ $("#search").on("keyup", Delay(function()
 	apiKeysTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	apiKeysTable.search("").draw();
+});
+
 $(document).on('click', '.apikey-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-apikey-apikey');

public/viewjs/productform.js

@@ -402,6 +402,8 @@ var barcodeTable = $('#barcode-table').DataTable({
 });
 $('#barcode-table tbody').removeClass("d-none");
 barcodeTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.Components.UserfieldsForm.Load();
 $("#name").trigger("keyup");

public/viewjs/productgroups.js

@@ -7,6 +7,8 @@
 });
 $('#productgroups-table tbody').removeClass("d-none");
 groupsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	groupsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	groupsTable.search("").draw();
+});
+
 $(document).on('click', '.product-group-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-group-name');

public/viewjs/products.js

@@ -7,6 +7,8 @@
 });
 $('#products-table tbody').removeClass("d-none");
 productsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -30,6 +32,14 @@ $("#product-group-filter").on("change", function()
 	productsTable.column(7).search(value).draw();
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#product-group-filter").val("all");
+	productsTable.column(7).search("").draw();
+	productsTable.search("").draw();
+});
+
 if (typeof GetUriParam("product-group") !== "undefined")
 {
 	$("#product-group-filter").val(GetUriParam("product-group"));

public/viewjs/quantityunitform.js

@@ -122,6 +122,8 @@ var quConversionsTable = $('#qu-conversions-table').DataTable({
 });
 $('#qu-conversions-table tbody').removeClass("d-none");
 quConversionsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.Components.UserfieldsForm.Load();
 $("#name").trigger("keyup");

public/viewjs/quantityunits.js

@@ -7,6 +7,8 @@
 });
 $('#quantityunits-table tbody').removeClass("d-none");
 quantityUnitsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	quantityUnitsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	equipmentTable.search("").draw();
+});
+
 $(document).on('click', '.quantityunit-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-quantityunit-name');

public/viewjs/recipeform.js

@@ -97,6 +97,8 @@ var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 });
 $('#recipes-includes-table tbody').removeClass("d-none");
 recipesIncludesTables.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.FrontendHelpers.ValidateForm('recipe-form');
 $("#name").focus();

public/viewjs/recipes.js

@@ -16,6 +16,8 @@
 });
 $('#recipes-table tbody').removeClass("d-none");
 recipesTables.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 if ((typeof GetUriParam("tab") !== "undefined" && GetUriParam("tab") === "gallery") || window.localStorage.getItem("recipes_last_tab_id") == "gallery-tab")
 {
@@ -66,6 +68,14 @@ $("#search").on("keyup", Delay(function()
 	$(".recipe-gallery-item .card-title:not(:contains_case_insensitive(" + value + "))").parent().parent().parent().addClass("d-none");
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();

public/viewjs/shoppinglist.js

@@ -29,6 +29,8 @@ var shoppingListTable = $('#shoppinglist-table').DataTable({
 });
 $('#shoppinglist-table tbody').removeClass("d-none");
 shoppingListTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $(document).on("click", "tr.dtrg-group", function()
 {
@@ -48,6 +50,14 @@ $("#search").on("keyup", Delay(function()
 	shoppingListTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();

public/viewjs/shoppinglocations.js

@@ -7,6 +7,8 @@ var locationsTable = $('#shoppinglocations-table').DataTable({
 });
 $('#shoppinglocations-table tbody').removeClass("d-none");
 locationsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	locationsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	locationsTable.search("").draw();
+});
+
 $(document).on('click', '.shoppinglocation-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-shoppinglocation-name');

public/viewjs/stockjournal.js

@@ -8,6 +8,8 @@
 });
 $('#stock-journal-table tbody').removeClass("d-none");
 stockJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#product-filter").on("change", function()
 {
@@ -32,6 +34,12 @@ $("#search").on("keyup", Delay(function()
 	stockJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	stockJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("product") !== "undefined")
 {
 	$("#product-filter").val(GetUriParam("product"));

public/viewjs/stockjournalsummary.js

@@ -4,3 +4,5 @@ var journalSummaryTable = $('#journal-summary-table').DataTable({
 });
 $('#journal-summary-table tbody').removeClass("d-none");
 journalSummaryTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();

public/viewjs/stockoverview.js

@@ -10,8 +10,25 @@
 		{ 'visible': false, 'targets': 8 }
 	],
 });
+
+$('#stock-overview-table').on('column-sizing.dt', function(e, settings)
+{
+	var dtScrollWidth = $('.dataTables_scroll').width();
+	var stockTableWidth = $('#stock-overview-table').width();
+
+	if (dtScrollWidth < stockTableWidth)
+	{
+		$('.dataTables_scrollBody').addClass("grab-cursor");
+	} else
+	{
+		$('.dataTables_scrollBody').removeClass("grab-cursor");
+	}
+});
+
 $('#stock-overview-table tbody').removeClass("d-none");
 stockOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#location-filter").on("change", function()
 {
@@ -229,9 +246,9 @@ function RefreshStatistics()
 	Grocy.Api.Get('stock/volatile?expiring_days=' + nextXDays,
 		function(result)
 		{
-			$("#info-expiring-products").text(__n(result.expiring_products.length, '%s product expires', '%s products expiring') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-expired-products").text(__n(result.expired_products.length, '%s product is already expired', '%s products are already expired'));
-			$("#info-missing-products").text(__n(result.missing_products.length, '%s product is below defined min. stock amount', '%s products are below defined min. stock amount'));
+			$("#info-expiring-products").html('<span class="d-block d-md-none">' + result.expiring_products.length + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(result.expiring_products.length, '%s product expires', '%s products expiring') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days') + '</span>');
+			$("#info-expired-products").html('<span class="d-block d-md-none">' + result.expired_products.length + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(result.expired_products.length, '%s product is already expired', '%s products are already expired') + '</span>');
+			$("#info-missing-products").html('<span class="d-block d-md-none">' + result.missing_products.length + ' <i class="fas fa-exclamation-circle"></i></span><span class="d-none d-md-block">' + __n(result.missing_products.length, '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') + '</span>');
 		},
 		function(xhr)
 		{

public/viewjs/taskcategories.js

@@ -7,6 +7,8 @@
 });
 $('#taskcategories-table tbody').removeClass("d-none");
 categoriesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	categoriesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	categoriesTable.search("").draw();
+});
+
 $(document).on('click', '.task-category-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-category-name');

public/viewjs/tasks.js

@@ -11,6 +11,8 @@
 });
 $('#tasks-table tbody').removeClass("d-none");
 tasksTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -37,6 +39,15 @@ $("#status-filter").on("change", function()
 	tasksTable.column(5).search(value).draw();
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+	$("#show-done-tasks").trigger('checked', false);
+});
+
 $(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
@@ -198,8 +209,8 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-tasks").text(__n(dueCount, '%s task is due to be done', '%s tasks are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-tasks").text(__n(overdueCount, '%s task is overdue to be done', '%s tasks are overdue to be done'));
+			$("#info-due-tasks").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s task is due to be done', '%s tasks are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-overdue-tasks").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s task is overdue to be done', '%s tasks are overdue to be done'));
 		},
 		function(xhr)
 		{

public/viewjs/userentities.js

@@ -7,6 +7,8 @@
 });
 $('#userentities-table tbody').removeClass("d-none");
 userentitiesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	userentitiesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	userentitiesTable.search("").draw();
+});
+
 $(document).on('click', '.userentity-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-userentity-name');

public/viewjs/userfields.js

@@ -7,6 +7,8 @@
 });
 $('#userfields-table tbody').removeClass("d-none");
 userfieldsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -31,6 +33,14 @@ $("#entity-filter").on("change", function()
 	$("#new-userfield-button").attr("href", U("/userfield/new?entity=" + value));
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#entity-filter").val("all");
+	userfieldsTable.column(1).search("").draw();
+	userfieldsTable.search("").draw();
+});
+
 $(document).on('click', '.userfield-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-userfield-name');

public/viewjs/userobjects.js

@@ -7,6 +7,8 @@
 });
 $('#userobjects-table tbody').removeClass("d-none");
 userobjectsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	userobjectsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	userobjectsTable.search("").draw();
+});
+
 $(document).on('click', '.userobject-delete-button', function(e)
 {
 	var objectId = $(e.currentTarget).attr('data-userobject-id');

public/viewjs/users.js

@@ -7,6 +7,8 @@
 });
 $('#users-table tbody').removeClass("d-none");
 usersTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	usersTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	usersTable.search("").draw();
+});
+
 $(document).on('click', '.user-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-user-username');