Add basic modal for direct task creation [SCI-7197]

app/assets/javascripts/experiments/show.js

@@ -0,0 +1,30 @@
+(function() {
+  function initNewMyModuleModal() {
+    let experimentWrapper = '#experiment-canvas';
+    let newMyModuleModal = '#new-my-module-modal';
+
+    // Modal's submit handler function
+    $(experimentWrapper)
+      .on('ajax:success', newMyModuleModal, function() {
+        $(newMyModuleModal).modal('hide');
+      })
+      .on('ajax:error', newMyModuleModal, function(ev, data) {
+        $(this).renderFormErrors('my_module', data.responseJSON);
+      });
+
+    $(experimentWrapper)
+      .on('ajax:success', '.new-my-module-button', function(ev, data) {
+        // Add and show modal
+        $(experimentWrapper).append($.parseHTML(data.html));
+        $(newMyModuleModal).modal('show');
+        $(newMyModuleModal).find("input[type='text']").focus();
+
+        // Remove modal when it gets closed
+        $(newMyModuleModal).on('hidden.bs.modal', function() {
+          $(newMyModuleModal).remove();
+        });
+      });
+  }
+
+  initNewMyModuleModal();
+}());

app/assets/stylesheets/projects.scss

@@ -21,7 +21,7 @@ $color-module-hover: $brand-primary;
   align-items: center;
   display: flex;
 
-  #edit-canvas-button {
+  #edit-canvas-button, .new-my-module-button {
     margin-right: 5px;
   }
 

app/controllers/my_modules_controller.rb

@@ -7,9 +7,10 @@ class MyModulesController < ApplicationController
   include ApplicationHelper
 
   before_action :load_vars, except: %i(restore_group)
+  before_action :check_create_permissions, only: %i(new create)
   before_action :check_archive_permissions, only: %i(update)
   before_action :check_manage_permissions, only: %i(
-    description due_date update_description update_protocol_description update_protocol
+    create description due_date update_description update_protocol_description update_protocol
   )
   before_action :check_read_permissions, except: %i(update update_description update_protocol_description restore_group)
   before_action :check_update_state_permissions, only: :update_state
@@ -18,6 +19,28 @@ class MyModulesController < ApplicationController
 
   layout 'fluid'.freeze
 
