From 33139bdbde84cca159a06d09aabf3e41f3425d59 Mon Sep 17 00:00:00 2001
From: Pierre-antoine Comby <comby@crans.org>
Date: Tue, 24 Mar 2020 00:07:25 +0100
Subject: [PATCH] Dynamic search of buttons

---
 apps/note/tables.py                          |  3 +-
 templates/note/transactiontemplate_list.html | 44 +++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/apps/note/tables.py b/apps/note/tables.py
index a2044a21..2986c748 100644
--- a/apps/note/tables.py
+++ b/apps/note/tables.py
@@ -80,10 +80,11 @@ class ButtonTable(tables.Table):
     class Meta:
         attrs = {
             'class':
-                'table table condensed table-striped table-hover'
+                'table table-bordered condensed table-striped table-hover'
         }
         row_attrs = {
             'class': 'table-row',
+            'id': lambda record: "row-"+str(record.pk),
             'data-href': lambda record: record.pk
         }
 
diff --git a/templates/note/transactiontemplate_list.html b/templates/note/transactiontemplate_list.html
index d1934988..00903e25 100644
--- a/templates/note/transactiontemplate_list.html
+++ b/templates/note/transactiontemplate_list.html
@@ -8,12 +8,7 @@
         <h4>
             {% trans "search button" %}
         </h4>
-        <form action="" method="GET">
-            {% csrf_token %}
-            <input class="form-control mx-auto w-25" type="text" id="name" name="name"  value='{{ request.GET.name }}'/>
-        </form>
-        <ul class="list-group list-group-flush" id="alias_matched">
-        </ul>
+        <input class="form-control mx-auto w-25" type="text" onkeyup="search_field_moved();return(false);" id="search_field"/>
         <hr>
         <a class="btn btn-primary text-center my-4" href="{% url 'note:template_create' %}">Créer un bouton</a>
     </div>
@@ -24,3 +19,40 @@
 </div>
 </div>
 {% endblock %}
+
+{% block extrajavascript %}
+<script>
+/* fonction appelée à la fin du timer */
+function getInfo() {
+    var asked = $("#search_field").val();
+    /* on ne fait la requête que si on a au moins un caractère pour chercher */
+    var sel = $(".table-row");
+    if (asked.length >= 1) {
+        $.getJSON("/api/note/transaction/template/?format=json&search="+asked, function(buttons){
+            let selected_id = buttons.results.map((a => "#row-"+a.id));
+            console.log(selected_id.join());
+            $(".table-row,"+selected_id.join()).show();
+            $(".table-row").not(selected_id.join()).hide();
+            
+        });
+    }else{
+        // show everything
+        $('table tr').show();
+    }       
+}
+
+var timer;
+var timer_on;
+/* Fontion appelée quand le texte change (délenche le timer) */
+function search_field_moved(secondfield) {
+    if (timer_on) { // Si le timer a déjà été lancé, on réinitialise le compteur.
+        clearTimeout(timer);
+        timer = setTimeout("getInfo(" + secondfield + ")", 300);
+    }
+    else { // Sinon, on le lance et on enregistre le fait qu'il tourne.
+        timer = setTimeout("getInfo(" + secondfield + ")", 300);
+        timer_on = true;
+    }
+}
+</script>
+{% endblock %}