Improve upload form usability: clearer date and tag fields

photo21/settings.py

@@ -67,6 +67,7 @@ INSTALLED_APPS = [
     "django.contrib.sites",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "django_select2",
     "allauth",
     "allauth.account",
     "allauth.socialaccount",

photo21/urls.py

@@ -20,6 +20,7 @@ if settings.DEBUG:
 from .views import IndexView, MediaAccess
 
 urlpatterns = [
+    path("select2/", include("django_select2.urls")),
     path("", IndexView.as_view(), name="index"),
     path("", include("photologue.urls", namespace="photologue")),
     path("accounts/", include("allauth.urls")),

photologue/forms.py

@@ -9,6 +9,7 @@ from crispy_forms.layout import Div, Layout, Submit
 from django import forms
 from django.utils.text import slugify
 from django.utils.translation import gettext_lazy as _
+from django_select2.forms import ModelSelect2MultipleWidget
 
 from .models import Gallery, Tag
 
@@ -82,11 +83,13 @@ class UploadForm(forms.Form):
         label=_("New gallery event start date"),
         initial=datetime.date.today,
         required=False,
+        widget=forms.DateInput(attrs={"type":"date"})
     )
     new_gallery_date_end = forms.DateField(
         label=_("New gallery event end date"),
         initial=datetime.date.today,
         required=False,
+        widget=forms.DateInput(attrs={"type":"date"})
     )
     new_gallery_description = forms.CharField(
         widget=forms.Textarea(attrs={"rows": 4}),
@@ -97,9 +100,14 @@ class UploadForm(forms.Form):
         Tag.objects.all(),
         label=_("New gallery tags"),
         required=False,
-        help_text=_(
+        widget=ModelSelect2MultipleWidget(
-            'Hold down "Control", or "Command" on a Mac, to select more than one.'
+            model=Tag,
-        ),
+            search_fields=['name__icontains'],
+            attrs = {
+                'data-minimum-input-length': 0,
+                'data-placeholder': 'Select tags',
+            }
+        )
     )
 
     def __init__(self, *args, **kwargs):

photologue/templates/photologue/upload.html

@@ -8,7 +8,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% block title %}{% trans "Upload" %}{% endblock %}
 
 {% block extrajs %}
-<script src="{% static 'upload.js' %}"></script>
+<script src="{% url 'javascript-catalog' %}"></script>
+<script src="{% static 'jquery-3.6.0.min.js' %}"></script>  {# jQuery first #}
+{{ form.media }}  {# Select2 JS/CSS comes after jQuery #}
+<script src="{% static 'upload.js' %}"></script>  {# your custom JS last #}
 {% endblock %}
 
 {% block content %}

photologue/urls.py

@@ -2,7 +2,8 @@
 # Copyright (C) 2022  Amicale des élèves de l'ENS Paris-Saclay
 # SPDX-License-Identifier: GPL-3.0-or-later
 
-from django.urls import path, re_path
+from django.urls import path, re_path, include
+
 
 from .views import (
     GalleryArchiveIndexView,
@@ -21,6 +22,7 @@ from .views import (
 
 app_name = "photologue"
 urlpatterns = [
+    path("select2/", include("django_select2.urls")),
     path("tag/<slug:slug>/", TagDetail.as_view(), name="tag-detail"),
     path("gallery/", GalleryArchiveIndexView.as_view(), name="pl-gallery-archive"),
     re_path(

requirements.txt

@@ -1,6 +1,7 @@
 django-allauth>=0.44
 django-crispy-forms~=1.7
 Django>=2.2.20
+django-select2>=4.8
 ExifRead>=2.1.2
 Pillow>=6.0.0
-django-debug-toolbar>=3.2.0
+django-debug-toolbar>=3.2.0