Better approach for stock overview filtering by location (references g…

…rocy#11)
dbx-one · Jul 8, 2018 · c58083f · c58083f
1 parent ecf9625
commit c58083f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 35 deletions.
diff --git a/localization/de.php b/localization/de.php
@@ -130,6 +130,7 @@
 	'Track charge cycle of battery #1' => 'Erfasse einen Ladezyklus für Batterie #1',
 	'Track execution of habit #1' => 'Erfasse eine Ausführung von #1',
 	'Filter by location' => 'Nach Standort filtern',
+	'Search' => 'Suche',
 
 	//Constants
 	'manually' => 'Manuell',

diff --git a/public/css/grocy.css b/public/css/grocy.css
@@ -182,3 +182,15 @@ a.discrete-link:focus {
 #toast-container > div {
 	box-shadow: none;
 }
+
+.no-gutters {
+	margin-right: 0;
+	margin-left: 0;
+	padding-right: 0;
+	padding-left: 0;
+}
+
+.dataTables_filter,
+.dataTables_info {
+	display: none;
+}
diff --git a/public/viewjs/stockoverview.js b/public/viewjs/stockoverview.js
@@ -1,46 +1,33 @@
 var stockOverviewTable = $('#stock-overview-table').DataTable({
-	'bPaginate': false,
+	'paginate': false,
 	'order': [[3, 'asc']],
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 },
 		{ 'visible': false, 'targets': 4 }
 	],
-	'language': JSON.parse(L('datatables_localization')),
-	"dom": '<"filter-by-location">f'
+	'language': JSON.parse(L('datatables_localization'))
 });
 
-$("div.filter-by-location").html('<div class="dataTables_filter"><label>' + L('Filter by location') + ':<select id="location-filter" class="form-control input-sm" style="margin-left: 0.5em;"></label></div>');
-
-$('#stock-overview-table_wrapper').on("DOMSubtreeModified", function()
+$("#location-filter").on("change", function()
 {
-	$('#stock-overview-table_wrapper').off("DOMSubtreeModified");
-
-	Grocy.Api.Get('get-objects/locations',
-		function(locations)
-		{
-			$('#location-filter').append($('<option></option>').val("all").html(L("All")));
-			$.each(locations, function(index)
-			{
-				var locationName = locations[index].name;
-				$('#location-filter').append($('<option></option>').val(locationName).html(locationName));
-			});
-		},
-		function(xhr)
-		{
-			console.error(xhr);
-		}
-	);
-
-	$("#location-filter").on("change", function()
+	var value = $(this).val();
+	if (value === "all")
 	{
-		var value = $(this).val();
-		if (value === "all")
-		{
-			value = "";
-		}
+		value = "";
+	}
+
+	stockOverviewTable.column(4).search(value).draw();
+});
 
-		stockOverviewTable.column(4).search(value).draw();
-	});
+$("#search").on("keyup", function()
+{
+	var value = $(this).val();
+	if (value === "all")
+	{
+		value = "";
+	}
+
+	stockOverviewTable.search(value).draw();
 });
 
 $(document).on('click', '.product-consume-button', function(e)

diff --git a/version.json b/version.json
@@ -1,4 +1,4 @@
 {
-	"Version": "1.12.0",
+	"Version": "1.12.1",
 	"ReleaseDate": "2018-07-08"
 }
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
@@ -17,10 +17,24 @@
 		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
 		<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
 	</div>
+	<div class="discrete-content-separator-2x"></div>
+	<div class="row">
+		<div class="col-sm-3 no-gutters">
+			<label for="location-filter">{{ $L('Filter by location') }}</label>
+			<select class="form-control" id="location-filter">
+				<option value="all">{{ $L('All') }}</option>
+				@foreach($locations as $location)
+					<option value="{{ $location->name }}">{{ $location->name }}</option>
+				@endforeach
+			</select>
+		</div>
+		<div class="col-sm-3">
+			<label for="search">{{ $L('Search') }}</label>
+			<input type="text" class="form-control" id="search">
+		</div>
+	</div>
 </div>
 
-<div class="discrete-content-separator-2x"></div>
-
 <div class="table-responsive">
 	<table id="stock-overview-table" class="table table-striped">
 		<thead>