From 682de10ddb8f4704d1fe08eac646e1b01d94b89a Mon Sep 17 00:00:00 2001
From: plegall <plg@piwigo.org>
Date: Mon, 18 Sep 2023 19:12:27 +0200
Subject: [PATCH] fixes #1983 switch added_by filter from selectize to
 filetypes-style

---
 themes/default/js/mcs.js                      | 61 +++++++++++--------
 .../template/include/search_filters.inc.tpl   | 28 ++++++---
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/themes/default/js/mcs.js b/themes/default/js/mcs.js
index 73f0f9469..acd5ca913 100644
--- a/themes/default/js/mcs.js
+++ b/themes/default/js/mcs.js
@@ -214,36 +214,39 @@ $(document).ready(function () {
   });
 
   // Setup added_by filter
-  $("#added_by").each(function() {
-    $(this).selectize({
-      plugins: ['remove_button'],
-      maxOptions:$(this).find("option").length,
-      items: global_params.fields.added_by ? global_params.fields.added_by : null,
-    });
-    if (global_params.fields.added_by) {
-      $(".filter-added_by").css("display", "flex");
-      $(".filter-manager-controller.added_by").prop("checked", true);
+  if (global_params.fields.added_by) {
+    $(".filter-added_by").css("display", "flex");
+    $(".filter-manager-controller.added_by").prop("checked", true);
 
-      added_search_str = "";
-      $("#added_by")[0].selectize.getValue().forEach(id => {
-        added_search_str += $("#added_by")[0].selectize.getItem(id).text().replace(/\(\d+ \w+\)×/, '').trim() + ", ";
-      });
-      if (global_params.fields.added_by && global_params.fields.added_by.length > 0) {
-        $(".filter-added_by").addClass("filter-filled");
-        $(".filter.filter-added_by .search-words").text(added_search_str.slice(0, -2));
-      } else {
-        $(".filter.filter-added_by .search-words").text(str_added_by_widget_label);
-      }
+    if (global_params.fields.added_by && global_params.fields.added_by.length > 0) {
+      $(".filter-added_by").addClass("filter-filled");
 
-      $(".filter-added_by .filter-actions .clear").on('click', function () {
-        $("#added_by")[0].selectize.clear();
+      added_by_names = [];
+
+      $(".added_by-option").each(function () {
+        input = $(this).find('input');
+        added_by_id = parseInt(input.attr('name'));
+
+        if (jQuery.inArray(added_by_id, global_params.fields.added_by) >= 0) {
+          input.prop('checked', true);
+          added_by_names.push($(this).find('.added_by-name').text());
+        }
       });
 
-      PS_params.added_by = global_params.fields.added_by.length > 0 ? global_params.fields.added_by : '';
+      $(".filter.filter-added_by .search-words").text(added_by_names.join(', '));
 
-      empty_filters_list.push(PS_params.added_by);
+    } else {
+      $(".filter.filter-added_by .search-words").text(str_added_by_widget_label);
     }
-  });
+
+    $(".filter-added_by .filter-actions .clear").on('click', function () {
+      $(".filter-added_by .added_by-option input").prop("checked", false);
+    });
+
+    PS_params.added_by = global_params.fields.added_by.length > 0 ? global_params.fields.added_by : '';
+
+    empty_filters_list.push(PS_params.added_by);
+  }
 
   // Setup filetypes filter
   if (global_params.fields.filetypes) {
@@ -624,9 +627,15 @@ $(document).ready(function () {
         $(".filter-added_by").removeClass("show-filter-dropdown");
         global_params.fields.added_by = {};
         global_params.fields.added_by.mode = "OR";
-        global_params.fields.added_by.words = $("#added_by")[0].selectize.getValue();
 
-        PS_params.added_by = $("#added_by")[0].selectize.getValue().length > 0 ? $("#added_by")[0].selectize.getValue() : '';
+        added_by_array = []
+        $(".added_by-option input:checked").each(function () {
+          added_by_array.push($(this).attr('name'));
+        });
+
+        global_params.fields.added_by.words = added_by_array;
+
+        PS_params.added_by = added_by_array.length > 0 ? added_by_array : '';
       }
     });
   });
diff --git a/themes/default/template/include/search_filters.inc.tpl b/themes/default/template/include/search_filters.inc.tpl
index 9871692d7..632ad1ea6 100644
--- a/themes/default/template/include/search_filters.inc.tpl
+++ b/themes/default/template/include/search_filters.inc.tpl
@@ -264,22 +264,30 @@ str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can
     <span class="filter-arrow pwg-icon-up-open"></span>
 
     <div class="filter-form filter-added_by-form">
-      <div class="filter-form-title">{'Added by'|@translate}</div>
+      <div class="filter-form-title">{'Added by'|translate}</div>
       <div class="filter-actions"> 
-        <span class="delete mcs-icon pwg-icon-trash">{'Delete'|@translate}</span>
-        <span class="clear mcs-icon pwg-icon-broom">{'Clear'|@translate}</span>
+        <span class="delete mcs-icon pwg-icon-trash tiptip" title="{'Delete'|@translate}"></span>
+        <span class="clear mcs-icon pwg-icon-broom tiptip" title="{'Clear'|@translate}"></span>
       </div>
+
       <div class="form-container">
-        <select id="added_by" placeholder="{'Type in a search term'|translate}" name="added_by[]" multiple>
-        {foreach from=$ADDED_BY item=added_by}
-          <option value="{$added_by.added_by_id|strip_tags:false|escape:html}">{$added_by.added_by_name|strip_tags:false}<span class="badge">({$added_by.counter|translate_dec:'%d photo':'%d photos'})</span></option>
+        <div class="added_by-option-container">
+        {foreach from=$ADDED_BY item=added_by key=k}
+          <div class="added_by-option">
+              <input type="checkbox" id="added_by-{$added_by.added_by_id}" name="{$added_by.added_by_id}">
+              <label for="added_by-{$added_by.added_by_id}">
+                <span class="mcs-icon pwg-icon-checkmark checked-icon"></span>
+                <span class="added_by-name">{$added_by.added_by_name|strip_tags:false}</span>
+                <span class="added_by-badge">{$added_by.counter}</span>
+              </label>
+            </div>
         {/foreach}
-        </select>
-        <div class="filter-validate">
-          <i class="loading pwg-icon-spin6 animate-spin"></i>
-          <span class="validate-text">{'Validate'|@translate}</span>
         </div>
       </div>
+      <div class="filter-validate">
+        <i class="loading pwg-icon-spin6 animate-spin"></i>
+        <span class="validate-text">{'Validate'|@translate}</span>
+      </div>
     </div>
   </div>
   {/if}