[FEATURE] article menu

main/models.py

@@ -336,15 +336,19 @@ class MainArticlesPage(
 
     def get_context(self, request, *args, **kwargs):
         ctx = super().get_context(request, args, kwargs)
-        article_list = self.get_article_data_list(1)
-        ctx["article_data_list"] = article_list
-        ctx["show_next_articles"] = MainArticlePage.objects.filter(
+        article_timeline_list = self.get_article_data_list(1)
+        ctx["article_timeline_list"] = article_timeline_list
+        ctx["show_next_timeline_articles"] = MainArticlePage.objects.filter(
             article_type=ARTICLE_TYPES.WORK_TIMELINE
-        ).count() > len(article_list)
-
+        ).count() > len(article_timeline_list)
+        article_list = MainArticlePage.objects.filter(
+            article_type=ARTICLE_TYPES.PRESS_RELEASE
+        ).order_by("-date")
+        ctx["article_article_list"] = article_list[:10]
+        ctx["show_next_article"] = len(article_list) > 4
         return ctx
 
-    def get_articles_response(self, request):
+    def get_timeline_articles_response(self, request):
         article_list = self.get_article_data_list(int(request.GET.get("months", None)))
         context = {"article_data_list": article_list}
         data = {
@@ -358,10 +362,30 @@ class MainArticlesPage(
         }
         return JsonResponse(data=data, safe=False)
 
+    def get_articles_response(self, request):
+        article_paginator = Paginator(
+            MainArticlePage.objects.filter(
+                article_type=ARTICLE_TYPES.PRESS_RELEASE
+            ).order_by("-date"),
+            10,
+        )
+        article_page = article_paginator.get_page(request.GET.get("page", 1))
+        context = {"article_data_list": article_page.object_list}
+        html_content = render(
+            request, "main/includes/person_article_preview.html", context
+        ).content
+        data = {
+            "html": html_content.decode("utf-8"),
+            "last_page": article_page.paginator.num_pages,
+        }
+        return JsonResponse(data=data, safe=False)
+
     def serve(self, request, *args, **kwargs):
         if not request.META.get("HTTP_X_REQUESTED_WITH") == "XMLHttpRequest":
             return super().serve(request, *args, **kwargs)
         if "months" in request.GET:
+            return self.get_timeline_articles_response(request)
+        if "page" in request.GET:
             return self.get_articles_response(request)
 
     @staticmethod

main/templates/main/blocks/articles_article_list_block.html

-<section class="grid-container mb-4 justify-start xl:mb-14">
-  <div class="grid-content-with-right-side">
-    <div class="leading-6">
-      <h2 class="head-4xl mb-5 xl:hidden">
-        Články
-      </h2>
-      {{> molecules-person-article-preview }}
-      {{> molecules-person-article-preview }}
-    </div>
-    <div class="flex justify-center">
-      {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
-    </div>
-  </div>
-</section>

main/templates/main/includes/person_article_preview.html

+{% for article_page in article_data_list %}
+    <div class="flex flex-col justify-between items-start mb-9">
+      <div class="flex font-bold mb-4 text-xs text-white uppercase">
+        <span class="bg-green-500 mr-1 px-1">Duben 2022</span>
+        <span class="bg-violet-600 mr-1 px-1">#ENERGETIKA</span>
+      </div>
+      <h4 class="head-3xl mb-4">
+        {{ article_page.title }}
+      </h4>
+      <p class="mb-6">
+        {{ article_page.perex }}
+      </p>
+        {% include 'main/includes/button_animated.html' with btn_link=article_page.url btn_text="Číst dále" %}
+    </div>
+{% endfor %}

main/templates/main/main_articles_page.html

@@ -32,13 +32,13 @@
                     <div class="mt-20">
                         <div class="grid-container article-section">
                             <div class="grid-full mb-8">
-                                <div id="searchResultWrapper">
-                                    {% include 'main/blocks/articles_timeline_block.html' with article_data_list=article_data_list %}
+                                <div id="showMoreTimelineResultsWrapper">
+                                    {% include 'main/blocks/articles_timeline_block.html' with article_data_list=article_timeline_list %}
                                 </div>
                             </div>
                             <div class="flex justify-center">
                                 <a
-                                        onclick="showMoreArticles(event, this)"
+                                        onclick="showMoreTimelineArticles(event, this)"
                                         href="#"
                                         data-url="{{ page_url }}?months="
                                         data-months="2"
@@ -56,17 +56,44 @@
                     </div>
                 </template>
                 <template v-if="isCurrentView('articles')">
-
+                    <section class="grid-container mb-3 justify-start xl:mb-14">
+                        <div class="grid-content-with-right-side">
+                            <div class="leading-6">
+                                <h2 class="head-4xl mb-5 xl:hidden">
+                                    Články
+                                </h2>
+                                <div id="searchArticleResultWrapper">
+                                    {% include 'main/includes/person_article_preview.html' with article_data_list=article_article_list %}
+                                </div>
+                                <div class="flex justify-center">
+                                    <a
+                                            onclick="showMoreArticles(event, this)"
+                                            href="#"
+                                            data-url="{{ page_url }}?page="
+                                            data-page="2"
+                                            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>
+                            </div>
+                        </div>
+                    </section>
                 </template>
             </ui-view-provider>
         </div>
     </main>
 
     <script type="text/javascript">
-        async function showMoreArticles(event, btn) {
+        async function showMoreTimelineArticles(event, btn) {
             event.preventDefault()
 
-            const searchResultWrapper = document.getElementById('searchResultWrapper')
+            const showMoreTimelineResultsWrapper = document.getElementById('showMoreTimelineResultsWrapper')
             const url = btn.getAttribute('data-url') + btn.getAttribute('data-months')
 
             const response = await fetch(url, {
@@ -74,8 +101,25 @@
                 headers: {"X-Requested-With": "XMLHttpRequest"},
             })
             const data = await response.json()
-            searchResultWrapper.innerHTML = data.html
+            showMoreTimelineResultsWrapper.innerHTML = data.html
             btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1)
         }
+
+        async function showMoreArticles(event, btn) {
+            event.preventDefault()
+
+            let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper');
+            let url = btn.getAttribute('data-url') + btn.getAttribute('data-page')
+
+            const response = await fetch(url, {
+                method: "GET",
+                headers: {"X-Requested-With": "XMLHttpRequest"},
+            })
+            const data = await response.json()
+            searchArticleResultWrapper.innerHTML += data.html;
+            if (btn.getAttribute('data-page') === data.last_page)
+                btn.hide();
+            btn.setAttribute('data-page', parseInt(btn.getAttribute('data-page')) + 1)
+        }
     </script>
 {% endblock content %}