Add intuitive table selection (#35444)

Add intuitive table selection with class .row-with-select
Added to propal, order and invoice list

htdocs/comm/propal/list.php

@@ -1855,7 +1855,7 @@ while ($i < $imaxinloop) {
 			print '</td></tr>';
 		}
 	} else {
-		print '<tr data-rowid="'.$object->id.'" class="oddeven status'.$object->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'">';
+		print '<tr data-rowid="'.$object->id.'" class="oddeven row-with-select status'.$object->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'">';
 
 		// Action column
 		if (getDolGlobalString('MAIN_CHECKBOX_LEFT_COLUMN')) {

htdocs/commande/list.php

@@ -2419,7 +2419,7 @@ while ($i < $imaxinloop) {
 	} else {
 		// Show line of result
 		$j = 0;
-		print '<tr data-rowid="'.$object->id.'" class="oddeven status'.$generic_commande->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'">';
+		print '<tr data-rowid="'.$object->id.'" class="oddeven row-with-select status'.$generic_commande->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'">';
 
 		// Action column
 		if (getDolGlobalString('MAIN_CHECKBOX_LEFT_COLUMN')) {

htdocs/compta/facture/list.php

@@ -2327,7 +2327,7 @@ if ($num > 0) {
 		} else {
 			// Show line of result
 			$j = 0;
-			print '<tr data-rowid="'.$object->id.'" class="oddeven status'.$object->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'"';
+			print '<tr data-rowid="'.$object->id.'" class="oddeven row-with-select status'.$object->status.((getDolGlobalInt('MAIN_FINISHED_LINES_OPACITY') == 1 && $obj->status > 1) ? ' opacitymedium' : '').'"';
 			if ($contextpage == 'poslist') {
 				print ' onclick="parent.$(\'#poslines\').load(\'invoice.php?action=history&placeid='.$obj->id.'\', function() {parent.$.colorbox.close();';
 				if (strpos($obj->ref, 'PROV') !== false) {

htdocs/core/js/lib_head.js.php

@@ -1704,5 +1704,94 @@ function onKanbanColumnChange(item, newColumn) {
 	item.data('original-column', newColumn);
 }
 
+/*
+* Intuitive table selection
+*/
+$(function() {
+
+	/**
+	 * @param {jQuery}  el
+	 * @param {Integer}  status
+	 */
+	let setLastClickedRowStatus = function (el, status = 1){
+		$('.row-with-select').attr('data-is-last-changed', 0);
+		el.attr('data-is-last-changed', status === 0 ? 0 : 1);
+	}
+
+	/**
+	 * Remove data-is-last-changed on double click
+	 * Because if data-is-last-changed is present the user can't select text
+	 */
+	$(document).on("dblclick", ".row-with-select", function(e) {
+		$('.row-with-select[data-is-last-changed]').removeAttr( 'data-is-last-changed' );
+	});
+
+	/**
+	 * DISABLE on click a and button
+	 * Because Ctrl + Click on link is also used for open ion a new tab
+	 * we need to block select tool
+	 */
+	$(document).on("click", ".row-with-select a, .row-with-select button", function (e) {
+		// we need to block select tool
+		if (e.ctrlKey) {
+			e.stopPropagation();
+		}
+	});
+
+	$(document).on("mousedown click", ".row-with-select input.checkforselect", function (e) {
+		// Prevents automatic change of “checked”
+		e.preventDefault();
+		e.stopPropagation(); // parent click trigger will be done below
+
+		let parentRow = $(this).closest(".row-with-select");
+
+		// this part of code prevent weird behavior when user (ctrl or maj) + click directly on checkbox
+		// We simulate a click on the parent line
+		parentRow.trigger({
+			type: "click",
+			ctrlKey: !e.shiftKey, // simulate ctrlKey click will automatically prop activate the checkbox with parent event but not if shift key is pressed.
+			metaKey: !e.shiftKey, // simulate metaKey click will automatically prop activate the checkbox with parent event but not if shift key is pressed.
+			shiftKey: e.shiftKey,
+			originalEvent: e
+		});
+
+	});
+
+	$(document).on("click", ".row-with-select", function (e) {
+		let checkBox = $(this).find('.checkforselect');
+		let nextCheckStatus = !checkBox.is(':checked')
+
+		if (e.ctrlKey || e.metaKey) {
+			// Add line to selection
+			if(checkBox){
+				checkBox.prop('checked', nextCheckStatus).trigger('change');
+			}
+			setLastClickedRowStatus($(this), 1);
+		}
+
+		if (e.shiftKey) {
+			let lastLastChanged = $(this).closest('table').find('.row-with-select[data-is-last-changed="1"]');
+
+			if(lastLastChanged.length>0){
+				// Add all lines to selection betwin last selected line
+				if($(this).index() === lastLastChanged.index()) {
+					return null;
+				}
+
+				if($(this).index() < lastLastChanged.index()) {
+					$(this).nextUntil(lastLastChanged, ".row-with-select" ).find('.checkforselect').prop('checked', nextCheckStatus).trigger('change');
+				}else{
+					lastLastChanged.nextUntil($(this), ".row-with-select" ).find('.checkforselect').prop('checked', nextCheckStatus).trigger('change');
+				}
+
+
+				lastLastChanged.find('.checkforselect').prop('checked', nextCheckStatus).trigger('change');
+				checkBox.prop('checked', nextCheckStatus).trigger('change');
+
+				setLastClickedRowStatus($(this), 1);
+			}
+		}
+	});
+});
 
 // End of lib_head.js.php

htdocs/theme/eldy/global.inc.php

@@ -9190,6 +9190,16 @@ print getDolGlobalString('THEME_CUSTOM_CSS');
 
 ?>
 
+/* Remove text selection - Intuitive table selection */
+.row-with-select[data-is-last-changed] * {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+}
+
 div.extra_inline_chkbxlst, div.extra_inline_checkbox {
 	min-width:150px;
 }

htdocs/theme/md/style.css.php

@@ -8998,9 +8998,18 @@ if (is_object($db)) {
 }
 ::-webkit-scrollbar-thumb {
 	background: #ddd;
-}​
-
+}
 
+/* Remove text selection - Intuitive table selection */
+.row-with-select[data-is-last-changed] * {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Non-prefixed version, currently
+			  supported by Chrome, Edge, Opera and Firefox */
+}
 
 /* Must be at end */
 div.flot-text .flot-tick-label .tickLabel, .fa-color-unset {