feat: add sieve filter action drag and drop

Author: camilevahviraki

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

@@ -4,72 +4,72 @@
  */
 var hm_sieve_condition_fields = function() {
     return {
-        'Message': [
+        Message: [
             {
-                name: 'subject',
-                description: 'Subject',
-                type: 'string',
+                name: "subject",
+                description: "Subject",
+                type: "string",
                 selected: true,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ["Contains", "Matches", "Regex"],
             },
             {
-                name: 'body',
-                description: 'Body',
-                type: 'string',
-                options: ['Contains', 'Matches', 'Regex']
+                name: "body",
+                description: "Message body",
+                type: "string",
+                options: ["Contains", "Matches", "Regex"],
             },
             {
-                name: 'size',
-                description: 'Size (KB)',
-                type: 'int',
-                options: ['Over', 'Under']
-            }
+                name: "size",
+                description: "Size (KB)",
+                type: "int",
+                options: ["Over", "Under"],
+            },
         ],
-        'Header': [
+        Header: [
             {
-                name: 'to',
-                description: 'To',
-                type: 'string',
+                name: "to",
+                description: "Recipient (To)",
+                type: "string",
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ["Contains", "Matches", "Regex"],
             },
             {
-                name: 'from',
-                description: 'From',
-                type: 'string',
+                name: "from",
+                description: "Sender (From)",
+                type: "string",
                 extra_option: false,
-                options: ['Contains', 'Matches', 'Regex']
+                options: ["Contains", "Matches", "Regex"],
             },
             {
-                name: 'cc',
-                description: 'CC',
-                type: 'string',
+                name: "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',
-                type: 'string',
+                name: "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',
-                type: 'string',
+                name: "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',
+                name: "custom",
+                description: "Custom",
+                type: "string",
                 extra_option: true,
-                extra_option_description: 'Field Name',
-                options: ['Contains', 'Matches', 'Regex']
-            }
-        ]
+                extra_option_description: "Field Name",
+                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>"
         );
     }