Add bottom action toolbar to label templates [SCI-8301]

app/assets/javascripts/label_templates/label_templates_datatable.js

@@ -11,18 +11,6 @@
     return rowsSelected.map(i => i.id);
   }
 
-  function defaultSelected() {
-    return rowsSelected.findIndex(v => v.default === 'true') >= 0;
-  }
-
-  function labelFormats() {
-    let uniqueFormats = rowsSelected.map(i => i.format).filter((v, i, a) => a.indexOf(v) === i);
-    if (uniqueFormats.length > 1) {
-      return 'mixed';
-    }
-    return uniqueFormats[0];
-  }
-
   function renderCheckboxHTML(data) {
     return `<div class="sci-checkbox-container">
               <input type="checkbox" class="sci-checkbox label-row-checkbox" data-action='toggle'
@@ -75,7 +63,10 @@
   }
 
   function initSetDefaultButton() {
-    $('#setZplDefaultLabelTemplate, #setFluicsDefaultLabelTemplate').on('click', function() {
+    $(document).on('click', '#setZplDefaultLabelTemplate, #setFluicsDefaultLabelTemplate', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
       if (rowsSelected.length === 1) {
         $.post(rowsSelected[0].setDefaultUrl, function(response) {
           reloadTable();
@@ -96,7 +87,10 @@
   }
 
   function initDuplicateButton() {
-    $('#duplicateLabelTemplate').on('click', function() {
+    $(document).on('click', '#duplicateLabelTemplate', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
       if (rowsSelected.length > 0) {
         $.post(this.dataset.url, { selected_ids: rowsSelectedIDs() }, function(response) {
           reloadTable();
@@ -109,7 +103,10 @@
   }
 
   function initDeleteModal() {
-    $('#deleteLabelTemplate').on('click', function() {
+    $(document).on('click', '#deleteLabelTemplate', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
       $('#deleteLabelTemplatesModal').modal('show');
     });
   }
@@ -147,32 +144,7 @@
   }
 
   function updateButtons() {
-    if (rowsSelected.length === 0) {
+    window.actionToolbarComponent.fetchActions({ label_template_ids: rowsSelectedIDs() });
-      $('.selected-actions').addClass('hidden');
-      $('.nonselected-actions').removeClass('hidden');
-      $('.fluics-warning').addClass('hidden');
-      $('.selected-one-actions').addClass('hidden');
-    } else {
-      $('.fluics-warning').addClass('hidden');
-      $('.selected-actions').removeClass('hidden');
-      $('.nonselected-actions').addClass('hidden');
-      $('.selected-one-actions').toggleClass('hidden', (rowsSelected.length > 1));
-      if (labelFormats() === 'ZPL') {
-        $('#deleteLabelTemplate').toggleClass('hidden', defaultSelected());
-        $('#setZplDefaultLabelTemplate').toggleClass('hidden', (rowsSelected.length > 1 || defaultSelected()));
-        $('#setFluicsDefaultLabelTemplate').addClass('hidden');
-      } else if (labelFormats() === 'Fluics') {
-        $('#duplicateLabelTemplate').addClass('hidden');
-        $('#deleteLabelTemplate').addClass('hidden');
-        $('#setZplDefaultLabelTemplate').addClass('hidden');
-        $('#setFluicsDefaultLabelTemplate').toggleClass('hidden', (rowsSelected.length > 1 || defaultSelected()));
-        $('.fluics-warning').removeClass('hidden');
-      } else {
-        $('.selected-one-actions').addClass('hidden');
-        $('.fluics-warning').removeClass('hidden');
-        $('.selected-actions').addClass('hidden');
-      }
-    }
   }
 
   function reloadTable() {
@@ -300,12 +272,14 @@
 
         let toolBar = $($('#labelTemplatesToolbar').html());
         $('.label-buttons-container').html(toolBar);
+
         initCreateButton();
         initEditButton();
         initSetDefaultButton();
         initDuplicateButton();
         initDeleteModal();
         initRefreshFluicsButton();
+        window.initActionToolbar();
       }
     });
   }

app/controllers/label_templates_controller.rb

@@ -153,6 +153,16 @@ class LabelTemplatesController < ApplicationController
     render json: { error: t('label_templates.fluics.sync.error') }, status: :unprocessable_entity
   end
 
+  def actions_toolbar
+    render json: {
+      actions:
+        Toolbars::LabelTemplatesService.new(
+          current_user,
+          label_template_ids: params[:label_template_ids].split(',')
+        ).actions
+    }
+  end
+
   private
 
   def check_feature_enabled

app/services/toolbars/label_templates_service.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Toolbars
+  class LabelTemplatesService
+    attr_reader :current_user
+
+    include Canaid::Helpers::PermissionsHelper
+    include Rails.application.routes.url_helpers
+
+    def initialize(current_user, label_template_ids: [])
+      @current_user = current_user
+      @label_templates = LabelTemplate.where(id: label_template_ids)
+
+      @single = @label_templates.length == 1
+    end
+
+    def actions
+      return [] if @label_templates.none? || @label_templates.any? { |lt| lt.type == 'FluicsLabelTemplate' }
+
+      [
+        duplicate_action,
+        set_as_default_action,
+        delete_action
+      ].compact
+    end
+
+    private
+
+    def set_as_default_action
+      return unless @single
+
+      return unless can_manage_label_templates?(current_user.current_team)
+
+      return if @label_templates.first.default
+
+      {
+        name: 'set_as_default',
+        label: I18n.t('label_templates.index.toolbar.set_zpl_default'),
+        icon: 'fas fa-thumbtack',
+        button_id: 'setZplDefaultLabelTemplate',
+        type: :legacy
+      }
+    end
+
+    def duplicate_action
+      return unless can_manage_label_templates?(current_user.current_team)
+
+      {
+        name: 'duplicate',
+        label: I18n.t('label_templates.index.toolbar.duplicate'),
+        icon: 'fas fa-copy',
+        button_id: 'duplicateLabelTemplate',
+        path: duplicate_label_templates_path,
+        type: :legacy
+      }
+    end
+
+    def delete_action
+      return unless can_manage_label_templates?(current_user.current_team)
+
+      return unless @label_templates.none?(&:default)
+
+      {
+        name: 'delete',
+        label: I18n.t('label_templates.index.toolbar.delete'),
+        icon: 'fas fa-trash',
+        button_id: 'deleteLabelTemplate',
+        type: :legacy
+      }
+    end
+  end
+end

app/views/label_templates/index.html.erb

@@ -49,10 +49,15 @@
         </div>
       </div>
     </div>
+
+    <div id="actionToolbar" data-behaviour="vue">
+      <action-toolbar actions-url="<%= actions_toolbar_label_templates_url %>" />
+    </div>
   </div>
 </div>
 
   <%= render partial: "index_toolbar" %>
   <%= render partial: "delete_modal" %>
   <%= javascript_include_tag 'label_templates/label_templates_datatable', nonce: true %>
+  <%= javascript_include_tag 'vue_components_action_toolbar', nonce: true %>
 <% end %>

config/routes.rb

@@ -65,6 +65,7 @@ Rails.application.routes.draw do
         get :template_tags
         get :zpl_preview
         post :sync_fluics_templates
+        get :actions_toolbar
       end
     end