From 24c5e0e88dd7f09bbb2d99c6353c66f4dbdb3c61 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Mon, 16 Jul 2018 10:38:34 +0200
Subject: [PATCH] Order exercises in request body according to manual sort
 order in UI

---
 .../javascripts/exercise_collections.js.erb      | 16 +++++++++++++++-
 app/views/exercise_collections/_form.html.slim   |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/exercise_collections.js.erb b/app/assets/javascripts/exercise_collections.js.erb
index 97727a12..c7de9db6 100644
--- a/app/assets/javascripts/exercise_collections.js.erb
+++ b/app/assets/javascripts/exercise_collections.js.erb
@@ -127,8 +127,22 @@ $(function() {
         .attr("class", "line maximum-working-time")
         .attr("d", maxWorkingTime);
     } else if (exerciseList.isPresent()) {
+      var exerciseSelect = $('#exercise-select');
       var list = $("#sortable");
-      list.sortable();
+
+      var updateExerciseList = function () {
+        // remove all options from the hidden select and add all selected exercises in the new order
+        exerciseSelect.find('option').remove();
+        var exerciseIdsInSortedOrder = list.sortable('toArray', {attribute: 'data-id'});
+        for (var i = 0; i < exerciseIdsInSortedOrder.length; i += 1) {
+          exerciseSelect.append('<option value="' + exerciseIdsInSortedOrder[i] + '" selected></option>')
+        }
+      }
+
+      list.sortable({
+        items: 'tr',
+        update: updateExerciseList
+      });
       list.disableSelection();
 
       var addExercisesForm = $('#exercise-selection');
diff --git a/app/views/exercise_collections/_form.html.slim b/app/views/exercise_collections/_form.html.slim
index 791edc3a..2035fe85 100644
--- a/app/views/exercise_collections/_form.html.slim
+++ b/app/views/exercise_collections/_form.html.slim
@@ -28,7 +28,7 @@
               a.remove-exercise href='#' = t('shared.destroy')
     button.btn.btn-primary type='button' data-toggle='modal' data-target='#add-exercise-modal' = t('exercise_collections.form.add_exercises')
     .hidden
-      = f.collection_select(:exercise_ids, Exercise.all, :id, :title, {}, {class: 'form-control', multiple: true})
+      = f.collection_select(:exercise_ids, Exercise.all, :id, :title, {}, {id: 'exercise-select', class: 'form-control', multiple: true})
 
   .actions = render('shared/submit_button', f: f, object: @exercise_collection)