rough searching implementation

main/models.py

@@ -340,7 +340,7 @@ class MainHomePage(
 
 
 class MainArticlesPage(
-    ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, Page
+    RoutablePageMixin, ExtendedMetadataPageMixin, SubpageMixin, MetadataPageMixin, Page
 ):
     perex = models.TextField()
     last_import_log = models.TextField(
@@ -488,6 +488,10 @@ class MainArticlesPage(
         }
         return JsonResponse(data=data, safe=False)
 
+    @cached_property
+    def search_url(self):
+        return self.url + self.reverse_subpage("search")
+
     @route(r"^search")
     def search(self, request):
         if request.method == "GET" and "q" in request.GET:
@@ -496,9 +500,11 @@ class MainArticlesPage(
             results = MainArticlePage.objects.live().search(query)
             
             return render(
+                request,
                 "main/main_article_search.html",
                 {
-                    "page": self,
+                    **self.get_context(request),
+                    "query": query,
                     "results": results,
                 }
             )

main/templates/main/main_article_search.html

+{% extends "main/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags shared_filters %}
+
+{% block content %}
+  {% include 'main/includes/layout/simple_page_header.html' %}
+
+  <main role="main">
+    <div class="__js-root">
+        <div class="grid-container article-section mb-8">
+          <div class="grid-full">
+            <div class="flex flex-col items-center gap-3">
+              <form
+                class="flex flex-row"
+                method="get"
+                action="{{ page.search_url }}"
+              >
+                {% csrf_token %}
+                <input
+                  class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
+                  type="text"
+                  id="q"
+                  name="q"
+                  value="{{ query }}"
+                  placeholder="Hledat články..."
+                  aria-label="Vyhledávací box"
+                >
+                <button
+                  class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive"
+                  aria-label="Vyhledat"
+                  type="submit"
+                >
+                  <div class="btn__body-wrap h-10 w-12 min-h-0 min-w-0 xl:h-14 xl:w-14">
+                    <div class="btn__body p-0">
+                      <i class="ico--search"></i>
+                    </div>
+                  </div>
+                </button>
+              </form>
+              <a href="{{ page.url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+                <span class="btn__body-wrap">
+                  <span class="btn__body text-lg lg:text-base">
+                    Zpět na seznam
+                  </span>
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <section class="mb-3 xl:mb-14">
+          <div class="grid-container justify-start">
+            <div class="grid-content-with-right-side">
+              <div class="leading-6">
+                <h2 class="head-4xl mb-5 xl:hidden">
+                  Výsledky pro „{{ query }}“
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div id="searchArticleResultWrapper">
+            {% include 'main/includes/person_article_preview.html' with article_data_list=results %}
+          </div>
+        </section>
+      {% include "main/includes/newsletter_section.html" %}
+    </div>
+  </main>
+
+  <script type="text/javascript">
+    async function showMoreTimelineArticles(event, btn) {
+      event.preventDefault()
+
+      const showMoreTimelineResultsWrapper = document.getElementById('showMoreTimelineResultsWrapper')
+      const url = btn.getAttribute('data-url') + btn.getAttribute('data-months')
+
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {"X-Requested-With": "XMLHttpRequest"},
+      })
+      const data = await response.json()
+      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 (!data.has_next) { btn.style.display = 'none'; }
+      btn.setAttribute('data-page', parseInt(btn.getAttribute('data-page')) + 1)
+    }
+  </script>
+{% endblock content %}

main/templates/main/main_articles_page.html

@@ -28,16 +28,24 @@
                    :class="{'switch__item--active': isCurrentView('articles')}">Tiskové zprávy</a>
               </div>
               <div class="xl:mt-3">
-                <div class="flex flex-row">
+                <form
+                  class="flex flex-row"
+                  method="get"
+                  action="{{ page.search_url }}"
+                >
+                  {% csrf_token %}
                   <input
                     class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
                     type="text"
+                    id="q"
+                    name="q"
                     placeholder="Hledat články..."
                     aria-label="Vyhledávací box"
                   >
                   <button
                     class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive"
                     aria-label="Vyhledat"
+                    type="submit"
                   >
                     <div class="btn__body-wrap h-10 w-12 min-h-0 min-w-0 xl:h-14 xl:w-14">
                       <div class="btn__body p-0">
@@ -45,7 +53,7 @@
                       </div>
                     </div>
                   </button>
-                </div>
+                </form>
               </div>
             </div>
           </div>