+  def new
+    @my_module = @experiment.my_modules.new
+    render json: {
+      html: render_to_string(
+        partial: 'my_modules/modals/new_modal.html.erb'
+      )
+    }
+  end
+
+  def create
+    max_xy = @experiment.my_modules.select('MAX("my_modules"."x") AS x, MAX("my_modules"."y") AS y').take
+    x = max_xy ? (max_xy.x + 10) : 1
+    y = max_xy ? (max_xy.y + 10) : 1
+    @my_module = @experiment.my_modules.new(my_module_params)
+    @my_module.assign_attributes(created_by: current_user, last_modified_by: current_user, x: x, y: y)
+    if @my_module.save
+      redirect_to canvas_experiment_path(@experiment)
+    else
+      render json: @my_module.errors, status: :unprocessable_entity
+    end
+  end
+
   def show
     respond_to do |format|
       format.json {
@@ -385,6 +408,10 @@ class MyModulesController < ApplicationController
                              end
   end
 
+  def check_create_permissions
+    render_403 && return unless can_manage_experiment?(@experiment)
+  end
+
   def check_manage_permissions
     render_403 && return unless can_manage_my_module?(@my_module)
   end
@@ -416,18 +443,18 @@ class MyModulesController < ApplicationController
   end
 
   def my_module_params
-    update_params = params.require(:my_module).permit(:name, :description, :started_on, :due_date, :archived)
+    permitted_params = params.require(:my_module).permit(:name, :description, :started_on, :due_date, :archived)
 
-    if update_params[:started_on].present?
-      update_params[:started_on] =
-        Time.zone.strptime(update_params[:started_on], I18n.backend.date_format.dup.gsub(/%-/, '%') + ' %H:%M')
+    if permitted_params[:started_on].present?
+      permitted_params[:started_on] =
+        Time.zone.strptime(permitted_params[:started_on], I18n.backend.date_format.dup.gsub(/%-/, '%') + ' %H:%M')
     end
-    if update_params[:due_date].present?
-      update_params[:due_date] =
-        Time.zone.strptime(update_params[:due_date], I18n.backend.date_format.dup.gsub(/%-/, '%') + ' %H:%M')
+    if permitted_params[:due_date].present?
+      permitted_params[:due_date] =
+        Time.zone.strptime(permitted_params[:due_date], I18n.backend.date_format.dup.gsub(/%-/, '%') + ' %H:%M')
     end
 
-    update_params
+    permitted_params
   end
 
   def protocol_params

app/views/experiments/canvas.html.erb

@@ -12,6 +12,13 @@
   <div class="toolbar-row" id="diagram-buttons">
     <div id="toolbar-left-block">
       <% if can_manage_experiment?(@experiment) %>
+        <%= link_to modules_new_experiment_path(@experiment),
+                    class: 'btn btn-primary new-my-module-button',
+                    data: { view_mode: 'active' },
+                    remote: true do %>
+                <span class="fas fa-plus"></span>
+                <span class="hidden-xs"><%= t('experiments.canvas.new_my_module') %></span>
+        <% end %>
         <%=link_to canvas_edit_experiment_url(@experiment),
               remote: true,
               type: 'button',
@@ -53,6 +60,8 @@
 <!-- Initialize dropdown actions -->
 <%= javascript_include_tag("experiments/dropdown_actions") %>
 
+<%= javascript_include_tag("experiments/show") %>
+
 <!-- Include all the neccesary JS libraries -->
 <%= javascript_include_tag("eventPause-min") %>
 

app/views/my_modules/modals/_new_modal.html.erb

@@ -0,0 +1,47 @@
+<div class="modal" id="new-my-module-modal" tabindex="-1" role="dialog" data-create-url="<%= modules_experiment_path(@experiment) %>">
+  <%= bootstrap_form_for @my_module, url: modules_experiment_path(@experiment), remote: true do |f| %>
+    <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"><%= t('experiments.canvas.new_my_module_modal.title') %></h4>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+              <%= f.text_field :name, label: t('experiments.canvas.new_my_module_modal.name'), placeholder: t('experiments.canvas.new_my_module_modal.name_placeholder') %>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+              <div class="form-group">
+                <label class="control-label" for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
+                <div class="datetime-picker-container">
+                  <span class="fas fa-calendar-alt"></span>
+                  <input id="my_module_due_date"
+                         type="datetime"
+                         name="my_module[due_date]"
+                         data-toggle='date-time-picker'
+                         class="form-control calendar-input"
+                         readonly
+                         placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>"
+                         data-date-format="<%= datetime_picker_format_full %>"
+                         data-date-locale="<%= I18n.locale %>"
+                         data-date-use-current="false"
+                         data-date-orientation="left"
+                         value=""/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            <%= t('general.cancel') %>
+          </button>
+          <%= f.button t('experiments.canvas.new_my_module_modal.create'), class: "btn btn-primary" %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

config/initializers/assets.rb

@@ -54,6 +54,7 @@ Rails.application.config.assets.precompile += %w(projects/index.js)
 Rails.application.config.assets.precompile += %w(projects/canvas.js)
 Rails.application.config.assets.precompile += %w(experiments/dropdown_actions.js)
 Rails.application.config.assets.precompile += %w(experiments/table.js)
+Rails.application.config.assets.precompile += %w(experiments/show.js)
 Rails.application.config.assets.precompile += %w(reports/new.js)
 Rails.application.config.assets.precompile += %w(protocols/index.js)
 Rails.application.config.assets.precompile += %w(protocols/external_protocols_tab.js)

config/locales/en.yml

@@ -1345,6 +1345,16 @@ en:
       view: 'View'
       head_title: "%{project} | Overview"
       canvas_edit: "Edit workflow"
+      new_my_module: "New task"
+      new_my_module_modal:
+        title: "Add a new task"
+        name: "Task name"
+        name_placeholder: "e.g. My task"
+        due_date: "Due date (optional)"
+        due_date_placeholder: "+ Add due date"
+        tags: "Add tags (optional)"
+        create: "Create"
+      canvas_edit: "Edit Experiment"
       zoom: "Zoom: "
       reload_on_submit: "Save action is running. Reloading this page may cause unexpected behavior."
       modal_manage_tags:

config/routes.rb

@@ -373,6 +373,8 @@ Rails.application.routes.draw do
         get 'move_modal' # return modal with move options
         post 'move' # move experiment
         get 'fetch_workflow_img' # Get udated workflow img
+        get 'modules/new', to: 'my_modules#new'
+        post 'modules', to: 'my_modules#create'
         post 'restore_my_modules', to: 'my_modules#restore_group'
         get 'sidebar'
         get :assigned_users_to_tasks