Merge 529b604 into 8e9259e

euth/communitydebate/forms.py

@@ -15,6 +15,9 @@ def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.fields['category'].empty_label = '---'
 
+    class Media:
+        js = ('fileupload_formset.js',)
+
 
 class TopicFileUploadForm(forms.ModelForm):
 
@@ -24,3 +27,10 @@ class Meta:
         widgets = {
             'document': widgets.FileUploadWidget()
         }
+
+
+TopicFileUploadFormset = forms.inlineformset_factory(models.Topic,
+                                                     models.TopicFileUpload,
+                                                     TopicFileUploadForm,
+                                                     extra=1, max_num=3,
+                                                     can_delete=True)

euth/communitydebate/models.py

@@ -58,3 +58,6 @@ class TopicFileUpload(base.TimeStampedModel):
         Topic,
         on_delete=models.CASCADE
     )
+
+    def __str__(self):
+        return self.title

euth/communitydebate/static/js/fileupload_formset.js

@@ -0,0 +1,43 @@
+/* global $ django */
+(function (init) {
+  document.addEventListener('DOMContentLoaded', init, false)
+  document.addEventListener('a4.embed.ready', init, false)
+})(function () {
+  // Dynamically add subforms to a formset.
+  var $formsets = $('.js-formset')
+  var PLACEHOLDER = /__prefix__/g
+  var dynamicFormSets = []
+
+  var DynamicFormSet = function ($formset) {
+    this.$formset = $formset
+    this.$formTemplate = this.$formset.find('.js-form-template')
+    this.prefix = this.$formset.data('prefix')
+    this.$totalInput = this.$formset.find('#id_' + this.prefix + '-TOTAL_FORMS')
+    this.total = parseInt(this.$totalInput.val())
+    this.maxNum = parseInt(this.$formset.find('#id_' + this.prefix + '-MAX_NUM_FORMS').val())
+
+    this.$formset.on('click', '.js-add-form', this.addForm.bind(this))
+  }
+
+  DynamicFormSet.prototype.addForm = function () {
+    if (this.total < this.maxNum) {
+      this.total += 1
+      this.$totalInput.val(this.total)
+      var newForm = getNewForm(this.$formTemplate, this.total - 1)
+      $(newForm).insertBefore(this.$formTemplate)
+    } else {
+      var text = django.gettext('Maximum number of upload documents reached.')
+      $('#error-max-num-forms').html('<ul class="errorlist"><li>' + text + '</li></ul>')
+    }
+  }
+
+  function getNewForm ($formTemplate, id) {
+    return $formTemplate.html().replace(PLACEHOLDER, id)
+  }
+
+  $formsets.each(function (i) {
+    dynamicFormSets.push(
+      new DynamicFormSet($formsets.eq(i))
+    )
+  })
+})

euth/communitydebate/templates/euth_communitydebate/includes/inline_fileupload_form.html

@@ -0,0 +1,41 @@
+{% load widget_tweaks i18n thumbnail base_tags form_tags %}
+
+    <div class="card card-body">
+        {% for field in form.visible_fields %}
+        {% if field.name == 'title' or field.name == 'document' %}
+            <div class="form-group {% if field.errors %} has-error{% endif %}">
+                <label>
+                    {{ field.label }}
+                </label>
+
+                {% if field.errors %}
+                    {{ field|add_class:"form-control form-error" }}
+                {% else %}
+                    {{ field|add_class:"form-control"}}
+                {% endif %}
+                {{ field.errors }}
+            </div>
+        {% endif %}
+        {% endfor %}
+
+        {% if form.instance.id %}
+        <div class="row">
+            <div class="col-sm-12 col-md-6">
+                <div class="form-group {% if form.DELETE.errors %} has-error{% endif %}">
+                    <label>
+                        {{ form.DELETE.label }}
+                    </label>
+                    {% if form.DELETE.errors %}
+                        {{ form.DELETE|add_class:"form-control form-error" }}
+                    {% else %}
+                        {{ form.DELETE }}
+                    {% endif %}
+                    {{ form.DELETE.errors }}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        {% for hidden in form.hidden_fields %}
+        {{ hidden }}
+        {% endfor %}
+    </div>

euth/communitydebate/templates/euth_communitydebate/topic_form.html

@@ -1,7 +1,14 @@
 {% extends "base.html" %}
-{% load widget_tweaks i18n thumbnail base_tags form_tags %}
+{% load static widget_tweaks i18n thumbnail base_tags form_tags %}
+
+{% block title %}
+{% if mode == 'create' %}
+{% trans 'Create a new topic' %}
+{% elif mode == 'update' %}
+{% trans 'Update topic' %}
+{% endif %}
+{% endblock %}
 
