Add clear filter button to stock entries page + mobile view optimizations (this now closes #1129)

public/viewjs/stockentries.js

@@ -22,12 +22,22 @@ $.fn.dataTable.ext.search.push(function(settings, data, dataIndex)
 	return false;
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	Grocy.Components.ProductPicker.Clear();
+	stockEntriesTable.draw();
+});
 
 Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 {
 	stockEntriesTable.draw();
 });
 
+Grocy.Components.ProductPicker.GetInputElement().on('keyup', function(e)
+{
+	stockEntriesTable.draw();
+});
+
 $(document).on('click', '.stock-consume-button', function(e)
 {
 	e.preventDefault();

views/stockentries.blade.php

@@ -16,18 +16,37 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
+		<div class="float-right">
+			<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#table-filter-row">
+				<i class="fas fa-filter"></i>
+			</button>
+		</div>
 	</div>
 </div>
 
 <hr class="my-2">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		@include('components.productpicker', array(
 		'products' => $products,
-		'disallowAllProductWorkflows' => true
+		'disallowAllProductWorkflows' => true,
+		'isRequired' => false
 		))
 	</div>
+	<div class="col">
+		<div class="float-right mt-3">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">