From 71274f8f08edab933a02e9b1a32f13b85b51d7f2 Mon Sep 17 00:00:00 2001
From: Michael Kaufmann <d00p@froxlor.org>
Date: Sun, 16 Oct 2022 17:10:57 +0200
Subject: [PATCH] rewirk tablecolum js a bit when more than once tablelisting
 is on one page; do not allow empty column selection

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>
---
 lib/Froxlor/Ajax/Ajax.php                     |  9 ++++++---
 templates/Froxlor/form/formfields.html.twig   |  4 ++--
 .../Froxlor/src/js/components/tablecolumns.js | 19 +++++++++----------
 templates/Froxlor/table/table.html.twig       | 18 +++++++++---------
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/lib/Froxlor/Ajax/Ajax.php b/lib/Froxlor/Ajax/Ajax.php
index 09bd9550..6c48ee30 100644
--- a/lib/Froxlor/Ajax/Ajax.php
+++ b/lib/Froxlor/Ajax/Ajax.php
@@ -219,11 +219,14 @@ class Ajax
 	private function updateTablelisting()
 	{
 		$columns = [];
-		foreach (Request::get('columns') as $value) {
+		foreach ((Request::get('columns') ?? []) as $value) {
 			$columns[] = $value;
 		}
-		Listing::storeColumnListingForUser([Request::get('listing') => $columns]);
-		return $this->jsonResponse($columns);
+		if (!empty($columns)) {
+			Listing::storeColumnListingForUser([Request::get('listing') => $columns]);
+			return $this->jsonResponse($columns);
+		}
+		return $this->errorResponse('At least one column must be selected', 406);
 	}
 
 	private function resetTablelisting()
diff --git a/templates/Froxlor/form/formfields.html.twig b/templates/Froxlor/form/formfields.html.twig
index 215d8bb3..d0d3a499 100644
--- a/templates/Froxlor/form/formfields.html.twig
+++ b/templates/Froxlor/form/formfields.html.twig
@@ -1,6 +1,6 @@
 {% macro fieldrow(id, field, norow = false, nohide = false, em = false) %}
 	{% if field.visible is not defined or (field.visible is defined and field.visible) or nohide == true %}
-		{% if norow == false and field.type != 'hidden' %}
+		{% if norow == false and (field.type != 'hidden' or (field.type == 'hidden' and field.display is defined and field.display is not empty)) %}
 			<div class="row g-0 formfield d-flex align-items-center">
 				{% if field.label is iterable %}
 					<label for="{{ id }}" class="col-sm-6 col-form-label pe-3">
@@ -56,7 +56,7 @@
 				{% if field.note is defined and field.note is not empty %}
 					<small class="text-info">{{ field.note|raw }}</small>
 				{% endif %}
-				{% if norow == false and field.type != 'hidden' %}
+				{% if norow == false and (field.type != 'hidden' or (field.type == 'hidden' and field.display is defined and field.display is not empty)) %}
 				</div>
 			</div>
 		{% endif %}
diff --git a/templates/Froxlor/src/js/components/tablecolumns.js b/templates/Froxlor/src/js/components/tablecolumns.js
index 345093a7..408a5495 100644
--- a/templates/Froxlor/src/js/components/tablecolumns.js
+++ b/templates/Froxlor/src/js/components/tablecolumns.js
@@ -2,14 +2,12 @@ $(function () {
 	/*
 	 * table columns - manage columns modal
 	 */
-	let form = $('#manageColumnsModal form');
-
-	form.on('submit', function (event) {
+	$('.manageColumnsModal form').on('submit', function (event) {
 		$.ajax({
-			url: 'lib/ajax.php?action=updatetablelisting&listing=' + form.data('listing') + '&theme=' + window.$theme,
+			url: 'lib/ajax.php?action=updatetablelisting&listing=' + $(this).data('listing') + '&theme=' + window.$theme,
 			type: 'POST',
 			dataType: 'json',
-			data: form.serialize(),
+			data: $(this).serialize(),
 			success: function () {
 				window.location.href = '';
 			},
@@ -20,7 +18,8 @@ $(function () {
 		event.preventDefault();
 	});
 
-	$('#manageColumnsModal form #reset').on('click', function () {
+	$('.manageColumnsModal form button[data-action="reset"]').on('click', function () {
+		var form = $(this).parents('form:first');
 		$.ajax({
 			url: 'lib/ajax.php?action=resettablelisting&listing=' + form.data('listing') + '&theme=' + window.$theme,
 			type: 'POST',
@@ -35,11 +34,11 @@ $(function () {
 		});
 	});
 
-	$('#manageColumnsModal form #select-all').on('click', function () {
-		$('#manageColumnsModal form input:checkbox').prop('checked', true);
+	$('.manageColumnsModal form button[data-action="select-all"]').on('click', function () {
+		$(this).parents('form:first').find('input:checkbox').prop('checked', true);
 	});
 
-	$('#manageColumnsModal form #unselect-all').on('click', function () {
-		$('#manageColumnsModal form input:checkbox').prop('checked', false);
+	$('.manageColumnsModal form button[data-action="unselect-all"]').on('click', function () {
+		$(this).parents('form:first').find('input:checkbox').prop('checked', false);
 	});
 });
diff --git a/templates/Froxlor/table/table.html.twig b/templates/Froxlor/table/table.html.twig
index 5f325438..d82fa82c 100644
--- a/templates/Froxlor/table/table.html.twig
+++ b/templates/Froxlor/table/table.html.twig
@@ -15,9 +15,9 @@
 					{% if gSearchText is not empty %}
 						<span class="me-2"><a href="{{ linker(listing.self_overview) }}"><i class="fa-solid fa-xmark"></i></a> Filter: <strong>{{ gSearchText }}</strong></span>
 					{% endif %}
-					<span type="button" data-bs-toggle="modal" data-bs-target="#searchColumnsModal" class="me-2"><i class="fa-solid fa-search"></i></span>
+					<span type="button" data-bs-toggle="modal" data-bs-target="#searchColumnsModal-{{ listing.id }}" class="me-2"><i class="fa-solid fa-search"></i></span>
 				{% endif %}
-				<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal"><i class="fa-solid fa-cog"></i></span>
+				<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal-{{ listing.id }}"><i class="fa-solid fa-cog"></i></span>
 			</div>
 		</div>
 		<div class="card table-responsive">
@@ -67,11 +67,11 @@
 	{% endif %}
 
 	<!-- Modal -->
-	<div class="modal fade" id="manageColumnsModal" tabindex="-1" aria-labelledby="manageColumnsModalLabel" aria-hidden="true">
+	<div class="modal fade manageColumnsModal" id="manageColumnsModal-{{ listing.id }}" tabindex="-1" aria-labelledby="manageColumnsModalLabel-{{ listing.id }}" aria-hidden="true">
 		<div class="modal-dialog">
 			<form method="POST" class="modal-content" data-listing="{{ listing.id }}">
 				<div class="modal-header">
-					<h5 class="modal-title" id="manageColumnsModalLabel">{{ lng('panel.managetablecolumnsmodal.title') }}</h5>
+					<h5 class="modal-title" id="manageColumnsModalLabel-{{ listing.id }}">{{ lng('panel.managetablecolumnsmodal.title') }}</h5>
 					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 				</div>
 				<div class="modal-body">
@@ -86,9 +86,9 @@
 					{% endfor %}
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" id="select-all">{{ lng('panel.select_all') }}</button>
-					<button type="button" class="btn btn-secondary" id="unselect-all">{{ lng('panel.unselect_all') }}</button>
-					<button type="button" class="btn btn-secondary" id="reset">{{ lng('panel.default') }}</button>
+					<button type="button" class="btn btn-secondary" data-action="select-all">{{ lng('panel.select_all') }}</button>
+					<button type="button" class="btn btn-secondary" data-action="unselect-all">{{ lng('panel.unselect_all') }}</button>
+					<button type="button" class="btn btn-secondary" data-action="reset">{{ lng('panel.default') }}</button>
 					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ lng('panel.modalclose') }}</button>
 					<button type="submit" class="btn btn-primary">{{ lng('panel.save') }}</button>
 				</div>
@@ -98,11 +98,11 @@
 
 	{% if listing.no_search is not defined or (listing.no_search is defined and listing.no_search == false) %}
 	<!-- Modal -->
-	<div class="modal fade" id="searchColumnsModal" tabindex="-1" aria-labelledby="searchColumnsModalLabel" aria-hidden="true">
+	<div class="modal fade searchColumnsModal" id="searchColumnsModal-{{ listing.id }}" tabindex="-1" aria-labelledby="searchColumnsModalLabel-{{ listing.id }}" aria-hidden="true">
 		<div class="modal-dialog">
 			<form method="GET" class="modal-content" action="{{ linker(listing.self_overview) }}">
 				<div class="modal-header">
-					<h5 class="modal-title" id="searchColumnsModalLabel">{{ lng('panel.searchtablecolumnsmodal.title') }}</h5>
+					<h5 class="modal-title" id="searchColumnsModalLabel-{{ listing.id }}">{{ lng('panel.searchtablecolumnsmodal.title') }}</h5>
 					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 				</div>
 				<div class="modal-body">