Fixes: #14567 - Export current view of IP Addresses (#15659)

* Added javascript and htmx to change the url.

* Added javascript and htmx to change the url

* Addressed PR comments

* Added Netbox.js and netbox.js.map

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Addressed PR comments

* Linter Issues

* Fix assets issue

* Fix assets issue

* Addressed PR comment.
It was added clearLinkParams to clear button.

* Added passive:true to search.ts

---------

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

netbox/project-static/src/search.ts

@@ -7,38 +7,74 @@ import { isTruthy } from './util';
  */
 function quickSearchEventHandler(event: Event): void {
   const quicksearch = event.currentTarget as HTMLInputElement;
-  const clearbtn = document.getElementById("quicksearch_clear") as HTMLAnchorElement;
+  const clearbtn = document.getElementById('quicksearch_clear') as HTMLAnchorElement;
   if (isTruthy(clearbtn)) {
-    if (quicksearch.value === "") {
+    if (quicksearch.value === '') {
-      clearbtn.classList.add("invisible");
+      clearbtn.classList.add('invisible');
     } else {
-      clearbtn.classList.remove("invisible");
+      clearbtn.classList.remove('invisible');
     }
   }
 }
 
+/**
+ * Clear the existing search parameters in the link to export Current View.
+ */
+function clearLinkParams(): void {
+  const link = document.getElementById('export_current_view') as HTMLLinkElement;
+  const 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('export_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 quicksearch = document.getElementById('quicksearch') as HTMLInputElement;
-  const clearbtn = document.getElementById("quicksearch_clear") as HTMLAnchorElement;
+  const clearbtn = document.getElementById('quicksearch_clear') as HTMLAnchorElement;
   if (isTruthy(quicksearch)) {
-    quicksearch.addEventListener("keyup", quickSearchEventHandler, {
+    quicksearch.addEventListener('keyup', quickSearchEventHandler, {
-      passive: true
+      passive: true,
-    })
+    });
-    quicksearch.addEventListener("search", quickSearchEventHandler, {
+    quicksearch.addEventListener('search', quickSearchEventHandler, {
-      passive: true
+      passive: true,
-    })
+    });
+    quicksearch.addEventListener('change', handleQuickSearchParams, {
+      passive: true,
+    });
+
     if (isTruthy(clearbtn)) {
-      clearbtn.addEventListener("click", async () => {
+      clearbtn.addEventListener(
+        'click',
+        async () => {
           const search = new Event('search');
           quicksearch.value = '';
           await new Promise(f => setTimeout(f, 100));
           quicksearch.dispatchEvent(search);
-      }, {
+          clearLinkParams();
-        passive: true
+        },
-      })
+        {
+          passive: true,
+        },
+      );
     }
   }
 }

netbox/utilities/templates/buttons/export.html

@@ -4,7 +4,7 @@
     <i class="mdi mdi-download"></i> {% 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="export_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>