#1851 adds drag and drop ordering for review form elements

src/review/migrations/0009_review_form_element_order.py

@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.29 on 2020-10-08 12:08
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('review', '0008_reviewform_deleted'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='reviewformelement',
+            options={'ordering': ('order', 'name')},
+        ),
+    ]

src/review/models.py

@@ -253,6 +253,9 @@ class ReviewFormElement(models.Model):
                                                                      'to the author automatically, if false it will'
                                                                      'be hidden to the author by default.')
 
+    class Meta:
+        ordering = ('order', 'name')
+
     def __str__(self):
         return "Element: {0} ({1})".format(self.name, self.kind)
 

src/review/urls.py

@@ -122,6 +122,9 @@
     url(r'^manager/form/(?P<form_id>\d+)/preview/$',
         views.preview_form,
         name='preview_form'),
+    url(r'^manager/form/(?P<form_id>\d+)/order_elements/$',
+        views.order_review_elements,
+        name='order_review_elements'),
     url(r'^manager/form/(?P<form_id>\d+)/element/(?P<element_id>\d+)/$',
         views.edit_review_form,
         name='edit_review_form_element'),

src/review/views.py

@@ -14,9 +14,9 @@
 from django.utils import timezone
 from django.http import Http404
 from django.core.exceptions import PermissionDenied
-from django.contrib.admin.views.decorators import staff_member_required
 from django.conf import settings
 from django.views.decorators.http import require_POST
+from django.http import HttpResponse
 
 from core import models as core_models, files, forms as core_forms
 from events import logic as event_logic
@@ -29,7 +29,7 @@
     section_editor_draft_decisions, article_stage_review_required
 )
 from submission import models as submission_models, forms as submission_forms
-from utils import models as util_models, ithenticate, setting_handler
+from utils import models as util_models, ithenticate, shared, setting_handler
 
 
 @senior_editor_user_required
@@ -2184,6 +2184,30 @@ def preview_form(request, form_id):
     return render(request, template, context)
 
 
+@require_POST
+@senior_editor_user_required
+def order_review_elements(request, form_id):
+    """
+    Reorders Review Form elements.
+    :param request: HttpRequest object
+    :param form_id: ReviewForm PK
+    """
+    form = get_object_or_404(
+        models.ReviewForm,
+        pk=form_id,
+        journal=request.journal,
+    )
+
+    shared.set_order(
+        form.elements.all(),
+        'order',
+        request.POST.getlist('element[]'),
+    )
+
+    return HttpResponse('Ok')
+
+
+
 @reviewer_user_for_assignment_required
 def hypothesis_review(request, assignment_id):
     """

src/templates/admin/elements/review/element_form.html

@@ -15,7 +15,7 @@ <h4>{% if modal %}<i class="fa fa-edit">&nbsp;</i>Edit Element{% else %}<i class
             </form>
         </div>
     </div>
-    <button class="close-button" data-close aria-label="Close reveal" type="button">
+    <a href="{% url 'edit_review_form' edit_form.pk %}" class="close-button" data-close aria-label="Close reveal" type="button">
         <span aria-hidden="true">&times;</span>
-    </button>
+    </a>
 </div>

src/templates/admin/elements/sortable.html

@@ -0,0 +1,17 @@
+{% load static from staticfiles %}
+
+<script src="{% static "admin/js/csrf.js" %}"></script>
+<script type="text/javascript" src="{% static "common/js/jq-ui.min.js" %}"></script>
+<script>
+    $("#sortable").sortable({
+        update: function (event, ui) {
+            var data = $(this).sortable('serialize');
+            $.ajax({
+                data: data,
+                type: 'POST',
+                url: '{{ sort_url }}'
+            });
+        }
+    });
+    $("#sortable").disableSelection();
+</script>

src/templates/admin/review/manager/edit_review_form.html

@@ -22,20 +22,26 @@ <h2>Form's Elements</h2>
                 <a href="#" data-open="element" class="button">Add Element</a>
             </div>
             <div class="content">
-                <ul class="list-group">
+
                 <form method="POST">
                     {% csrf_token %}
-                    {% for element in edit_form.elements.all %}
-                        <li class="list-group-item">
-                            {{ element.name }}
-                            <div class="float-right">
-                                <a class="tiny warning button" href="{% url 'edit_review_form_element' edit_form.pk element.pk %}"><i class="fa fa-edit"></i></a>
-                                <button type="submit" name="delete" value="{{ element.pk }}" class="tiny alert button"><i class="fa fa-trash"></i></button>
-                            </div>
-                        </li>
-                    {% endfor %}
+                    <ul class="list-group" id="sortable">
+                        {% for element in edit_form.elements.all %}
+                            <li class="list-group-item" id="element-{{ element.pk }}">
+                                <span class="fa fa-sort">&nbsp;</span>
+                                {{ element.name }}
+                                <div class="float-right">
+                                    <a class="tiny warning button"
+                                       href="{% url 'edit_review_form_element' edit_form.pk element.pk %}"><i
+                                            class="fa fa-edit"></i></a>
+                                    <button type="submit" name="delete" value="{{ element.pk }}"
+                                            class="tiny alert button"><i class="fa fa-trash"></i></button>
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
                 </form>
-                </ul>
+
             </div>
         </div>
     </div>
@@ -62,5 +68,9 @@ <h2>Edit Form Detail</h2>
 {% block js %}
     {% if modal %}
         {% include "admin/elements/open_modal.html" with target=modal %}
+    {% else %}
+        {% url 'order_review_elements' edit_form.pk as sort_url %}
+        {% include "admin/elements/sortable.html" with sort_url=sort_url %}
     {% endif %}
+
 {% endblock %}

src/utils/shared.py

@@ -71,5 +71,22 @@ def yes_or_no(question):
             return False
 
 
+def set_order(objects, order_attr_name, pk_list):
+    """
+    A generic implementation of model object ordering.
+    :param: objects: a queryset or list of model objects
+    :param: order_attr_name: string the model object's order attr name
+    :param: pk_list: list of object PKs in order
+    """
+    ids = [int(id_) for id_ in pk_list]
+
+    for object_ in objects:
+        order = ids.index(object_.pk)
+        setattr(object_, order_attr_name, order)
+        object_.save()
+
+    return objects
+
+
 def day_month(date):
     return date.strftime("%d-%b")