issue #2132 album selector hierarchy added to search page

admin/themes/default/js/album_selector.js

@@ -32,8 +32,7 @@ function linked_albums_search(searchText) {
     }
   }
 
-  console.log('lalalal');
-  console.log(api_method);
+  // console.log(api_method);
 
   $(".linkedAlbumPopInContainer .searching").show();
   $.ajax({
@@ -66,3 +65,70 @@ function linked_albums_search(searchText) {
     }
   })
 }
+
+function prefill_search() {
+  $(".linkedAlbumPopInContainer .searching").show();
+  if (api_method == "pwg.categories.getList") {
+    api_params = {
+      cat_id: 0,
+      recursive: false,
+      fullname: true,
+      limit: limit_params,
+    };
+  } else {
+    api_params = {
+      additional_output: "full_name_with_admin_links",
+    };
+  }
+
+  $.ajax({
+    url: "ws.php?format=json&method=" + api_method,
+    type: "POST",
+    dataType: "json",
+    data: api_params,
+    success: function (data) {
+      // for debug
+      // console.log(data);
+      $(".linkedAlbumPopInContainer .searching").hide();
+      const cats = data.result.categories;
+      const limit = data.result.limit;
+      prefill_results("root", cats, limit);
+    },
+    error: function (e) {
+      $(".linkedAlbumPopInContainer .searching").hide();
+      console.log("error : ", e.message);
+    },
+  });
+}
+
+async function prefill_search_subcats(cat_id) {
+  let method = {};
+  if (api_method == "pwg.categories.getList") {
+    method = {
+      cat_id: cat_id,
+      recursive: false,
+      limit: limit_params,
+    };
+  } else {
+    method = {
+      additional_output: "full_name_with_admin_links",
+    };
+  }
+
+  try {
+    const data = await $.ajax({
+      url: "ws.php?format=json&method=" + api_method,
+      type: "POST",
+      dataType: "json",
+      data: method,
+    });
+
+    // for debug
+    // console.log(data);
+    const cats = data.result.categories.filter((c) => c.id !== +cat_id);
+    const limit = data.result.limit;
+    prefill_results(cat_id, cats, limit);
+  } catch (e) {
+    console.log("error", e.message);
+  }
+}

admin/themes/default/template/include/album_selector.inc.tpl

@@ -2,7 +2,8 @@
 {if !isset($show_root_btn)}{$show_root_btn=false}{/if}
 
 {include file='include/colorbox.inc.tpl' load_mode=$load_mode}
-{combine_script id='albumSelector' load_mode=$load_mode path='admin/themes/default/js/album_selector.js'}
+{combine_script id='albumSelector' load=$load_mode path='admin/themes/default/js/album_selector.js'}
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 {footer_script}
   str_no_search_in_progress = '{'No search in progress'|@translate|escape:javascript}';
   str_albums_found = '{"<b>%d</b> albums found"|translate}';
@@ -14,6 +15,9 @@
     api_method = 'pwg.categories.getAdminList';
   {/if}
   
+  const limit_params = 50;
+  const str_plus_albums_found = "{'Only the first %d albums are displayed, out of %d.'|@translate|escape:javascript}"
+  const str_album_selected = "{'Album already selected'|@translate|escape:javascript}"
 {/footer_script}
 
 <div id="addLinkedAlbum" class="linkedAlbumPopIn">

include/ws_functions/pwg.categories.php

@@ -246,6 +246,12 @@ function ws_categories_getList($params, &$service)
     return new PwgError(WS_ERR_INVALID_PARAM, "Invalid thumbnail_size");
   }
 
+  if (!empty($params['limit']) and $params['recursive'])
+  {
+    return new PwgError(WS_ERR_INVALID_PARAM, 'Cannot use both recursive and limit parameters at the same time');
+  }
+
+  $output = [];
   $where = array('1=1');
   $join_type = 'INNER';
   $join_user = $user['id'];
@@ -290,7 +296,7 @@ function ws_categories_getList($params, &$service)
   }
 
   $query = '
-SELECT
+SELECT SQL_CALC_FOUND_ROWS
     id, name, comment, permalink, status,
     uppercats, global_rank, id_uppercat,
     nb_images, count_images AS total_nb_images,
@@ -302,17 +308,41 @@ SELECT
     ON id=cat_id AND user_id='.$join_user.'
   WHERE '. implode("\n    AND ", $where);
 
