From e0fc7b90f50a797ddecee3e7230f3de0c69c2500 Mon Sep 17 00:00:00 2001
From: 4lloyd <github@lloydpost.nl>
Date: Tue, 3 Nov 2020 21:27:51 +0100
Subject: [PATCH] Stock table horizontally scrollable

---
 package.json                   | 17 +++++++++--------
 public/css/grocy.css           |  8 ++++++--
 public/viewjs/stockoverview.js | 18 ++++++++++++++++++
 views/layout/default.blade.php |  1 +
 views/stockoverview.blade.php  |  2 +-
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 064a39ba..a6f38a66 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,18 @@
 		"bootstrap": "^4.5.2",
 		"bootstrap-select": "^1.13.18",
 		"chart.js": "^2.8.0",
-		"datatables.net": "^1.10.21",
-		"datatables.net-bs4": "^1.10.21",
-		"datatables.net-colreorder": "^1.5.1",
-		"datatables.net-colreorder-bs4": "^1.5.1",
+		"datatables.net": "^1.10.22",
+		"datatables.net-bs4": "^1.10.22",
+		"datatables.net-colreorder": "^1.5.2",
+		"datatables.net-colreorder-bs4": "^1.5.2",
 		"datatables.net-plugins": "^1.10.20",
-		"datatables.net-responsive": "^2.2.5",
-		"datatables.net-responsive-bs4": "^2.2.5",
+		"datatables.net-responsive": "^2.2.6",
+		"datatables.net-responsive-bs4": "^2.2.6",
 		"datatables.net-rowgroup": "^1.1.2",
 		"datatables.net-rowgroup-bs4": "^1.1.2",
-		"datatables.net-select": "^1.3.0",
-		"datatables.net-select-bs4": "^1.3.0",
+		"datatables.net-select": "^1.3.1",
+		"datatables.net-select-bs4": "^1.3.1",
+		"dragscroll": "^0.0.8",
 		"fullcalendar": "^3.10.1",
 		"gettext-translator": "2.1.0",
 		"jquery": "3.5.1",
diff --git a/public/css/grocy.css b/public/css/grocy.css
index 6a2fb7e9..adc4c228 100755
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -337,8 +337,12 @@ input::-webkit-inner-spin-button {
 	display: none;
 }
 
-.dataTables_scrollBody {
-	overflow: visible !important;
+.grab-cursor {
+	cursor: grab;
+}
+
+.grab-cursor:active {
+	cursor: grabbing;
 }
 
 /* Third party component customizations - toastr */
diff --git a/public/viewjs/stockoverview.js b/public/viewjs/stockoverview.js
index d038c193..c856db59 100755
--- a/public/viewjs/stockoverview.js
+++ b/public/viewjs/stockoverview.js
@@ -1,6 +1,7 @@
 var stockOverviewTable = $('#stock-overview-table').DataTable({
 	'order': [[4, 'asc']],
 	'colReorder': false,
+	'scrollX': true,
 	'columnDefs': [
 		{ 'orderable': false, 'targets': 0 },
 		{ 'searchable': false, "targets": 0 },
@@ -10,8 +11,25 @@
 		{ 'visible': false, 'targets': 8 }
 	],
 });
+
+$('#stock-overview-table').on('column-sizing.dt', function(e, settings)
+{
+	var dtScrollWidth = $('.dataTables_scroll').width();
+	var stockTableWidth = $('#stock-overview-table').width();
+
+	if (dtScrollWidth < stockTableWidth)
+	{
+		$('.dataTables_scrollBody').addClass("grab-cursor");
+	} else
+	{
+		$('.dataTables_scrollBody').removeClass("grab-cursor");
+	}
+});
+
 $('#stock-overview-table tbody').removeClass("d-none");
 stockOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#location-filter").on("change", function()
 {
diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php
index 9d11932f..7187aea8 100644
--- a/views/layout/default.blade.php
+++ b/views/layout/default.blade.php
@@ -695,6 +695,7 @@
 	@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/dragscroll/dragscroll.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index ddd27f6e..cbafcbb8 100755
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -138,7 +138,7 @@
 <div class="row">
 	<div class="col">
 		<table id="stock-overview-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>