From a2e06185ad57ca0196a3cc7d4ef192d0e09c443e Mon Sep 17 00:00:00 2001 From: Alexandre Iooss <erdnaxe@crans.org> Date: Sat, 23 Oct 2021 17:31:37 +0200 Subject: [PATCH 1/3] Add tags to upload form --- photo21/locale/fr/LC_MESSAGES/django.po | 40 ++++++++++------ photologue_custom/forms.py | 47 +++++++++++++++++-- .../templates/photologue/upload.html | 3 +- 3 files changed, 69 insertions(+), 21 deletions(-) diff --git a/photo21/locale/fr/LC_MESSAGES/django.po b/photo21/locale/fr/LC_MESSAGES/django.po index 18d2014..575683d 100644 --- a/photo21/locale/fr/LC_MESSAGES/django.po +++ b/photo21/locale/fr/LC_MESSAGES/django.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2021-10-22 16:05+0000\n" +"POT-Creation-Date: 2021-10-23 15:29+0000\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <LL@li.org>\n" @@ -42,19 +42,19 @@ msgstr "" msgid "hash" msgstr "" -#: photo21/settings.py:163 +#: photo21/settings.py:162 msgid "German" msgstr "" -#: photo21/settings.py:164 +#: photo21/settings.py:163 msgid "English" msgstr "" -#: photo21/settings.py:165 +#: photo21/settings.py:164 msgid "Spanish" msgstr "" -#: photo21/settings.py:166 +#: photo21/settings.py:165 msgid "French" msgstr "" @@ -229,10 +229,9 @@ msgstr "" msgid "Galleries" msgstr "Galeries" -#: photo21/templates/base.html:41 +#: photo21/templates/base.html:41 photologue_custom/forms.py:76 #: photologue_custom/templates/photologue/upload.html:6 #: photologue_custom/templates/photologue/upload.html:54 -#: photologue_custom/templates/photologue/upload.html:65 msgid "Upload" msgstr "Téléversement" @@ -279,33 +278,46 @@ msgstr "" msgid "owner" msgstr "propriétaire" -#: photologue_custom/forms.py:22 +#: photologue_custom/forms.py:34 msgid "Gallery" msgstr "Galerie" -#: photologue_custom/forms.py:24 +#: photologue_custom/forms.py:36 +msgid "-- Create a new gallery --" +msgstr "-- Créer une nouvelle galerie --" + +#: photologue_custom/forms.py:37 msgid "" "Select a gallery to add these images to. Leave this empty to create a new " "gallery from the supplied title." msgstr "" -#: photologue_custom/forms.py:28 +#: photologue_custom/forms.py:41 msgid "New gallery title" msgstr "Titre de la nouvelle galerie" -#: photologue_custom/forms.py:33 +#: photologue_custom/forms.py:46 msgid "New gallery event start date" msgstr "Date de début de l'évènement de la nouvelle galerie" -#: photologue_custom/forms.py:38 +#: photologue_custom/forms.py:51 msgid "New gallery event end date" msgstr "Date de fin de l'évènement de la nouvelle galerie" -#: photologue_custom/forms.py:46 +#: photologue_custom/forms.py:57 +msgid "New gallery tags" +msgstr "Tags de la nouvelle galerie" + +#: photologue_custom/forms.py:59 +msgid "" +"Hold down \"Control\", or \"Command\" on a Mac, to select more than one." +msgstr "" + +#: photologue_custom/forms.py:82 msgid "A gallery with that title already exists." msgstr "" -#: photologue_custom/forms.py:55 +#: photologue_custom/forms.py:91 msgid "Select an existing gallery, or enter a title for a new gallery." msgstr "" diff --git a/photologue_custom/forms.py b/photologue_custom/forms.py index 2d823f3..c343d98 100644 --- a/photologue_custom/forms.py +++ b/photologue_custom/forms.py @@ -1,13 +1,25 @@ import datetime +from crispy_forms.helper import FormHelper +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 photologue.models import Gallery +from taggit.models import Tag from .models import GalleryExtended +class GalleryChoiceField(forms.ModelChoiceField): + def label_from_instance(self, obj): + """Show gallery event date.""" + if hasattr(obj, 'extended'): + return f"{ obj.title } ({obj.extended.date_start})" + else: + return obj.title + + class UploadForm(forms.Form): file_field = forms.FileField( label="", @@ -17,10 +29,11 @@ class UploadForm(forms.Form): 'class': 'mb-3', }), ) - gallery = forms.ModelChoiceField( + gallery = GalleryChoiceField( Gallery.objects.all(), label=_('Gallery'), required=False, + empty_label=_('-- Create a new gallery --'), help_text=_('Select a gallery to add these images to. Leave this empty to ' 'create a new gallery from the supplied title.') ) @@ -29,16 +42,39 @@ class UploadForm(forms.Form): max_length=250, required=False, ) - date_start = forms.DateField( + new_gallery_date_start = forms.DateField( label=_('New gallery event start date'), initial=datetime.date.today, required=False, ) - date_end = forms.DateField( + new_gallery_date_end = forms.DateField( label=_('New gallery event end date'), initial=datetime.date.today, required=False, ) + new_gallery_tags = forms.ModelMultipleChoiceField( + Tag.objects.all(), + label=_('New gallery tags'), + required=False, + help_text=_('Hold down "Control", or "Command" on a Mac, to select more than one.') + ) + + def __init__(self, *args, **kwargs): + super().__init__(*args, **kwargs) + self.helper = FormHelper() + self.helper.use_custom_control = False + self.helper.layout = Layout( + 'file_field', + 'gallery', + 'new_gallery_title', + Div( + Div('new_gallery_date_start', css_class='col'), + Div('new_gallery_date_end', css_class='col'), + css_class='row' + ), + 'new_gallery_tags', + Submit('submit', _('Upload'), css_class='btn btn-success mt-2') + ) def clean_new_gallery_title(self): title = self.cleaned_data['new_gallery_title'] @@ -67,7 +103,8 @@ class UploadForm(forms.Form): gallery = Gallery.objects.create(title=title, slug=slugify(title)) GalleryExtended.objects.create( gallery=gallery, - date_start=self.cleaned_data['date_start'], - date_end=self.cleaned_data['date_end'], + tags=self.cleaned_data['new_gallery_tags'], + date_start=self.cleaned_data['new_gallery_date_start'], + date_end=self.cleaned_data['new_gallery_date_end'], ) return gallery diff --git a/photologue_custom/templates/photologue/upload.html b/photologue_custom/templates/photologue/upload.html index fbe1ee0..ec64b72 100644 --- a/photologue_custom/templates/photologue/upload.html +++ b/photologue_custom/templates/photologue/upload.html @@ -58,11 +58,10 @@ dropZone.ondragleave = function() { <div class="upload-drop-zone" id="drop-zone"> {% trans "Drag and drop photos here" %} </div> - {{ form|crispy }} + {% crispy form %} <p class="mt-3"> {% trans "Owner will be" %} <code>{{ request.user.get_full_name }} ({{ request.user.username}})</code>. </p> - <button type="submit" class="btn btn-success">{% trans "Upload" %}</button> </form> </div> </div> -- GitLab From 18d64c4fe95b5a8f65547737cd1fa33578e8dd41 Mon Sep 17 00:00:00 2001 From: Alexandre Iooss <erdnaxe@crans.org> Date: Sat, 23 Oct 2021 17:43:21 +0200 Subject: [PATCH 2/3] Disable fields when choosing existing gallery --- photologue_custom/templates/photologue/upload.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/photologue_custom/templates/photologue/upload.html b/photologue_custom/templates/photologue/upload.html index ec64b72..e4a5c6d 100644 --- a/photologue_custom/templates/photologue/upload.html +++ b/photologue_custom/templates/photologue/upload.html @@ -28,6 +28,7 @@ SPDX-License-Identifier: GPL-3.0-or-later {% block extrajs %} <script> +// When user drags files, register them in the file field const dropZone = document.getElementById('drop-zone'); const uploadInput = document.getElementById('id_file_field'); @@ -47,6 +48,18 @@ dropZone.ondragleave = function() { this.className = 'upload-drop-zone'; return false; } + +// When user selects an existing gallery, disable new gallery fields +const gallerySelect = document.getElementById('id_gallery') +gallerySelectUpdate = () => { + const useGallery = (gallerySelect.value !== ""); + document.getElementById('id_new_gallery_title').disabled = useGallery; + document.getElementById('id_new_gallery_date_start').disabled = useGallery; + document.getElementById('id_new_gallery_date_end').disabled = useGallery; + document.getElementById('id_new_gallery_tags').disabled = useGallery; +} +gallerySelect.addEventListener('change', gallerySelectUpdate); +gallerySelectUpdate(); </script> {% endblock %} -- GitLab From 3d36aded1ff843af1d8af5ac9bcbe3e171af14de Mon Sep 17 00:00:00 2001 From: Alexandre Iooss <erdnaxe@crans.org> Date: Sat, 23 Oct 2021 17:48:30 +0200 Subject: [PATCH 3/3] Show message during upload --- photologue_custom/templates/photologue/upload.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/photologue_custom/templates/photologue/upload.html b/photologue_custom/templates/photologue/upload.html index e4a5c6d..d2e0047 100644 --- a/photologue_custom/templates/photologue/upload.html +++ b/photologue_custom/templates/photologue/upload.html @@ -60,6 +60,12 @@ gallerySelectUpdate = () => { } gallerySelect.addEventListener('change', gallerySelectUpdate); gallerySelectUpdate(); + +// On submit, show a message to make user wait +document.getElementById('upload_form').addEventListener('submit', (e) => { + document.getElementById('submit-id-submit').disabled = true; + document.getElementById('submit-id-submit').value = "Please be patient"; +}) </script> {% endblock %} @@ -67,7 +73,7 @@ gallerySelectUpdate(); <h1>{% trans "Upload" %}</h1> <div class="card"> <div class="card-body"> - <form method="post" enctype="multipart/form-data">{% csrf_token %} + <form method="post" enctype="multipart/form-data" id="upload_form">{% csrf_token %} <div class="upload-drop-zone" id="drop-zone"> {% trans "Drag and drop photos here" %} </div> -- GitLab