Merge 5fa9cbc4a9 into d606cf1b3c

netbox/project-static/src/search.ts

@@ -11,34 +11,71 @@ function quickSearchEventHandler(event: Event): void {
   if (isTruthy(inputgroup)) {
     if (quicksearch.value === "") {
       inputgroup.classList.add("hide-last-child");
+      clearLinkParams();
     } else {
       inputgroup.classList.remove("hide-last-child");
     }
   }
 }
 
+/**
+ * Clear the existing search parameters in the link to export Current View.
+ */
+function clearLinkParams(): void {
+  const link = document.getElementById("current_view") as HTMLLinkElement;
+  let linkUpdated = link?.href.split("&")[0];
+  link.setAttribute("href", linkUpdated);
+}
+
+/**
+ * Update the Export View link to add the Quick Search parameters.
+ * @param event
+ */
+
+function handleQuickSearchParams(event: Event): void {
+  const quickSearchParameters = event.currentTarget as HTMLInputElement;
+
+  // Clear the existing search parameters
+  clearLinkParams();
+
+  if (quickSearchParameters != null) {
+    const link = document.getElementById("current_view") as HTMLLinkElement;
+    const search_parameter = `q=${quickSearchParameters.value}`;
+    const linkUpdated = link?.href + "&" + search_parameter;
+    link.setAttribute("href", linkUpdated);
+  }
+
+}
+
 /**
  * Initialize Quicksearch Event listener/handlers.
  */
 export function initQuickSearch(): void {
   const quicksearch = document.getElementById("quicksearch") as HTMLInputElement;
   const clearbtn = document.getElementById("quicksearch_clear") as HTMLButtonElement;
+
   if (isTruthy(quicksearch)) {
     quicksearch.addEventListener("keyup", quickSearchEventHandler, {
-      passive: true
-    })
+      passive: true,
+    });
     quicksearch.addEventListener("search", quickSearchEventHandler, {
-      passive: true
-    })
+      passive: true,
+    });
+    quicksearch.addEventListener("change", handleQuickSearchParams);
+
     if (isTruthy(clearbtn)) {
-      clearbtn.addEventListener("click", async () => {
-        const search = new Event('search');
-        quicksearch.value = '';
-        await new Promise(f => setTimeout(f, 100));
-        quicksearch.dispatchEvent(search);
-      }, {
-        passive: true
-      })
+      clearbtn.addEventListener(
+        "click",
+        async () => {
+          const search = new Event("search");
+          quicksearch.value = "";
+          await new Promise(f => setTimeout(f, 100));
+          quicksearch.dispatchEvent(search);
+        },
+        {
+          passive: true,
+        },
+      );
     }
   }
 }

netbox/templates/inc/table_controls_htmx.html

@@ -4,16 +4,19 @@
 <div class="row mb-3">
   <div class="col-auto table-controls noprint">
     <div class="input-group input-group-sm me-2 quicksearch hide-last-child">
-      <input type="search" results="5" name="q" id="quicksearch" class="form-control" placeholder="Quick search"
-        hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
-      <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i></button>
+      <input type="search" results="5" name="q" class="form-control" placeholder="Quick search" id="quicksearch" 
+        hx-get="{{ request.full_path }}" hx-target="#object_list"
+        hx-trigger="keyup changed delay:500ms, search" />
+      <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i>
+      </button>
     </div>
     {% block extra_table_controls %}{% endblock %}
   </div>
   <div class="col-auto ms-auto table-controls noprint">
     {% if request.user.is_authenticated and table_modal %}
       <div class="table-configure input-group input-group-sm">
-        <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" %}"
+          data-bs-target="#{{ table_modal }}"
           class="btn btn-sm btn-outline-dark">
           <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
         </button>

netbox/utilities/templates/buttons/export.html

@@ -4,7 +4,7 @@
     <i class="mdi mdi-download"></i>&nbsp;{% trans "Export" %}
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
-    <li><a class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export=table">{% trans "Current View" %}</a></li>
+    <li><a id="current_view" class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export=table">{% trans "Current View" %}</a></li>
     <li><a class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export">{% trans "All Data" %} ({{ data_format }})</a></li>
     {% if export_templates %}
       <li>