-{% block title %}{% trans 'Create a new topic' %}{% endblock %}
 {% block content %}
 <div class="container">
     <div class="action-bar">
@@ -37,7 +44,6 @@ <h3 class="sans-serif">
         <form enctype="multipart/form-data" action="{{ request.path }}" method="post">
             {% csrf_token %}
             {{ form.media }}
-            {{ upload_forms.management_form }}
             <div class="form-group">
                 <label class="col-form-label" for="{{ form.name.id_for_label }}">{% trans 'Title of the topic'%}</label>
                 {% if form.name.errors %}
@@ -68,55 +74,33 @@ <h3 class="sans-serif">
                 {{ form.image.errors }}
             </div>
 
-    {% with upload_forms.max_num as fileupload_max %}
-    <h3>{% trans 'Downloads' %}</h3>
-    {% getAllowedFileTypes as allowed_file_types %}
-    <p>{% blocktrans %} You can upload a maximum of {{ fileupload_max }} documents. Allowed formats are {{ allowed_file_types }}. {% endblocktrans %}</p>
-    {% for form in upload_forms %}
-    <div class="card card-body">
-        {% for field in form.visible_fields %}
-        {% if field.name == 'title' or field.name == 'document' %}
-            <div class="form-group {% if field.errors %} has-error{% endif %}">
-                <label>
-                    {{ field.label }}
-                </label>
-                {% if field.errors %}
-                    {{ field|add_class:"form-control form-error" }}
-                {% else %}
-                    {{ field|add_class:"form-control"}}
-                {% endif %}
-                {{ field.errors }}
+            <h3>{% trans 'Downloads' %}</h3>
+         <div class="js-formset category-formset"
+         data-prefix="{{ upload_forms.prefix }}">
+
+            {% with upload_forms.max_num as fileupload_max %}
+            {% getAllowedFileTypes as allowed_file_types %}
+            {{ upload_forms.management_form }}
+            <p>{% blocktrans %} You can upload a maximum of {{ fileupload_max }} documents. Allowed formats are {{ allowed_file_types }}. {% endblocktrans %}</p>
+            {% for form in upload_forms %}
+                {% include 'euth_communitydebate/includes/inline_fileupload_form.html' with form=form %}
+            {% endfor %}
+            {% endwith %}
+            <div class="js-form-template category-formset__template">
+                {% include 'euth_communitydebate/includes/inline_fileupload_form.html' with form=upload_forms.empty_form %}
             </div>
-        {% endif %}
-        {% endfor %}
 
-        {% if form.instance.id %}
-        <div class="row">
-            <div class="col-sm-12 col-md-6">
-                <div class="form-group {% if form.DELETE.errors %} has-error{% endif %}">
-                    <label>
-                        {{ form.DELETE.label }}
-                    </label>
-                    {% if form.DELETE.errors %}
-                        {{ form.DELETE|add_class:"form-control form-error" }}
-                    {% else %}
-                        {{ form.DELETE|add_class:"form-control"}}
-                    {% endif %}
-                    {{ form.DELETE.errors }}
+
+            <div class="category-formset__btn">
+                <button class="btn btn--secondary btn--small btn--full js-add-form" type="button">
+                <i class="fa fa-plus" aria-hidden="true"></i>
+                {% trans 'Upload another document' %}
+                </button>
+                <div id="error-max-num-forms">
                 </div>
             </div>
-        </div>
-        {% endif %}
-        {% if forloop.last and forloop.counter < fileupload_max %}
-        <p class='form-help-text'>{% trans 'You can add additional files after saving the current file.' %}</p>
-        {% endif %}
-        {% for hidden in form.hidden_fields %}
-        {{ hidden }}
-        {% endfor %}
-    </div>
-    {% endfor %}
-    {% endwith %}
 
+        </div>
 
             {% if form.show_categories %}
             <div class="form-group">

euth/communitydebate/views.py

@@ -1,5 +1,4 @@
 from django.contrib import messages
-from django.db import transaction
 from django.shortcuts import render
 from django.urls import reverse
 from django.utils.translation import ugettext as _
@@ -13,7 +12,6 @@
 from . import forms
 from . import models as communitydebate_models
 from .filters import TopicFilterSet
