From ad621844b32cad59ca5371e6ae964257d1d0d65c Mon Sep 17 00:00:00 2001
From: Zacharie <guetzac@gmail.com>
Date: Thu, 3 Sep 2020 16:41:11 +0200
Subject: [PATCH] Fixes on search album page

---
 admin/themes/default/template/cat_search.tpl | 35 ++++++++++++++++++--
 admin/themes/default/theme.css               |  6 +++-
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/admin/themes/default/template/cat_search.tpl b/admin/themes/default/template/cat_search.tpl
index c770ea536..7f4018a70 100644
--- a/admin/themes/default/template/cat_search.tpl
+++ b/admin/themes/default/template/cat_search.tpl
@@ -2,7 +2,19 @@
 
 {footer_script}
 var data = {json_encode($data_cat)};
-var categories = Object.values(data)
+/* 
+  Here data is an associative array id => category under this form 
+  [0] : name
+  [1] : array of id, path to find this album (root to album)
+  [2] : 1 = private or 0 = public
+*/
+
+// Numeric array of all categories
+var categories = Object.values(data);
+
+var str_albums_found = '{"<b>%d</b> albums found"}';
+var str_album_found = '{"<b>1</b> album found"}';
+var str_title_page = '{'Album search tool'|@translate}'
 {literal}
 var editLink = "admin.php?page=album-";
 var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
@@ -11,14 +23,21 @@ $('.search-input').on('input', () => {
   updateSearch();
 })
 
+// Update the page according to the search field
 function updateSearch () {
   string = $('.search-input').val();
   $('.search-album-result').html("");
   $('.search-album-noresult').hide();
   if (string == '') {
-    $('.search-album-ghost').fadeIn();
+    $('.search-album-help').show();
+    $('.search-album-ghost').show();
+    $('.search-album-num-result').hide();
+    $('.titrePage h2, h1').html(str_title_page);
   } else {
     $('.search-album-ghost').hide();
+    $('.search-album-help').hide();
+    $('.search-album-num-result').show();
+    $('.titrePage h2, h1').html(str_title_page + ' [' + string + ']');
 
     nbResult = 0;
     categories.forEach((c) => {
@@ -28,6 +47,12 @@ function updateSearch () {
       }
     })
 
+    if (nbResult != 1) {
+      $('.search-album-num-result').html(str_albums_found.replace('%d', nbResult));
+    } else {
+      $('.search-album-num-result').html(str_album_found);
+    }
+
     if (nbResult != 0) {
       resultAppear($('.search-album-result .search-album-elem').first());
     } else {
@@ -36,6 +61,7 @@ function updateSearch () {
   }
 }
 
+// Add an album as a result in the page
 function addAlbumResult (cat) {
   id = cat[1][cat[1].length - 1];
   template = $('.search-album-elem-template').html();
@@ -67,6 +93,7 @@ function addAlbumResult (cat) {
   $('.search-album-result').append(newCatNode);
 }
 
+// Get the path "PARENT / parent / album" with link to the edition of all albums
 function getHtmlPath (cat) {
   html = '';
   for (let i = 0; i < cat[1].length - 1; i++) {
@@ -79,6 +106,7 @@ function getHtmlPath (cat) {
   return html
 }
 
+// Make the results appear one after one
 function resultAppear(result) {
   result.fadeIn();
   if (result.next().length != 0) {
@@ -102,7 +130,8 @@ $('.search-input').focus();
     <span class="icon-cancel search-cancel"></span>
     <input class='search-input' type="text" placeholder="{'Portraits'|@translate}">
   </div>
-  <span class="search-album-help  icon-help-circled" title="{' Enter a term to search for album'|@translate}"></span>
+  <span class="search-album-help icon-help-circled" title="{'Enter a term to search for album'|@translate}"></span>
+  <span class="search-album-num-result"></span>
 </div>
 
 <div class="search-album-ghost">
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 8397a8db4..09c68ba3f 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -4702,10 +4702,14 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .search-album-label {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 16px;
   padding: 10px;
 }
 
+.search-album-num-result {
+  margin-left: 10px;
+}
+
 .search-album-input-container {
   position: relative;
   display: inline;