Ajout d'interactions avec les filtres (manque la partie javascript)

src/agenda_culturel/migrations/0011_alter_event_category.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.1 on 2023-11-08 11:24
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('agenda_culturel', '0010_remove_category_plural_category_alt_name'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='event',
+            name='category',
+            field=models.ForeignKey(default=47, help_text='Category of the event', on_delete=django.db.models.deletion.SET_DEFAULT, to='agenda_culturel.category', verbose_name='Category'),
+        ),
+    ]

src/agenda_culturel/static/style.scss

@@ -234,16 +234,25 @@ article.day>ul {
 @media only screen and (prefers-color-scheme: light) {
     [data-theme="light"],
     :root:not([data-theme="dark"]) {
-        .filter summary:after {
+        #filters summary:after {
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
         }   
     }
 }
 
-article.filter {
+article#filters {
-    form>div {
+    .buttons-filter {
+        float: right;
+        text-align: right;
+    }
+    form>label {
+        display: inline-block;
+    }
+    .options-filter {
+        clear: both;
         padding: 0.5em;
-        [role="button"] {
+
+        [role="button"].small-cat {
             margin: 0.2em;
             height: 2.6em;
             line-height: 2.2em;

src/agenda_culturel/templates/agenda_culturel/filter-inc.html

@@ -1,7 +1,7 @@
 {% load cat_extra %}
 {% load tag_extra %}
 
-<article class="filter">
+<article id="filters">
     <details>
 <summary role="button" class="contrast outline">
     {% if filter.is_active %}

src/agenda_culturel/templates/agenda_culturel/forms/category-checkbox.html

@@ -1,5 +1,15 @@
 {% load cat_extra %}
-<div id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+<div class="buttons-filter">
+    <label for="switch-categories">
+        filtrer par catégorie
+        <input type="checkbox" id="switch-categories" name="switch-categories" role="switch">
+      </label>
+      <label for="all-categories">
+        toutes
+        <input type="checkbox" id="all-categories" name="all-categories" checked>
+    </label>
+</div>
+<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
   <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat contrast">
     {{ widget.value.instance | circle_cat }}{% include widget.template_name %}</div>{% endfor %}{% if group %}
   </div>{% endif %}{% endfor %}

src/agenda_culturel/templates/agenda_culturel/forms/tag-checkbox.html

@@ -1,6 +1,16 @@
 {% load cat_extra %}
-<div id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+<div class="buttons-filter">
-  <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat">
+<label for="switch-tags">
-    {% include widget.template_name %}</div>{% endfor %}{% if group %}
+    filtrer par étiquette
-  </div>{% endif %}{% endfor %}
+    <input type="checkbox" id="switch-tags" name="switch-tags" role="switch">
+  </label>
+  <label for="all-tags">
+    toutes
+    <input type="checkbox" id="all-tags" name="all-tags" checked>
+</label>
+</div>
+<div class="options-filter" id="{{ widget.attrs.id }}"{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
+    <div><label>{{ group }}</label>{% endif %}{% for widget in options %}<div role="button" class="small-cat">
+      {% include widget.template_name %}</div>{% endfor %}{% if group %}
+    </div>{% endif %}{% endfor %}
 </div>

src/agenda_culturel/views.py

@@ -173,10 +173,11 @@ class CalendarWeek(CalendarList):
 
 class CategoryCheckboxSelectMultiple(forms.CheckboxSelectMultiple):
     template_name = 'agenda_culturel/forms/category-checkbox.html'
-    option_template_name = 'agenda_culturel/forms/category-checkbox-option.html'
+    option_template_name = 'agenda_culturel/forms/checkbox-option.html'
 
 class TagCheckboxSelectMultiple(forms.CheckboxSelectMultiple):
     template_name = 'agenda_culturel/forms/tag-checkbox.html'
+    option_template_name = 'agenda_culturel/forms/checkbox-option.html'
 
 
 class EventFilter(django_filters.FilterSet):
@@ -185,6 +186,8 @@ class EventFilter(django_filters.FilterSet):
         lookup_expr='icontains', 
         field_name="tags", 
         widget=TagCheckboxSelectMultiple)
+
+
     category = django_filters.ModelMultipleChoiceFilter(label="Catégories", 
         field_name="category__id", 
         to_field_name='id', 
@@ -192,12 +195,6 @@ class EventFilter(django_filters.FilterSet):
         widget=CategoryCheckboxSelectMultiple)
 
 
-
-    def filter_queryset(self, queryset):
-        # TODO
-        return super().filter_queryset(queryset)
-
-
     class Meta:
         model = Event
         fields = ["category", "tags"]