Allow to order exercises in collection by title

app/assets/javascripts/exercise_collections.js.erb

@@ -147,17 +147,26 @@ $(function() {
 
       var addExercisesForm = $('#exercise-selection');
       var addExercisesButton = $('#add-exercises');
+      var removeExerciseButtons = $('.remove-exercise');
+      var sortButton = $('#sort-button');
 
       var collectContainedExercises = function () {
         return exerciseList.find('tbody > tr').toArray().map(function (item) {return $(item).data('id')});
       }
 
-      addExercisesButton.on('click', function (e) {
-        e.preventDefault();
+      var sortExercises = function() {
+        var listitems = $('tr', list);
+        listitems.sort(function (a, b) {
+          return ($(a).find('td:nth-child(2)').text().toUpperCase() > $(b).find('td:nth-child(2)').text().toUpperCase()) ? 1 : -1;
+        });
+        list.append(listitems);
+        list.sortable('refresh');
+        updateExerciseList();
+      }
+
+      var addExercise = function (id, title) {
+        var exercise = {id: id, title: title}
         var collectionExercises = collectContainedExercises();
-        var selectedExercises = addExercisesForm.find('select')[0].selectedOptions;
-        for (var i = 0; i < selectedExercises.length; i++) {
-          var exercise = {id: selectedExercises[i].value, title: selectedExercises[i].label}
         if (collectionExercises.indexOf(exercise.id) === -1) {
           // only add exercises that are not already contained in the collection
           var template = '<tr data-id="' + exercise.id + '">' +
@@ -169,9 +178,16 @@ $(function() {
           $('#exercise-list').find('option[value="' + exercise.id + '"]').prop('selected', true);
         }
       }
+
+      addExercisesButton.on('click', function (e) {
+        e.preventDefault();
+        var selectedExercises = addExercisesForm.find('select')[0].selectedOptions;
+        for (var i = 0; i < selectedExercises.length; i++) {
+          addExercise(selectedExercises[i].value, selectedExercises[i].label);
+        }
       });
 
-      $('.remove-exercise').on('click', function (e) {
+      removeExerciseButtons.on('click', function (e) {
         e.preventDefault();
 
         var row = $(this).parent().parent();
@@ -179,6 +195,11 @@ $(function() {
         $('#exercise-list').find('option[value="' + exerciseId + '"]').prop('selected', false);
         row.remove()
       });
+
+      sortButton.on('click', function (e) {
+        e.preventDefault();
+        sortExercises();
+      });
     }
   }
 });

app/assets/stylesheets/exercise_collections.scss

@@ -75,3 +75,7 @@ rect.value-bar {
 #add-exercise-list {
   min-height: 450px;
 }
+
+button {
+  margin-right: 10px;
+}

app/views/exercise_collections/_form.html.slim

@@ -27,6 +27,7 @@
             td
               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')
+    button.btn.btn-secondary#sort-button type='button' = t('exercise_collections.form.sort_by_title')
     .hidden
       = f.collection_select(:exercise_ids, Exercise.all, :id, :title, {}, {id: 'exercise-select', class: 'form-control', multiple: true})
 

config/locales/de.yml

@@ -787,3 +787,4 @@ de:
   exercise_collections:
     form:
       add_exercises: "Aufgaben hinzufügen"
+      sort_by_title: "Nach Titel sortieren"

config/locales/en.yml

@@ -787,3 +787,4 @@ en:
   exercise_collections:
     form:
       add_exercises: "Add exercises"
+      sort_by_title: "Sort by title"