From 25944353bc2a3214ccc352ff9fbf81de382e7501 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Thu, 23 Apr 2020 17:23:03 +0200
Subject: [PATCH] Add reusable templates for Materialize

- Multiple choice form field as chips
- Pagination
---
 aleksis/core/templates/components/chips.html  | 29 ++++++++++++
 .../core/templates/components/pagination.html | 29 ++++++++++++
 aleksis/core/templates/search/search.html     | 44 ++++++-------------
 3 files changed, 71 insertions(+), 31 deletions(-)
 create mode 100644 aleksis/core/templates/components/chips.html
 create mode 100644 aleksis/core/templates/components/pagination.html

diff --git a/aleksis/core/templates/components/chips.html b/aleksis/core/templates/components/chips.html
new file mode 100644
index 000000000..6f88dee5f
--- /dev/null
+++ b/aleksis/core/templates/components/chips.html
@@ -0,0 +1,29 @@
+{% load material_form_internal %}
+
+<div>
+  {% for group, items in form_field|select_options %}
+    {% for choice, value, selected in items %}
+      <label class="{% if selected %} active{% endif %}">
+        <input type="checkbox"
+               {% if value == None or value == '' %}disabled{% else %}value="{{ value }}"{% endif %}
+                {% if selected %} checked="checked"{% endif %} name="{{ form_field.name }}">
+        <span> {{ choice }} </span>
+      </label>
+    {% endfor %}
+  {% endfor %}
+</div>
+
+<script>
+  $(document).ready(function () {
+    $("input[type='checkbox']").each(function () {
+      $(this).addClass("chips-checkbox");
+      $(this).parent("label").addClass("chips-checkbox");
+    });
+
+    $("label.chips-checkbox > span").click(function () {
+      $(this).parent("label.chips-checkbox").toggleClass("active");
+      let input = $(this).next("input[type='checkbox']");
+      input.prop("checked", !input.prop("checked"));
+    });
+  });
+</script>
diff --git a/aleksis/core/templates/components/pagination.html b/aleksis/core/templates/components/pagination.html
new file mode 100644
index 000000000..5eb33cdf8
--- /dev/null
+++ b/aleksis/core/templates/components/pagination.html
@@ -0,0 +1,29 @@
+{% load django_tables2 %}
+
+{% if page and paginator.num_pages > 1 %}
+  <ul class="pagination center">
+    {% if page.has_previous %}
+      <li class="waves-effect">
+        <a href="?page={{ page.previous_page_number }}" class="page-link">
+          <i class="material-icons">chevron_left</i>
+        </a>
+      </li>
+    {% endif %}
+    {% if page.has_previous or page.has_next %}
+      {% for p in page|table_page_range:paginator %}
+        <li class="{% if page.number == p %} active{% endif %} waves-effect">
+          <a {% if p != '...' %}href="?page={{ p }}"{% endif %}>
+            {{ p }}
+          </a>
+        </li>
+      {% endfor %}
+    {% endif %}
+    {% if page.has_next %}
+      <li class="waves-effect">
+        <a href="?page={{ page.next_page_number }}" class="page-link">
+          <i class="material-icons">chevron_right</i>
+        </a>
+      </li>
+    {% endif %}
+  </ul>
+{% endif %}
diff --git a/aleksis/core/templates/search/search.html b/aleksis/core/templates/search/search.html
index d463f1569..caff1cc6f 100644
--- a/aleksis/core/templates/search/search.html
+++ b/aleksis/core/templates/search/search.html
@@ -14,18 +14,7 @@
     <input type="text" name="{{ form.q.name }}" id="{{ form.q.id }}" value="{% firstof form.q.value "" %}"
            placeholder="{% trans "Search Term" %}">
 
-    <div>
-      {% for group, items in form.models|select_options %}
-        {% for choice, value, selected in items %}
-          <label class="{% if selected %} active{% endif %}">
-            <input type="checkbox"
-                   {% if value == None or value == '' %}disabled{% else %}value="{{ value }}"{% endif %}
-                    {% if selected %} checked="checked"{% endif %} name="{{ form.models.name }}">
-            <span> {{ choice }} </span>
-          </label>
-        {% endfor %}
-      {% endfor %}
-    </div>
+    {% include "components/chips.html" with form_field=form.models %}
 
     <p>
       <button type="submit" class="btn waves-effect waves-light green">
@@ -61,14 +50,20 @@
               </a>
             </li>
           {% else %}
-            <li class="disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>
+            <li class="disabled">
+              <a href="#"><i class="material-icons">chevron_left</i></a>
+            </li>
           {% endif %}
 
           {% for page_num in page.paginator.page_range %}
             {% if page.number == page_num %}
-              <li class="active"><a href="#">{{ page_num }}</a></li>
+              <li class="active">
+                <a href="#">{{ page_num }}</a>
+              </li>
             {% else %}
-              <li class="waves-effect"><a href="?q={{ query }}&amp;page={{ page_num }}">{{ page_num }}</a></li>
+              <li class="waves-effect">
+                <a href="?q={{ query }}&amp;page={{ page_num }}">{{ page_num }}</a>
+              </li>
             {% endif %}
           {% endfor %}
 
@@ -79,7 +74,9 @@
               </a>
             </li>
           {% else %}
-            <li class="disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>
+            <li class="disabled">
+              <a href="#"><i class="material-icons">chevron_right</i></a>
+            </li>
           {% endif %}
         </ul>
       {% endif %}
@@ -95,19 +92,4 @@
 
 
   </form>
-
-  <script>
-    $(document).ready(function () {
-      $("input[type='checkbox']").each(function () {
-        $(this).addClass("chips-checkbox");
-        $(this).parent("label").addClass("chips-checkbox");
-      });
-
-      $("label.chips-checkbox > span").click(function () {
-        $(this).parent("label.chips-checkbox").toggleClass("active");
-        let input = $(this).next("input[type='checkbox']");
-        input.prop("checked", !input.prop("checked"));
-      });
-    });
-  </script>
 {% endblock %}
-- 
GitLab