dnsmasq: Improve interface/tag selectpicker (#8560)

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

* dnsmasq: Autofill filter selectpicker choices in add dialog
This commit is contained in:
Monviech 2025-04-16 13:12:09 +02:00 committed by GitHub
parent 045dec233a
commit e72077c376
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>