From e72077c376c08b51ffe01e42da135d8a29850067 Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Wed, 16 Apr 2025 13:12:09 +0200
Subject: [PATCH] dnsmasq: Improve interface/tag selectpicker (#8560)

* dnsmasq: Add button to quickly clear the tag/interface filter

* dnsmasq: Autofill filter selectpicker choices in add dialog
---
 .../app/views/OPNsense/Dnsmasq/settings.volt  | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Dnsmasq/settings.volt b/src/opnsense/mvc/app/views/OPNsense/Dnsmasq/settings.volt
index c12c60fc8..362450948 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Dnsmasq/settings.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Dnsmasq/settings.volt
@@ -187,6 +187,41 @@
                     all_grids[grid_id].bootgrid('reload');
                 }
             });
+
+            $('#tag_select_icon')
+                .toggleClass('text-success fa-filter-circle-xmark', ($(this).val() || []).length > 0)
+                .toggleClass('fa-filter', !($(this).val() || []).length);
+
+        });
+
+        // Clear tag selectpicker
+        $('#tag_select_clear').on('click', function () {
+            $('#tag_select').selectpicker('val', []);
+            $('#tag_select').selectpicker('refresh');
+            $('#tag_select').trigger('change');
+        });
+
+        // Autofill interface/tag when add dialog is opened
+        $(
+            '#{{ formGridHostOverride["edit_dialog_id"] }}, ' +
+            '#{{ formGridDHCPrange["edit_dialog_id"] }}, ' +
+            '#{{ formGridDHCPoption["edit_dialog_id"] }}, ' +
+            '#{{ formGridDHCPboot["edit_dialog_id"] }}'
+        ).on('opnsense_bootgrid_mapped', function(e, actionType) {
+            if (actionType === 'add') {
+                const selectedTags = $('#tag_select').val();
+
+                if (selectedTags && selectedTags.length > 0) {
+                    $(
+                        '#host\\.set_tag, ' +
+                        '#range\\.interface, #range\\.set_tag, ' +
+                        '#option\\.interface, #option\\.tag, ' +
+                        '#boot\\.tag'
+                    )
+                    .selectpicker('val', selectedTags)
+                    .selectpicker('refresh');
+                }
+            }
         });
 
     });
@@ -196,9 +231,16 @@
     tbody.collapsible > tr > td:first-child {
         padding-left: 30px;
     }
+    #tag_select_clear {
+        border-right: none;
+    }
     #tag_select_container {
         margin-right: 20px;
     }
+    #tag_select_container .bootstrap-select > .dropdown-toggle {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 </style>
 
 <div style="display: none;" id="hosts_tfoot_append">
@@ -215,6 +257,9 @@
 </div>
 
 <div id="tag_select_container" class="btn-group" style="display: none;">
+    <button type="button" id="tag_select_clear" class="btn btn-default" title="{{ lang._('Clear Selection') }}">
+        <i id="tag_select_icon" class="fa fa-fw fa-filter"></i>
+    </button>
     <select id="tag_select" class="selectpicker" multiple data-title="{{ lang._('Tags & Interfaces') }}" data-show-subtext="true" data-live-search="true" data-size="15" data-width="200px" data-container="body">
     </select>
 </div>