viewjs: extract functions for DataTable Initialisation

Also revert back to use rollup-plugin-css-porter,
because rollup-postcss has issues and also doesn't work.

gulpfile.babel.js

@@ -10,7 +10,7 @@ import buffer from 'vinyl-buffer';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import eslint from '@rollup/plugin-eslint';
-import postcssPlugin from 'rollup-plugin-postcss';
+import rollupCss from 'rollup-plugin-css-porter';
 import gulpif from 'gulp-if';
 import uglify from 'gulp-uglify';
 import gulpsass from 'gulp-dart-sass'; // TODO: move to gulp-sass once they removed the node-sass depenency
@@ -32,7 +32,9 @@ var postcss_plugins = [
 	// always add autoprefixer
 	autoprefixer(),
 ];
-
+/*
+	eslint Configuration
+*/
 var eslint_config = {
 	"envs": ["es6"],
 	"globals": [
@@ -79,7 +81,6 @@ view_eslint_config.globals = eslint_config.globals.concat([
 	"RefreshLocaleNumberDisplay",
 	"RefreshLocaleNumberInput",
 	"LoadImagesLazy",
-	"Delay",
 	"GetUriParam",
 	"UpdateUriParam",
 	"RemoveUriParam",
@@ -103,10 +104,8 @@ files.forEach(function(target)
 			name: path.basename(target),
 			sourcemap: 'inline',
 		},
-		plugins: [resolve(), postcssPlugin({
+		plugins: [resolve(), rollupCss({
-			extract: path.resolve('./public/css/viewcss/' + path.basename(target).replace(".js", ".css")),
+			dest: path.resolve('./public/css/viewcss/' + path.basename(target).replace(".js", ".css")),
-			minimize: minify,
-			plugins: [autoprefixer()]
 		}), commonjs(), eslint(view_eslint_config)],
 
 	})
@@ -127,10 +126,8 @@ components.forEach(function(target)
 			name: path.basename(target),
 			sourcemap: 'inline',
 		},
-		plugins: [resolve(), postcssPlugin({
+		plugins: [resolve(), rollupCss({
-			extract: path.resolve('./public/css/components/' + path.basename(target).replace(".js", ".css")),
+			dest: path.resolve('./public/css/viewcss/' + path.basename(target).replace(".js", ".css")),
-			minimize: minify,
-			plugins: [autoprefixer()]
 		}), commonjs(), eslint(view_eslint_config)],
 	})
 		.pipe(source(path.basename(target), "./js/viewjs/components"))

js/grocy.js

@@ -9,7 +9,7 @@ import { WakeLock } from "./lib/WakeLock";
 import { UISound } from "./lib/UISound";
 import { Nightmode } from "./lib/nightmode";
 import { HeaderClock } from "./helpers/clock";
-import { animateCSS, BoolVal, Delay, EmptyElementWhenMatches, GetUriParam, RemoveUriParam, UpdateUriParam } from "./helpers/extensions";
+import { animateCSS, BoolVal, EmptyElementWhenMatches, GetUriParam, RemoveUriParam, UpdateUriParam } from "./helpers/extensions";
 import Translator from "gettext-translator";
 import { WindowMessageBag } from './helpers/messagebag';
 
@@ -121,7 +121,6 @@ class GrocyClass
 			setDatatableDefaults(grocy);
 
 			// add some more functions to the global space
-			window.Delay = Delay;
 			window.GetUriParam = GetUriParam;
 			window.UpdateUriParam = UpdateUriParam;
 			window.RemoveUriParam = RemoveUriParam;

js/helpers/extensions.js

@@ -86,22 +86,6 @@ function IsJsonString(text)
 	return true;
 }
 
-function Delay(callable, delayMilliseconds)
-{
-	var timer = 0;
-	return function()
-	{
-		var context = this;
-		var args = arguments;
-
-		clearTimeout(timer);
-		timer = setTimeout(function()
-		{
-			callable.apply(context, args);
-		}, delayMilliseconds || 0);
-	};
-}
-
 $.fn.isVisibleInViewport = function(extraHeightPadding = 0)
 {
 	var elementTop = $(this).offset().top;
@@ -138,7 +122,6 @@ export
 {
 	RandomString,
 	animateCSS,
-	Delay,
 	IsJsonString,
 	BoolVal,
 	GetFileNameFromPath,

js/helpers/frontend.js

@@ -7,6 +7,22 @@ class GrocyFrontendHelpers
 		this.Api = Api;
 	}
 
+	Delay(callable, delayMilliseconds)
+	{
+		var timer = 0;
+		return function()
+		{
+			var context = this;
+			var args = arguments;
+
+			clearTimeout(timer);
+			timer = setTimeout(function()
+			{
+				callable.apply(context, args);
+			}, delayMilliseconds || 0);
+		};
+	}
+
 	ValidateForm(formId)
 	{
 		var form = document.getElementById(formId);
@@ -122,6 +138,93 @@ class GrocyFrontendHelpers
 			});
 		}
 	}
+
+	InitDataTable(dataTable, searchFunction = null, clearFunction = null)
+	{
+		dataTable.columns.adjust().draw();
+
+		var self = this;
+
+		var defaultSearchFunction = function()
+		{
+			var value = $(this).val();
+			if (value === "all")
+			{
+				value = "";
+			}
+
+			dataTable.search(value).draw();
+		};
+
+		var defaultClearFunction = function()
+		{
+			$("#search").val("");
+			dataTable.search("").draw();
+		};
+
+		$("#search").on("keyup", self.Delay(searchFunction || defaultSearchFunction, 200));
+
+		$("#clear-filter-button").on("click", clearFunction || defaultClearFunction);
+	}
+
+	MakeFilterForColumn(selector, column, table, filterFunction = null, transferCss = false, valueMod = null)
+	{
+		$(selector).on("change", filterFunction || function()
+		{
+			var value = $(this).val();
+			var text = $(selector + " option:selected").text();
+			if (value === "all")
+			{
+				text = "";
+			}
+			else
+			{
+				value = valueMod != null ? valueMod(value) : value;
+			}
+
+			if (transferCss)
+			{
+				// Transfer CSS classes of selected element to dropdown element (for background)
+				$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
+			}
+
+			table.column(column).search(text).draw();
+		});
+		$("#clear-filter-button").on('click', () =>
+		{
+			$(selector).val("");
+			table.column(column).search("").draw();
+		})
+	}
+	MakeStatusFilter(dataTable, column)
+	{
+		$("#status-filter").on("change", function()
+		{
+			var value = $(this).val();
+			if (value === "all")
+			{
+				value = "";
+			}
+
+			// Transfer CSS classes of selected element to dropdown element (for background)
+			$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
+
+			dataTable.column(column).search(value).draw();
+		});
+
+		$(".status-filter-message").on("click", function()
+		{
+			var value = $(this).data("status-filter");
+			$("#status-filter").val(value);
+			$("#status-filter").trigger("change");
+		});
+
+		$("#clear-filter-button").on("click", function()
+		{
+			$("#status-filter").val("all");
+			$("#status-filter").trigger("change");
+		});
+	}
 }
 
 export { GrocyFrontendHelpers };

js/viewjs/batteries.js

@@ -9,7 +9,7 @@
 $('#batteries-table tbody').removeClass("d-none");
 batteriesTable.columns.adjust().draw();
 
-$("#search").on("keyup", Delay(function()
+$("#search").on("keyup", Grocy.FrontendHelpers.Delay(function()
 {
 	var value = $(this).val();
 	if (value === "all")

js/viewjs/batteriesjournal.js

@@ -21,7 +21,7 @@ $("#battery-filter").on("change", function()
 	batteriesJournalTable.column(1).search(text).draw();
 });
 
-$("#search").on("keyup", Delay(function()
+$("#search").on("keyup", Grocy.FrontendHelpers.Delay(function()
 {
 	var value = $(this).val();
 	if (value === "all")

js/viewjs/batteriesoverview.js

@@ -8,47 +8,9 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#batteries-overview-table tbody').removeClass("d-none");
-batteriesOverviewTable.columns.adjust().draw();
 
-$("#search").on("keyup", Delay(function()
+Grocy.FrontendHelpers.InitDataTable(batteriesOverviewTable);
-{
+Grocy.FrontendHelpers.MakeStatusFilter(batteriesOverviewTable, 5);
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	batteriesOverviewTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	$("#status-filter").val("all");
-	batteriesOverviewTable.column(5).search("").draw();
-	batteriesOverviewTable.search("").draw();
-});
-
-$("#status-filter").on("change", function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	// Transfer CSS classes of selected element to dropdown element (for background)
-	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
-
-	batteriesOverviewTable.column(5).search(value).draw();
-});
-
-$(".status-filter-message").on("click", function()
-{
-	var value = $(this).data("status-filter");
-	$("#status-filter").val(value);
-	$("#status-filter").trigger("change");
-});
 
 $(document).on('click', '.track-charge-cycle-button', function(e)
 {

js/viewjs/chores.js

@@ -6,20 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#chores-table tbody').removeClass("d-none");
-choresTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(choresTable, null, function()
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	choresTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
 {
 	$("#search").val("");
 	choresTable.search("").draw();

js/viewjs/choresjournal.js

@@ -7,38 +7,8 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#chores-journal-table tbody').removeClass("d-none");
-choresJournalTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(choresJournalTable);
-
+Grocy.FrontendHelpers.MakeFilterForColumn("#chore-filter", 1, choresJournalTable);
-$("#chore-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#chore-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	choresJournalTable.column(1).search(text).draw();
-});
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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")
 {
@@ -51,7 +21,7 @@ $(document).on('click', '.undo-chore-execution-button', function(e)
 	e.preventDefault();
 
 	var element = $(e.currentTarget);
-	var executionId = $(e.currentTarget).attr('data-execution-id');
+	var executionId = element.attr('data-execution-id');
 
 	Grocy.Api.Post('chores/executions/' + executionId.toString() + '/undo', {},
 		function(result)

js/viewjs/choresoverview.js

@@ -9,33 +9,18 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#chores-overview-table tbody').removeClass("d-none");
-choresOverviewTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(choresOverviewTable, null, function()
-
-$("#search").on("keyup", Delay(function()
 {
-	var value = $(this).val();
+	$("#search").val("");
-	if (value === "all")
+	$("#user-filter").val("all");
-	{
+	choresOverviewTable.column(6).search("").draw();
-		value = "";
+	choresOverviewTable.search("").draw();
-	}
+	RemoveUriParam("user");
-
-	choresOverviewTable.search(value).draw();
-}, 200));
-
-$("#status-filter").on("change", function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	// Transfer CSS classes of selected element to dropdown element (for background)
-	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
-
-	choresOverviewTable.column(5).search(value).draw();
 });
 
+
+Grocy.FrontendHelpers.MakeFilterForColumn("#status-filter", 5, choresOverviewTable, null, true);
+
 $("#user-filter").on("change", function()
 {
 	var value = $(this).val();
@@ -55,16 +40,6 @@ $("#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");

js/viewjs/consume.js

@@ -285,7 +285,7 @@ $("#location_id").on('change', function(e)
 
 				if (document.getElementById("product_id").getAttribute("barcode") == "null")
 				{
-					ScanModeSubmit();
+					Grocy.ScanModeSubmit();
 				}
 			},
 			function(xhr)
@@ -391,7 +391,7 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 											$(".input-group-productamountpicker").trigger("change");
 											Grocy.FrontendHelpers.ValidateForm('consume-form');
 											RefreshLocaleNumberInput();
-											ScanModeSubmit(false);
+											Grocy.ScanModeSubmit(false);
 										}
 									}
 								},
@@ -635,27 +635,4 @@ function RefreshForm()
 	}
 
 	Grocy.FrontendHelpers.ValidateForm("consume-form");
-}
+}
-
-function ScanModeSubmit(singleUnit = true)
-{
-	if (BoolVal(Grocy.UserSettings.scan_mode_consume_enabled))
-	{
-		if (singleUnit)
-		{
-			$("#display_amount").val(1);
-			$(".input-group-productamountpicker").trigger("change");
-		}
-
-		Grocy.FrontendHelpers.ValidateForm("consume-form");
-		if (document.getElementById("consume-form").checkValidity() === true)
-		{
-			$('#save-consume-button').click();
-		}
-		else
-		{
-			toastr.warning(__t("Scan mode is on but not all required fields could be populated automatically"));
-			Grocy.UISound.Error();
-		}
-	}
-}

js/viewjs/equipment.js

@@ -17,7 +17,7 @@ var equipmentTable = $('#equipment-table').DataTable({
 	}
 });
 $('#equipment-table tbody').removeClass("d-none");
-equipmentTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(equipmentTable);
 
 equipmentTable.on('select', function(e, dt, type, indexes)
 {
@@ -65,23 +65,6 @@ function DisplayEquipment(id)
 	);
 }
 
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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');

js/viewjs/locations.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#locations-table tbody').removeClass("d-none");
-locationsTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(locationsTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	locationsTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	locationsTable.search("").draw();
-});
 
 $(document).on('click', '.location-delete-button', function(e)
 {

js/viewjs/manageapikeys.js

@@ -8,7 +8,7 @@ var apiKeysTable = $('#apikeys-table').DataTable({
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#apikeys-table tbody').removeClass("d-none");
-apiKeysTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(apiKeysTable);
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');
 if (createdApiKeyId !== undefined)
@@ -16,23 +16,6 @@ if (createdApiKeyId !== undefined)
 	animateCSS("#apiKeyRow_" + createdApiKeyId, "pulse");
 }
 
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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');

js/viewjs/productgroups.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#productgroups-table tbody').removeClass("d-none");
-groupsTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(groupsTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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)
 {

js/viewjs/products.js

@@ -8,38 +8,15 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#products-table tbody').removeClass("d-none");
-productsTable.columns.adjust().draw();
 
-$("#search").on("keyup", Delay(function()
+Grocy.FrontendHelpers.InitDataTable(productsTable, null, function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	productsTable.search(value).draw();
-}, 200));
-
-$("#product-group-filter").on("change", function()
-{
-	var value = $("#product-group-filter option:selected").text();
-	if (value === __t("All"))
-	{
-		value = "";
-	}
-
-	productsTable.column(6).search(value).draw();
-});
-
-$("#clear-filter-button").on("click", function()
 {
 	$("#search").val("");
-	$("#product-group-filter").val("all");
-	productsTable.column(7).search("").draw();
 	productsTable.search("").draw();
 	$("#show-disabled").prop('checked', false);
-});
+})
+
+Grocy.FrontendHelpers.MakeFilterForColumn("#product-group-filter", 6, productsTable);
 
 if (typeof GetUriParam("product-group") !== "undefined")
 {

js/viewjs/quantityunits.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#quantityunits-table tbody').removeClass("d-none");
-quantityUnitsTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(quantityUnitsTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	quantityUnitsTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	quantityUnitsTable.search("").draw();
-});
 
 $(document).on('click', '.quantityunit-delete-button', function(e)
 {

js/viewjs/recipes.js

@@ -15,7 +15,24 @@
 	}
 });
 $('#recipes-table tbody').removeClass("d-none");
-recipesTables.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(recipesTables,
+	function()
+	{
+		var value = $(this).val();
+
+		recipesTables.search(value).draw();
+
+		$(".recipe-gallery-item").removeClass("d-none");
+
+		$(".recipe-gallery-item .card-title:not(:contains_case_insensitive(" + value + "))").parent().parent().parent().addClass("d-none");
+	},
+	function() // custom status filter below
+	{
+		$("#search").val("");
+		$("#status-filter").val("all");
+		$("#search").trigger("keyup");
+		$("#status-filter").trigger("change");
+	})
 
 if ((typeof GetUriParam("tab") !== "undefined" && GetUriParam("tab") === "gallery") || window.localStorage.getItem("recipes_last_tab_id") == "gallery-tab")
 {
@@ -54,25 +71,6 @@ $("a[data-toggle='tab']").on("shown.bs.tab", function(e)
 	window.localStorage.setItem("recipes_last_tab_id", tabId);
 });
 
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-
-	recipesTables.search(value).draw();
-
-	$(".recipe-gallery-item").removeClass("d-none");
-
-	$(".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();

js/viewjs/shoppinglist.js

@@ -24,7 +24,8 @@ var shoppingListTable = $('#shoppinglist-table').DataTable({
 	}
 });
 $('#shoppinglist-table tbody').removeClass("d-none");
-shoppingListTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(shoppingListTable);
+Grocy.FrontendHelpers.MakeStatusFilter(shoppingListTable, 4);
 
 var shoppingListPrintShadowTable = $('#shopping-list-print-shadow-table').DataTable({
 	'order': [[1, 'asc']],
@@ -38,40 +39,8 @@ var shoppingListPrintShadowTable = $('#shopping-list-print-shadow-table').DataTa
 		dataSrc: 2
 	}
 });
-shoppingListPrintShadowTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(shoppingListPrintShadowTable);
 
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	// Transfer CSS classes of selected element to dropdown element (for background)
-	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
-
-	shoppingListTable.column(4).search(value).draw();
-});
 
 $("#selected-shopping-list").on("change", function()
 {
@@ -79,13 +48,6 @@ $("#selected-shopping-list").on("change", function()
 	window.location.href = U('/shoppinglist?list=' + value);
 });
 
-$(".status-filter-message").on("click", function()
-{
-	var value = $(this).data("status-filter");
-	$("#status-filter").val(value);
-	$("#status-filter").trigger("change");
-});
-
 $("#delete-selected-shopping-list").on("click", function()
 {
 	var objectName = $("#selected-shopping-list option:selected").text();

js/viewjs/shoppinglocations.js

@@ -6,24 +6,7 @@ var locationsTable = $('#shoppinglocations-table').DataTable({
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#shoppinglocations-table tbody').removeClass("d-none");
-locationsTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(locationsTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	locationsTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	locationsTable.search("").draw();
-});
 
 $(document).on('click', '.shoppinglocation-delete-button', function(e)
 {

js/viewjs/stockjournal.js

@@ -7,80 +7,12 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#stock-journal-table tbody').removeClass("d-none");
-stockJournalTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(stockJournalTable);
 
-$("#product-filter").on("change", function()
+Grocy.FrontendHelpers.MakeFilterForColumn("#product-filter", 1, stockJournalTable);
-{
+Grocy.FrontendHelpers.MakeFilterForColumn("#transaction-type-filter", 4, stockJournalTable);
-	var value = $(this).val();
+Grocy.FrontendHelpers.MakeFilterForColumn("#location-filter", 5, stockJournalTable);
-	var text = $("#product-filter option:selected").text();
+Grocy.FrontendHelpers.MakeFilterForColumn("#user-filter", 6, stockJournalTable);
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	stockJournalTable.column(1).search(text).draw();
-});
-
-$("#transaction-type-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#transaction-type-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	stockJournalTable.column(4).search(text).draw();
-});
-
-$("#location-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#location-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	stockJournalTable.column(5).search(text).draw();
-});
-
-$("#user-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#user-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	stockJournalTable.column(6).search(text).draw();
-});
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	stockJournalTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	$("#transaction-type-filter").val("all");
-	$("#location-filter").val("all");
-	$("#user-filter").val("all");
-	$("#product-filter").val("all");
-	stockJournalTable.column(1).search("").draw();
-	stockJournalTable.column(4).search("").draw();
-	stockJournalTable.column(5).search("").draw();
-	stockJournalTable.column(6).search("").draw();
-	stockJournalTable.search("").draw();
-});
 
 if (typeof GetUriParam("product") !== "undefined")
 {

js/viewjs/stockjournalsummary.js

@@ -7,64 +7,9 @@ var journalSummaryTable = $('#stock-journal-summary-table').DataTable({
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#stock-journal-summary-table tbody').removeClass("d-none");
-journalSummaryTable.columns.adjust().draw();
 
-$("#product-filter").on("change", function()
+Grocy.FrontendHelpers.InitDataTable(journalSummaryTable);
-{
-	var value = $(this).val();
-	var text = $("#product-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
 
-	journalSummaryTable.column(1).search(text).draw();
+Grocy.FrontendHelpers.MakeFilterForColumn("#product-filter", 1, journalSummaryTable);
-});
+Grocy.FrontendHelpers.MakeFilterForColumn("#transaction-type-filter", 2, journalSummaryTable);
-
+Grocy.FrontendHelpers.MakeFilterForColumn("#user-filter", 3, journalSummaryTable);
-$("#transaction-type-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#transaction-type-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	journalSummaryTable.column(2).search(text).draw();
-});
-
-$("#user-filter").on("change", function()
-{
-	var value = $(this).val();
-	var text = $("#user-filter option:selected").text();
-	if (value === "all")
-	{
-		text = "";
-	}
-
-	journalSummaryTable.column(3).search(text).draw();
-});
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	journalSummaryTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	$("#transaction-type-filter").val("all");
-	$("#location-filter").val("all");
-	$("#user-filter").val("all");
-	$("#product-filter").val("all");
-	journalSummaryTable.column(1).search("").draw();
-	journalSummaryTable.column(2).search("").draw();
-	journalSummaryTable.column(3).search("").draw();
-	journalSummaryTable.search("").draw();
-});

js/viewjs/stockoverview.js

@@ -25,81 +25,10 @@
 });
 
 $('#stock-overview-table tbody').removeClass("d-none");
-stockOverviewTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(stockOverviewTable);
-
+Grocy.FrontendHelpers.MakeFilterForColumn("#location-filter", 6, stockOverviewTable, null, false, (value) => "xx" + value + "xx");
-$("#location-filter").on("change", function()
+Grocy.FrontendHelpers.MakeFilterForColumn("#product-group-filter", 8, stockOverviewTable, null, false, (value) => "xx" + value + "xx");
-{
+Grocy.FrontendHelpers.MakeStatusFilter(stockOverviewTable, 7);
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-	else
-	{
-		value = "xx" + value + "xx";
-	}
-
-	stockOverviewTable.column(6).search(value).draw();
-});
-
-$("#product-group-filter").on("change", function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-	else
-	{
-		value = "xx" + value + "xx";
-	}
-
-	stockOverviewTable.column(8).search(value).draw();
-});
-
-$("#status-filter").on("change", function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	// Transfer CSS classes of selected element to dropdown element (for background)
-	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
-
-	stockOverviewTable.column(7).search(value).draw();
-});
-
-$(".status-filter-message").on("click", function()
-{
-	var value = $(this).data("status-filter");
-	$("#status-filter").val(value);
-	$("#status-filter").trigger("change");
-});
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	$("#status-filter").val("all");
-	$("#product-group-filter").val("all");
-	$("#location-filter").val("all");
-	stockOverviewTable.column(6).search("").draw();
-	stockOverviewTable.column(7).search("").draw();
-	stockOverviewTable.column(8).search("").draw();
-	stockOverviewTable.search("").draw();
-});
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	stockOverviewTable.search(value).draw();
-}, 200));
 
 $(document).on('click', '.stockentry-grocycode-product-label-print', function(e)
 {

js/viewjs/taskcategories.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#taskcategories-table tbody').removeClass("d-none");
-categoriesTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(categoriesTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	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)
 {

js/viewjs/tasks.js

@@ -12,48 +12,13 @@
 	}
 });
 $('#tasks-table tbody').removeClass("d-none");
-tasksTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(tasksTable, null, function()
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	tasksTable.search(value).draw();
-}, 200));
-
-$("#status-filter").on("change", function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	// Transfer CSS classes of selected element to dropdown element (for background)
-	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
-
-	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);
 });
