From aa98c4848d739dd03a95fb1cd0e6bf6faf080acf Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Fri, 21 Aug 2020 23:11:25 +0200
Subject: [PATCH 1/3] Create base template for search page

---
 apps/member/templates/member/user_list.html | 67 ++------------------
 note_kfet/templates/base_search.html        | 69 +++++++++++++++++++++
 2 files changed, 73 insertions(+), 63 deletions(-)
 create mode 100644 note_kfet/templates/base_search.html

diff --git a/apps/member/templates/member/user_list.html b/apps/member/templates/member/user_list.html
index 66aecf3a..ce0b14a7 100644
--- a/apps/member/templates/member/user_list.html
+++ b/apps/member/templates/member/user_list.html
@@ -1,10 +1,8 @@
-{% extends "base.html" %}
+{% extends "base_search.html" %}
 {% comment %}
 SPDX-License-Identifier: GPL-3.0-or-later
 {% endcomment %}
-{% load render_table from django_tables2 %}
-{% load i18n crispy_forms_tags perms %}
-{% block contenttitle %}{% endblock %}
+{% load i18n perms %}
 
 {% block content %}
 {% if "member.change_profile_registration_valid"|has_perm:user %}
@@ -13,63 +11,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 </a>
 {% endif %}
 
-<div class="card bg-light">
-    <h3 class="card-header text-center">
-        {{ title }}
-    </h3>
-    <div class="card-body">
-        <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note/section...">
-    </div>
-    <div class="card-body">
-        <div id="user_table">
-            {% if table.data %}
-            {% render_table table %}
-            {% else %}
-            <div class="alert alert-warning">
-                {% trans "There is no user with this pattern." %}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-</div>
+{# Search panel #}
+{{ block.super }}
 {% endblock %}
-
-{% block extrajavascript %}
-<script type="text/javascript">
-    let pattern = '';
-
-    function reloadTable() {
-        pattern = $("#searchbar").val();
-
-        if (pattern.length > 2)
-            $("#user_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #user_table", init_table);
-    }
-
-    function init_table() {
-        // On row click, go to object
-        $(".table-row").click(function () {
-            window.document.location = $(this).data("href");
-        });
-
-        // Highlight searched terms
-        $("tr").each(function () {
-            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
-                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
-            });
-        });
-    }
-
-    $(document).ready(function () {
-        // Recover last search from url
-        let searchParams = new URLSearchParams(window.location.search)
-        if (searchParams.has('search'))
-            pattern = searchParams.get('search');
-
-        // On search, refresh table
-        $("#searchbar").keyup(debounce(reloadTable, 300));
-
-        // First init
-        init_table();
-    });
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/note_kfet/templates/base_search.html b/note_kfet/templates/base_search.html
new file mode 100644
index 00000000..1c588114
--- /dev/null
+++ b/note_kfet/templates/base_search.html
@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load render_table from django_tables2 %}
+{% load i18n perms %}
+{% block contenttitle %}{% endblock %}
+
+{% block content %}
+<div class="card bg-light">
+    <h3 class="card-header text-center">
+        {{ title }}
+    </h3>
+    <div class="card-body">
+        <input id="searchbar" type="text" class="form-control" placeholder="{% trans "Search by attribute such as name…" %}">
+    </div>
+    <div id="dynamic-table">
+        {% if table.data %}
+        {% render_table table %}
+        {% else %}
+        <div class="card-body">
+            <div class="alert alert-warning">
+                {% trans "There is no results." %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extrajavascript %}
+<script type="text/javascript">
+    let pattern = '';
+
+    function reloadTable() {
+        pattern = $("#searchbar").val();
+
+        if (pattern.length > 2)
+            $("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #dynamic-table", init_table);
+    }
+
+    function init_table() {
+        // On row click, go to object
+        $(".table-row").click(function () {
+            window.document.location = $(this).data("href");
+        });
+
+        // Highlight searched terms
+        $("tr").each(function () {
+            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
+                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+            });
+        });
+    }
+
+    $(document).ready(function () {
+        // Recover last search from url
+        let searchParams = new URLSearchParams(window.location.search)
+        if (searchParams.has('search'))
+            pattern = searchParams.get('search');
+
+        // On search, refresh table
+        $("#searchbar").keyup(debounce(reloadTable, 300));
+
+        // First init
+        init_table();
+    });
+</script>
+{% endblock %}

From 8465b24d7d417de99f2690fcb689d8ff8a3884f5 Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Fri, 21 Aug 2020 23:20:45 +0200
Subject: [PATCH 2/3] Use base search for club list

