Introduce a "Save" button for the admin schedule

The changes were saved after you drop an event, and now it only saves the schedule when you're done with the changes and click the "Save" button.

app/assets/javascripts/osem-schedule.js

@@ -1,10 +1,13 @@
 var url; // Should be initialize in Schedule.initialize
 var schedule_id; // Should be initialize in Schedule.initialize
 
-function showError(error){
-  // Delete other error messages before showing the new one
+var events_to_save = {};
+var events_to_remove = {};
+
+function showMessage(message, type){
+  // Delete other messages before showing the new one
   $('.unobtrusive-flash-container').empty();
-  UnobtrusiveFlash.showFlashMessage(error, {type: 'error'});
+  UnobtrusiveFlash.showFlashMessage(message, {type: type});
 }
 
 var Schedule = {
@@ -14,66 +17,99 @@ var Schedule = {
   },
   remove: function(element) {
     var e =  $("#" + element);
-    var event_schedule_id = e.attr("event_schedule_id");
-    if(event_schedule_id != null){
-      var my_url = url + '/' + event_schedule_id;
-      var success_callback = function(data) {
-        console.log(data);
-        e.attr("event_schedule_id", null);
-        e.appendTo($(".unscheduled-events"));
-        e.find(".schedule-event-delete-button").hide();
+    var event_id = e.attr("event_id");
+    if(e.attr("event_schedule_id")!= null){
+      events_to_remove[event_id] = {
+        event: e,
+        previous_parent: e.parent()
+      };
+    }
+    delete events_to_save[event_id];
+    var unscheduled = $(".unscheduled-events");
+    e.appendTo(unscheduled);
+    e.find(".schedule-event-delete-button").hide();
+  },
+  add: function (previous_parent, new_parent, event) {
+    var params = {
+      previous_parent: previous_parent,
+      new_parent: new_parent,
+      event: event
+    }
+    var event_id = event.attr("event_id");
+    events_to_save[event_id] = params;
+    delete events_to_remove[event_id];
+    event.appendTo(new_parent);
+    $("#event-" + event_id).find(".schedule-event-delete-button").show();
+  },
+  saveEvents: function () {
+    var errors = '';
+    for (var key in events_to_save){
+      var event = events_to_save[key]['event'];
+      var event_schedule_id = event.attr("event_schedule_id");
+      var new_parent = events_to_save[key]['new_parent'];
+      var my_url = url;
+      var type = 'POST';
+      var params = { event_schedule: {
+        room_id: new_parent.attr("room_id"),
+        start_time: (new_parent.attr("date") + ' ' + new_parent.attr("hour"))
+      }};
+      if(event_schedule_id != null){
+        type = 'PUT';
+        my_url += ('/' + event_schedule_id);
       }
-      var error_callback = function(data) {
+      else{
+        params['event_schedule']['event_id'] = event.attr("event_id");
+        params['event_schedule']['schedule_id'] = schedule_id;
+      }
+      var success_callback_save = function(data) {
         console.log(data);
-        showError($.parseJSON(data.responseText).errors);
+        event.attr("event_schedule_id", data.event_schedule_id);
+        }
+      var error_callback_save = function(data) {
+        console.log(data);
+        errors += $.parseJSON(data.responseText).errors;
+        event.appendTo(events_to_save[key]['previous_parent']);
+        if(parent.hasClass('unscheduled-events'))
+          event.find(".schedule-event-delete-button").hide();
       }
       $.ajax({
+        async: false,
         url: my_url,
-        type: 'DELETE',
-        success: success_callback,
-        error: error_callback,
+        type: type,
+        data: params,
+        success: success_callback_save,
+        error: error_callback_save,
         dataType : 'json'
       });
     }
-    else{
-      showError("The event couldn't be unscheduled");
-    }
-  },
-  add: function (previous_parent, new_parent, event) {
-    event.appendTo(new_parent);
-    var event_schedule_id = event.attr("event_schedule_id");
-    var my_url = url;
-    var type = 'POST';
-    var params = { event_schedule: {
-      room_id: new_parent.attr("room_id"),
-      start_time: (new_parent.attr("date") + ' ' + new_parent.attr("hour"))
-    }};
-    if(event_schedule_id != null){
-      type = 'PUT';
-      my_url += ('/' + event_schedule_id);
-    }
-    else{
-      params['event_schedule']['event_id'] = event.attr("event_id");
-      params['event_schedule']['schedule_id'] = schedule_id;
-    }
-    var success_callback = function(data) {
-      console.log(data);
-      event.attr("event_schedule_id", data.event_schedule_id);
-      event.find(".schedule-event-delete-button").show();
+    for (var key in events_to_remove){
+      var event = events_to_remove[key]['event'];
+      var success_callback_remove = function(data) {
+        console.log(data);
+        event.attr("event_schedule_id", null);
       }
-    var error_callback = function(data) {
-      console.log(data);
-      showError($.parseJSON(data.responseText).errors);
-      event.appendTo(previous_parent);
+      var error_callback_remove = function(data) {
+        console.log(data);
+        errors += $.parseJSON(data.responseText).errors;
+        events_to_remove[key]['previous_parent'].append(event);
+        if(!parent.hasClass('unscheduled-events'))
+          event.find(".schedule-event-delete-button").show();
+      }
+      $.ajax({
+        async: false,
+        url: url + '/' + event.attr("event_schedule_id"),
+        type: 'DELETE',
+        success: success_callback_remove,
+        error: error_callback_remove,
+        dataType : 'json'
+      });
     }
-    $.ajax({
-      url: my_url,
-      type: type,
-      data: params,
-      success: success_callback,
-      error: error_callback,
-      dataType : 'json'
-    });
+    events_to_remove = {};
+    events_to_save = {};
+    if(errors == '')
+      showMessage('Schedule correctly saved', 'notice');
+    else
+      showMessage(errors, 'error');
   }
 };
 
@@ -115,6 +151,10 @@ $(document).ready( function() {
       $(this).css("background-color", "#ffffff");
       }
   });
+
+  $('.schedule-save').on('click', function(e) {
+    Schedule.saveEvents();
+  });
 });
 
 function eventClicked(e, element){

app/assets/javascripts/osem-switch.js

@@ -23,7 +23,7 @@ $(function () {
     }
 
     var callback = function(data) {
-      showError($.parseJSON(data.responseText).errors);
+      showMessage($.parseJSON(data.responseText).errors, 'error');
     }
     $.ajax({
       url: url,

app/controllers/admin/event_schedules_controller.rb

@@ -6,7 +6,7 @@ module Admin
       if @event_schedule.save
         render json: { event_schedule_id: @event_schedule.id }
       else
-        render json: { errors: "The event couldn't be scheduled. #{@event_schedule.errors.full_messages.join('. ')}" }, status: 422
+        render json: { errors: parse_errors(@event_schedule) }, status: 422
       end
     end
 
@@ -14,7 +14,7 @@ module Admin
       if @event_schedule.update(event_schedule_params)
         render json: { event_schedule_id: @event_schedule.id }
       else
-        render json: { errors: "The event couldn't be scheduled. #{@event_schedule.errors.full_messages.join('. ')}" }, status: 422
+        render json: { errors: parse_errors(@event_schedule) }, status: 422
       end
     end
 
@@ -22,7 +22,7 @@ module Admin
       if @event_schedule.destroy
         render json: {}
       else
-        render json: { errors: "The event couldn't be unscheduled. #{@event_schedule.errors.full_messages.join('. ')}" }, status: 422
+        render json: { errors: parse_errors(@event_schedule) }, status: 422
       end
     end
 
@@ -31,5 +31,11 @@ module Admin
     def event_schedule_params
       params.require(:event_schedule).permit(:schedule_id, :event_id, :room_id, :start_time)
     end
+
+    def parse_errors(event_schedule)
+      title = event_schedule.event.try(:title).present? ? event_schedule.event.title : 'The event'
+      errors = event_schedule.errors.full_messages.present? ? " (#{event_schedule.errors.full_messages.join('. ')})" : ''
+      "#{title} couldn't be scheduled#{errors}. "
+    end
   end
 end

app/views/admin/schedules/show.html.haml

@@ -17,6 +17,8 @@
                                           off_color: 'warning',
                                           on_text: 'Yes',
                                           off_text: 'No' }
+      %button.btn.btn-success.schedule-save
+        Save
       .h4
         Unscheduled events
       .unscheduled-events