Added dropdown for Saved Filters.

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 "./savedFiltersSelect";
 
 function initDocument(): void {
   for (const init of [
@@ -31,6 +32,7 @@ function initDocument(): void {
     initDashboard,
     initRackElevation,
     initHtmx,
+    initSavedFilterSelect,
   ]) {
     init();
   }

netbox/project-static/src/savedFiltersSelect.ts

@@ -0,0 +1,32 @@
+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;
+  const savedFilterLength = savedFilter.options.length;
+  let baseUrl = savedFilter.baseURI.split("?")[0];
+  let preFilter = "?";
+
+  if (savedFilterLength === 0) {
+    return;
+  }
+
+  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 savedFilterSelect = document.getElementById("id_filter_id");
+  if (isTruthy(savedFilterSelect)) {
+    savedFilterSelect.addEventListener("change", handleSavedFilterChange);
+  }
+}

netbox/templates/inc/table_controls_htmx.html

@@ -4,22 +4,31 @@
 <div class="row mb-3">
   <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" placeholder="Quick search"
+      <input type="search" results="5" name="q" id="quicksearch" class="form-control px-2 py-1"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
+             placeholder="Quick search"
+             hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search"/>
       <span class="input-group-text py-1">
         <a href="#" id="quicksearch_clear" class="d-none text-secondary"><i class="mdi mdi-close-circle"></i></a>
       </span>
-    {% block extra_table_controls %}{% endblock %}
+      {% block extra_table_controls %}{% endblock %}
     </div>
   </div>
+
+  <div class="col-3 d-print-none">
+    <span id="savedfilter">{{ filter_form.filter_id }}</span>
+  </div>
+
+
   <div class="col-auto ms-auto d-print-none">
     {% if request.user.is_authenticated and table_modal %}
       <div class="table-configure input-group">
-        <button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}" data-bs-target="#{{ table_modal }}"
+        <button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}"
-          class="btn">
+                data-bs-target="#{{ table_modal }}"
+                class="btn">
           <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
         </button>
       </div>
     {% endif %}
   </div>
 </div>
+