From 9b219e0e4272b48b45c0f0520eb1d8824453cff5 Mon Sep 17 00:00:00 2001
From: Julio-Oliveira-Encora <julioh.oliveira@encora.com>
Date: Thu, 18 Apr 2024 20:37:18 -0300
Subject: [PATCH] Addressed PR comments

---
 netbox/project-static/src/search.ts           | 62 ++++++++++++------
 netbox/templates/inc/table_controls_htmx.html | 64 ++++++-------------
 2 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/netbox/project-static/src/search.ts b/netbox/project-static/src/search.ts
index e3bdc18dc..dc0325e24 100644
--- a/netbox/project-static/src/search.ts
+++ b/netbox/project-static/src/search.ts
@@ -1,5 +1,6 @@
 import { isTruthy } from './util';
 
+
 /**
  * Show/hide quicksearch clear button.
  *
@@ -9,36 +10,59 @@ function quickSearchEventHandler(event: Event): void {
   const quicksearch = event.currentTarget as HTMLInputElement;
   const inputgroup = quicksearch.parentElement as HTMLDivElement;
   if (isTruthy(inputgroup)) {
-    if (quicksearch.value === "") {
-      inputgroup.classList.add("hide-last-child");
+    if (quicksearch.value === '') {
+      inputgroup.classList.add('hide-last-child');
     } else {
-      inputgroup.classList.remove("hide-last-child");
+      inputgroup.classList.remove('hide-last-child');
     }
   }
 }
 
+/**
+ * Update the Export View link to add the Quick Search parameters.
+ * @param event
+ */
+
+function handleQuickSearchParams(event: Event): void {
+  console.log('getParams');
+  const quickSearchParameters = event.currentTarget as HTMLInputElement;
+  const link = document.getElementById('current_view') as HTMLLinkElement;
+  if (quickSearchParameters != null) {
+    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;
+  const quicksearch = document.getElementById('quicksearch') as HTMLInputElement;
+  const clearbtn = document.getElementById('quicksearch_clear') as HTMLButtonElement;
+
   if (isTruthy(quicksearch)) {
-    quicksearch.addEventListener("keyup", quickSearchEventHandler, {
-      passive: true
-    })
-    quicksearch.addEventListener("search", quickSearchEventHandler, {
-      passive: true
-    })
+    quicksearch.addEventListener('keyup', quickSearchEventHandler, {
+      passive: true,
+    });
+    quicksearch.addEventListener('search', quickSearchEventHandler, {
+      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,
+        },
+      );
     }
   }
 }
diff --git a/netbox/templates/inc/table_controls_htmx.html b/netbox/templates/inc/table_controls_htmx.html
index 300953f61..eb5a241e9 100644
--- a/netbox/templates/inc/table_controls_htmx.html
+++ b/netbox/templates/inc/table_controls_htmx.html
@@ -2,49 +2,25 @@
 {% load i18n %}
 
 <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" class="form-control" placeholder="Quick search" id="quick_search"
-                   hx-get="{{ request.full_path }}" hx-target="#object_list"
-                   hx-trigger="keyup changed delay:500ms, search" hx-ext="push-url-w-params" onChange="getParams()"/>
-            <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 }}"
-                        class="btn btn-sm btn-outline-dark">
-                    <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
-                </button>
-            </div>
-        {% endif %}
+  <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" class="form-control" placeholder="Quick search" id="quicksearch" 
+        hx-get="{{ request.full_path }}" hx-target="#object_list"
+        hx-trigger="keyup changed delay:500ms, search" hx-ext="push-url-w-params" />
+      <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 }}"
+          class="btn btn-sm btn-outline-dark">
+          <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
+        </button>
+      </div>
+    {% endif %}
+  </div>
 </div>
-
-
-<script>
-    htmx.defineExtension('push-url-w-params', {
-        onEvent: function (name, e) {
-            if (name === "htmx:configRequest") {
-                const params = new URLSearchParams(e.detail.parameters).toString()
-                window.history.replaceState(null, "", window.location.pathname)
-                const url = `${window.location}?${params}`
-                window.history.replaceState(null, "", url)
-            }
-        }
-    })
-
-    function getParams() {
-        const quickSearchParameters = htmx.values(htmx.find("#quick_search"));
-        let link = document.getElementById("current_view")
-        if (quickSearchParameters != null) {
-            const search_parameter = `q=${quickSearchParameters.q}`
-            link = link.href + "&" + search_parameter
-        }
-        document.getElementById("current_view").setAttribute("href", link)
-    }
-</script>