From a68db7c80d35e141075f82f0559c8ba70ed54bc6 Mon Sep 17 00:00:00 2001
From: Michael Kaufmann <d00p@froxlor.org>
Date: Sun, 15 May 2022 19:01:44 +0200
Subject: [PATCH] adjust css/js of global-search; added missing id fields for
 searchable entities

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>
---
 lib/Froxlor/Ajax/GlobalSearch.php                 |  2 +-
 .../admin/tablelisting.phpconfigs.php             |  4 ++++
 lib/tablelisting/admin/tablelisting.plans.php     |  4 ++++
 templates/Froxlor/src/js/components/search.js     | 15 ++++++++++-----
 .../Froxlor/src/scss/components/_search.scss      |  2 +-
 templates/Froxlor/userarea.html.twig              |  4 ++--
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/lib/Froxlor/Ajax/GlobalSearch.php b/lib/Froxlor/Ajax/GlobalSearch.php
index 1a79f46d..ef7e4c7e 100644
--- a/lib/Froxlor/Ajax/GlobalSearch.php
+++ b/lib/Froxlor/Ajax/GlobalSearch.php
@@ -187,7 +187,7 @@ class GlobalSearch
 							'result_format' => [
 								'title' => ['self', 'getFieldFromResult'],
 								'title_args' => 'name',
-								'href' => 'admin_plans.php?page=overview&action=edit&id='
+								'href' => 'admin_plans.php?page=overview&searchfield=id&searchtext='
 							]
 						],
 						// PHP configs
diff --git a/lib/tablelisting/admin/tablelisting.phpconfigs.php b/lib/tablelisting/admin/tablelisting.phpconfigs.php
index a83f27e0..715776e8 100644
--- a/lib/tablelisting/admin/tablelisting.phpconfigs.php
+++ b/lib/tablelisting/admin/tablelisting.phpconfigs.php
@@ -34,6 +34,10 @@ return [
 		'icon' => 'fa-brands fa-php',
 		'self_overview' => ['section' => 'phpsettings', 'page' => 'overview'],
 		'columns' => [
+			'c.id' => [
+				'label' => 'ID',
+				'field' => 'id',
+			],
 			'c.description' => [
 				'label' => lng('admin.phpsettings.description'),
 				'field' => 'description',
diff --git a/lib/tablelisting/admin/tablelisting.plans.php b/lib/tablelisting/admin/tablelisting.plans.php
index f898e0be..f579b559 100644
--- a/lib/tablelisting/admin/tablelisting.plans.php
+++ b/lib/tablelisting/admin/tablelisting.plans.php
@@ -31,6 +31,10 @@ return [
 		'title' => lng('admin.plans.plans'),
 		'icon' => 'fa-solid fa-clipboard-list',
 		'columns' => [
+			'p.id' => [
+				'label' => 'ID',
+				'field' => 'id',
+			],
 			'p.name' => [
 				'label' => lng('admin.plans.name'),
 				'field' => 'name',
diff --git a/templates/Froxlor/src/js/components/search.js b/templates/Froxlor/src/js/components/search.js
index 92115aab..18a86029 100644
--- a/templates/Froxlor/src/js/components/search.js
+++ b/templates/Froxlor/src/js/components/search.js
@@ -10,12 +10,14 @@ $(function() {
 		let dropdown = $('#search .search-results');
 		// Hide search if query is empty
 		if (!query.length) {
-			dropdown.hide().html('');
+			dropdown.html('');
+			dropdown.parent().hide();
 			return;
 		}
 		// Show notification for short search query
 		if (query.length && query.length < 3) {
-			dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
+			dropdown.html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
+			dropdown.parent().show();
 			return;
 		}
 		// Search
@@ -29,12 +31,14 @@ $(function() {
 			success: data => {
 				// Show notification if we got no results
 				if (Object.keys(data).length === 0) {
-					dropdown.show().html('<li class="list-group-item text-muted">Nothing found!</li>');
+					dropdown.html('<li class="list-group-item text-muted">Nothing found!</li>');
+					dropdown.parent().show();
 					return;
 				}
 
 				// Clear dropdown and show results
-				dropdown.show().html('');
+				dropdown.html('');
+				dropdown.parent().show();
 				Object.keys(data).forEach(key => {
 					dropdown.append('<li class="list-group-item text-muted text-capitalize">' + key + '</li>');
 					data[key].forEach(item => {
@@ -44,7 +48,8 @@ $(function() {
 			},
 			error: function (a, b) {
 				console.log(a, b);
-				dropdown.show().html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
+				dropdown.html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
+				dropdown.parent().show();
 			}
 		});
 	});
diff --git a/templates/Froxlor/src/scss/components/_search.scss b/templates/Froxlor/src/scss/components/_search.scss
index c3fb1e66..86e5a751 100644
--- a/templates/Froxlor/src/scss/components/_search.scss
+++ b/templates/Froxlor/src/scss/components/_search.scss
@@ -23,7 +23,7 @@
 		border-radius: 0 0 $border-radius $border-radius;
 
 		.search-results {
-			width: 70vh; /** same as .search-results-box **/
+			width: 100%; /** same as .search-results-box **/
 			max-height: calc(50vh - 2px); /** same as .search-results-box - border (top/bottom) **/
 			overflow: auto;
 			border-radius: $border-radius;
diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig
index cda1945c..8edcc03c 100644
--- a/templates/Froxlor/userarea.html.twig
+++ b/templates/Froxlor/userarea.html.twig
@@ -36,8 +36,8 @@
 						<i class="fa fa-search text-muted"></i>
 						<input title="search" type="search" class="search-input" placeholder="Search for ...">
 					</div>
-					<div class="search-results-box">
-						<div class="search-results list-group-flush" style="display: none"></div>
+					<div class="search-results-box" style="display:none;">
+						<div class="search-results list-group-flush"></div>
 					</div>
 				</form>
 				<ul class="navbar-nav ms-auto">