From 6927f5fbb6feb682ea99317acc991a4e83094f39 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Sat, 15 Aug 2020 19:47:29 +0200
Subject: [PATCH] Search buttons by category or description, highlight matched
 words

---
 .../note/transactiontemplate_list.html        | 21 +++++++++++++++----
 apps/note/views.py                            |  7 ++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/apps/note/templates/note/transactiontemplate_list.html b/apps/note/templates/note/transactiontemplate_list.html
index dc1f9d0c..ec95313e 100644
--- a/apps/note/templates/note/transactiontemplate_list.html
+++ b/apps/note/templates/note/transactiontemplate_list.html
@@ -5,7 +5,7 @@
 {% block content %}
 <div class="row justify-content-center mb-4">
     <div class="col-md-10 text-center">
-        <input class="form-control mx-auto w-25" type="text" id="search_field" placeholder="{% trans "Name of the button..." %}">
+        <input class="form-control mx-auto w-25" type="text" id="search_field" placeholder="{% trans "Name of the button..." %}" value="{{ request.GET.search }}">
         <hr>
         <a class="btn btn-primary text-center my-1" href="{% url 'note:template_create' %}" data-turbolinks="false">{% trans "New button" %}</a>
     </div>
@@ -28,12 +28,25 @@
 <script type="text/javascript">
     $(document).ready(function() {
         let searchbar_obj = $("#search_field");
-        var timer_on = false;
-        var timer;
+        let timer_on = false;
+        let timer;
+
+        function refreshMatchedWords() {
+            $("tr").each(function() {
+                let pattern = searchbar_obj.val();
+                if (pattern) {
+                    $(this).find("td:eq(0), td:eq(1), td:eq(3), td:eq(6)").each(function () {
+                        $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+                    });
+                }
+            });
+        }
+
+        refreshMatchedWords();
 
         function reloadTable() {
             let pattern = searchbar_obj.val();
-            $("#buttons_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #buttons_table");
+            $("#buttons_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #buttons_table", refreshMatchedWords);
         }
 
         searchbar_obj.keyup(function() {
diff --git a/apps/note/views.py b/apps/note/views.py
index 4af91420..17efdc3e 100644
--- a/apps/note/views.py
+++ b/apps/note/views.py
@@ -91,7 +91,12 @@ class TransactionTemplateListView(ProtectQuerysetMixin, LoginRequiredMixin, Sing
         qs = super().get_queryset().distinct()
         if "search" in self.request.GET:
             pattern = self.request.GET["search"]
-            qs = qs.filter(Q(name__iregex="^" + pattern) | Q(destination__club__name__iregex="^" + pattern))
+            qs = qs.filter(
+                Q(name__iregex="^" + pattern)
+                | Q(destination__club__name__iregex="^" + pattern)
+                | Q(category__name__iregex="^" + pattern)
+                | Q(description__iregex=pattern)
+            )
 
         qs = qs.order_by('-display', 'category__name', 'destination__club__name', 'name')