From 9b9eec325ba33cf94f50ccf72d880f9eac60dba0 Mon Sep 17 00:00:00 2001
From: Raffaele Giancotti <rafgiancotti@gmail.com>
Date: Thu, 3 Oct 2024 13:51:29 -0400
Subject: [PATCH] At /console/published-projects/ a search tool has been added
 to the page. Closes #2307

---
 .../templates/console/published_projects.html | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/physionet-django/console/templates/console/published_projects.html b/physionet-django/console/templates/console/published_projects.html
index 3db98d14a7..1de0ff754a 100644
--- a/physionet-django/console/templates/console/published_projects.html
+++ b/physionet-django/console/templates/console/published_projects.html
@@ -9,12 +9,23 @@
 {% endblock %}
 
 {% block content %}
+<script src="{% static 'console/js/generic-filter.js' %}"></script>
 <div class="card mb-3">
   <div class="card-header">
     Published Projects <span class="badge badge-pill badge-info">{{ projects.paginator.count }}</span>
   </div>
   <div class="card-body">
-    <div class="table-responsive">
+    <div class="row">
+      <div class="col-sm-8">
+        <label class="font-weight-bold" for="searchbox">Search for project:</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-8">
+        <input id="searchbox" type="search" oninput="search();"  placeholder="Search...">
+      </div>
+    </div>
+    <div class="table-responsive" id="searchitems">
       <table class="table table-bordered">
         <thead>
           <tr>
@@ -48,3 +59,23 @@
   </div>
 </div>
 {% endblock %}
+
+{% block local_js_bottom %}
+  <script>
+    function search() {
+      const query = document.getElementById('searchbox').value.toLowerCase();
+      const rows = document.querySelectorAll('#searchitems tbody tr');
+
+      rows.forEach(row => {
+        const projectTitle = row.querySelector('td a').textContent.toLowerCase();
+        if (projectTitle.includes(query)) {
+          row.style.display = '';
+        } else {
+          row.style.display = 'none';
+        }
+      });
+    }
+
+    document.getElementById('searchbox').addEventListener('input', search);
+  </script>
+{% endblock %}