-  if (isset($params["search"]) and $params['search'] != "")
+  if (isset($params['search']) and '' != $params['search'])
   {
     $query .= '
-    AND name LIKE \'%'.pwg_db_real_escape_string($params["search"]).'%\'
-  LIMIT '.$conf["linked_album_search_limit"];
+    AND name LIKE \'%'.pwg_db_real_escape_string($params['search']).'%\'';
+    if (!isset($params['limit']))
+    {
+      $query .= ' LIMIT '.$conf["linked_album_search_limit"];
+    }
+  }
+
+  if (isset($params['limit']))
+  {
+    $query .= '
+  ORDER BY rank ASC 
+  LIMIT '.($params['limit'] + ($params['cat_id'] > 0 ? 1 : 0));
   }
 
   $query.= '
 ;';
   $result = pwg_query($query);
 
+  if (isset($params['limit']))
+  {
+    list($result_count) = pwg_db_fetch_row(pwg_query('SELECT FOUND_ROWS()'));
+    if ($params['cat_id'] > 0)
+    {
+      $result_count = $result_count - 1;
+    }
+    $output['limit'] = array(
+      'limited_to' => $params['limit'],
+      'total_cats' => intval($result_count),
+      'remaining_cats' => $result_count > $params['limit'] ? $result_count - $params['limit'] : 0,
+    );
+  }
+
   // management of the album thumbnail -- starts here
   $image_ids = array();
   $categories = array();
@@ -542,13 +572,13 @@ SELECT id, path, representative_ext
     return categories_flatlist_to_tree($cats);
   }
 
