Merge pull request #3144 from aignatov-bio/ai-sci-5464-connect-experiments-toolbar-buttons-to-actions

Connect toolbar actions to buttons [SCI-5464]

app/assets/javascripts/projects/show.js

@@ -208,6 +208,37 @@
       });
   }
 
+  function appendActionModal(modal) {
+    $('#content-wrapper').append(modal);
+    modal.modal('show');
+    modal.find('.selectpicker').selectpicker();
+    // Remove modal when it gets closed
+    modal.on('hidden.bs.modal', function() {
+      $(this).remove();
+    });
+  }
+
+
+  function initEditMoveDuplicateToolbarButton() {
+    let forms = '.edit-experiments-form, .move-experiments-form, .clone-experiments-form';
+    $(experimentsPage)
+      .on('ajax:before', forms, function() {
+        let buttonForm = $(this);
+        buttonForm.find('input[name="id"]').remove();
+        $('<input>').attr({
+          type: 'hidden',
+          name: 'id',
+          value: selectedExperiments[0]
+        }).appendTo(buttonForm);
+      })
+      .on('ajax:success', forms, function(ev, data) {
+        appendActionModal($(data.html));
+      })
+      .on('ajax:error', forms, function(ev, data) {
+        HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
+      });
+  }
+
   function init() {
     $('.workflowimg-container').each(function() {
       let container = $(this);
@@ -229,15 +260,7 @@
     });
 
     $('#content-wrapper').on('ajax:success', '.experiment-action-link', function(ev, data) {
-      // Add and show modal
-      let modal = $(data.html);
-      $('#content-wrapper').append(modal);
-      modal.modal('show');
-      modal.find('.selectpicker').selectpicker();
-      // Remove modal when it gets closed
-      modal.on('hidden.bs.modal', function() {
-        $(this).remove();
-      });
+      appendActionModal($(data.html));
     });
 
     $('#content-wrapper')
@@ -245,7 +268,9 @@
         animateSpinner();
       })
       .on('ajax:success', '.experiment-action-form', function() {
-        location.reload();
+        $(this).closest('.modal').modal('hide');
+        refreshCurrentView();
+        animateSpinner(null, false);
       })
       .on('ajax:error', '.experiment-action-form', function(ev, data) {
         animateSpinner(null, false);
@@ -258,6 +283,7 @@
     initProjectsViewModeSwitch();
     initExperimentsSelector();
     initArchiveRestoreToolbarButtons();
+    initEditMoveDuplicateToolbarButton();
     initSelectAllCheckbox();
   }
 

app/assets/stylesheets/experiments.scss

@@ -36,6 +36,9 @@
       }
     }
 
+    .edit-experiments-form,
+    .clone-experiments-form,
+    .move-experiments-form,
     .archive-experiments-form,
     .restore-experiments-form {
       display: inline-block;

app/views/experiments/_clone_modal.html.erb

@@ -1,7 +1,7 @@
 <div class="modal" id="clone-experiment-modal-<%= @experiment.id %>" tabindex="-1" role="dialog" aria-labelledby="clone-experiment-modal-label">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <%= bootstrap_form_for @experiment, url: clone_experiment_path(), method: :post do |f| %>
+      <%= bootstrap_form_for @experiment, url: clone_experiment_path(@experiment), method: :post do |f| %>
         <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="clone-experiment-modal-label"><%= t("experiments.clone.modal_title", experiment: @experiment.name ) %></h5>

app/views/experiments/_move_modal.html.erb

@@ -3,7 +3,7 @@
      tabindex="-1"
      role="dialog"
      aria-labelledby="move-experiment-modal-label">
-     <%= bootstrap_form_for @experiment, url: move_experiment_path(),
+     <%= bootstrap_form_for @experiment, url: move_experiment_path(@experiment),
                             method: :post,
                             remote: true do |f| %>
     <div class="modal-dialog" role="document">

app/views/projects/show/_toolbar.html.erb

@@ -12,20 +12,35 @@
     <% end %>
   <% end %>
 
-  <a href="#" class="btn btn-light edit-experiment-btn single-object-action hidden" data-for="editable" data-view-mode="active" data-url="">
+  <%= button_to edit_experiments_path(),
+                class: 'btn btn-light edit-experiment-btn single-object-action hidden',
+                form_class: 'edit-experiments-form',
+                data: { for: :editable, view_mode: 'active' },
+                remote: true,
+                method: :get do %>
     <span class="fas fa-pencil-alt" aria-hidden="true"></span>
     <span class="hidden-xs"><%= t('experiments.toolbar.edit_button') %></span>
-  </a>
+  <% end %>
 
-  <a href="#" class="btn btn-light duplicate-experiment-btn multiple-object-action hidden" data-view-mode="active" data-for="duplicable" data-url="">
+  <%= button_to clone_modal_experiments_path(),
+                class: 'btn btn-light clone-experiment-btn single-object-action hidden',
+                form_class: 'clone-experiments-form',
+                data: { for: :duplicable, view_mode: 'active' },
+                remote: true,
+                method: :get do %>
     <span class="fas fa-copy" aria-hidden="true"></span>
     <span class="hidden-xs"><%= t('experiments.toolbar.duplicate_button') %></span>
-  </a>
+  <% end %>
 
-  <a href="#" class="btn btn-light move-experiments-btn multiple-object-action hidden" data-view-mode="active" data-for="moveable" data-url="">
+  <%= button_to move_modal_experiments_path(),
+                class: 'btn btn-light move-experiment-btn single-object-action hidden',
+                form_class: 'move-experiments-form',
+                data: { for: :moveable, view_mode: 'active' },
+                remote: true,
+                method: :get do %>
     <span class="fas fa-arrow-right" aria-hidden="true"></span>
     <span class="hidden-xs"><%= t('experiments.toolbar.move_button') %></span>
-  </a>
+  <% end %>
 
   <%= button_to archive_group_project_experiments_path(@project),
                 class: 'btn btn-light archive-experiments-btn multiple-object-action hidden',

config/routes.rb

@@ -286,7 +286,7 @@ Rails.application.routes.draw do
       resources :experiments, only: %i(new create), defaults: { format: 'json' } do
         collection do
           post 'archive_group' # archive group of experements
-          post 'restore_group' # restore group of experements
+          post 'restore_group' # restore group of experementss
         end
       end
       member do
@@ -316,6 +316,11 @@ Rails.application.routes.draw do
     get 'project_folders/:project_folder_id', to: 'projects#index', as: :project_folder_projects
 
     resources :experiments, only: %i(show edit update) do
+      collection do
+        get 'edit', action: :edit
+        get 'clone_modal', action: :clone_modal
+        get 'move_modal', action: :move_modal
+      end
       member do
         get 'canvas' # Overview/structure for single experiment
         # AJAX-loaded canvas edit mode (from canvas)