From f46c20a4f65a52749587aaa2b6a0d8d28104b31e Mon Sep 17 00:00:00 2001
From: Anish Reddy Ravula <2anishreddy@gmail.com>
Date: Mon, 13 Nov 2023 12:54:18 -0600
Subject: [PATCH] Add the badge filter to search the DOM instead of making
 another request

Making another request is very slow as it involves reloading the whole webpage to get the query filter from the URL
---
 sharing_portal/static/sharing_portal/index.js      | 7 +++++++
 sharing_portal/templates/sharing_portal/index.html | 9 +++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/sharing_portal/static/sharing_portal/index.js b/sharing_portal/static/sharing_portal/index.js
index b6d97e17..0d9c592c 100644
--- a/sharing_portal/static/sharing_portal/index.js
+++ b/sharing_portal/static/sharing_portal/index.js
@@ -36,3 +36,10 @@
     }
   }
 })();
+
+function filter_artifacts(badge_filter) {
+  const filterInput = document.getElementById('cardFilter');
+  filterInput.value = ""; // reset the value in field
+  filterInput.value = badge_filter;
+  filterInput.dispatchEvent(new KeyboardEvent('keyup')); // trigger a keyup to apply filter
+}
diff --git a/sharing_portal/templates/sharing_portal/index.html b/sharing_portal/templates/sharing_portal/index.html
index a4b80058..f131432f 100644
--- a/sharing_portal/templates/sharing_portal/index.html
+++ b/sharing_portal/templates/sharing_portal/index.html
@@ -118,11 +118,12 @@ <h1>Trovi</h1>
       <h4>Badges</h4>
       {% for badge in badges %}
         <div>
-          <a href="{% url 'sharing_portal:index_all' %}?filter=badge:{{ badge.name|urlencode }}">
+          <button onclick="filter_artifacts('badge:{{ badge.name|urlencode }}')"
+          style="border:0.5px; padding-bottom:1 px; background-color: transparent;">
             {% with 'images/'|add:badge.name|add:'-logo-small.png' as logo_static %}
               <img src="{% static logo_static %}" alt="Small {{badge.name}} logo">
             {% endwith %}
-          </a>
+          </button>
           {% if badge.redirect_link %}
             <a target="_blank" href="{{ badge.redirect_link }}">{{badge.description}}</a>
           {% else %}
@@ -131,7 +132,7 @@ <h4>Badges</h4>
         </div>
       {% endfor %}
     </div>
-    
+
     <div class="sidebarNav__separator">
       <h4>Tags</h4>
       {% for tag in tags %}
@@ -140,7 +141,7 @@ <h4>Tags</h4>
       </div>
       {% endfor %}
     </div>
-    
+
   </div>
 </div>
 {% endblock %}