fixes #2231 merging album search into album manager

- Delete old files (cat_search.php and cat_search.tpl) and his tab un add_core_tabs.inc.php
- Add search field and result in albums.tpl
- Separate js code from template
- Reuse data of albums.tpl for jqtree for the search algorithm

admin/cat_search.php

@@ -1,99 +0,0 @@
-<?php
-// +-----------------------------------------------------------------------+
-// | This file is part of Piwigo.                                          |
-// |                                                                       |
-// | For copyright and license information, please view the COPYING.txt    |
-// | file that was distributed with this source code.                      |
-// +-----------------------------------------------------------------------+
-
-if (!defined('PHPWG_ROOT_PATH'))
-{
-  die('Hacking attempt!');
-}
-
-include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');
-
-// +-----------------------------------------------------------------------+
-// | Check Access and exit when user status is not ok                      |
-// +-----------------------------------------------------------------------+
-check_status(ACCESS_ADMINISTRATOR);
-
-
-// +-----------------------------------------------------------------------+
-// | tabs                                                                  |
-// +-----------------------------------------------------------------------+
-
-$page['tab'] = 'search';
-include(PHPWG_ROOT_PATH.'admin/include/albums_tab.inc.php');
-
-// +-----------------------------------------------------------------------+
-// | Get Categories                                                        |
-// +-----------------------------------------------------------------------+
-
-$categories = array();
-
-$query = '
-SELECT id, name, status, uppercats
-  FROM '.CATEGORIES_TABLE;
-
-$result = query2array($query);
-
-foreach ($result as $cat) 
-{
-  $cat['name'] = trigger_change('render_category_name', $cat['name'], 'admin_cat_list');
-
-  $private = ($cat['status'] == 'private')? 1:0;
-
-  $parents = explode(',', $cat['uppercats']);
-  
-  $content = array($cat['name'], $parents, $private);
-  $categories[$cat['id']] = $content;
-}
-
-// +-----------------------------------------------------------------------+
-// |                       template initialization                         |
-// +-----------------------------------------------------------------------+
-
-// let's find a custom placeholder
-$query = '
-SELECT
-    name
-  FROM '.CATEGORIES_TABLE.'
-  ORDER BY RAND()
-  LIMIT 1
-;';
-$lines = query2array($query);
-$placeholder = null;
-foreach ($lines as $line)
-{
-  $name = trigger_change('render_category_name', $line['name']);
-
-  if (mb_strlen($name) > 25)
-  {
-    $name = mb_substr($name, 0, 25).'...';
-  }
-
-  $placeholder = $name;
-  break;
-}
-
-if (empty($placeholder))
-{
-  $placeholder = l10n('Portraits');
-}
-
-$template->set_filename('cat_search', 'cat_search.tpl');
-
-$template->assign(
-  array(
-    'data_cat' => $categories,
-    'ADMIN_PAGE_TITLE' => l10n('Albums'),
-    'placeholder' => $placeholder,
-  )
-);
-
-// +-----------------------------------------------------------------------+
-// |                          sending html code                            |
-// +-----------------------------------------------------------------------+
-$template->assign_var_from_handle('ADMIN_CONTENT', 'cat_search');
-?>

admin/include/add_core_tabs.inc.php

@@ -35,7 +35,6 @@ function add_core_tabs($sheets, $tab_id)
       global $my_base_url;
       $sheets['list'] = array('caption' => '<span class="icon-menu"></span>'.l10n('List'), 'url' => $my_base_url.'albums');
       $sheets['permalinks'] = array('caption' => '<span class="icon-link-1"></span>'.l10n('Permalinks'), 'url' => $my_base_url.'permalinks');
-      $sheets['search'] = array('caption' => '<span class="icon-search"></span>'.l10n('Search'), 'url' => $my_base_url.'cat_search');
       break;
     
     case 'users':

admin/themes/default/js/albums.js

@@ -389,6 +389,7 @@ function createAlbumNode(node, li) {
   }
 
   cont.append($(icon.replace(/%icon%/g, 'icon-grip-vertical-solid')));
