feat(core): Ajoute une barre de recherche

assets/scss/layout/_header.scss

@@ -35,3 +35,21 @@
     }
   }
 }
+
+.icon {
+  svg {
+    vertical-align: baseline;
+  }
+  &-gray {
+    fill: $gray-600;
+    stroke: $gray-600;
+  }
+}
+
+.searchbar {
+  @include media-breakpoint-down(sm) {
+    input {
+      width: 80%;
+    }
+  }
+}

microsrebelles/core/urls.py

@@ -5,6 +5,7 @@ from .views import (
     PodcastListView,
     RadioShowDetailView,
     RadioShowListView,
+    SearchView,
 )
 
 app_name = 'core'
@@ -20,4 +21,5 @@ urlpatterns = [
     path(
         'podcasts/<slug>', PodcastDetailView.as_view(), name='podcast_detail'
     ),
+    path('recherche', SearchView.as_view(), name='recherche'),
 ]

microsrebelles/core/views.py

@@ -1,4 +1,7 @@
-from django.views.generic import DetailView, ListView
+from django.views.generic import DetailView, ListView, TemplateView
+
+from wagtail.search.backends import get_search_backend
+from wagtail.search.models import Query
 
 from wagtail_webradio.models import Podcast, RadioShow
 
@@ -21,3 +24,29 @@ class PodcastDetailView(DetailView):
 
     def get_queryset(self):
         return Podcast.objects.currents()
+
+
+class SearchView(TemplateView):
+    template_name = 'core/search_results.html'
+
+    def get(self, request, *args, **kwargs):
+        self.query = self.request.GET.get('query', None)
+        return super().get(request, *args, **kwargs)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.query:
+            context['truc'] = 'truc'
+            search_backend = get_search_backend()
+            context['radioshows_results'] = search_backend.search(
+                self.query,
+                RadioShow.objects.all(),
+            )
+            context['podcasts_results'] = search_backend.search(
+                self.query,
+                Podcast.objects.all(),
+            )
+            # ajoute un score pour de potentiels résultats favorisés
+            Query.get(self.query).add_hit()
+        context['search_query'] = self.query
+        return context

microsrebelles/templates/core/search_results.html

@@ -0,0 +1,24 @@
+{% extends "../base.html" %}
+{% load wagtailcore_tags %}
+
+{% block title %}Recherche{% endblock %}
+
+{% block content %}
+<h1 class="title mt-3 mb-2">Résultats de recherche {% if search_query %} pour : <span class="text-primary">{{ search_query }}</span>{% endif %}
+{% if radioshows_results %}
+<h2 class="title text-primary">Émissions</h2>
+<div class="row">
+{% for radioshow in radioshows_results %}
+    <div class="col-12 col-lg-6">{% include 'wagtail_webradio/radioshow_item.html' %}</div>
+  {% endfor %}
+</div>
+{% endif %}
+{% if podcasts_results %}
+<h2 class="title mt-3 mb-2 text-primary">Podcasts</h2>
+<div class="row">
+{% for podcast in podcasts_results %}
+  <div class="col-12 col-lg-6 podcast-item">{% include "wagtail_webradio/podcast_item.html" %}</div>
+{% endfor %}
+</div>
+{% endif %}
+{% endblock %}

microsrebelles/templates/inc/header.html

@@ -1,6 +1,6 @@
 {% load static %}
 <header id="header" class="sticky-lg-top header bg-light">
-  <nav class="navbar navbar-expand-lg navbar-light">
+  <nav class="navbar navbar-expand-lg navbar-light  ">
     <div class="container">
       <a class="me-4" href="/">
         <img class="logo-img" src="{% static "img/logo.png" %}" alt="logo de Micros-Rebelles">
@@ -12,14 +12,24 @@
         <div class="navbar-nav">
         {% for menuitem in sitesettings.menu %}{{ menuitem }}{% endfor %}
         </div>
-	{% if sitesettings.support %}
-	{% with support=sitesettings.support|first %}
-	<div class="header-support">
-	  <a href="{{ support.value.link.href }}" class="fs-3 text-primary text-decoration-none fst-italic fw-bold">{{ support.value.text }}</a>
-	</div>
-	{% endwith %}
-	{% endif %}
+        {% if sitesettings.support %}
+        {% with support=sitesettings.support|first %}
+        <div class="header-support">
+          <a href="{{ support.value.link.href }}" class="fs-3 text-primary text-decoration-none fst-italic fw-bold">{{ support.value.text }}</a>
+        </div>
+        {% endwith %}
+        {% endif %}
       </div>
     </div>
   </nav>