-  return array(
-    'categories' => new PwgNamedArray(
-      $cats,
-      'category',
-      ws_std_get_category_xml_attributes()
-      )
-    );
+  $output['categories'] = new PwgNamedArray(
+    $cats,
+    'category',
+    ws_std_get_category_xml_attributes()
+  );
+
+  return $output;
 }
 
 /**

language/en_UK/common.lang.php

@@ -444,4 +444,6 @@ $lang['rating score %s'] = 'rating score %s';
 $lang['year %d'] = 'year %d';
 $lang['last 3 months'] = 'Last 3 months';
 $lang['last 24 hours'] = 'last 24 hours';
+$lang['Album already selected'] = 'Album already selected';
+$lang['Only the first %d albums are displayed, out of %d.'] = 'Only the first %d albums are displayed, out of %d.';
 ?>

language/fr_FR/common.lang.php

@@ -449,4 +449,5 @@ $lang['rating score %s'] = 'score %s';
 $lang['year %d'] = 'année %d';
 $lang['last 3 months'] = '3 derniers mois';
 $lang['last 24 hours'] = '24 dernières heures';
-
+$lang['Only the first %d albums are displayed, out of %d.'] = 'Seuls les %d premiers sont affichés, sur %d.';
+$lang['Album already selected'] = 'Album déjà sélectionné';

themes/default/css/clear-search.css

@@ -271,6 +271,10 @@
   color:#000;
 }
 
+.and-more{
+  color: #777
+}
+
 @media (max-width: 600px) {
   .filter-form {
     width: 101vw;

themes/default/css/dark-search.css

@@ -274,6 +274,10 @@
   color:black;
 }
 
+.and-more{
+  color: #777
+}
+
 @media (max-width: 600px) {
   .filter-form {
     width: 100vw;

themes/default/css/search.css

@@ -724,6 +724,40 @@
   margin-bottom:10px;
 }
 
+.display-subcat {
+  margin-right: 2px;
+}
+
+.display-subcat:hover {
+  cursor: pointer;
+}
+
+.display-subcat::before {
+  transition: 0.5s;
+  transform: rotate(90deg);
+}
+
+.display-subcat.open::before {
+  transform: rotate(180deg);
+}
+
+.prefill-results-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.search-result-subcat-item {
+  display: none;
+}
+
+.search-result-item.already-in {
+  cursor: default;
+}
+.and-more{
+  text-align: center;
+}
 
 @media (max-width: 600px) {
   html, body {

themes/default/js/mcs.js

@@ -2,7 +2,8 @@ $(document).ready(function () {
   related_categories_ids = [];
 
   $(".linkedAlbumPopInContainer .ClosePopIn").addClass(prefix_icon + "cancel");
-  $(".linkedAlbumPopInContainer .searching").hide();
+  $(".linkedAlbumPopInContainer .searching").addClass(prefix_icon + "spin6").hide();
+  $(".AddIconContainer").css('display', 'none');
   $(".filter-validate").on("click", function () {
     $(this).find(".loading").css("display", "block");
     $(this).find(".validate-text").hide();
@@ -543,23 +544,35 @@ $(document).ready(function () {
   });
 
   $(".add-album-button").on("click", function () {
+    $("#linkedAlbumSearch .search-cancel-linked-album").hide();
+    prefill_search();
     linked_albums_open();
     set_up_popin();
   });
 
   $("#linkedAlbumSearch .search-input").on('input', function () {
+    const clear_button = $("#linkedAlbumSearch .search-cancel-linked-album");
     if ($(this).val() != 0) {
-      $("#linkedAlbumSearch .search-cancel-linked-album").show();
+      clear_button.show();
+      clear_button.on('click', function () {
+        $("#linkedAlbumSearch .search-input").val('');
+        $(".limitReached").html(str_no_search_in_progress);
+        $("#searchResult").empty();
+        prefill_search();
+        $(this).hide();
+      });
     } else {
-      $("#linkedAlbumSearch .search-cancel-linked-album").hide();
+      clear_button.hide();
     }
 
     // Search input value length required to start searching
     if ($(this).val().length > 0) {
+      $("#searchResult").empty();
       linked_albums_search($(this).val());
     } else {
       $(".limitReached").html(str_no_search_in_progress);
       $("#searchResult").empty();
+      prefill_search();
     }
   })
 
@@ -753,6 +766,91 @@ function fill_results(cats) {
   });
 }
 
+function prefill_results(rank, cats, limit) {
+  // get where appends data
+  let display_div = '';
+  if ('root' == rank){
+    $("#searchResult").empty();
+    display_div = '#searchResult';
+  } else {
+    display_div = '#subcat-'+rank;
+  }
+
+  cats.forEach(cat => {
+      let subcat = '';
+      if (cat.nb_categories > 0) {
+        subcat = "<span id=" + cat.id + " class='display-subcat gallery-icon-up-open'></span>"
+      }
+      
+      if (!related_categories_ids.includes(cat.id)) {
+        $(display_div).append(
+        "<div class='search-result-item' id="+ cat.id + ">" +
+          subcat +
+          "<div class='prefill-results-item available' id=" + cat.id + ">" +
+            "<span class='search-result-path'>" + cat.name +"</span>" + 
+            "<span id="+ cat.id + " class='gallery-icon-plus-circled item-add'></span>" +
+          "</div>" +
+        "</div>"
+        );
+      } else {
+        $(display_div).append(
+          "<div class='search-result-item already-in' id="+ cat.id + ">" +
+            subcat +
+            "<div class='prefill-results-item' id=" + cat.id + ">" +
+              "<span class='search-result-path'>" + cat.name +"</span>" + 
+              "<span id="+ cat.id + " class='gallery-icon-plus-circled item-add notClickable' title='" + str_album_selected + "'></span>" +
+            "</div>" +
+          "</div>"
+          );  
+      }
+
+      if (rank !== 'root') {
+        const item = $("#"+rank+".search-result-item");
+        const margin_left = parseInt(item.css('margin-left')) + 25;
+        $("#"+cat.id+".search-result-item").css('margin-left', margin_left);
+      }
+
+      $("#"+cat.id+".prefill-results-item.available").on("click", function () {
+        add_related_category(cat.id, cat.name);
+      });
+
+      $("#"+cat.id+".display-subcat").on('click', function () {
+        const cat_id = $(this).prop('id');
+
+        if($(this).hasClass('open')){
+          // CLOSING SUBCAT
+          $(this).removeClass('open');
+          $("#subcat-"+cat.id).fadeOut();
+
+        } else {
+          // OPENING SUBCAT
+          // if subcat div exist
+          if ($("#subcat-"+cat.id).length){
+            $(this).addClass('open');
+            $("#subcat-"+cat.id).fadeIn();
+          } else { // if subcat div doesn't exist
+            $("#"+cat_id+".display-subcat").removeClass('gallery-icon-up-open').addClass('gallery-icon-spin6 animate-spin');
+            $("#"+cat_id+".search-result-item").after(`<div id="subcat-${cat_id}" class="search-result-subcat-item"></div>`);
+            prefill_search_subcats(cat_id).then(() => {
+              $("#"+cat_id+".display-subcat").removeClass('gallery-icon-spin6 animate-spin').addClass('gallery-icon-up-open');
+              $(this).addClass('open');
+              $("#subcat-"+cat.id).fadeIn();
+            });
+          }
+        }
+
+      });
+  });
+  // for debug
+  // console.log(limit);
+  if (limit.remaining_cats > 0) {
+    const text = sprintf(str_plus_albums_found, limit.limited_to, limit.total_cats);
+    $(display_div).append(
+      "<p class='and-more'>" + text + "</p>"
+    );
+  }
+}
+
 function add_related_category(cat_id, cat_link_path) {
     $(".selected-categories-container").append(
       "<div class='breadcrumb-item'>" +

ws.php

@@ -158,6 +158,10 @@ function ws_addDefaultMethods( $arr )
           'info' => implode(',', array_keys(ImageStdParams::get_defined_type_map()))
           ),
         'search' => array('default' => null),
+        'limit' => array(
+          'default' => null,
+          'type'=>WS_TYPE_INT|WS_TYPE_POSITIVE,
+          'info' => 'Parameter not compatible with recursive=true'),
         ),
       'Returns a list of categories.',
       $ws_functions_root . 'pwg.categories.php'