Re-order module list by dragging

application/assets/scss/performanceplatform-admin/style.scss

@@ -136,6 +136,9 @@ textarea.json-field {
 }
 .list-slim {
   padding-left: 20px;
+  > li {
+    padding-left: 5px;
+  }
 }
 .container-inner {
   position: relative;
@@ -158,3 +161,9 @@ textarea.json-field {
 .sticky-toolbar-inner {
   position: relative;
 }
+
+.sortable-ghost {
+  background-color: #ccc;
+  border-radius: 3px;
+  color: black;
+}

application/controllers/admin/dashboards.py

@@ -5,6 +5,10 @@
     requires_authentication,
     requires_permission,
 )
+from wtforms.fields import (
+    FieldList,
+    FormField
+)
 from flask import (
     flash, redirect, render_template, request,
     session, url_for
@@ -41,6 +45,10 @@ def set_section_module_choices(modules):
         if uuid is not None:
             session['pending_dashboard']['uuid'] = uuid
 
+        if 'modules_order' in request.form:
+            if reorder_modules(request.form, session):
+                return redirect(url_for('dashboard_form', uuid=uuid))
+
         if 'add_section' in request.form:
             url = url_for('dashboard_form',
                           uuid=uuid,
@@ -160,6 +168,7 @@ class InvalidFormFieldError(Exception):
 @requires_permission('dashboard')
 @update_modules_form_and_redirect
 def dashboard_update(admin_client, module_types, form, uuid):
+
     try:
         if not form.validate():
             raise InvalidFormFieldError()
@@ -331,3 +340,12 @@ def get_module_index(field_prefix, form):
             session['pending_dashboard']['modules'] = modules
         return True
     return False
+
+def reorder_modules(request_form, session):
+    new_modules = []
+    new_order = request.form.get('modules_order').split(',')
+    for idx, val in enumerate(new_order):
+        new_modules.append(session['pending_dashboard']['modules'][int(val) - 1])
+
+    session['pending_dashboard']['modules'] = new_modules
+    return True

application/static/javascripts/edit_dashboard.js

@@ -31,8 +31,29 @@
     });
   }
 
+  function getModuleOrder() {
+    var modules = [];
+    $('.modules-list li').each(function() {
+      modules.push($(this).attr('data-index'));
+    });
+    return modules.join(',');
+  }
+
   setQueryParamsFromModuleType();
+
   setupJsonValidation($('.json-field'));
+
   $('.js-sticky').stick_in_parent();
+  Sortable.create($('.modules-list')[0], {
+    ghostClass: 'sortable-ghost',
+    onUpdate: function() {
+      if (!$('.modules-order').length) {
+        $('.frm-dashboard').prepend('<input name="modules_order" class="modules-order" type="hidden" value="" />');
+      }
+    }
+  });
+  $('.frm-dashboard').on('submit', function() {
+    $(this).find('input[type="hidden"].modules-order').val(getModuleOrder());
+  });
 
 }());

application/templates/dashboards/create.html

@@ -4,10 +4,10 @@
 
 {% if uuid %}
   <h1>Update a dashboard</h1>
-  <form method="post" action="{{ url_for('dashboard_update', uuid=uuid) }}" role="form" class="form-horizontal">
+  <form method="post" action="{{ url_for('dashboard_update', uuid=uuid) }}" role="form" class="form-horizontal frm-dashboard">
 {% else %}
   <h1>Create a dashboard</h1>
-  <form method="post" action="{{ url_for('dashboard_create') }}" role="form" class="form-horizontal">
+  <form method="post" action="{{ url_for('dashboard_create') }}" role="form" class="form-horizontal frm-dashboard">
 {% endif %}
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
     {{ form.published() }}
@@ -17,10 +17,11 @@ <h1>Create a dashboard</h1>
     <div class="js-sticky sticky-toolbar">
       <div class="well clearfix sticky-toolbar-inner">
         <a href="#dashboard-details"><strong>{{form.title.data or 'Dashboard'}}</strong></a>
-        <h2><small>Modules</small></h2>
+        <h3><small>Modules</small></h3>
+      <div><small>Drag to re-order</small></div>
         <ol class="list-slim modules-list">
         {% for module in form.modules %}
-          <li>
+          <li data-index="{{ loop.index }}">
           <a href="#module-{{ loop.index }}">{{ module.data['title'] or 'No title' }}</a>
           </li>
         {% endfor %}
@@ -296,5 +297,6 @@ <h2>Modules</h2>
 {% block footer_javascripts %}
     <script src='/static/javascripts/jsonlint/jsonlint.js'></script>
     <script src='/static/javascripts/sticky-kit/sticky-kit.js'></script>
+    <script src='/static/javascripts/sortable/jquery.sortable.min.js'></script>
 <script src='/static/javascripts/edit_dashboard.js'></script>
 {% endblock %}