Merge pull request #4460 from aignatov-bio/ai-sci-7193-add-vue-component-for-print-dialog

Add VUE component for print dialog [SCI-7193]

app/assets/javascripts/repositories/repository_datatable.js

@@ -114,8 +114,6 @@ var RepositoryDatatable = (function(global) {
       $('.dataTables_filter input').prop('disabled', true);
       $('#toolbarPrintLabel').hide();
     }
-
-    $('#toolbarPrintLabel').data('rows', JSON.stringify(rowsSelected));
   }
 
   function clearRowSelection() {
@@ -911,6 +909,7 @@ var RepositoryDatatable = (function(global) {
       TABLE.ajax.reload();
       clearRowSelection();
     },
+    selectedRows: () => { return rowsSelected; },
     redrawTableOnSidebarToggle: redrawTableOnSidebarToggle,
     checkAvailableColumns: checkAvailableColumns
   });

app/assets/javascripts/sitewide/repository_row_info_modal.js

@@ -1,4 +1,4 @@
-/* global dropdownSelector bwipjs zebraPrint I18n*/
+/* global bwipjs PrintModalComponent RepositoryDatatable */
 
 (function() {
   'use strict';
@@ -9,14 +9,14 @@
   const FLUICS_LABEL = 'fluics';
   var zebraPrinters;
 
-  function showPrintModal(selector) {
+  /* function showPrintModal(selector) {
     $(selector).modal('show', {
       backdrop: true,
       keyboard: false
     }).on('hidden.bs.modal', function() {
       $(this).remove();
     });
-  }
+  } */
 
   function getReposotryRowsIds() {
     return $('[id="repository_row_ids_"]').map(function() {
@@ -78,6 +78,12 @@
     return false;
   });
 
+  $(document).on('click', '.print-label-button', function() {
+    PrintModalComponent.showModal = true;
+    PrintModalComponent.row_ids = RepositoryDatatable.selectedRows();
+  });
+
+  /*
   $(document).on('click', '.print-label-button', function() {
     $.ajax({
       method: 'GET',
@@ -200,4 +206,5 @@
       });
     });
   });
+  */
 }());

app/controllers/label_printers_controller.rb

@@ -10,7 +10,14 @@ class LabelPrintersController < ApplicationController
     @label_printers = LabelPrinter.all
     @fluics_api_key = @label_printers.any? ? @label_printers.first.fluics_api_key : nil
     @printer_type = 'fluics'
-    render 'index'
+    respond_to do |format|
+      format.json do
+        render json: @label_printers, each_serializer: LabelPrinterSerializer, user: current_user
+      end
+      format.html do
+        render 'index'
+      end
+    end
   end
 
   def index_zebra

app/controllers/label_templates_controller.rb

@@ -3,7 +3,7 @@
 class LabelTemplatesController < ApplicationController
   include InputSanitizeHelper
 
-  before_action :check_feature_enabled
+  before_action :check_feature_enabled, except: :index
   before_action :check_view_permissions, except: %i(create duplicate set_default delete update)
   before_action :check_manage_permissions, only: %i(create duplicate set_default delete update)
   before_action :load_label_templates, only: %i(index datatable)
@@ -11,7 +11,20 @@ class LabelTemplatesController < ApplicationController
 
   layout 'fluid'
 
-  def index; end
+  def index
+    respond_to do |format|
+      format.json do
+        render json: @label_templates, each_serializer: LabelTemplateSerializer, user: current_user
+      end
+      format.html do
+        unless LabelTemplate.enabled?
+          render :promo
+          return
+        end
+        render 'index'
+      end
+    end
+  end
 
   def datatable
     respond_to do |format|

app/controllers/repository_rows_controller.rb

@@ -4,8 +4,9 @@ class RepositoryRowsController < ApplicationController
   include ApplicationHelper
   include MyModulesHelper
 
-  before_action :load_repository, except: %i(show print_modal print print_zpl)
-  before_action :load_repository_or_snapshot, only: %i(print_modal print print_zpl)
+  MAX_PRINTABLE_ITEM_NAME_LENGTH = 64
+  before_action :load_repository, except: %i(show print_modal print rows_to_print print_zpl)
+  before_action :load_repository_or_snapshot, only: %i(print_modal print rows_to_print print_zpl)
   before_action :load_repository_row, only: %i(update assigned_task_list active_reminder_repository_cells)
   before_action :check_read_permissions, except: %i(show create update delete_records
                                                     copy_records reminder_repository_cells
@@ -121,6 +122,12 @@ class RepositoryRowsController < ApplicationController
     end
   end
 
+  def rows_to_print
+    @repository_rows = @repository.repository_rows.where(id: params[:rows])
+
+    render json: @repository_rows, each_serializer: RepositoryRowSerializer, user: current_user
+  end
+
   def print
     # reset all potential error states for printers and discard all jobs
 

app/javascript/packs/vue/repository_print_modal.js

@@ -0,0 +1,38 @@
+import TurbolinksAdapter from 'vue-turbolinks';
+import Vue from 'vue/dist/vue.esm';
+import PrintModalContainer from '../../vue/repository_print_modal/container.vue';
+
+Vue.use(TurbolinksAdapter);
+Vue.prototype.i18n = window.I18n;
+
+function initPrintModalComponent() {
+  const container = $('.print-label-modal-container');
+
+  window.PrintModalComponent = new Vue({
+    el: '.print-label-modal-container',
+    components: {
+      'print-modal-container': PrintModalContainer
+    },
+    data() {
+      return {
+        showModal: false,
+        row_ids: [],
+        urls: {
+          print: container.data('print-url'),
+          zebraProgress: container.data('zebra-progress-url'),
+          printers: container.data('printers-url'),
+          labelTemplates: container.data('label-templates-url'),
+          rows: container.data('rows-url'),
+          fluicsInfo: container.data('fluics-info-url')
+        }
+      };
+    },
+    methods: {
+      closeModal() {
+        this.showModal = false;
+      }
+    }
+  });
+}
+
+initPrintModalComponent();

app/javascript/vue/repository_print_modal/container.vue

@@ -0,0 +1,195 @@
+<template>
+  <div ref="modal" class="modal fade" id="modal-print-repository-row-label" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div v-if="printers_dropdown.length > 0" class="printers-available">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <p class="modal-title">
+              <template v-if="rows.length == 1">
+                {{ i18n.t('repository_row.modal_print_label.head_title', {repository_row: rows[0].attributes.name}) }}
+                <span class="id-label">
+                  {{ i18n.t('repository_row.modal_print_label.id_label', {repository_row_id: rows[0].attributes.code}) }}
+                </span>
+              </template>
+              <template v-else>
+                {{ i18n.t('repository_row.modal_print_label.head_title_multiple', {repository_rows: rows.length}) }}
+              </template>
+            </p>
+          </div>
+          <div class="modal-body">
+            <div class=printers-container>
+              <label>
+                {{ i18n.t('repository_row.modal_print_label.printer') }}
+              </label>
+              <DropdownSelector
+                :disableSearch="true"
+                :options="printers_dropdown"
+                :selectorId="`LabelPrinterSelector`"
+                @dropdown:changed="selectPrinter"
+              />
+            </div>
+
+            <div class=labels-container>
+              <label>
+                {{ i18n.t('repository_row.modal_print_label.label') }}
+              </label>
+
+              <DropdownSelector
+                :disableSearch="true"
+                :options="templates_dropdown"
+                :selectorId="`LabelTemplateSelector`"
+                @dropdown:changed="selectTemplate"
+              />
+            </div>
+            <p class="sci-input-container">
+              <label>
+                {{ i18n.t('repository_row.modal_print_label.number_of_copies') }}
+              </label>
+              <input v-model="copies" type=number class="sci-input-field print-copies-input" min="1">
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-primary" @click="submitPrint" :disabled="!selectedPrinter || !selectedTemplate">
+              {{ i18n.t('repository_row.modal_print_label.print_label') }}
+            </button>
+          </div>
+        </div>
+        <div v-else class="no-printers-available">
+          <div class="modal-body no-printers-container">
+            <button type="button" class="close modal-absolute-close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <img src='/images/printers/no_available_printers.png'>
+            <p class="no-printer-title">
+              {{ i18n.t('repository_row.modal_print_label.no_printers.title') }}
+            </p>
+            <p class="no-printer-body">
+              {{ i18n.t('repository_row.modal_print_label.no_printers.description') }}
+            </p>
+          </div>
+          <div class="modal-footer">
+            <a :href="urls.fluicsInfo" target="blank" class="btn btn-primary" >
+              {{ i18n.t('repository_row.modal_print_label.no_printers.visit_blog') }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+
+  export default {
+    name: 'PrintModalContainer',
+    props: {
+      showModal: Boolean,
+      row_ids: Array,
+      urls: Object
+    },
+    data() {
+      return {
+        rows: [],
+        printers: [],
+        templates: [],
+        selectedPrinter: null,
+        selectedTemplate: null,
+        copies: 1,
+        zebraPrinters: null
+      }
+    },
+    components: {
+      DropdownSelector
+    },
+    mounted() {
+      $.get(this.urls.labelTemplates, (result) => {
+        this.templates = result.data
+      })
+
+      $.get(this.urls.printers, (result) => {
+        this.printers = result.data
+      })
+
+      $(this.$refs.modal).on('hidden.bs.modal', () => {
+        this.$emit('close');
+      });
+
+      this.initZebraPrinter();
+    },
+    computed: {
+      templates_dropdown() {
+        let templates = this.templates;
+        if (this.selectedPrinter && this.selectedPrinter.attributes.type_of === 'zebra') {
+          templates = templates.filter(i => i.attributes.type === 'ZebraLabelTemplate')
+        }
+
+        return templates.map(i => {
+          return {value: i.id, label: i.attributes.name}
+        })
+      },
+      printers_dropdown() {
+        return this.printers.map(i => {
+          return {value: i.id, label: i.attributes.name}
+        })
+      }
+    },
+    watch: {
+      showModal() {
+        if (this.showModal) {
+          $(this.$refs.modal).modal('show');
+        }
+      },
+      row_ids() {
+        $.get(this.urls.rows, {rows: this.row_ids}, (result) => {
+          this.rows = result.data
+        })
+      }
+    },
+    methods: {
+      selectPrinter(value) {
+        this.selectedPrinter = this.printers.find(i => i.id === value)
+      },
+      selectTemplate(value) {
+        this.selectedTemplate = this.templates.find(i => i.id === value)
+      },
+      submitPrint() {
+        if (this.selectedPrinter.attributes.type_of === 'zebra') {
+          zebraPrinters.print(
+            this.urls.zebraProgress,
+            '.label-printing-progress-modal',
+            '#modal-print-repository-row-label',
+            {
+              printer_name: this.selectedPrinter.attributes.name,
+              number_of_copies: this.copies,
+              label_template_id: this.selectedTemplate.id,
+              repository_row_ids: this.row_ids
+            }
+          );
+        } else {
+          $.post(this.urls.print, {
+            repository_row_ids: this.row_ids,
+            label_printer_id: this.selectedPrinter.id,
+            label_template_id: this.selectedTemplate.id,
+            copies: this.copies
+          }, () => {
+            this.$emit('close');
+          })
+        }
+      },
+      initZebraPrinter() {
+        this.zebraPrinters = zebraPrint.init($('#LabelPrinterSelector'), {
+          clearSelectorOnFirstDevice: false,
+          appendDevice: function(device) {
+            this.printers.push({
+              id: `zebra${this.printers.length}`,
+              attributes: {
+                name: device.name,
+                type_of: 'zebra'
+              }
+            })
+          }
+        });
+      }
+    }
+  }
+</script>

app/serializers/label_printer_serializer.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class LabelPrinterSerializer < ActiveModel::Serializer
+  include Rails.application.routes.url_helpers
+
+  attributes :name, :description, :type_of, :language_type, :status
+
+  def urls
+    {
+    }
+  end
+end

app/serializers/label_template_serializer.rb

@@ -3,7 +3,7 @@
 class LabelTemplateSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
-  attributes :name, :description, :language_type, :icon_url, :urls, :content
+  attributes :name, :description, :language_type, :icon_url, :urls, :content, :type
 
   def icon_url
     ActionController::Base.helpers.image_path("label_template_icons/#{object.icon}.svg")

app/serializers/repository_row_serializer.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class RepositoryRowSerializer < ActiveModel::Serializer
+  include Rails.application.routes.url_helpers
+
+  attributes :id, :name, :code
+
+  def urls
+    {
+    }
+  end
+end

app/views/repositories/_repository_row_info_modal.html.erb

@@ -113,7 +113,7 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t('general.close')%></button>
-        <button type="button" class="btn btn-primary print-label-button" data-dismiss="modal" data-url="<%= print_modal_repository_repository_rows_path(@repository_row.repository) %>"  data-rows="[<%= @repository_row.id %>]"><%= t('repository_row.modal_print_label.print_label') %></button>
+        <button type="button" class="btn btn-primary print-label-button"  data-rows="[<%= @repository_row.id %>]"><%= t('repository_row.modal_print_label.print_label') %></button>
 
       </div>
     </div>

app/views/repositories/show.html.erb

@@ -84,6 +84,24 @@
   <div class="toolbar-filter-buttons" style="display:none">
   </div>
 
+  <div class="print-label-modal-container"
+    data-print-url="<%= print_repository_repository_rows_path(repository_id: @repository) %>"
+    data-zebra-progress-url="<%= print_zpl_repository_repository_rows_path(repository_id: @repository)%>"
+    data-printers-url="<%= label_printers_path(format: :json) %>"
+    data-label-templates-url="<%= label_templates_path(format: :json) %>"
+    data-rows-url="<%= rows_to_print_repository_repository_rows_path(repository_id: @repository) %>"
+    data-fluics-info-url="<%= Constants::SCINOTE_FLUICS_URL %>"
+  >
+      <print-modal-container
+        :show-modal = "showModal"
+        :row_ids = "row_ids"
+        :urls = "urls"
+        @close="closeModal"
+      ></print-modal-container>
+  </div>
+
+  <%= javascript_pack_tag 'vue/repository_print_modal' %>
+
   <%= render partial: "repositories/repository_table",
              locals: {
                repository: @repository,

app/views/repositories/toolbar/_print_label_button.html.erb

@@ -3,7 +3,6 @@
         data-placement="bottom"
         title="<%= t('repositories.show.button_tooltip.print_label') %>"
         class="btn btn-light print-label-button auto-shrink-button"
-        data-dismiss="modal" data-url="<%= print_modal_repository_repository_rows_path(@repository)  %>"
         data-rows="[]" style="display: none">
   <span class="fas fa-print"></span>
   <span class="button-text"><%= t('repository_row.modal_print_label.print_label') %></span>

config/routes.rb

@@ -652,7 +652,7 @@ Rails.application.routes.draw do
       resources :repository_table_filters, only: %i(index show create update destroy)
       resources :repository_rows, only: %i(create show update) do
         collection do
-          get :print_modal
+          get :rows_to_print
           post :print
           get :print_zpl
           post :validate_label_template_columns