-from .mixins import TopicFormMixin
 
 
 class TopicListView(prj_mixins.ProjectPhaseMixin,
@@ -45,8 +43,7 @@ def get_context_data(self, **kwargs):
         return context
 
 
-class TopicCreateView(PermissionRequiredMixin, generic.CreateView,
-                      TopicFormMixin):
+class TopicCreateView(PermissionRequiredMixin, generic.CreateView):
     model = communitydebate_models.Topic
     form_class = forms.TopicForm
     permission_required = 'euth_communitydebate.propose_topic'
@@ -70,7 +67,7 @@ def get_context_data(self, upload_forms=None, **kwargs):
         context['project'] = self.project
         context['mode'] = 'create'
         if not upload_forms:
-            upload_forms = self.empty_upload_formset()
+            upload_forms = forms.TopicFileUploadFormset()
         context['upload_forms'] = upload_forms
         return context
 
@@ -87,31 +84,24 @@ def get_form_kwargs(self):
     def post(self, request, *args, **kwargs):
         self.object = None
         form = self.get_form()
-        upload_forms = self.filled_upload_formset(request)
-        if form.is_valid() and upload_forms.is_valid():
-            response = self.form_valid(form)
-            self._process_upload_formdata(upload_forms)
-            messages.add_message(request,
-                                 messages.SUCCESS,
-                                 _('Topic '
-                                   'successfully created'))
-
-        else:
-            response = render(request,
-                              self.template_name,
-                              self.get_context_data(upload_forms=upload_forms))
-        return response
-
-    def _process_upload_formdata(self, upload_forms):
-        with transaction.atomic():
-            instances = upload_forms.save(commit=False)
-            for instance in instances:
-                instance.topic = self.object
-                instance.save()
-
-
-class TopicUpdateView(PermissionRequiredMixin, generic.UpdateView,
-                      TopicFormMixin):
+        if form.is_valid():
+            topic = form.save(commit=False)
+            upload_forms = forms.TopicFileUploadFormset(request.POST,
+                                                        request.FILES,
+                                                        instance=topic)
+            if upload_forms.is_valid():
+                response = self.form_valid(form)
+                upload_forms.save()
+                messages.add_message(request,
+                                     messages.SUCCESS,
+                                     _('Topic '
+                                       'successfully created'))
+                return response
+        return render(request, self.template_name,
+                      self.get_context_data(upload_forms=upload_forms))
+
+
+class TopicUpdateView(PermissionRequiredMixin, generic.UpdateView):
     model = communitydebate_models.Topic
     form_class = forms.TopicForm
     permission_required = 'euth_communitydebate.modify_topic'
@@ -130,10 +120,8 @@ def get_context_data(self, upload_forms=None, **kwargs):
         context['project'] = self.object.project
         context['mode'] = 'update'
         if not upload_forms:
-            queryset = \
-                communitydebate_models.TopicFileUpload.\
-                objects.filter(topic=self.get_object())
-            upload_forms = self.update_upload_formset(queryset)
+            upload_forms = forms.TopicFileUploadFormset(
+                instance=self.get_object())
         context['upload_forms'] = upload_forms
         return context
 
@@ -144,10 +132,12 @@ def get_form_kwargs(self):
 
     def post(self, request, *args, **kwargs):
         form = self.get_form()
-        upload_forms = self.filled_upload_formset(request)
+        upload_forms = forms.TopicFileUploadFormset(request.POST,
+                                                    request.FILES,
+                                                    instance=self.object)
         if upload_forms.is_valid() and form.is_valid():
             response = self.form_valid(form)
-            self._process_upload_formdata(upload_forms)
+            upload_forms.save()
             messages.add_message(request,
                                  messages.SUCCESS,
                                  _('Topic successfully '
@@ -158,15 +148,6 @@ def post(self, request, *args, **kwargs):
                               self.get_context_data(upload_forms=upload_forms))
         return response
 
-    def _process_upload_formdata(self, upload_forms):
-        with transaction.atomic():
-            instances = upload_forms.save(commit=False)
-            for obj in upload_forms.deleted_objects:
-                obj.delete()
-            for instance in instances:
-                instance.topic = self.object
-                instance.save()
-
 
 class TopicDeleteView(PermissionRequiredMixin, generic.DeleteView):
     model = communitydebate_models.Topic

webpack.common.js

@@ -86,7 +86,11 @@ module.exports = {
     ],
     select_dropdown_init: [
       'adhocracy4/adhocracy4/categories/assets/select_dropdown_init.js'
-    ]
+    ],
+    fileupload_formset: [
+      './euth/communitydebate/static/js/fileupload_formset.js'
+    ],
+
   },
   output: {
     libraryTarget: 'this',