Allow to order exercises in collection by title

app/assets/javascripts/exercise_collections.js.erb

@@ -147,31 +147,47 @@ $(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')});
       }
 
+      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();
+        if (collectionExercises.indexOf(exercise.id) === -1) {
+          // only add exercises that are not already contained in the collection
+          var template = '<tr data-id="' + exercise.id + '">' +
+            '<td><span class="fa fa-bars"></span></td>' +
+            '<td>' + exercise.title + '</td>' +
+            '<td><a href="/exercises/' + exercise.id + '"><%= I18n.t('shared.show') %></td>' +
+            '<td><a class="remove-exercise" href="#"><%= I18n.t('shared.destroy') %></td></tr>';
+          exerciseList.find('tbody').append(template);
+          $('#exercise-list').find('option[value="' + exercise.id + '"]').prop('selected', true);
+        }
+      }
+
       addExercisesButton.on('click', function (e) {
         e.preventDefault();
-        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 + '">' +
-              '<td><span class="fa fa-bars"></span></td>' +
-              '<td>' + exercise.title + '</td>' +
-              '<td><a href="/exercises/' + exercise.id + '"><%= I18n.t('shared.show') %></td>' +
-              '<td><a class="remove-exercise" href="#"><%= I18n.t('shared.destroy') %></td></tr>';
-            exerciseList.find('tbody').append(template);
-            $('#exercise-list').find('option[value="' + exercise.id + '"]').prop('selected', true);
-          }
+          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"