+  <div class="container">
+    <div class="searchbar icon-gray text-center text-sm-end">
+      <form action="{% url "core:recherche" %}" method="get" class="input-group input-group--search" role="search">
+        <input type="search" name="query" class="form-control form-control-sm" placeholder="Rechercher" aria-label="Terme(s) recherché(s)" autocomplete="off">
+        <button class="btn" type="submit" aria-label="Rechercher">
+          {% include "inc/icons/search.svg" %}
+        </button>
+      </form>
+    </div>
+  </div>
 </header>

microsrebelles/templates/inc/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>

microsrebelles/templates/wagtail_webradio/podcast_item.html

@@ -0,0 +1,13 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="row border-bottom py-4 position-relative">
+  <div class="col-md">
+    {% for tag in podcast.tags.all %}<span class="tag">{{ tag }} </span>{% endfor %}
+    <h2 class="title">{{ podcast.title }}</h2>
+    {{ podcast.description|richtext|truncatechars_html:150 }}
+    <time class="fw-light d-block mt-4 text-secondary" datetime="{{ podcast.publish_date|date:'c' }}"><em>{{ podcast.publish_date|date:'SHORT_DATE_FORMAT' }}</em></time>
+  </div>
+  <div class="col-auto">
+    {% image podcast.picture fill-200x200 %}
+  </div>
+  <a class="stretched-link" href="{% url "core:podcast_detail" podcast.slug  %}"></a>
+</div>

microsrebelles/templates/wagtail_webradio/podcast_list.html

@@ -8,18 +8,7 @@
 <div class="alert alert-info">Aucun podcast trouvé !</div>
 {% else %}
 {% for podcast in podcast_list %}
-<div class="row border-bottom py-4 position-relative">
-  <div class="col-md">
-    {% for tag in podcast.tags.all %}<span class="tag">{{ tag }} </span>{% endfor %}
-    <h2 class="title">{{ podcast.title }}</h2>
-    {{ podcast.description|richtext|truncatechars_html:150 }}
-    <time class="fw-light d-block mt-4 text-secondary" datetime="{{ podcast.publish_date|date:'c' }}"><em>{{ podcast.publish_date|date:'SHORT_DATE_FORMAT' }}</em></time>
-  </div>
-  <div class="col-auto">
-    {% image podcast.picture fill-200x200 %}
-  </div>
-  <a class="stretched-link" href="{% url "core:podcast_detail" podcast.slug  %}"></a>
-</div>
+  {% include "wagtailwebradio/podcast_item.html" %}
 {% endfor %}
 {% endif %}
 {% endblock %}

microsrebelles/templates/wagtail_webradio/radioshow_item.html

@@ -0,0 +1,16 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="row border-bottom py-4 position-relative">
+  <div class="col-md">
+    <h2 class="title">{{ radioshow.title }}</h2>
+    {{ radioshow.description|richtext }}
+  </div>
+  <div class="col-md-auto">
+    {% if radioshow.picture %}
+    {% image radioshow.picture fill-300x300 %}
+    {% else %}
+    {% image settings.core.sitesettings.radioshow_default_picture fill-300x300 %}
+    {% endif %}
+  </div>
+<a href="{% url "core:radioshow_detail" radioshow.slug %}" class="stretched-link"></a>
+</div>

microsrebelles/templates/wagtail_webradio/radioshow_list.html

@@ -9,20 +9,7 @@
 <div class="alert alert-info">Il n'y a aucune émissions !</div>
 {% else %}
   {% for radioshow in radioshow_list %}
-    <div class="row border-bottom py-4 position-relative">
-      <div class="col-md">
-        <h2 class="title">{{ radioshow.title }}</h2>
-        {{ radioshow.description|richtext }}
-      </div>
-      <div class="col-md-auto">
-        {% if radioshow.picture %}
-        {% image radioshow.picture fill-300x300 %}
-        {% else %}
-        {% image settings.core.sitesettings.radioshow_default_picture fill-300x300 %}
-        {% endif %}
-      </div>
-    <a href="{% url "core:radioshow_detail" radioshow.slug %}" class="stretched-link"></a>
-    </div>
+    {% include 'wagtail_webradio/radioshow_item.html' %}
   {% endfor %}
 </div>
 {% endif %}