related to #1931 Filetypes widget fully functionnal

index.php

@@ -313,8 +313,8 @@ SELECT
       $my_search['fields']['cat']['words'] = array_intersect($my_search['fields']['cat']['words'], array_keys($fullname_of));
     }
 
-    // if (isset($my_search['fields']['filetype']))
-    // {
+    if (isset($my_search['fields']['filetypes']))
+    {
       $query = '
 SELECT
     SUBSTRING_INDEX(path, ".", -1) AS ext,
@@ -330,10 +330,10 @@ SELECT
     ' WHERE '
     ).'
   GROUP BY ext
-  ORDER BY ext
+  ORDER BY counter DESC
 ;';
       $template->assign('FILETYPES', query2array($query, 'ext', 'counter'));
-    // }
+    }
 
     $template->assign(
       array(

themes/default/js/mcs.js

@@ -183,19 +183,30 @@ $(document).ready(function () {
     }
   });
 
-  // Setup ffile_type filter
-  if (global_params.fields.file_type) {
-    $(".filter-file_type").css("display", "flex");
-    $(".filter-manager-controller.file_type").prop("checked", true);
+  // Setup filetypes filter
+  if (global_params.fields.filetypes) {
+    $(".filter-filetypes").css("display", "flex");
+    $(".filter-manager-controller.filetypes").prop("checked", true);
 
+    filetypes_search_str = "";
+    global_params.fields.filetypes.forEach(ft => {
+      filetypes_search_str += ft + ", ";
+    });
+  
+    if (global_params.fields.filetypes && global_params.fields.filetypes.length > 0) {
+      $(".filter-filetypes").addClass("filter-filled");
+      $(".filter.filter-filetypes .search-words").text(filetypes_search_str.slice(0, -2));
 
-    file_type_search_str = "";
-    if (global_params.fields.file_type && global_params.fields.file_type.length > 0) {
-      $(".filter-file_type").addClass("filter-filled");
-      $(".filter.filter-file_type .search-words").text(file_type_search_str.slice(0, -2));
+      $(".filetypes-option input").each(function () {
+        if (global_params.fields.filetypes.includes($(this).attr('name'))) {
+          $(this).prop('checked', true);
+        }
+      });
     } else {
-      $(".filter.filter-file_type .search-words").text(str_file_type_widget_label);
+      $(".filter.filter-filetypes .search-words").text(str_filetypes_widget_label);
     }
+
+    PS_params.filetypes = global_params.fields.filetypes.length > 0 ? global_params.fields.filetypes : '';
   }
 
 
@@ -251,7 +262,7 @@ $(document).ready(function () {
       }
     });
     // Set second param to true to trigger reload
-    performSearch(PS_params ,true);
+    performSearch(PS_params ,false);
   })
 
   /**
@@ -511,37 +522,41 @@ $(document).ready(function () {
   /**
    * File type Widget
    */
