Add modal for moving task on canvas

app/assets/javascripts/projects/canvas.js

@@ -162,6 +162,7 @@ function initializeEdit() {
   var canEditModuleGroups = _.isEqual($("#update-canvas").data("can-edit-module-groups"), "yes");
   var canCreateModules = _.isEqual($("#update-canvas").data("can-create-modules"), "yes");
   var canCloneModules = _.isEqual($("#update-canvas").data("can-clone-modules"), "yes");
+  var canMoveModules = _.isEqual($("#update-canvas").data("can-move-modules"), "yes");
   var canDeleteModules = _.isEqual($("#update-canvas").data("can-delete-modules"), "yes");
   var canDragModules = _.isEqual($("#update-canvas").data("can-reposition-modules"), "yes");
   var canEditConnections = _.isEqual($("#update-canvas").data("can-edit-connections"), "yes");
@@ -223,6 +224,10 @@ function initializeEdit() {
       GRID_DIST_EDIT_X,
       GRID_DIST_EDIT_Y);
   }
+  if (canMoveModules) {
+    initMoveModules();
+    $(".move-module").on("click touchstart", moveModuleHandler);
+  }
   if (canDeleteModules) {
     bindDeleteModuleAction();
     bindDeleteModuleGroupAction();
@@ -1823,6 +1828,82 @@ editModuleGroupHandler = function(ev) {
   return false;
 };
 
+function initMoveModules() {
+  function handleMoveConfirm(modal) {
+    var moduleId = modal.attr("data-module-id");
+    var moduleEl = $("#" + moduleId);
+    var input = modal.find('.selectpicker');
+    var moveToExperimentId = input.val();
+
+    // Add this information to form
+    var formMoveInput = $("#update-canvas form input#move");
+
+    // Actually rename an existing module
+    var moveVal = JSON.parse(formMoveInput.attr("value"));
+    moveVal[moduleEl.attr("id")] = moveToExperimentId;
+    formMoveInput.attr("value", JSON.stringify(moveVal));
+
+    // Hide modal
+    modal.modal("hide");
+  }
+
+  $("#modal-move-module")
+  .on("show.bs.modal", function (event) {
+    var modal = $(this);
+    var moduleId = modal.attr("data-module-id");
+    var moduleEl = $("#" + moduleId);
+    var input = modal.find('.selectpicker');
+
+    // Bind on enter button
+    input.keydown(function(ev) {
+      if (ev.keyCode == 13) {
+        // "Submit" modal
+        handleMoveConfirm(modal);
+
+        // In any case, prevent form submission
+        ev.preventDefault();
+        ev.stopPropagation();
+        return false;
+      }
+    });
+  })
+  .on("shown.bs.modal", function(event) {
+    // Focus the text element
+    $(this).find(".selectpicker").focus();
+  })
+  .on("hide.bs.modal", function (event) {
+    // When hiding modal, re-enable events
+    toggleCanvasEvents(true);
+  });
+
+  // Bind the confirm button on modal
+  $("#modal-move-module").find("button[data-action='confirm']").on("click", function(event) {
+    var modal = $(this).closest(".modal");
+    handleMoveConfirm(modal);
+  });
+}
+
+/**
+ * Handler when trying to move a specific module.
+ */
+moveModuleHandler = function(ev) {
+  var modal = $("#modal-move-module");
+  var moduleEl = $(this).closest(".module");
+
+  // Set modal's module id
+  modal.attr("data-module-id", moduleEl.attr("id"));
+
+  // Disable dragging & zooming events on canvas temporarily
+  toggleCanvasEvents(false);
+
+  // Show modal
+  modal.modal("show");
+
+  ev.preventDefault();
+  ev.stopPropagation();
+  return false;
+};
+
 /**
  * Bind the delete module buttons actions.
  */

app/controllers/canvas_controller.rb

@@ -31,6 +31,7 @@ class CanvasController < ApplicationController
   def update
     error = false
 
+
     # Make sure that remove parameter is valid
     to_archive = []
     if can_archive_modules(@experiment) and

app/helpers/permission_helper.rb

@@ -395,6 +395,10 @@ module PermissionHelper
     is_user_or_higher_of_project(experiment.project)
   end
 
+  def can_move_modules(experiment)
+    is_user_or_higher_of_project(experiment.project)
+  end
+
   def can_archive_modules(experiment)
     is_user_or_higher_of_project(experiment.project)
   end

app/views/canvas/_edit.html.erb

@@ -3,6 +3,7 @@
   data-can-edit-modules="<%= can_edit_modules(@experiment) ? "yes" : "no" %>"
   data-can-edit-module-groups="<%= can_edit_module_groups(@experiment) ? "yes" : "no" %>"
   data-can-clone-modules="<%= can_clone_modules(@experiment) ? "yes" : "no" %>"
+  data-can-move-modules="<%= can_move_modules(@experiment) ? "yes" : "no" %>"
   data-can-delete-modules="<%= can_archive_modules(@experiment) ? "yes" : "no" %>"
   data-can-reposition-modules="<%= can_reposition_modules(@experiment) ? "yes" : "no" %>"
   data-can-edit-connections="<%= can_edit_connections(@experiment) ? "yes" : "no" %>"
@@ -37,6 +38,7 @@
     <%= hidden_field_tag 'add', '' %>
     <%= hidden_field_tag 'add-names', '' %>
     <%= hidden_field_tag 'rename', '{}' %>
+    <%= hidden_field_tag 'move', '{}' %>
     <%= hidden_field_tag 'cloned', '' %>
     <%= hidden_field_tag 'remove', '' %>
     <%= hidden_field_tag 'module-groups', '{}' %>
@@ -82,6 +84,9 @@
 <% if can_edit_module_groups(@experiment) %>
   <%= render partial: "canvas/edit/modal/edit_module_group", locals: {experiment: @experiment } %>
 <% end %>
+<% if can_move_modules(@experiment) %>
+  <%= render partial: "canvas/edit/modal/move_module", locals: {experiment: @experiment } %>
+<% end %>
 <% if can_archive_modules(@experiment) %>
   <%= render partial: "canvas/edit/modal/delete_module", locals: {experiment: @experiment} %>
   <%=  render partial: "canvas/edit/modal/delete_module_group", locals: {experiment: @experiment} %>

app/views/canvas/edit/_my_module.html.erb

@@ -39,6 +39,11 @@
             <a class ="clone-module-group" href="" data-module-id="<%= my_module.id %>"><%=t "experiments.canvas.edit.clone_module_group" %></a>
           </li>
         <% end %>
+        <% if can_move_modules(my_module.experiment) %>
+          <li>
+            <a class="move-module" href="" data-module-id="<%= my_module.id %>"><%=t "experiments.canvas.edit.move_module" %></a>
+          </li>
+        <% end %>
         <% if can_archive_module(my_module) %>
           <li>
             <a class="delete-module" href="" data-module-id="<%= my_module.id %>"><%=t "experiments.canvas.edit.delete_module" %></a>

app/views/canvas/edit/modal/_move_module.html.erb

@@ -0,0 +1,22 @@
+<div class="modal fade" id="modal-move-module" tabindex="-1" role="dialog" aria-labelledby="modal-move-module-label">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="modal-move-module-label"><%=t "experiments.canvas.edit.modal_move_module.title" %></h4>
+      </div>
+      <div class="modal-body">
+        <%= bootstrap_form_tag do |f| %>
+          <%= f.select :experiment_id, @experiment.project.experiments
+                                      .select { |e| e != @experiment }
+                                      .collect { |e| [ e.name, e.id ] }, {},
+              {class: "form-control selectpicker", "data-role" => "clear"} %>
+        <% end %>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal"><%=t "general.cancel" %></button>
+        <button type="button" class="btn btn-primary" data-action="confirm"><%=t "experiments.canvas.edit.modal_move_module.confirm" %></button>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -657,6 +657,7 @@ en:
         edit_module_group: "Rename workflow"
         clone_module: "Clone task"
         clone_module_group: "Clone workflow"
+        move_module: "Move task to another experiment"
         delete_module: "Archive task"
         delete_module_group: "Archive workflow"
         modal_new_module:
@@ -675,6 +676,10 @@ en:
           title: "Rename workflow"
           name: "Workflow name"
           confirm: "Rename workflow"
+        modal_move_module:
+          title: "Move task to experiment"
+          name: "Task name"
+          confirm: "Move task"
         modal_delete_module:
           title: "Archive task"
           confirm: "Archive task"