-
+Grocy.FrontendHelpers.MakeStatusFilter(tasksTable, 5);
-$(".status-filter-message").on("click", function()
-{
-	var value = $(this).data("status-filter");
-	$("#status-filter").val(value);
-	$("#status-filter").trigger("change");
-});
 
 $(document).on('click', '.do-task-button', function(e)
 {

js/viewjs/userentities.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#userentities-table tbody').removeClass("d-none");
-userentitiesTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(userentitiesTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	userentitiesTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	userentitiesTable.search("").draw();
-});
 
 $(document).on('click', '.userentity-delete-button', function(e)
 {

js/viewjs/userfields.js

@@ -6,18 +6,14 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#userfields-table tbody').removeClass("d-none");
-userfieldsTable.columns.adjust().draw();
 
-$("#search").on("keyup", Delay(function()
+Grocy.FrontendHelpers.InitDataTable(userfieldsTable, null, function()
 {
-	var value = $(this).val();
+	$("#search").val("");
-	if (value === "all")
+	$("#entity-filter").val("all");
-	{
+	userfieldsTable.column(1).search("").draw();
-		value = "";
+	userfieldsTable.search("").draw();
-	}
+});
-
-	userfieldsTable.search(value).draw();
-}, 200));
 
 $("#entity-filter").on("change", function()
 {
@@ -31,14 +27,6 @@ $("#entity-filter").on("change", function()
 	$("#new-userfield-button").attr("href", U("/userfield/new?embedded&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');

js/viewjs/userobjects.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#userobjects-table tbody').removeClass("d-none");
-userobjectsTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(userobjectsTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	userobjectsTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	userobjectsTable.search("").draw();
-});
 
 $(document).on('click', '.userobject-delete-button', function(e)
 {

js/viewjs/users.js

@@ -6,24 +6,7 @@
 	].concat($.fn.dataTable.defaults.columnDefs)
 });
 $('#users-table tbody').removeClass("d-none");
-usersTable.columns.adjust().draw();
+Grocy.FrontendHelpers.InitDataTable(usersTable);
-
-$("#search").on("keyup", Delay(function()
-{
-	var value = $(this).val();
-	if (value === "all")
-	{
-		value = "";
-	}
-
-	usersTable.search(value).draw();
-}, 200));
-
-$("#clear-filter-button").on("click", function()
-{
-	$("#search").val("");
-	usersTable.search("").draw();
-});
 
 $(document).on('click', '.user-delete-button', function(e)
 {

package.json

@@ -66,7 +66,7 @@
 		"node-sass-tilde-importer": "^1.0.2",
 		"postcss": "^8.3.4",
 		"rollup": "^2.52.1",
-		"rollup-plugin-postcss": "^4.0.0",
+		"rollup-plugin-css-porter": "^1.0.2",
 		"vinyl-buffer": "^1.0.1",
 		"vinyl-source-stream": "^2.0.0"
 	},

views/stockoverview.blade.php

@@ -4,11 +4,6 @@
 @section('activeNav', 'stockoverview')
 @section('viewJsName', 'stockoverview')
 
-@push('pageStyles')
-<link href="{{ $U('/css/viewcss/stockoverview.css?v=', true) }}{{ $version }}"
-	rel="stylesheet">
-@endpush
-
 @push('pageScripts')
 <script src="{{ $U('/viewjs/purchase.js?v=', true) }}{{ $version }}"></script>
 @endpush