Removed the blue tag with the filters when saved filters is selected.

netbox/project-static/src/appliedFilter.ts

@@ -0,0 +1,13 @@
+import { isTruthy } from './util';
+export function initAppliedFilter(): void {
+  const appliedFilter = document.getElementById('appliedfilters');
+  if (isTruthy(appliedFilter)) {
+    const divResults = document.getElementById('results');
+    if (isTruthy(divResults)) {
+      const savedFilterSelect = divResults.getElementsByTagName('select')[0];
+      if (savedFilterSelect.selectedOptions.length > 0) {
+        appliedFilter.hidden = true;
+      }
+    }
+  }
+}

netbox/project-static/src/forms/savedFiltersSelect.ts

@@ -20,9 +20,11 @@ function handleSavedFilterChange(event: Event): void {
 }
 
 export function initSavedFilterSelect(): void {
-  const savedFilterSelect = document.getElementById('id_filter_id');
+  const divResults = document.getElementById('results');
-
+  if (isTruthy(divResults)) {
-  if (isTruthy(savedFilterSelect)) {
+    const savedFilterSelect = divResults.getElementsByTagName('select')[0];
-    savedFilterSelect.addEventListener('change', handleSavedFilterChange);
+    if (isTruthy(savedFilterSelect)) {
+      savedFilterSelect.addEventListener('change', handleSavedFilterChange);
+    }
   }
 }

netbox/project-static/src/netbox.ts

@@ -14,6 +14,7 @@ import { initDashboard } from './dashboard';
 import { initRackElevation } from './racks';
 import { initHtmx } from './htmx';
 import { initSavedFilterSelect } from './forms/savedFiltersSelect';
+import { initAppliedFilter } from './appliedFilter';
 
 function initDocument(): void {
   for (const init of [
@@ -33,6 +34,7 @@ function initDocument(): void {
     initRackElevation,
     initHtmx,
     initSavedFilterSelect,
+    initAppliedFilter,
   ]) {
     init();
   }

netbox/templates/inc/table_controls_htmx.html

@@ -1,7 +1,7 @@
 {% load helpers %}
 {% load i18n %}
 
-<div class="row mb-3">
+<div class="row mb-3" id="results">
   <div class="col-auto d-print-none">
     <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">
       <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1"
@@ -14,11 +14,13 @@
     </div>
   </div>
 
-  <div class="col-sm-auto d-print-none">
+  <div class="col-auto d-print-none">
-    <label for="id_filter_id" class="my-1">{{ filter_form.filter_id.label }}</label>
+    <div>
+      <label for="id_filter_id" class="my-1">{{ filter_form.filter_id.label }}</label>
+    </div>
   </div>
 
-  <div class="col-sm-auto d-print-none">
+  <div class="col-auto d-print-none">
     {{ filter_form.filter_id }}
   </div>
 

netbox/utilities/templates/helpers/applied_filters.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if applied_filters %}
-  <div class="mb-3">
+  <div class="mb-3" id="appliedfilters">
     {% for filter in applied_filters %}
       <a href="{{ filter.link_url }}" class="badge rounded-pill text-bg-primary text-decoration-none me-1">
         <i class="mdi mdi-close"></i> {{ filter.link_text }}