Move button for archived task in card view [SCI-8253] (#5322)

Implemet the Move task functionality for archived tasks cards view [SCI-8253]

app/assets/javascripts/my_modules/archived.js

@@ -1,3 +1,5 @@
+/* global HelperModule */
+
 (function() {
   let selectedTasks = [];
 
@@ -18,17 +20,57 @@
   $('#module-archive').on('click', '.task-selector', function() {
     let taskId = $(this).closest('.task-selector-container').data('task-id');
     let index = $.inArray(taskId, selectedTasks);
-    let resoteTasksButton = $('.restore-button-container');
+    const restoreTasksButton = $('.restore-button-container');
+    const moveTasksButton = $('.move-button-container');
 
     // If checkbox is checked and row ID is not in list of selected folder IDs
     if (this.checked && index === -1) {
       selectedTasks.push(taskId);
-      resoteTasksButton.collapse('show');
+      restoreTasksButton.collapse('show');
+      moveTasksButton.collapse('show');
       // Otherwise, if checkbox is not checked and ID is in list of selected IDs
     } else if (!this.checked && index !== -1) {
       selectedTasks.splice(index, 1);
     }
     // Hide button
-    if (selectedTasks.length === 0) resoteTasksButton.collapse('hide');
+    if (selectedTasks.length === 0) {
+      restoreTasksButton.collapse('hide');
+      moveTasksButton.collapse('hide');
+    }
   });
+
+  function initMoveButton() {
+    $('.move-button-container').on('click', 'button', function() {
+      const cardsContainer = $('#cards-container');
+      $.get(cardsContainer.data('move-modules-modal-url'), (modalData) => {
+        if ($('#modal-move-modules').length > 0) {
+          $('#modal-move-modules').replaceWith(modalData.html);
+        } else {
+          $('#module-archive').append(modalData.html);
+        }
+
+        $('#modal-move-modules').on('shown.bs.modal', function() {
+          $(this).find('.selectpicker').selectpicker().focus();
+        });
+
+        $('#modal-move-modules').on('click', 'button[data-action="confirm"]', () => {
+          const moveParams = {
+            to_experiment_id: $('#modal-move-modules').find('.selectpicker').val(),
+            my_module_ids: selectedTasks
+          };
+          $.post(cardsContainer.data('move-modules-url'), moveParams, (data) => {
+            HelperModule.flashAlertMsg(data.message, 'success');
+            window.location.reload();
+          }).error((data) => {
+            HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
+          });
+          $('#modal-move-modules').modal('hide');
+        });
+
+        $('#modal-move-modules').modal('show');
+      });
+    });
+  }
+
+  initMoveButton();
 }());

app/assets/stylesheets/experiment/show.scss

@@ -6,6 +6,16 @@
   .experimnet-name {
     max-width: calc(100% - 300px);
   }
+
+  .toolbar {
+    align-items: center;
+    column-gap: .5rem;
+    display: flex;
+
+    .collapse {
+      margin: .5rem 0;
+    }
+  }
 }
 
 #experimentTable {

app/views/experiments/module_archive.html.erb

@@ -11,6 +11,12 @@
   <div class="toolbar">
     <% if @my_modules.present? %>
       <% if can_manage_experiment?(@experiment) %>
+        <div class="move-button-container collapse">
+          <button class="btn btn-light">
+            <span class="fas fa-arrow-right"></span>
+            <%= t('experiments.module_archive.move_option') %>
+          </button>
+        </div>
         <div class="restore-button-container collapse">
           <%= button_to restore_my_modules_experiment_path(@experiment), class: 'btn btn-light', method: :post do %>
             <span class="fas fa-undo"></span>
@@ -20,7 +26,11 @@
       <% end %>
   </div>
 
-    <div class="row" style="margin-top: 10px;">
+    <div class="row"
+         id="cards-container"
+         data-move-modules-modal-url="<%= move_modules_modal_experiment_path(@experiment) %>"
+         data-move-modules-url="<%= move_modules_experiment_path(@experiment) %>"
+         >
       <% @my_modules.each_with_index do |my_module, i| %>
         <div class="module-container col-lg-4 col-md-5 col-sm-12">
           <%= render partial: 'canvas/full_zoom/my_module', locals: {experiment: @experiment, my_module: my_module} %>

config/locales/en.yml

@@ -1556,6 +1556,7 @@ en:
       head_title: "%{experiment} | Archived tasks"
       no_archived_modules: "No archived tasks!"
       restore_option: "Restore"
+      move_option: "Move"
       archived_on: "Archived on"
       archived_on_title: "Task archived on %{date} at %{time}."