From 83b3eef3bdea2c2a4b4ef229a9b7ee7dfa0202cc Mon Sep 17 00:00:00 2001
From: Cara Salter <cara@devcara.com>
Date: Sat, 4 May 2024 09:38:26 +1000
Subject: [PATCH] Allow basic searching of users and events

Issue: #12
Signed-Off-By: Cara Salter <cara@devcara.com>
---
 acmsite/static/js/tableutils.js     | 12 ++++++++++++
 acmsite/templates/admin/events.html |  8 +++++++-
 acmsite/templates/admin/users.html  |  9 ++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 acmsite/static/js/tableutils.js

diff --git a/acmsite/static/js/tableutils.js b/acmsite/static/js/tableutils.js
new file mode 100644
index 0000000..ee9688f
--- /dev/null
+++ b/acmsite/static/js/tableutils.js
@@ -0,0 +1,12 @@
+var $rows = $('#searchable tr');
+$('#search').keyup(function() {
+
+    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
+        reg = RegExp(val, 'i'),
+        text;
+
+    $rows.show().filter(function() {
+        text = $(this).text().replace(/\s+/g, ' ');
+        return !reg.test(text);
+    }).hide();
+});
diff --git a/acmsite/templates/admin/events.html b/acmsite/templates/admin/events.html
index 92fbb8c..3297a68 100644
--- a/acmsite/templates/admin/events.html
+++ b/acmsite/templates/admin/events.html
@@ -4,6 +4,11 @@
 {% block app_content %}
 <h1>Event list</h1> 
 
+<div class="mt-2">
+<label for="search">Search</label>
+<input type="text" id="search" class="form-control w-25"/>
+</div>
+
 <table class="table table-striped">
    <thead>
         <tr>
@@ -15,7 +20,7 @@
                     data-bs-target="#editModal" data-id="0">New</button></th>
         </tr>
    </thead> 
-    <tbody>
+    <tbody id="searchable">
         {% for e in e_list %}
             <tr>
                 <td>{{ e.name }}</td>
@@ -126,6 +131,7 @@
     </div>
 </div>
 <script src="{{ url_for('static', filename='js/jquery-3.6.3.min.js') }}" charset="utf-8"></script>
+<script src="{{ url_for('static', filename='js/tableutils.js') }}"></script>
 <script charset="utf-8">
     const deleteButton = document.getElementById("delete")
     const editButton = document.getElementById("edit-save")
diff --git a/acmsite/templates/admin/users.html b/acmsite/templates/admin/users.html
index cea21f8..25a836f 100644
--- a/acmsite/templates/admin/users.html
+++ b/acmsite/templates/admin/users.html
@@ -2,7 +2,13 @@
 
 {% block app_content %}
 <h1>Member List</h1> 
+<div>
 <a href="{{ url_for('admin.users_csv') }}" target="_blank">CSV for ACM</a>
+</div>
+<div class="mt-2">
+<label for="search">Search</label>
+<input type="text" id="search" class="form-control w-25"/>
+</div>
 <table class="table table-striped">
     <thead>
         <tr>
@@ -14,7 +20,7 @@
             <th>Options</th>
         </tr>
     </thead>
-    <tbody>
+    <tbody id="searchable">
         {% for u in u_list %}
             <tr>
                 <td>{{ u.email }}</td>
@@ -51,6 +57,7 @@
     </tbody>    
 </table>
 <script src="{{ url_for('static', filename='js/jquery-3.6.3.min.js') }}" charset="utf-8"></script>
+<script src="{{ url_for('static', filename='js/tableutils.js') }}"></script>
 <script charset="utf-8">
     $(document).ready(() => {
         $('a.toggle-admin').click((e) => {