From 5ea30b56257583c53833913edef6709e08b22d04 Mon Sep 17 00:00:00 2001
From: Maximilian Grundke <maximiliangrundke@googlemail.com>
Date: Fri, 13 Jul 2018 15:42:26 +0200
Subject: [PATCH] Add UI for adding exercises to collection

---
 .../javascripts/exercise_collections.js.erb   | 25 +++++++++++++++++++
 .../stylesheets/exercise_collections.scss     |  4 +++
 .../_add_exercise_modal.slim                  |  8 ++++++
 .../exercise_collections/_form.html.slim      | 13 ++++------
 config/locales/de.yml                         |  3 +++
 config/locales/en.yml                         |  3 +++
 6 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 app/views/exercise_collections/_add_exercise_modal.slim

diff --git a/app/assets/javascripts/exercise_collections.js.erb b/app/assets/javascripts/exercise_collections.js.erb
index b87eec53..cf5b9369 100644
--- a/app/assets/javascripts/exercise_collections.js.erb
+++ b/app/assets/javascripts/exercise_collections.js.erb
@@ -130,6 +130,31 @@ $(function() {
       var list = $("#sortable");
       list.sortable();
       list.disableSelection();
+
+      var addExercisesForm = $('#exercise-selection');
+      var addExercisesButton = $('#add-exercises');
+
+      var collectContainedExercises = function () {
+        return exerciseList.find('tbody > tr').toArray().map(function (item) {return $(item).data('id')});
+      }
+
+      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);
+          }
+        }
+      });
     }
   }
 });
diff --git a/app/assets/stylesheets/exercise_collections.scss b/app/assets/stylesheets/exercise_collections.scss
index 11b6b3a1..98db1ab5 100644
--- a/app/assets/stylesheets/exercise_collections.scss
+++ b/app/assets/stylesheets/exercise_collections.scss
@@ -67,3 +67,7 @@ rect.value-bar {
   padding: 14px;
   text-align: center;
 }
+
+#exercise-list {
+  margin-bottom: 20px;
+}
diff --git a/app/views/exercise_collections/_add_exercise_modal.slim b/app/views/exercise_collections/_add_exercise_modal.slim
new file mode 100644
index 00000000..0faec269
--- /dev/null
+++ b/app/views/exercise_collections/_add_exercise_modal.slim
@@ -0,0 +1,8 @@
+- exercises = Exercise.order(:title)
+
+form#exercise-selection
+  .form-group
+    span.label = t('activerecord.attributes.exercise_collections.exercises')
+    = collection_select({}, :exercise_ids, exercises, :id, :title, {}, {class: 'form-control', multiple: true})
+
+button.btn.btn-primary#add-exercises = t('exercise_collections.form.add_exercises')
diff --git a/app/views/exercise_collections/_form.html.slim b/app/views/exercise_collections/_form.html.slim
index 617a056c..3824ff0e 100644
--- a/app/views/exercise_collections/_form.html.slim
+++ b/app/views/exercise_collections/_form.html.slim
@@ -1,4 +1,3 @@
-- exercises = Exercise.order(:title)
 - users = InternalUser.order(:name)
 
 = form_for(@exercise_collection, multipart: true) do |f|
@@ -12,9 +11,6 @@
   .form-group
     = f.label(t('activerecord.attributes.exercise_collections.user'))
     = f.collection_select(:user_id, users, :id, :name, {}, {class: 'form-control'})
-  .form-group
-    = f.label(t('activerecord.attributes.exercise_collections.exercises'))
-    = f.collection_select(:exercise_ids, exercises, :id, :title, {}, {class: 'form-control', multiple: true})
 
   .table-responsive#exercise-list
     table.table
@@ -22,17 +18,18 @@
         tr
           th
           th = t('activerecord.attributes.exercise_collection_item.exercise')
-          th = t('activerecord.attributes.exercise.user')
           th colspan=2 = t('shared.actions')
       tbody#sortable
         - @exercise_collection.items.order(:position).each do |item|
-          tr
+          tr data-id=item.exercise.id
             td
               span.fa.fa-bars
             td = item.exercise.title
-            td = item.exercise.author
             td = link_to(t('shared.show'), item.exercise)
             td
-              a.remove-exercise href="#" = t('shared.destroy')
+              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')
 
   .actions = render('shared/submit_button', f: f, object: @exercise_collection)
+
+= render('shared/modal', id: 'add-exercise-modal', title: t('.add_exercises'), template: 'exercise_collections/_add_exercise_modal')
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 1dda5a12..d227ebb6 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -784,3 +784,6 @@ de:
       files: "Dateien"
       users: "Benutzer"
       integrations: "Integrationen"
+  exercise_collections:
+    form:
+      add_exercises: "Add Exercises"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 344dc2d5..d7137c34 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -784,3 +784,6 @@ en:
       files: "Files"
       users: "Users"
       integrations: "Integrations"
+  exercise_collections:
+    form:
+      add_exercises: "Aufgaben hinzufügen"