Merge pull request #4320 from aignatov-bio/ai-sci-7048-update-label-templates-toolbar

Update labels index page [SCI-7048]

app/assets/images/label_template_icons/fluics_update.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#FFE000"/>
+<path d="M9.35573 6.50012L10.4277 8.00012L9.35573 9.50012H5.5V6.50012H9.35573Z" stroke="#00A4CE"/>
+<path d="M2.86206 6.03356C3.67218 3.96719 5.72174 2.5 8.12212 2.5C10.2516 2.5 12.1049 3.65468 13.0618 5.35803" stroke="#363332"/>
+<path d="M13.1251 10.0001C12.3051 12.0487 10.2624 13.5 7.87241 13.5C5.75965 13.5 3.91837 12.3659 2.95312 10.6877" stroke="#363332"/>
+<path d="M13.5 2.00012V5.50012H11" stroke="#363332"/>
+<path d="M2.5 14.0001V10.5001H5" stroke="#363332"/>
+</svg>

app/assets/javascripts/label_templates/label_templates_datatable.js

@@ -6,9 +6,22 @@
 
   var LABEL_TEMPLATE_TABLE;
   var rowsSelected = [];
-  var defaultSelected = false;
-  var editUrl;
-  var setDefaultUrl;
+
+  function rowsSelectedIDs() {
+    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, type, row) {
     return `<div class="sci-checkbox-container">
@@ -54,9 +67,9 @@
   }
 
   function initSetDefaultButton() {
-    $('#setDefaultLabelTemplate').on('click', function() {
+    $('#setZplDefaultLabelTemplate, #setFluicsDefaultLabelTemplate').on('click', function() {
       if (rowsSelected.length === 1) {
-        $.post(setDefaultUrl, function(response) {
+        $.post(rowsSelected[0].setDefaultUrl, function(response) {
           reloadTable();
           HelperModule.flashAlertMsg(response.message, 'success');
         }).error((response) => {
@@ -69,7 +82,7 @@
   function initDuplicateButton() {
     $('#duplicateLabelTemplate').on('click', function() {
       if (rowsSelected.length > 0) {
-        $.post(this.dataset.url, { selected_ids: rowsSelected }, function(response) {
+        $.post(this.dataset.url, { selected_ids: rowsSelectedIDs() }, function(response) {
           reloadTable();
           HelperModule.flashAlertMsg(response.message, 'success');
         }).error((response) => {
@@ -88,7 +101,7 @@
   function initDeleteButton() {
     $('#confirmLabeleDeletion').on('click', function() {
       if (rowsSelected.length > 0) {
-        $.post(this.dataset.url, { selected_ids: rowsSelected }, function(response) {
+        $.post(this.dataset.url, { selected_ids: rowsSelectedIDs() }, function(response) {
           reloadTable();
           HelperModule.flashAlertMsg(response.message, 'success');
           $('#deleteLabelTemplatesModal').modal('hide');
@@ -108,11 +121,26 @@
   function updateButtons() {
     if (rowsSelected.length === 0) {
       $('.selected-actions').addClass('hidden');
+      $('.nonselected-actions').removeClass('hidden');
+      $('.fluics-warning').addClass('hidden');
     } else {
+      $('.fluics-warning').addClass('hidden');
       $('.selected-actions').removeClass('hidden');
-      $('#editLabelTemplate').attr('disabled', rowsSelected.length > 1);
-      $('#deleteLabelTemplate').attr('disabled', defaultSelected);
-      $('#setDefaultLabelTemplate').attr('disabled', (rowsSelected.length > 1 || defaultSelected));
+      $('.nonselected-actions').addClass('hidden');
+      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').toggleClass('hidden', (rowsSelected.length === 1 && !defaultSelected()));
+      } else {
+        $('.fluics-warning').removeClass('hidden');
+        $('.selected-actions').addClass('hidden');
+      }
     }
   }
 
@@ -152,32 +180,28 @@
     }
   }
 
-  function checkDefaultSelection() {
-    $.each($('.label-template-row .fa-thumbtack'), function(i, defaultLabel) {
-      let rowId = ($(defaultLabel).closest('.label-template-row').data('id')).toString();
-      let index = $.inArray(rowId, rowsSelected);
-      if (index >= 0) {
-        defaultSelected = true;
-        return;
-      }
-      defaultSelected = false;
-    });
-  }
-
   function initRowSelection() {
     // Handle clicks on checkbox
     $('#label-templates-table').on('change', '.label-row-checkbox', function(ev) {
       var rowId;
       var index;
+      var row;
 
       rowId = this.dataset.labelTemplateId;
+      row = $(this).closest('tr')[0];
 
       // Determine whether row ID is in the list of selected row IDs
-      index = $.inArray(rowId, rowsSelected);
+      index = rowsSelected.findIndex(v => v.id === rowId);
 
       // If checkbox is checked and row ID is not in list of selected row IDs
       if (this.checked && index === -1) {
-        rowsSelected.push(rowId);
+        rowsSelected.push({
+          id: rowId,
+          default: row.dataset.default,
+          editUrl: row.dataset.editUrl,
+          setDefaultUrl: row.dataset.setDefaultUrl,
+          format: row.dataset.format
+        });
       // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
       } else if (!this.checked && index !== -1) {
         rowsSelected.splice(index, 1);
@@ -189,14 +213,7 @@
         $(this).closest('.label-template-row').removeClass('selected');
       }
 
-      if (rowsSelected.length === 1) {
-        editUrl = $(`.label-template-row[data-id="${rowsSelected[0]}"]`).data('edit-url');
-        setDefaultUrl = $(`.label-template-row[data-id="${rowsSelected[0]}"]`).data('set-default-url');
-      }
-
-
       updateDataTableSelectAllCtrl();
-      checkDefaultSelection();
 
       ev.stopPropagation();
       updateButtons();

app/datatables/label_template_datatable.rb

@@ -45,7 +45,9 @@ class LabelTemplateDatatable < CustomDatatable
         'recordInfoUrl' => '',
         'DT_RowAttr': {
           'data-edit-url': label_template_path(record),
-          'data-set-default-url': set_default_label_template_path(record)
+          'data-set-default-url': set_default_label_template_path(record),
+          'data-default': record.default,
+          'data-format': record.label_format
         },
         'manage_permission' => @manage_template
       }

app/views/label_templates/_index_toolbar.html.erb

@@ -5,6 +5,11 @@
     <i class="fas fa-plus"></i>
     <span class="button-text"><%= t('label_templates.index.toolbar.new') %></span>
   </button>
+  <button title="<%= t('label_templates.index.toolbar.check_for_updates') %>"
+     class="btn btn-light auto-shrink-button nonselected-actions " id="checkFluicsUpdates">
+    <%= image_tag 'label_template_icons/fluics_update' %>
+    <span class="button-text"><%= t('label_templates.index.toolbar.check_for_updates') %></span>
+  </button>
   <div class="btn btn-light hidden selected-actions  auto-shrink-button"
        title="<%= t('label_templates.index.toolbar.duplicate') %>"
        data-url="<%= duplicate_label_templates_path %>"
@@ -12,13 +17,20 @@
     <i class="fas fa-clone"></i>
     <span class="button-text"><%= t('label_templates.index.toolbar.duplicate') %></span>
   </div>
-  <div class="btn btn-light hidden selected-actions  auto-shrink-button"  id="setDefaultLabelTemplate"  title="<%= t('label_templates.index.toolbar.set_default') %>">
+  <div class="btn btn-light hidden selected-actions  auto-shrink-button"  id="setZplDefaultLabelTemplate"  title="<%= t('label_templates.index.toolbar.set_zpl_default') %>">
     <i class="fas fa-thumbtack"></i>
-    <span class="button-text"><%= t('label_templates.index.toolbar.set_default') %></span>
+    <span class="button-text"><%= t('label_templates.index.toolbar.set_zpl_default') %></span>
+  </div>
+  <div class="btn btn-light hidden selected-actions  auto-shrink-button"  id="setFluicsDefaultLabelTemplate"  title="<%= t('label_templates.index.toolbar.set_fluics_default') %>">
+    <i class="fas fa-thumbtack"></i>
+    <span class="button-text"><%= t('label_templates.index.toolbar.set_fluics_default') %></span>
   </div>
   <div class="btn btn-light hidden selected-actions  auto-shrink-button"  id="deleteLabelTemplate"  title="<%= t('label_templates.index.toolbar.delete') %>">
     <i class="fas fa-trash"></i>
     <span class="button-text"><%= t('label_templates.index.toolbar.delete') %></span>
   </div>
+  <div class="fluics-warning hidden">
+    <%= t('label_templates.index.toolbar.fluics_warning') %>
+  </div>
   <% end%>
 </template>

config/locales/en.yml

@@ -839,10 +839,13 @@ en:
       template_set_as_default: 'Successfully set template as default'
       toolbar:
         new: 'New template'
+        check_for_updates: 'Check for updates'
         edit: 'Edit'
         duplicate: 'Duplicate'
         delete: 'Delete'
-        set_default: 'Set Default'
+        set_zpl_default: 'Set as default ZPL label'
+        set_fluics_default: 'Set as default Fluics label'
+        fluics_warning: 'Built-in FLUICS templates can’t be edited, deleted or duplicated'
       delete_modal:
         title: 'Delete Label template(s)'
         description: 'Are you sure you want to delete the selected Label template(s)?'