From f920f3e491dfe031d0663742b374d1a7c4ad2810 Mon Sep 17 00:00:00 2001
From: aissaoui_cmu <aissaoui@andrew.cmu.edu.com>
Date: Fri, 11 Nov 2022 10:40:48 +0300
Subject: [PATCH] added filter by year

---
 ihatemoney/templates/list_bills.html | 29 +++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/ihatemoney/templates/list_bills.html b/ihatemoney/templates/list_bills.html
index 0445d99d..52116d5e 100644
--- a/ihatemoney/templates/list_bills.html
+++ b/ihatemoney/templates/list_bills.html
@@ -66,6 +66,29 @@
 {% endblock %}
 
 {% block content %}
+<script>
+    function myFunction() {
+      // Declare variables
+      var input, filter, table, tr, td, i, txtValue;
+      input = document.getElementById("myInput");
+      filter = input.value;
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+    
+      // Loop through all table rows, and hide those who don't match the search query
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[0];
+        if (td) {
+          txtValue = td.textContent || td.innerText;
+          if (txtValue.indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          } else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+    </script>
     <div id="bill-form" class="modal fade show" role="dialog">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
@@ -102,6 +125,7 @@
 </div>
 
     {% if bills.total > 0 %}
+    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Filter by year">
         <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
             <thead>
                 <tr><th>{{ _("When?") }}
@@ -111,7 +135,7 @@
                 </th><th>{{ _("How much?") }}
                 </th><th>{{ _("Actions") }}</th></tr>
             </thead>
-        <tbody>
+        <tbody id="myTable">
         {% for (weights, bill) in bills.items %}
         <tr owers="{{bill.owers|join(',','id')}}" payer="{{bill.payer.id}}">
                 <td>
@@ -170,3 +194,6 @@
         </div></div>
     {% endif %}
 {% endblock %}
+
+
+