Feature 15348 - Quick Access Saved Filters (#15862)

* Added dropdown for Saved Filters.

* Added dropdown for Saved Filters.

* Added dropdown for Saved Filters.

* Fixed linter issues in savedFiltersSelect.ts

* Fixed linter issues in netbox.ts

* Fixed linter issues in netbox.ts

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

* Adjusts in table_controls_htmx.html to vertical height of the Quick Search match to the dropdown.

* Adjusts in table_controls_htmx.html to vertical height of the Quick Search match to the dropdown.

* Adjusts in table_controls_htmx.html to vertical height of the Quick Search match to the dropdown.

* Minor adjusts in savedFiltersSelect.ts

* Addressed PR comment.

* Addressed PR comment.

* Addressed PR comment.

* Omit saved filters from 'applied filters'; clean up form widget

---------

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

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

@@ -0,0 +1,30 @@
+import { isTruthy } from '../util';
+
+/**
+ * Handle saved filter change event.
+ *
+ * @param event "change" event for the saved filter select
+ */
+function handleSavedFilterChange(event: Event): void {
+  const savedFilter = event.currentTarget as HTMLSelectElement;
+  let baseUrl = savedFilter.baseURI.split('?')[0];
+  const preFilter = '?';
+
+  const selectedOptions = Array.from(savedFilter.options)
+    .filter(option => option.selected)
+    .map(option => `filter_id=${option.value}`)
+    .join('&');
+
+  baseUrl += `${preFilter}${selectedOptions}`;
+  document.location.href = baseUrl;
+}
+
+export function initSavedFilterSelect(): void {
+  const divResults = document.getElementById('results');
+  if (isTruthy(divResults)) {
+    const savedFilterSelect = document.getElementById('id_filter_id');
+    if (isTruthy(savedFilterSelect)) {
+      savedFilterSelect.addEventListener('change', handleSavedFilterChange);
+    }
+  }
+}

netbox/project-static/src/netbox.ts

@@ -13,6 +13,7 @@ import { initSideNav } from './sidenav';
 import { initDashboard } from './dashboard';
 import { initRackElevation } from './racks';
 import { initHtmx } from './htmx';
+import { initSavedFilterSelect } from './forms/savedFiltersSelect';
 
 function initDocument(): void {
   for (const init of [
@@ -31,6 +32,7 @@ function initDocument(): void {
     initDashboard,
     initRackElevation,
     initHtmx,
+    initSavedFilterSelect,
   ]) {
     init();
   }

netbox/project-static/styles/netbox.scss

@@ -7,6 +7,7 @@
 // Overrides of external libraries
 @import 'overrides/bootstrap';
 @import 'overrides/tabler';
+@import 'overrides/tomselect';
 
 // Transitional styling to ease migration of templates from NetBox v3.x
 @import 'transitional/badges';

netbox/project-static/styles/overrides/_tomselect.scss

@@ -0,0 +1,8 @@
+.ts-wrapper.multi {
+  .ts-control {
+    padding: 7px 7px 3px 7px;
+    div {
+      margin: 0 4px 4px 0;
+    }
+  }
+}