---
 apps/member/templates/member/club_list.html | 67 ++++-----------------
 1 file changed, 12 insertions(+), 55 deletions(-)

diff --git a/apps/member/templates/member/club_list.html b/apps/member/templates/member/club_list.html
index 0ae4d5b8..f6d039e7 100644
--- a/apps/member/templates/member/club_list.html
+++ b/apps/member/templates/member/club_list.html
@@ -1,59 +1,16 @@
-{% extends "base.html" %}
-{% load render_table from django_tables2 %}
-{% load i18n %}
+{% extends "base_search.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n perms %}
 
 {% 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"/>
-        <hr>
-        {% if can_add_club %}
-            <a class="btn btn-primary text-center my-4" href="{% url 'member:club_create' %}" data-turbolinks="false">{% trans "Create club" %}</a>
-        {% endif %}
-    </div>
-</div>
-<div class="row justify-content-center">   
-    <div class="col-md-10">
-        <div class="card card-border shadow">
-            <div class="card-header text-center">
-                <h5> {% trans "Club listing" %}</h5>
-            </div>
-            <div class="card-body px-0 py-0" id="club_table">
-                {% render_table table %}
-            </div>
-        </div>
-    </div>
-</div>
+{% if can_add_club %}
+<a class="btn btn-block btn-success mb-3" href="{% url 'member:club_create' %}" data-turbolinks="false">
+    {% trans "Create club" %}
+</a>
+{% endif %}
 
-{% endblock %}
-{% block extrajavascript %}
-<script type="text/javascript">
-    $(document).ready(function() {
-        let old_pattern = null;
-        let searchbar_obj = $("#search_field");
-        var timer_on = false;
-        var timer;
-
-        function reloadTable() {
-            let pattern = searchbar_obj.val();
-            $("#club_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #club_table", init);
-        }
-
-        searchbar_obj.keyup(function() {
-            if (timer_on)
-                clearTimeout(timer);
-            timer_on = true;
-            setTimeout(reloadTable, 0);
-        });
-
-        function init() {
-            $(".table-row").click(function() {
-                window.document.location = $(this).data("href");
-                timer_on = false;
-            });
-        }
-
-        init();
-    });
-</script>
+{# Search panel #}
+{{ block.super }}
 {% endblock %}

From 2272cf529495aeb511459749c3e8a30523b37c4c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Sat, 22 Aug 2020 09:35:55 +0200
Subject: [PATCH 3/3] Update URL when searching

---
 note_kfet/templates/base_search.html | 37 ++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/note_kfet/templates/base_search.html b/note_kfet/templates/base_search.html
index 1c588114..83c715d9 100644
--- a/note_kfet/templates/base_search.html
+++ b/note_kfet/templates/base_search.html
@@ -12,7 +12,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
         {{ title }}
     </h3>
     <div class="card-body">
-        <input id="searchbar" type="text" class="form-control" placeholder="{% trans "Search by attribute such as name…" %}">
+        <input id="searchbar" type="text" class="form-control"
+            placeholder="{% trans "Search by attribute such as name…" %}">
     </div>
     <div id="dynamic-table">
         {% if table.data %}
@@ -30,8 +31,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 {% block extrajavascript %}
 <script type="text/javascript">
-    let pattern = '';
-
     function reloadTable() {
         pattern = $("#searchbar").val();
 
@@ -46,24 +45,42 @@ SPDX-License-Identifier: GPL-3.0-or-later
         });
 
         // Highlight searched terms
-        $("tr").each(function () {
-            $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
-                $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+        const pattern = $("#searchbar").val();
+        if (pattern.length > 2) {
+            $("tr").each(function () {
+                $(this).find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(5)").each(function () {
+                    $(this).html($(this).text().replace(new RegExp(pattern, 'i'), "<mark>$&</mark>"));
+                });
             });
-        });
+        }
     }
 
     $(document).ready(function () {
+        let pattern = '';
+
         // Recover last search from url
         let searchParams = new URLSearchParams(window.location.search)
-        if (searchParams.has('search'))
+        if (searchParams.has('search')) {
             pattern = searchParams.get('search');
+        }
 
         // On search, refresh table
-        $("#searchbar").keyup(debounce(reloadTable, 300));
+        $("#searchbar").keyup(debounce(function () {
+            // Get new pattern
+            pattern = $("#searchbar").val();
+
+            // Set URL
+            searchParams.set('search', pattern);
+            history.pushState({}, null, "?" + searchParams.toString());
+
+            // If long enough, update table
+            if (pattern.length > 2) {
+                $("#dynamic-table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #dynamic-table", init_table);
+            }
+        }, 300));
 
         // First init
         init_table();
     });
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file