From be777a891934297c17b6d2fb665b829a0bd3be1c Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Wed, 21 Jul 2021 21:32:42 +0200 Subject: [PATCH] Add barcodes to repository item card [SCI-5883][SCI-5884] (#3447) * Add barcodes to repository item card [SCI-5883][SCI-5884] * Fix markup [SCI-5883] --- .../sitewide/repository_row_info_modal.js | 34 ++++++++++ .../repository_print_label_modal.scss | 21 ++++++ .../repository/repository_row_modal.scss | 6 ++ app/controllers/repository_rows_controller.rb | 15 ++++- app/javascript/packs/custom/bwipjs.js | 1 + .../repositories/_print_label_modal.html.erb | 29 +++++++++ .../_repository_row_info_modal.html.erb | 64 +++++++++++-------- app/views/repositories/show.html.erb | 1 + config/locales/en.yml | 6 ++ config/routes.rb | 1 + package.json | 1 + yarn.lock | 5 ++ 12 files changed, 156 insertions(+), 28 deletions(-) create mode 100644 app/assets/stylesheets/repository/repository_print_label_modal.scss create mode 100644 app/assets/stylesheets/repository/repository_row_modal.scss create mode 100644 app/javascript/packs/custom/bwipjs.js create mode 100644 app/views/repositories/_print_label_modal.html.erb diff --git a/app/assets/javascripts/sitewide/repository_row_info_modal.js b/app/assets/javascripts/sitewide/repository_row_info_modal.js index a4d5364fc..8044aea9a 100644 --- a/app/assets/javascripts/sitewide/repository_row_info_modal.js +++ b/app/assets/javascripts/sitewide/repository_row_info_modal.js @@ -1,3 +1,5 @@ +/* global dropdownSelector bwipjs */ + (function() { 'use strict'; @@ -16,6 +18,15 @@ $(this).find('.modal-body #repository_row-info-table').DataTable().destroy(); $(this).remove(); }); + + let barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', { + bcid: 'qrcode', + text: $('#modal-info-repository-row #bar-code-canvas').data('id').toString(), + scale: 3 + }); + $('#modal-info-repository-row #bar-code-image').attr('src', barCodeCanvas.toDataURL('image/png')); + + $('#repository_row-info-table').DataTable({ dom: 'RBltpi', stateSave: false, @@ -40,4 +51,27 @@ e.preventDefault(); return false; }); + + $(document).on('click', '.print-label-button', function() { + $.ajax({ + method: 'GET', + url: $(this).data('url'), + dataType: 'json' + }).done(function(xhr, settings, data) { + $('body').append($.parseHTML(data.responseJSON.html)); + $('#modal-print-repository-row-label').modal('show', { + backdrop: true, + keyboard: false + }).on('hidden.bs.modal', function() { + $(this).remove(); + }); + + dropdownSelector.init('#modal-print-repository-row-label #printers', { + noEmptyOption: true, + singleSelect: true, + closeOnSelect: true, + selectAppearance: 'simple' + }); + }); + }); })(); diff --git a/app/assets/stylesheets/repository/repository_print_label_modal.scss b/app/assets/stylesheets/repository/repository_print_label_modal.scss new file mode 100644 index 000000000..fe07f69c5 --- /dev/null +++ b/app/assets/stylesheets/repository/repository_print_label_modal.scss @@ -0,0 +1,21 @@ +#modal-print-repository-row-label { + + .id-label { + margin-left: .5em; + opacity: .5; + } + + .printers-container { + margin-bottom: 1em; + min-height: 4em; + } + + .print-copies-input { + margin-left: .5em; + width: 50px; + } + + .modal-footer { + text-align: center; + } +} diff --git a/app/assets/stylesheets/repository/repository_row_modal.scss b/app/assets/stylesheets/repository/repository_row_modal.scss new file mode 100644 index 000000000..a25126b89 --- /dev/null +++ b/app/assets/stylesheets/repository/repository_row_modal.scss @@ -0,0 +1,6 @@ +#modal-info-repository-row { + .bar-code-container { + display: flex; + justify-content: flex-end; + } +} diff --git a/app/controllers/repository_rows_controller.rb b/app/controllers/repository_rows_controller.rb index eb969ca80..20664ba8c 100644 --- a/app/controllers/repository_rows_controller.rb +++ b/app/controllers/repository_rows_controller.rb @@ -5,7 +5,7 @@ class RepositoryRowsController < ApplicationController include MyModulesHelper before_action :load_repository, except: :show - before_action :load_repository_row, only: %i(update assigned_task_list) + before_action :load_repository_row, only: %i(update assigned_task_list print_modal) before_action :check_read_permissions, except: %i(show create update delete_records copy_records) before_action :check_snapshotting_status, only: %i(create update delete_records copy_records) before_action :check_create_permissions, only: :create @@ -71,6 +71,19 @@ class RepositoryRowsController < ApplicationController end end + def print_modal + @printers = ['test1', 'test2', 'test3'] + respond_to do |format| + format.json do + render json: { + html: render_to_string( + partial: 'repositories/print_label_modal.html.erb' + ) + } + end + end + end + def update row_update = RepositoryRows::UpdateRepositoryRowService .call(repository_row: @repository_row, user: current_user, params: update_params) diff --git a/app/javascript/packs/custom/bwipjs.js b/app/javascript/packs/custom/bwipjs.js new file mode 100644 index 000000000..773d45793 --- /dev/null +++ b/app/javascript/packs/custom/bwipjs.js @@ -0,0 +1 @@ +window.bwipjs = require('bwip-js'); diff --git a/app/views/repositories/_print_label_modal.html.erb b/app/views/repositories/_print_label_modal.html.erb new file mode 100644 index 000000000..21f55a3f0 --- /dev/null +++ b/app/views/repositories/_print_label_modal.html.erb @@ -0,0 +1,29 @@ + diff --git a/app/views/repositories/_repository_row_info_modal.html.erb b/app/views/repositories/_repository_row_info_modal.html.erb index a121aa76f..f9b3ae42b 100644 --- a/app/views/repositories/_repository_row_info_modal.html.erb +++ b/app/views/repositories/_repository_row_info_modal.html.erb @@ -15,33 +15,41 @@ <%= t('repositories.repository', name: @repository_row.repository.name) %> <%= @repository_row.repository.archived? ? I18n.t('atwho.res.archived') : '' %> -

- - <%= t('repository_row.modal_info.ID') %> - <%= @repository_row.parent_id || @repository_row.id %> - -
- - <%= t('repository_row.modal_info.added_on') %>: - <%= l(@repository_row.created_at, format: :full) %> - -
- - <%= t('repository_row.modal_info.added_by') %>: - <%= @repository_row.created_by.full_name %> - - <% @repository_row.repository_cells.each do |repository_cell| %> -
- - <%= t 'repository_row.modal_info.column_name', cf: repository_cell.repository_column.name %> - <% if repository_cell.value_type == 'RepositoryAssetValue' %> - <%= render partial: 'assets/asset_link', locals: { asset: repository_cell.value.asset, display_image_tag: false }, formats: :html %> - <% else %> - <%= custom_auto_link(repository_cell.value.formatted, simple_format: false, team: current_team) %> +

+
+

+ + <%= t('repository_row.modal_info.ID') %> + <%= @repository_row.parent_id || @repository_row.id %> + +
+ + <%= t('repository_row.modal_info.added_on') %>: + <%= l(@repository_row.created_at, format: :full) %> + +
+ + <%= t('repository_row.modal_info.added_by') %>: + <%= @repository_row.created_by.full_name %> + + <% @repository_row.repository_cells.each do |repository_cell| %> +
+ + <%= t 'repository_row.modal_info.column_name', cf: repository_cell.repository_column.name %> + <% if repository_cell.value_type == 'RepositoryAssetValue' %> + <%= render partial: 'assets/asset_link', locals: { asset: repository_cell.value.asset, display_image_tag: false }, formats: :html %> + <% else %> + <%= custom_auto_link(repository_cell.value.formatted, simple_format: false, team: current_team) %> + <% end %> + <% end %> - - <% end %> -

+

+
+
+ + +
+
<% if @repository_row.repository.is_a?(Repository) %> <% if @assigned_modules.size.positive? %> @@ -98,7 +106,9 @@ <% end %>
- + + +
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb index ce6e0b4b2..14aa43137 100644 --- a/app/views/repositories/show.html.erb +++ b/app/views/repositories/show.html.erb @@ -172,6 +172,7 @@ <%= javascript_pack_tag 'emoji_button' %> <%= javascript_pack_tag 'pdfjs/pdf_js' %> <%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %> +<%= javascript_pack_tag 'custom/bwipjs' %>