enh(frontend): harmonize special folders selection on the advanced search page, allowing to select all folders or each individually

Author: mercihabam

modules/advanced_search/js_modules/route_handlers.js

@@ -62,4 +62,50 @@ function applyAdvancedSearchPageHandlers() {
         }
     }
     Hm_Message_List.check_empty_list();
+
+    $('body').on("click", ".pick_special_folders", function(e) {
+        e.preventDefault();
+
+        const modal = new Hm_Modal({
+            modalId: 'pick_special_folders_modal',
+            title: 'Pick Special Folders',
+            size: 'lg',
+        });
+
+        const serverId = $(this).closest('li').attr("class").split('_')[1];
+        const specialFolders = [];
+        ['archive', 'draft', 'junk', 'sent', 'trash'].forEach(folderType => {
+            const folderName = hm_special_folders()[serverId][folderType];
+            if (folderName) {
+                specialFolders.push(folderName);
+            }
+        });
+
+        modal.setContent(`
+        <div class="d-flex gap-3 flex-wrap">
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="all">
+                <label class="form-check-label" for="all">All Folders</label>
+            </div>
+            ${specialFolders.map(folder => `
+            <div class="form-check form-switch">
+                <input class="form-check-input special_folder_checkbox" type="checkbox" id="${folder}" data-folder-id="${folder}">
+                <label class="form-check-label" for="${folder}">${folder}</label>
+            </div>
+            `).join('')}
+        </div>    
+        `);
+    
+        modal.open();
+
+        $('#all').on('change', function() {
+            const checked = $(this).is(':checked');
+            $('.special_folder_checkbox').prop('checked', checked);
+        });
+
+        $('.special_folder_checkbox').on('change', function() {
+            const allChecked = $('.special_folder_checkbox').length === $('.special_folder_checkbox:checked').length;
+            $('#all').prop('checked', allChecked);
+        });
+    });
 }

modules/advanced_search/site.js

@@ -117,11 +117,8 @@ var adv_select_imap_folder = function(el) {
     folders.find('li').each(function(index) {
         const wrapper = $('<div class="d-flex justify-content-between wrapper"></div>');
         $(this).wrapInner(wrapper);
-        const allSpecialFoldersCheckbox = `
-        <span class="form-check">
-            <label class="form-check-label" for="all_special_folders-${index}">All special folders</label>
-            <input class="form-check-input" type="checkbox" name="all_special_folders" id="all_special_folders-${index}">
-        </span>
+        const pickSpecialFoldersButton = `
+        <a href="#" class="btn btn-light btn-sm pick_special_folders">Pick special folders</a>
         `;
         const allFoldersCheckbox = `
         <span class="form-check">
@@ -130,7 +127,7 @@ var adv_select_imap_folder = function(el) {
         </span>
         `;
         const checkboxesWrapper = $('<div class="d-flex gap-3"></div>');
-        checkboxesWrapper.append(allSpecialFoldersCheckbox);
+        checkboxesWrapper.append(pickSpecialFoldersButton);
         checkboxesWrapper.append(allFoldersCheckbox);
         $(this).find('.wrapper').append(checkboxesWrapper);
     });
@@ -141,8 +138,8 @@ var adv_select_imap_folder = function(el) {
     $('.adv_folder_list').html(folders.html());
 
     $('.adv_folder_link', list_container).on("click", function() { return expand_adv_folder_list($(this).data('target')); });
-    $('a', list_container).not('.adv_folder_link').not('.close_adv_folders').off('click');
-    $('a', list_container).not('.adv_folder_link').not('.close_adv_folders').on("click", function() { adv_folder_select($(this).data('id')); return false; });
+    $('a', list_container).not('.adv_folder_link').not('.close_adv_folders').not('.pick_special_folders').off('click');
+    $('a', list_container).not('.adv_folder_link').not('.close_adv_folders').not('.pick_special_folders').on("click", function() { adv_folder_select($(this).data('id')); return false; });
     $('.close_adv_folders').on("click", function() {
         $('.adv_folder_list').html('');
         $('.adv_folder_list').hide();

modules/core/output_modules.php

@@ -633,6 +633,7 @@ protected function output() {
             'var hm_web_root_path = function() { return "'.WEB_ROOT.'"; };'.
             'var hm_flag_image_src = function() { return "<i class=\"bi bi-star-half\"></i>"; };'.
             'var hm_check_dirty_flag = function() { return '.($this->get('warn_for_unsaved_changes', '') ? '1' : '0').'; };'.
+            'var hm_special_folders = function() { return '.json_encode($settings['special_imap_folders']).'; };'.
             format_data_sources($this->get('data_sources', array()), $this);
 
         if (!$this->get('disable_delete_prompt', DEFAULT_DISABLE_DELETE_PROMPT)) {