[FEATURE] ajax filtering

elections2021/constants.py

@@ -124,6 +124,7 @@ REGION_CHOICES = [(code, name) for code, slug, name, name2 in REGION_DATA]
 REGION_NAME_VARIANT = {code: name2 for code, slug, name, name2 in REGION_DATA}
 REGION_SLUGS = {slug: code for code, slug, name, name2 in REGION_DATA}
 REGION_OPTIONS = [(slug, name) for code, slug, name, name2 in REGION_DATA]
+REGION_NAMES = [name for code, slug, name, name2 in REGION_DATA]
 
 PIRATES = "pirati"
 STAN = "stan"

main/migrations/0023_mainhomepage_max_items.py

+# Generated by Django 4.0.7 on 2022-08-25 09:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0022_alter_mainarticlepage_region'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mainhomepage',
+            name='max_items',
+            field=models.IntegerField(default=4, verbose_name='Počet tweetů na stránce'),
+        ),
+    ]

main/models.py

@@ -2,8 +2,9 @@ from datetime import timedelta
 from functools import cached_property
 
 from django.conf import settings
+from django.core.paginator import Paginator
 from django.db import models
-from django.http import HttpResponseRedirect
+from django.http import HttpResponseRedirect, JsonResponse
 from django.shortcuts import render
 from django.utils import timezone
 from modelcluster.contrib.taggit import ClusterTaggableManager
@@ -22,7 +23,7 @@ from wagtail.core.fields import RichTextField, StreamField
 from wagtail.core.models import Page
 from wagtailmetadata.models import MetadataPageMixin
 
-from elections2021.constants import REGION_CHOICES  # pozor, import ze sousedního modulu
+from elections2021.constants import REGION_CHOICES, REGION_NAMES  # pozor, import ze sousedního modulu
 from shared.const import RICH_TEXT_DEFAULT_FEATURES
 from shared.forms import SubscribeForm
 from shared.models import (  # MenuMixin,
@@ -46,6 +47,8 @@ class ARTICLE_TYPES(models.IntegerChoices):
 
 
 class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page):
+
+    max_items = models.IntegerField("Počet tweetů na stránce", default=4)
     # header
 
     contact_newcomers = models.URLField(
@@ -157,9 +160,28 @@ class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin,
 
     def get_context(self, request, *args, **kwargs):
         context = super().get_context(request, args, kwargs)
-        context["tweet_list"] = Tweet.objects.order_by("-twitter_id")[:4]
+        tweets_page = request.GET.get('page', 1)
+        tweet_paginator = Paginator(Tweet.objects.order_by("-twitter_id"), self.max_items)
+        context["tweet_list"] = tweet_paginator.get_page(tweets_page)
+        context["regions"] = REGION_NAMES
         return context
 
+    def serve(self, request, *args, **kwargs):
+
+        if not request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
+            return super().serve(request, *args, **kwargs)
+        tweet_paginator = Paginator(Tweet.objects.order_by("-twitter_id"), self.max_items)
+        tweet_page = tweet_paginator.get_page(request.GET.get('page', 1))
+        context = {
+            "tweet_list": tweet_page.object_list
+        }
+        html_content = render(request, 'main/includes/twitter_widget.html', context).content
+        data = {
+            'html': html_content.decode("utf-8"),
+            'last_page': tweet_page.paginator.num_pages,
+        }
+        return JsonResponse(data=data, safe=False)
+
     @cached_property
     def newsletter_subscribe_url(self):
         return self.url + self.reverse_subpage("newsletter_subscribe")

main/templates/main/blocks/regions_block.html

@@ -13,9 +13,9 @@
           <div class="select">
             <select class="select__control form-field__control" value="">
               <option>Všechny kraje</option>
-              <option>Option 2</option>{# TODO REGION choices from models #}
-              <option>Option 3</option>
-              <option>Option 4</option>
+              {% for region in regions %}
+                <option>{{ region }}</option>
+              {% endfor %}
             </select>
           </div>
 

main/templates/main/blocks/twitter_block.html

@@ -2,32 +2,48 @@
   <h2 class="head-7xl text-center mb-6 xl:mb-28">
     {{ self.title }}
   </h2>
-  <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
-    {% for tweet in tweet_list %}
-      <div class="w-full flex max-w-xs">
-        <div class="p-4 flex flex-col items-center text-center border border-grey-100">
-          <img
-            class="rounded-full shadow-sm w-12 mb-2"
-            src="{{ tweet.author_img_url }}"
-            alt="user image"
-          />
-          <h5 class="font-alt mb-2">
-            {{ tweet.author_name }}
-          </h5>
-          <small class="mb-4 text-turquoise-400">
-            {{ tweet.author_username }}
-          </small>
-          <p class="text-base leading-6 mb-2">
-            {{ tweet.text }}
-          </p>
-          <a href="" class="hover:no-underline">
-            <i class="ico--twitter text-turquoise-400 text-xl"></i>
-          </a>
-        </div>
+    <div class="tweets-list">
+        {% include 'main/includes/twitter_widget.html' with tweet_list=tweet_list %}
     </div>
-    {% endfor %}
-  </div>
-  <div class="flex justify-center">
-    {% include 'main/includes/button_animated.html' with btn_text="Zobrazit další" %}
+    {% if tweet_list.has_next %}
+      <div class="text-center">
+          <a id="load-more-tweets"
+             href="#"
+             data-url="{{ page_url }}?page="
+             data-page="{{ tweet_list.next_page_number }}"
+             class="btn btn__slide__wrap">
+              <span class="btn text-sm bg-black text-white w-32 lg:text-base">
+                Zobrazit další
+              </span>
+              <span class="btn text-sm bg-white text-black w-32 lg:text-base">
+                Zobrazit další
+              </span>
+            </a>
       </div>
+    {% endif %}
 </div>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+<script type="text/javascript">
+    $('#load-more-tweets').click(function (e) {
+
+      e.preventDefault();
+
+      let $btn = $(this);
+      let $tweetsList = $(".tweets-list");
+
+      $.ajax({
+        method: "GET",
+        processData: false,
+        contentType: false,
+        url: $(this).attr('data-url') + $(this).attr('data-page'),
+      }).then(function (data) {
+        $tweetsList.append(data.html);
+
+        if ($(this).attr('data-page') === data.last_page)
+          $btn.hide();
+
+        $btn.attr('data-page', parseInt($btn.attr('data-page')) + 1);
+
+      });
+    });
+</script>
\ No newline at end of file

main/templates/main/includes/twitter_widget.html

+<div class="flex flex-wrap justify-center mb-8 lg:mb-24">
+{% for tweet in tweet_list %}
+  <div class="w-full flex max-w-xs">
+    <div class="p-4 flex flex-col items-center text-center border border-grey-100">
+      <img
+        class="rounded-full shadow-sm w-12 mb-2"
+        src="{{ tweet.author_img_url }}"
+        alt="user image"
+      />
+      <h5 class="font-alt mb-2">
+        {{ tweet.author_name }}
+      </h5>
+      <small class="mb-4 text-turquoise-400">
+        {{ tweet.author_username }}
+      </small>
+      <p class="text-base leading-6 mb-2">
+        {{ tweet.text }}
+      </p>
+      <a href="" class="hover:no-underline">
+        <i class="ico--twitter text-turquoise-400 text-xl"></i>
+      </a>
+    </div>
+  </div>
+{% endfor %}
+</div>
\ No newline at end of file