feat: add sieve filter action drag and drop

Author: camilevahviraki

modules/imap/setup.php

@@ -16,8 +16,6 @@
 /* add stuff to the info page */
 add_output('info', 'display_imap_status', true, 'imap', 'server_status_start', 'after');
 add_output('info', 'display_imap_capability', true, 'imap', 'server_capabilities_start', 'after');
-add_output('info', 'server_capabilities_end', true, 'developer', 'server_capabilities_start', 'after');
-add_output('info', 'config_map', true, 'developer', 'server_capabilities_end', 'after');
 add_output('info', 'imap_server_ids', true, 'imap', 'page_js', 'before');
 
 /* servers page data */

modules/sievefilters/site.css

@@ -1,3 +1,9 @@
+.sortable-ghost {
+    background-color: var(--bs-secondary-bg-subtle);
+    border: 2px dashed var(--bs-secondary);
+    opacity: 0.6;
+}
+
 .tingle-modal * {
     box-sizing: border-box
 }

modules/sievefilters/site.js

@@ -10,66 +10,66 @@ var hm_sieve_condition_fields = function() {
                 description: 'Subject',
                 type: 'string',
                 selected: true,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'body',
-                description: 'Body',
+                description: 'Message body',
                 type: 'string',
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'size',
                 description: 'Size (KB)',
                 type: 'int',
-                options: ['Over', 'Under']
-            }
+                options: ['Over', 'Under'],
+            },
         ],
-        'Header': [
+        Header: [
             {
                 name: 'to',
-                description: 'To',
+                description: 'Recipient (To)',
                 type: 'string',
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'from',
-                description: 'From',
+                description: 'Sender (From)',
                 type: 'string',
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'cc',
-                description: 'CC',
+                description: 'Copied recipient (CC)',
                 type: 'string',
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'to_or_cc',
-                description: 'To or CC',
+                description: 'Recipient (To or CC)',
                 type: 'string',
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'bcc',
-                description: 'BCC',
+                description: 'Blind copied recipient (BCC)',
                 type: 'string',
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ['Contains', 'Matches', 'Regex'],
             },
             {
                 name: 'custom',
                 description: 'Custom',
                 type: 'string',
                 extra_option: true,
                 extra_option_description: 'Field Name',
-                options: ['Contains', 'Matches', 'Regex']
-            }
-        ]
+                options: ['Contains', 'Matches', 'Regex'],
+            },
+        ],
     };
 };
 
@@ -700,6 +700,19 @@ function sieveFiltersPageHandler() {
         add_filter_match_mode();
     });
 
+    /**
+     * Actions Drag and Drop
+     */
+    const actionsTbody = document.querySelector(".filter_actions_modal_table");
+
+    if (actionsTbody) {
+        new Sortable(actionsTbody, {
+            handle: ".drag-handle",
+            animation: 150,
+            ghostClass: "sortable-ghost",
+        });
+    }
+
     function add_filter_action(default_value = '') {
         let possible_actions_html = '';
 
@@ -711,21 +724,25 @@ function sieveFiltersPageHandler() {
             possible_actions_html += '<option value="'+value.name+'">' + value.description + '</option>';
         });
         let extra_options = '<td class="col-sm-3"><input type="hidden" class="condition_extra_action_value form-control form-control-sm" name="sieve_selected_extra_action_value[]" /></td>';
-        $('.filter_actions_modal_table').append(
-            '<tr class="border" default_value="'+default_value+'">' +
-            '   <td class="col-sm-3">' +
-            '       <select class="sieve_actions_select form-control form-control-sm" name="sieve_selected_actions[]">' +
-            '          ' + possible_actions_html +
-            '       </select>' +
-            '    </td>' +
-            extra_options +
-            '    <td class="col-sm-5">' +
-            '    <input type="hidden" name="sieve_selected_action_value[]" value="">' +
-            '    </input>' +
-            '    <td class="col-sm-1 text-end align-middle">' +
-            '           <a href="#" class="delete_action_modal_button btn btn-sm btn-secondary">Delete</a>' +
-            '    </td>' +
-            '</tr>'
+        $(".filter_actions_modal_table").append(
+            '<tr class="border draggable_action_row" default_value="' +
+                default_value +
+                '">' +
+                '   <td class="col-sm-1 drag-handle" style="cursor: grab;">&#9776;</td>' +
+                '   <td class="col-sm-3">' +
+                '       <select class="sieve_actions_select form-control form-control-sm" name="sieve_selected_actions[]">' +
+                "          " +
+                possible_actions_html +
+                "       </select>" +
+                "    </td>" +
+                extra_options +
+                '    <td class="col-sm-5">' +
+                '    <input type="hidden" name="sieve_selected_action_value[]" value="">' +
+                "    </input>" +
+                '    <td class="col-sm-1 text-end align-middle">' +
+                '           <a href="#" class="delete_action_modal_button btn btn-sm btn-secondary">Delete</a>' +
+                "    </td>" +
+            "</tr>"
         );
     }