Add action toolbar to archived tasks card view [SCI-8691]

app/assets/javascripts/my_modules/archived.js

@@ -3,44 +3,35 @@
 (function() {
   let selectedTasks = [];
 
-  $('#module-archive').on('click', '.restore-button-container', function(e) {
-    e.preventDefault();
-    let restoreForm = $('.restore-button-container').find('form');
-
-    selectedTasks.forEach(function(id) {
-      $('<input>').attr({
-        type: 'hidden',
-        name: 'my_modules_ids[]',
-        value: id
-      }).appendTo(restoreForm);
-    });
-    restoreForm.submit();
-  });
-
   $('#module-archive').on('click', '.task-selector', function() {
     let taskId = $(this).closest('.task-selector-container').data('task-id');
     let index = $.inArray(taskId, selectedTasks);
-    const restoreTasksButton = $('.restore-button-container');
-    const moveTasksButton = $('.move-button-container');
+
+    window.actionToolbarComponent.fetchActions({ my_module_ids: selectedTasks });
 
     // If checkbox is checked and row ID is not in list of selected folder IDs
     if (this.checked && index === -1) {
       selectedTasks.push(taskId);
-      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) {
-      restoreTasksButton.collapse('hide');
-      moveTasksButton.collapse('hide');
-    }
   });
 
+  function restoreMyModules(url, ids) {
+    $.post(url, { my_modules_ids: ids, view: 'cards' });
+  }
+
+  function initRestoreMyModules() {
+    $('#module-archive').on('click', '#restoreTask', (e) => {
+      e.stopPropagation();
+      restoreMyModules(e.currentTarget.dataset.url, selectedTasks);
+    });
+  }
+
   function initMoveButton() {
-    $('.move-button-container').on('click', 'button', function() {
+    $('#module-archive').on('click', '#moveTask', function(e) {
+      e.preventDefault();
+
       const cardsContainer = $('#cards-container');
       $.get(cardsContainer.data('move-modules-modal-url'), (modalData) => {
         if ($('#modal-move-modules').length > 0) {
@@ -72,5 +63,7 @@
     });
   }
 
+  window.initActionToolbar();
+  initRestoreMyModules();
   initMoveButton();
 }());

app/views/experiments/module_archive.html.erb

@@ -10,22 +10,6 @@
   <%= render partial: 'experiments/show_header' %>
   <div class="toolbar">
     <% if @my_modules.present? %>
-      <% if can_manage_experiment?(@experiment) %>
-        <span class="left">
-          <div class="move-button-container collapse">
-            <button class="btn btn-light">
-              <span class="sn-icon sn-icon-move"></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="sn-icon sn-icon-restore"></span>
-              <%= t('experiments.module_archive.restore_option') %>
-            <% end %>
-          </div>
-        </span>
-      <% end %>
     <%= render partial: 'task_view_dropdowns.html.erb' %>
   </div>
 
@@ -49,6 +33,9 @@
     <%= render partial: 'task_view_dropdowns.html.erb' %>
   <% end %>
 
+  <div id="actionToolbar" data-behaviour="vue">
+    <action-toolbar actions-url="<%= actions_toolbar_my_modules_url %>" />
+  </div>
 </div>
 <% unless  @my_modules.present? %>
   <div class="pt-10">
@@ -56,5 +43,6 @@
   </div>
 <% end %>
 
+<%= javascript_include_tag('vue_components_action_toolbar') %>
 <%= javascript_include_tag('projects/canvas') %>
 <%= javascript_include_tag('my_modules/archived') %>