Amélioration UX recherche

src/agenda_culturel/migrations/0067_categorisationrule_place.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.7 on 2024-08-17 11:23
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('agenda_culturel', '0066_batchimportation_url_source'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='categorisationrule',
+            name='place',
+            field=models.ForeignKey(blank=True, help_text='Location from place', null=True, on_delete=django.db.models.deletion.SET_NULL, to='agenda_culturel.place', verbose_name='Place'),
+        ),
+    ]

src/agenda_culturel/static/style.scss

@@ -878,3 +878,71 @@ table .buttons {
     height: 100vh;
     overflow-y: scroll;
 }
+
+.choices {
+    .choices__inner {
+        @extend [role="button"], .large;
+        .choices__item {
+            line-height: var(--line-height);
+        }
+        .choices__item::after {
+            display: block;
+            width: 1rem;
+            height: 1rem;
+            margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
+            float: right;
+            transform: rotate(-90deg);
+            background-image: var(--icon-chevron);
+            background-position: right center;
+            background-size: 1rem auto;
+            background-repeat: no-repeat;
+            content: "";
+            transition: transform var(--transition);
+            box-sizing: border-box;
+            margin-top: calc(var(--spacing, 1rem) * 0.8);
+        }
+    }
+
+    .choices__list--dropdown {
+        display: none;
+        z-index: 1;
+        position: absolute;
+        width: 100%;
+        top: 100%;
+        margin-top: -1px;
+        overflow: hidden;
+        word-break: break-all;
+        will-change: display;
+        position: relative;
+        max-height: 300px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        will-change: scroll-position;
+        
+        .choices__item {
+            line-height: 2.5em;
+            padding-left: 0.5em;
+        }
+        .choices__item.is-selected {
+            background: var(--primary);
+            color: var(--primary-inverse);
+        }
+        .choices__item:hover, .choices__item.is-highlighted {
+            background: var(--primary-focus);
+        }
+    }
+    .is-active {
+        display: block;
+    }
+
+
+}
+
+.choices.is-open {
+    .choices__inner {
+        .choices__item::after {
+                transform: rotate(0);
+        }
+    }
+}
+

src/agenda_culturel/templates/agenda_culturel/place_unknown_form.html

@@ -7,6 +7,9 @@
 {% load cat_extra %}
 
 {% block entete_header %}
+
+<script src="{% static 'choicejs/choices.min.js' %}"></script>
+
     {% css_categories %}
 <script src="{% url 'jsi18n' %}"></script>
 <script src="/static/admin/js/vendor/jquery/jquery.js"></script>
@@ -23,6 +26,7 @@
 <link href="{% static 'css/django_better_admin_arrayfield.min.css' %}" type="text/css" media="all" rel="stylesheet">
 <script src="{% static 'js/django_better_admin_arrayfield.min.js' %}"></script>
 <script src="{% static 'js/adjust_datetimes.js' %}"></script>
+
 {% endblock %}
 
 {% block fluid %}{% endblock %}
@@ -36,7 +40,7 @@
         <h1>Ajouter un lieu à {{ object.title }} ({{ object.start_day }})</h1>
     </header>
 
-    <p>Si le lieu est disponible dans la liste, veuillez le sélectionner.</p>
+    <p>Si le lieu est disponible dans la liste déroulante, veuillez le sélectionner.</p>
     <form method="post">{% csrf_token %}
         {{ form.media }}
         {{ form.as_p }}
@@ -48,5 +52,10 @@
     <h2>Description du lieu&nbsp;:</h2>
     {% include "agenda_culturel/single-event/event-single-inc.html" with event=object noedit=1 %}
 </article>
+<script>
+    const element = document.querySelector('#id_place');
+    const choices = new Choices(element);
+
+</script>
 
 {% endblock %}

src/agenda_culturel/views.py

@@ -853,7 +853,10 @@ def contactmessages(request):
 
 
 class SimpleSearchEventFilter(django_filters.FilterSet):
-    q = django_filters.CharFilter(method="custom_filter", label=_("Search"))
+    q = django_filters.CharFilter(method="custom_filter", 
+        label=_("Search"),
+        widget=forms.TextInput(attrs={"type": "search"})
+    )
 
     status = django_filters.MultipleChoiceFilter(
         label="Filtrer par status",