From 10780a343efbb31fd3be618ec93b90538790820f Mon Sep 17 00:00:00 2001
From: Laurent Dinclaux <laurent@gecka.nc>
Date: Tue, 7 Sep 2021 23:48:30 +1100
Subject: [PATCH] TakePos: add temporization when searching products. Adds a
 temporization after each typed letter, giving the user 700ms to type next
 letter before sending the search request It prevents hammering the server for
 each typed letter and "results jumping" effect, which is error-prone.

---
 htdocs/takepos/index.php | 117 +++++++++++++++++++++------------------
 1 file changed, 64 insertions(+), 53 deletions(-)

diff --git a/htdocs/takepos/index.php b/htdocs/takepos/index.php
index 1ddab39dcbe..377d5a7c6b6 100644
--- a/htdocs/takepos/index.php
+++ b/htdocs/takepos/index.php
@@ -178,6 +178,7 @@ var place="<?php echo $place; ?>";
 var editaction="qty";
 var editnumber="";
 var invoiceid=0;
+var search2_timer=null;
 
 /*
 var app = this;
@@ -545,62 +546,72 @@ function Search2(keyCodeForEnter) {
 	}
 
 	if (search === true) {
-		pageproducts = 0;
-		jQuery(".wrapper2 .catwatermark").hide();
-		$.getJSON('<?php echo DOL_URL_ROOT ?>/takepos/ajax/ajax.php?action=search&term=' + $('#search').val(), function (data) {
-			for (i = 0; i < <?php echo $MAXPRODUCT ?>; i++) {
-				if (typeof (data[i]) == "undefined") {
-					$("#prodesc" + i).text("");
-					$("#probutton" + i).text("");
-					$("#probutton" + i).hide();
-					$("#proprice" + i).attr("class", "hidden");
-					$("#proprice" + i).html("");
-					$("#proimg" + i).attr("src", "genimg/empty.png");
-					$("#prodiv" + i).data("rowid", "");
-					continue;
+
+		// temporization time to give time to type
+		if (search2_timer) {
+			console.log(search2_timer);
+			clearTimeout(search2_timer);
+		}
+
+		search2_timer = setTimeout(function(){
+
+			pageproducts = 0;
+			jQuery(".wrapper2 .catwatermark").hide();
+			$.getJSON('<?php echo DOL_URL_ROOT ?>/takepos/ajax/ajax.php?action=search&term=' + $('#search').val(), function (data) {
+				for (i = 0; i < <?php echo $MAXPRODUCT ?>; i++) {
+					if (typeof (data[i]) == "undefined") {
+						$("#prodesc" + i).text("");
+						$("#probutton" + i).text("");
+						$("#probutton" + i).hide();
+						$("#proprice" + i).attr("class", "hidden");
+						$("#proprice" + i).html("");
+						$("#proimg" + i).attr("src", "genimg/empty.png");
+						$("#prodiv" + i).data("rowid", "");
+						continue;
+					}
+					<?php
+					$titlestring = "'".dol_escape_js($langs->transnoentities('Ref').': ')."' + data[i]['ref']";
+					$titlestring .= " + ' - ".dol_escape_js($langs->trans("Barcode").': ')."' + data[i]['barcode']";
+					?>
+					var titlestring = <?php echo $titlestring; ?>;
+					$("#prodesc" + i).text(data[i]['label']);
+					$("#prodivdesc" + i).show();
+					$("#probutton" + i).text(data[i]['label']);
+					$("#probutton" + i).show();
+					if (data[i]['price_formated']) {
+						$("#proprice" + i).attr("class", "productprice");
+						$("#proprice" + i).html(data[i]['price_formated']);
+					}
+					$("#proimg" + i).attr("title", titlestring);
+					$("#proimg" + i).attr("src", "genimg/index.php?query=pro&id=" + data[i]['rowid']);
+					$("#prodiv" + i).data("rowid", data[i]['rowid']);
+					$("#prodiv" + i).data("iscat", 0);
 				}
-				<?php
-				$titlestring = "'".dol_escape_js($langs->transnoentities('Ref').': ')."' + data[i]['ref']";
-				$titlestring .= " + ' - ".dol_escape_js($langs->trans("Barcode").': ')."' + data[i]['barcode']";
-				?>
-				var titlestring = <?php echo $titlestring; ?>;
-				$("#prodesc" + i).text(data[i]['label']);
-				$("#prodivdesc" + i).show();
-				$("#probutton" + i).text(data[i]['label']);
-				$("#probutton" + i).show();
-				if (data[i]['price_formated']) {
-					$("#proprice" + i).attr("class", "productprice");
-					$("#proprice" + i).html(data[i]['price_formated']);
+			}).always(function (data) {
+				// If there is only 1 answer
+				if ($('#search').val().length > 0 && data.length == 1) {
+					console.log($('#search').val()+' - '+data[0]['barcode']);
+					if ($('#search').val() == data[0]['barcode'] && 'thirdparty' == data[0]['object']) {
+						console.log("There is only 1 answer with barcode matching the search, so we change the thirdparty "+data[0]['rowid']);
+						ChangeThirdparty(data[0]['rowid']);
+					}
+					else if ($('#search').val() == data[0]['barcode'] && 'product' == data[0]['object']) {
+						console.log("There is only 1 answer with barcode matching the search, so we add the product in basket");
+						ClickProduct(0);
+					}
 				}
-				$("#proimg" + i).attr("title", titlestring);
-				$("#proimg" + i).attr("src", "genimg/index.php?query=pro&id=" + data[i]['rowid']);
-				$("#prodiv" + i).data("rowid", data[i]['rowid']);
-				$("#prodiv" + i).data("iscat", 0);
-			}
-		}).always(function (data) {
-			// If there is only 1 answer
-			if ($('#search').val().length > 0 && data.length == 1) {
-				console.log($('#search').val()+' - '+data[0]['barcode']);
-				if ($('#search').val() == data[0]['barcode'] && 'thirdparty' == data[0]['object']) {
-					console.log("There is only 1 answer with barcode matching the search, so we change the thirdparty "+data[0]['rowid']);
-					ChangeThirdparty(data[0]['rowid']);
+				if (eventKeyCode == keyCodeForEnter){
+					if (data.length == 0) {
+						$('#search').val('<?php
+						$langs->load('errors');
+						echo dol_escape_js($langs->trans("ErrorRecordNotFound"));
+						?>');
+						$('#search').select();
+					}
+					else ClearSearch();
 				}
-				else if ($('#search').val() == data[0]['barcode'] && 'product' == data[0]['object']) {
-					console.log("There is only 1 answer with barcode matching the search, so we add the product in basket");
-					ClickProduct(0);
-				}
-			}
-			if (eventKeyCode == keyCodeForEnter){
-				if (data.length == 0) {
-					$('#search').val('<?php
-					$langs->load('errors');
-					echo dol_escape_js($langs->trans("ErrorRecordNotFound"));
-					?>');
-					$('#search').select();
-				}
-				else ClearSearch();
-			}
-		});
+			});
+		}, 700); // 700ms delay
 	}
 
 }