-  $(".filter-file_type").on("click", function (e) {
+  $(".filter-filetypes").on("click", function (e) {
     if ($(".filter-form").has(e.target).length != 0 ||
         $(e.target).hasClass("filter-form") ||
         $(e.target).hasClass("remove") ||
         $(e.target).hasClass("remove-filter")) {
       return;
     }
-    $(".filter-file_type-form").toggle(0, function () {
+    $(".filter-filetypes-form").toggle(0, function () {
       if ($(this).is(':visible')) {
-        $(".filter-file_type").addClass("show-filter-dropdown");
+        $(".filter-filetypes").addClass("show-filter-dropdown");
       } else {
-        // $(".filter-file_type").removeClass("show-filter-dropdown");
-        // global_params.fields.file_type = {};
-        // global_params.fields.file_type.mode = "OR";
-        // global_params.fields.file_type.words = $("#file_type")[0].selectize.getValue();
+        $(".filter-filetypes").removeClass("show-filter-dropdown");
 
-        // PS_params.file_type = $("#file_type")[0].selectize.getValue().length > 0 ? $("#file_type")[0].selectize.getValue() : '';
+        filetypes_array = []
+        $(".filetypes-option input:checked").each(function () {
+          filetypes_array.push($(this).attr('name'));
+        });
+
+        global_params.fields.filetypes = filetypes_array;
+
+        PS_params.filetypes = filetypes_array
       }
     });
   });
-  $(".filter-file_type .filter-validate").on("click", function () {
-    $(".filter-file_type").trigger("click");
+  $(".filter-filetypes .filter-validate").on("click", function () {
+    $(".filter-filetypes").trigger("click");
     performSearch(PS_params, true);
   });
-  $(".filter-file_type .remove-filter").on("click", function () {
+  $(".filter-filetypes .remove-filter").on("click", function () {
     $(this).addClass('pwg-icon-spin6 animate-spin').removeClass('pwg-icon-cancel');
-    updateFilters('file_type', 'del');
-    performSearch(PS_params, $(".filter-file_type").hasClass("filter-filled"));
-    if (!$(".filter-file_type").hasClass("filter-filled")) {
-      $(".filter-file_type").hide();
-      $(".filter-manager-controller.file_type").prop("checked", false);
+    updateFilters('filetypes', 'del');
+    performSearch(PS_params, $(".filter-filetypes").hasClass("filter-filled"));
+    if (!$(".filter-filetypes").hasClass("filter-filled")) {
+      $(".filter-filetypes").hide();
+      $(".filter-manager-controller.filetypes").prop("checked", false);
     }
   });
 

themes/default/template/index.tpl

@@ -22,7 +22,7 @@ str_tags_widget_label = "{'Tag'|@translate}";
 str_album_widget_label = "{'Album'|@translate}";
 str_author_widget_label = "{'Author'|@translate}";
 str_added_by_widget_label = "{'Added by'|@translate}";
-str_file_type_widget_label = "{'File type'|@translate}";
+str_filetypes_widget_label = "{'File type'|@translate}";
 
 {/footer_script}
 
@@ -221,7 +221,7 @@ str_file_type_widget_label = "{'File type'|@translate}";
           <span class="mcs-icon pwg-icon-user">{'Added by'|@translate}</span>
         </label>
         <label>
-          <input data-wid='file_type' class="filter-manager-controller file_type" type="checkbox"/>
+          <input data-wid='filetypes' class="filter-manager-controller filetypes" type="checkbox"/>
           <span class="mcs-icon pwg-icon-file-image">{'File type'|@translate}</span>
         </label>
       </div>
@@ -429,24 +429,24 @@ str_file_type_widget_label = "{'File type'|@translate}";
   </div>
 {/if}
 
-{* {if isset($FILE_TYPE)} *}
-  <div class="filter filter-file_type">
+{if isset($FILETYPES)}
+  <div class="filter filter-filetypes">
     <span class="mcs-icon pwg-icon-file-image filter-icon"></span>
     <span class="mcs-icon pwg-icon-cancel remove-filter"></span>
     </span><span class="search-words"></span>
     <span class="filter-arrow pwg-icon-up-open"></span>
 
-    <div class="filter-form filter-file_type-form">
+    <div class="filter-form filter-filetypes-form">
       <div class="filter-form-title">{'File type'|@translate}</div>
       <div class="form-container">
-        <div class="file_type-option-container">
-        {foreach from=$FILETYPES item=file_type key=k}
-          <div class="file_type-option">
-              <input type="checkbox" id="filetype-{$k}" name="filetype-{$k}">
+        <div class="filetypes-option-container">
+        {foreach from=$FILETYPES item=filetypes key=k}
+          <div class="filetypes-option">
+              <input type="checkbox" id="filetype-{$k}" name="{$k}">
               <label for="filetype-{$k}">
                 <span class="mcs-icon pwg-icon-cog checked-icon"></span>
                 <span class="ext-name">{$k}</span>
-                <span class="ext-badge">{$file_type}</span>
+                <span class="ext-badge">{$filetypes}</span>
               </label>
             </div>
         {/foreach}
@@ -458,7 +458,7 @@ str_file_type_widget_label = "{'File type'|@translate}";
       </div>
     </div>
   </div>
-{* {/if} *}
+{/if}
 
   {* <div class="filter filter-note">
    Note div