From 0cdea0b51a4593d5a1e7153606c5dcea9754d864 Mon Sep 17 00:00:00 2001
From: Jure Grabnar <jgrabnar@biosistemika.com>
Date: Wed, 17 Aug 2016 13:48:02 +0200
Subject: [PATCH] Add modal for moving task on canvas
---
app/assets/javascripts/projects/canvas.js | 81 +++++++++++++++++++
app/controllers/canvas_controller.rb | 1 +
app/helpers/permission_helper.rb | 4 +
app/views/canvas/_edit.html.erb | 5 ++
app/views/canvas/edit/_my_module.html.erb | 5 ++
.../canvas/edit/modal/_move_module.html.erb | 22 +++++
config/locales/en.yml | 5 ++
7 files changed, 123 insertions(+)
create mode 100644 app/views/canvas/edit/modal/_move_module.html.erb
diff --git a/app/assets/javascripts/projects/canvas.js b/app/assets/javascripts/projects/canvas.js
index b5bf108d8..1ebb93b1e 100644
--- a/app/assets/javascripts/projects/canvas.js
+++ b/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.
*/
diff --git a/app/controllers/canvas_controller.rb b/app/controllers/canvas_controller.rb
index 65cc4fa13..7dec3b04a 100644
--- a/app/controllers/canvas_controller.rb
+++ b/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
diff --git a/app/helpers/permission_helper.rb b/app/helpers/permission_helper.rb
index 7f591b896..f425e787d 100644
--- a/app/helpers/permission_helper.rb
+++ b/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
diff --git a/app/views/canvas/_edit.html.erb b/app/views/canvas/_edit.html.erb
index 8c01d4206..a5bc39639 100644
--- a/app/views/canvas/_edit.html.erb
+++ b/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} %>
diff --git a/app/views/canvas/edit/_my_module.html.erb b/app/views/canvas/edit/_my_module.html.erb
index c9670ce93..102dbad84 100644
--- a/app/views/canvas/edit/_my_module.html.erb
+++ b/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>
diff --git a/app/views/canvas/edit/modal/_move_module.html.erb b/app/views/canvas/edit/modal/_move_module.html.erb
new file mode 100644
index 000000000..8021df3e3
--- /dev/null
+++ b/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">×</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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 65b457ecc..51bf7b048 100644
--- a/config/locales/en.yml
+++ b/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"