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] 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 %}