+  cont.find('.icon-grip-vertical-solid').attr('title', str_albs_drag_drop);
 
   if (node.haveChildren || node.children.length != 0) {
     cont.append($(icon.replace(/%icon%/g, 'icon-sitemap')));

admin/themes/default/js/cat_search.js

@@ -0,0 +1,118 @@
+const RESULT_LIMIT = 100;
+const editLink = "admin.php?page=album-";
+const colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
+
+$(function() {
+  $(".limit-album-reached").hide();
+  
+  $('#cat_search_input').on('input', () => {
+    updateSearch();
+  });
+})
+
+// Update the page according to the search field
+function updateSearch () {
+  let string = $('.search-input').val();
+  $('.search-album-result').html("");
+  $('.search-album-noresult').hide();
+  $(".limit-album-reached").hide();
+  if (string == '') {
+    // help button unnecessary so do not show
+    // $('.search-album-help').show();
+    $('.search-album-ghost').show();
+    $('.search-album-num-result').hide();
+    hideSearchContainer();
+  } else {
+    $('.search-album-ghost').hide();
+    $('.search-album-help').hide();
+    $('.search-album-num-result').show();
+    showSearchContainer();
+
+    let nbResult = 0;
+
+    nbResult = searchAlbumByName(data, string, nbResult);
+
+    if (nbResult != 1) {
+      if (nbResult >= RESULT_LIMIT) {
+        $('.search-album-num-result').html(str_result_limit.replace('%d', nbResult));
+      } else {
+        $('.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 {
+      $('.search-album-noresult').show();
+    }
+  }
+}
+
+function searchAlbumByName(categories, search, nbResult, children, name='') {
+  for (const c of categories) {
+    if (nbResult >= RESULT_LIMIT) {
+      return nbResult;
+    }
+
+    let currentName = name + `<a href="${editLink + c.id}">${c.name}</a>` + ' / ';
+
+    if (c.name.toString().toLowerCase().includes(search.toLowerCase())) {
+      const haveChild = c.children && c.children.length ? true : false;
+      nbResult++;
+      addAlbumResult(c, nbResult, haveChild, currentName);
+    }
+
+    if (c.children && c.children.length) {
+      nbResult = searchAlbumByName(c.children, search, nbResult, true, currentName);
+    }
+
+  }
+  return nbResult;
+}
+
+// Add an album as a result in the page
+function addAlbumResult (cat, nbResult, haveChildren, name) {
+  const id = +cat.id;
+  const template = $('.search-album-elem-template').html();
+  const newCatNode = $(template);
+
+  if (haveChildren) {
+    newCatNode.find('.search-album-icon').addClass('icon-sitemap');
+  } else {
+    newCatNode.find('.search-album-icon').addClass('icon-folder-open');
+  }
+
+  const colorId = id%5;
+  newCatNode.find('.search-album-icon').addClass(colors[colorId]);
+  newCatNode.find('.search-album-name').html(name.slice(0, -2));
+
+  const href = "admin.php?page=album-" + id;
+  newCatNode.find('.search-album-edit').attr('href', href);
+
+  $('.search-album-result').append(newCatNode);
+
+  if(nbResult >= RESULT_LIMIT) {
+    $(".limit-album-reached").show(1000);
+    $('.limit-album-reached').html(str_result_limit.replace('%d', nbResult));
+  }
+}
+
+// Make the results appear one after one [and limit results to 100]
+function resultAppear(result) {
+  result.fadeIn();
+  if (result.next().length != 0) {
+    setTimeout(() => {resultAppear(result.next().first())}, 50);
+  }
+}
+
+function showSearchContainer() {
+  $('.tree').hide();
+  $('.album-search-result-container').show();
+}
+
+function hideSearchContainer() {
+  $('.album-search-result-container').hide();
+  $('.tree').fadeIn();
+}

admin/themes/default/template/albums.tpl

@@ -19,7 +19,14 @@ var x_nb_subcats = "{'%d sub-albums'|@translate}";
 var x_nb_images = "{'%d photos'|@translate}";
 var x_nb_sub_photos = "{'%d pictures in sub-albums'|@translate}";
 
+var str_albums_found = '{"<b>%d</b> albums found"|translate}';
+var str_album_found = '{"<b>1</b> album found"|translate}';
+var str_result_limit = '{"<b>%d+</b> albums found, try to refine the search"|translate|escape:javascript}';
+const str_albs_drag_drop = '{"Drag and drop to reorder albums"|translate}';
+
 var delay_autoOpen = {$delay_before_autoOpen}
+
+const categoriesforSearch = Object.values(data);
 {/footer_script}
 
 {combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
@@ -54,6 +61,7 @@ const tiptip_locked_album = "{'Locked album'|translate|escape:javascript}";
 
 {combine_script id='jquery.tipTip' load='footer' path='themes/default/js/plugins/jquery.tipTip.minified.js'}
 
+{combine_script id='cat_search' load='footer' path='admin/themes/default/js/cat_search.js'}
 {combine_script id='albums' load='footer' path='admin/themes/default/js/albums.js'}
 
 <div class="cat-move-order-popin">
@@ -129,7 +137,19 @@ const tiptip_locked_album = "{'Locked album'|translate|escape:javascript}";
       <p>{'Automatic sort order'|@translate}</p>
     </label>
   </div>
-  <div class="cat-move-info icon-help-circled"> {'Drag and drop to reorder albums'|@translate}</div>
+  {* <div class="cat-move-info icon-help-circled"> {'Drag and drop to reorder albums'|@translate}</div> *}
+  <div class="cat-move-info search-album">
+    <div class="search-album-cont">
+      {* <div class="search-album-label">{'Search albums'|@translate}</div> *}
+      <span class="search-album-num-result"></span>
+      <div class="search-album-input-container" style="position:relative">
+        <span class="icon-search search-icon"></span>
+        <span class="icon-cancel search-cancel"></span>
+        <input id="cat_search_input" class='search-input' type="text" placeholder="{"Search"|@translate}">
+      </div>
+      <span class="search-album-help icon-help-circled" title="{'Enter a term to search for album'|@translate}"></span>
+    </div>
+  </div>
 </div>
 
 <div id="AddAlbum" class="AddAlbumPopIn">
@@ -246,6 +266,26 @@ const tiptip_locked_album = "{'Locked album'|translate|escape:javascript}";
 
 <div class='tree'> </div>
 
+<div class="album-search-result-container" style="display: none;">
+  <div class="search-album-result"></div>
+  <div class="search-album-elem limit-album-reached" style="display: none;"></div>
+
+  <div class="search-album-noresult">
+    {'No albums found'|translate}
+  </div>
+</div>
+
+<div class="search-album-elem-template" style="display:none">
+  <div class="search-album-elem" style="display:none">
+    <span class='search-album-icon'></span>
+    <p class='search-album-name'></p>
+    <div class="search-album-action-cont">
+      <div class="search-album-action">
+        <a class="icon-pencil search-album-edit">{'Edit album'|translate}</a>
+      </div>
+    </div>
+  </div>
+</div>
 <style>
 
 .animateFocus {

admin/themes/default/template/cat_search.tpl

@@ -1,184 +0,0 @@
-{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
-
-{footer_script}
-$(document).ready(() => {
-  $("h1").append("<span class='badge-number'>"+{$nb_cats}+"</span>");
-});
-var data = {json_encode($data_cat)};
-/* 
-  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);
-
-const RESULT_LIMIT = 100;
-
-var str_albums_found = '{"<b>%d</b> albums found"|translate}';
-var str_album_found = '{"<b>1</b> album found"|translate}';
-var str_result_limit = '{"<b>%d+</b> albums found, try to refine the search"|translate|escape:javascript}';
-
-{literal}
-var editLink = "admin.php?page=album-";
-var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
-
-$(".limit-album-reached").hide();
-
-$('.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();
-  $(".limit-album-reached").hide();
-  if (string == '') {
-    // help button unnecessary so do not show
-    // $('.search-album-help').show();
-    $('.search-album-ghost').show();
-    $('.search-album-num-result').hide();
-  } else {
-    $('.search-album-ghost').hide();
-    $('.search-album-help').hide();
-    $('.search-album-num-result').show();
-
-    nbResult = 0;
-    categories.forEach((c) => {
-      if (c[0].toString().toLowerCase().search(string.toLowerCase()) != -1 && nbResult < RESULT_LIMIT) {
-        nbResult++;
-        addAlbumResult(c, nbResult);
-      }
-    })
-
-    if (nbResult != 1) {
-      if (nbResult >= RESULT_LIMIT) {
-        $('.search-album-num-result').html(str_result_limit.replace('%d', nbResult));
-      } else {
-        $('.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 {
-      $('.search-album-noresult').show();
-    }
-  }
-}
-
-// Add an album as a result in the page
-function addAlbumResult (cat, nbResult) {
-  id = cat[1][cat[1].length - 1];
-  template = $('.search-album-elem-template').html();
-  newCatNode = $(template);
-
-  hasChildren = false;
-  categories.forEach((c) => {
-    for (let i = 0; i < c[1].length - 1; i++) {
-      if (c[1][i] == id) {
-        hasChildren = true;
-      }
-    }
-  })
-
-  if (hasChildren) {
-    newCatNode.find('.search-album-icon').addClass('icon-sitemap');
-  } else {
-    newCatNode.find('.search-album-icon').addClass('icon-folder-open');
-  }
-
-  colorId = id%5;
-  newCatNode.find('.search-album-icon').addClass(colors[colorId]);
-
-  newCatNode.find('.search-album-name').html(getHtmlPath(cat));
-
-  href = "admin.php?page=album-" + id;
-  newCatNode.find('.search-album-edit').attr('href', href);
-
-  $('.search-album-result').append(newCatNode);
-
-  if(nbResult >= RESULT_LIMIT) {
-    $(".limit-album-reached").show(1000);
-    $('.limit-album-reached').html(str_result_limit.replace('%d', nbResult));
-  }
-}
-
-// 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++) {
-    id_bis = cat[1][i];
-    c = data[id_bis];
-    html += '<a href="' + editLink + id_bis + '">' + c[0] + '</a> <b>/</b> '
-  }
-  html += '<a href="' + editLink + cat[1][cat[1].length - 1] + '">' + cat[0] + '</a>';
-
-  return html
-}
-
-// Make the results appear one after one [and limit results to 100]
-function resultAppear(result) {
-  result.fadeIn();
-  if (result.next().length != 0) {
-    setTimeout(() => {resultAppear(result.next().first())}, 50);
-  }
-}
-
-updateSearch();
-$('.search-input').focus();
-{/literal}
-{/footer_script}
-
-<div class="search-album">
-  <div class="search-album-cont">
-    <div class="search-album-label">{'Search albums'|@translate}</div>
-    <div class="search-album-input-container" style="position:relative">
-      <span class="icon-search search-icon"></span>
-      <span class="icon-cancel search-cancel"></span>
-      <input class='search-input' type="text" placeholder="{$placeholder|escape:html}">
-    </div>
-    <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>
-
-<div class="search-album-ghost">
-  <span>{'No research in progress'|@translate}</span>
-</div>
-
-<div class="search-album-elem-template" style="display:none">
-  <div class="search-album-elem" style="display:none">
-    <span class='search-album-icon'></span>
-    <p class='search-album-name'></p>
-    <div class="search-album-action-cont">
-      <div class="search-album-action">
-        <a class="icon-pencil search-album-edit">{'Edit album'|translate}</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="search-album-result">
-
-</div>
-<div class="search-album-elem limit-album-reached"></div>
-
-<div class="search-album-noresult">
-  {'No albums found'|translate}
-</div>
-
-<style>
-.limit-album-reached {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
-

admin/themes/default/theme.css

@@ -6628,8 +6628,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 10px;
-  margin-bottom: 25px
 }
 
 .search-album-cont {
@@ -6645,7 +6643,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 }
 
 .search-album-num-result {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .search-album-input-container {
@@ -6663,7 +6661,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   font-size: 20px;
 }
 
-.search-album-help, .search-album-num-result {
+.search-album-help {
   position: absolute;
   right: 0;
   transform: translateX(calc(100% + 10px));
@@ -6674,6 +6672,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   flex-direction: column;
 }
 
+.search-album-result {
+  margin-top: 30px;
+}
+
 .search-album-elem, .search-album-ghost div {
   height: 64px;
   border-radius: 5px;
@@ -6775,6 +6777,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   display: none;
 }
 
+.limit-album-reached {
+  justify-content: center;
+}
+
 .doubleSelect {
   width: 100%;
 }

install/obsolete.list

@@ -141,4 +141,6 @@ themes/default/vendor/fontello/font/fontello.svg
 themes/default/vendor/fontello/font/fontello.ttf
 themes/default/vendor/fontello/font/fontello.woff
 themes/default/vendor/fontello/font/fontello.woff2
+admin/cat_search.php
+admin/themes/default/template/cat_search.tpl
 obsolete.list