diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index bd6c65afd..9fdd4b3bd 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -45,6 +45,7 @@ //= require activestorage //= require global_activities/side_pane //= require protocols/header +//= require protocols/print //= require marvinjslauncher //= require jstree.min //= require_tree ./repositories/renderers @@ -56,7 +57,6 @@ //= require sidebar //= require turbolinks - // Initialize links for submitting forms. This is useful for submitting // forms with clicking on links outside form in cases when other than // GET method is used. diff --git a/app/assets/javascripts/protocols/print.js b/app/assets/javascripts/protocols/print.js new file mode 100644 index 000000000..12c026b24 --- /dev/null +++ b/app/assets/javascripts/protocols/print.js @@ -0,0 +1,3 @@ +$(document).on('submit', '#print-protocol-form', function() { + $('#print-protocol-modal').modal('hide'); +}); diff --git a/app/assets/stylesheets/print_protocol.scss b/app/assets/stylesheets/print_protocol.scss new file mode 100644 index 000000000..7e0330d49 --- /dev/null +++ b/app/assets/stylesheets/print_protocol.scss @@ -0,0 +1,191 @@ +@import "shared_styles/constants/*"; +@import "constants"; + +@page { + size: A4; + margin: 8mm; +} + +body { + font-family: Lato, "Open Sans", Arial, Helvetica, sans-serif; + font-size: 16px; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +.print-protocol-header { + font-size: .8em; + + img { + height: .8em; + } +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.3em; + + .fa-check-circle { + color: $brand-success; + font-size: 1.3em; + } +} + +h3 { + font-size: 1em; +} + +hr { + background-color: $color-alto; + border-width: 0; + height: 1px; +} + +.print-step { + margin: 5em 0; +} + +.step-check-circle { + border-radius: 50%; + border: .15em solid $color-alto; + color: $color-white; + display: inline-block; + height: 1.1em; + text-align: center; + vertical-align: text-bottom; + width: 1.1em; + + &.checked { + background-color: $brand-success; + border-color: $brand-success; + } +} + +.print-checklist-item { + margin-bottom: 1em; + + span { + display: inline-block; + vertical-align: top; + } +} + +.checklist-checkbox { + border: .15em solid $color-alto; + border-radius: .2em; + display: inline-block; + height: 1em; + text-align: center; + width: 1em; + + &.checked { + background-color: $brand-primary; + border-color: $brand-primary; + color: $color-white; + font-size: 1em; + } +} + +.print-table { + border-collapse: collapse; + text-align: center; + width: 100%; + + &, + td, + th { + border: 1px solid $color-silver-chalice; + } + + th { + font-weight: normal; + } + + th, + td:first-child { + background: $color-concrete; + } + + td { + padding: .15em .3em; + } +} + +.print-asset { + margin: 1em; + + p { + font-style: italic; + } + + &.thumbnail { + float: left; + padding: 1em; + } + + &.thumbnail, + &.list { + border: 1px solid $color-silver-chalice; + } + + &.list { + padding: .5em 1em; + } + + &.inline { + margin: 5em 0; + text-align: center; + + img { + max-width: 100%; + } + } +} + +.print-thumbnails { + clear: both; + overflow: hidden; +} + +.print-asset-icon { + display: inline-block; + font-size: $font-size-h2; + text-align: center; + width: 24px; + + .fa-file-pdf { + color: $pdf-color; + } + + .fa-image { + color: $brand-primary; + } +} + +.print-comments { + margin-bottom: 5em; +} + +.print-comment-container { + margin-bottom: 1em; +} + +.print-comment-header { + .user-avatar { + float: left; + margin-right: 1em; + } + + .user-name { + color: $color-silver-chalice; + } +} + +.print-comment-footer { + color: $color-silver-chalice; + font-size: .8em; + text-align: right; +} diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss index 12e31c49c..608661686 100644 --- a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss +++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss @@ -8,6 +8,7 @@ display: inline-block; height: var(--sci-checkbox-size); position: relative; + vertical-align: middle; width: var(--sci-checkbox-size); } diff --git a/app/controllers/protocols_controller.rb b/app/controllers/protocols_controller.rb index 245537a65..52a1e5781 100644 --- a/app/controllers/protocols_controller.rb +++ b/app/controllers/protocols_controller.rb @@ -11,6 +11,8 @@ class ProtocolsController < ApplicationController include TeamsHelper include CommentHelper + layout 'protocols/print', only: :print + before_action :check_create_permissions, only: %i( create_new_modal create @@ -108,6 +110,11 @@ class ProtocolsController < ApplicationController end end + def print + @protocol = Protocol.find(params[:id]) + render_403 && return unless @protocol.my_module.blank? || can_read_protocol_in_module?(@protocol) + end + def linked_children respond_to do |format| format.json do diff --git a/app/views/layouts/protocols/print.html.erb b/app/views/layouts/protocols/print.html.erb new file mode 100644 index 000000000..1e6f38d0c --- /dev/null +++ b/app/views/layouts/protocols/print.html.erb @@ -0,0 +1,14 @@ + + + + <%= t("protocols.print.title") %> + + <%= stylesheet_link_tag 'print_protocol', media: 'print, screen' %> + + <%= yield %> + + + diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index 8a0b05156..ebf281905 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/app/views/my_modules/protocols.html.erb @@ -121,6 +121,7 @@ <%=t "protocols.steps.new_step" %> <% end %> + <%= render partial: "my_modules/protocols/print_protocol_button", locals: { protocol: @protocol } %> <%= render partial: "my_modules/protocols/protocol_options_dropdown" %> diff --git a/app/views/my_modules/protocols/_print_protocol_button.html.erb b/app/views/my_modules/protocols/_print_protocol_button.html.erb new file mode 100644 index 000000000..766342a87 --- /dev/null +++ b/app/views/my_modules/protocols/_print_protocol_button.html.erb @@ -0,0 +1,35 @@ + + + <%=t "protocols.print.button" %> + + + diff --git a/app/views/protocols/print.html.erb b/app/views/protocols/print.html.erb new file mode 100644 index 000000000..073700253 --- /dev/null +++ b/app/views/protocols/print.html.erb @@ -0,0 +1,115 @@ +

+ <%= t('.header.printed_from') %> + + <%= t('.header.print_info', datetime: l(DateTime.current, format: :full), full_name: current_user.full_name) %> +

+ +

<%= @protocol.name || @protocol.my_module.name %>

+
<%= @protocol.description.html_safe %>
+<% @protocol.steps.order(position: :asc).each do |step| %> +
+

+
+ <% if step.completed_on %>✓<% end %> +
+ <%= step.position + 1 %>. <%= step.name %> +

+
<%= step.description.html_safe %>
+ + <% step.checklists.each do |checklist| %> +
+

<%= checklist.name %>

+ <% checklist.checklist_items.order(position: :asc).each do |checklist_item| %> +
+ + <% if checklist_item.checked %> + ✓ + <% end %> + + <%= checklist_item.text %> +
+ <% end %> +
+ <% end %> + + <% step.tables.each do |table| %> + <% table_data = JSON.parse(table.contents)["data"] %> +

<%= table.name %>

+ + + + + <% col = "A" %> + <% table_data[0].length.times do %> + + <% col.succ! %> + <% end %> + + + + <% table_data.each_with_index do |tr, row| %> + + + <% tr.each do |td| %> + + <% end %> + + <% end %> + +
<%= col %>
<%= row + 1 %><%= td %>
+ <% end %> + <% step.assets.where(view_mode: "inline").each do |asset| %> +
+
+ <%= image_tag asset.blob.url %> +

<%= asset.blob.filename %>

+
+
+ <% end %> + <% step.assets.where(view_mode: "list").each do |asset| %> +
+ <%= file_extension_icon_html(asset) %> + <%= asset.blob.filename %> +
+ <% end %> +
+ <% step.assets.where(view_mode: "thumbnail").each do |asset| %> +
+
+ <%= image_tag asset.blob.representation(resize_to_limit: Constants::MEDIUM_PIC_FORMAT).processed %> +

<%= asset.blob.filename %>

+
+
+ <% end %> +
+
+ + <% if params[:include_comments] && step.comments.present? %> +
+

<%= t('Comments') %>:

+ <% step.step_comments.each do |comment| %> +
+
+ <%= image_tag avatar_path(comment.user, :icon_small), class: 'user-avatar' %> +
+ <%= comment.user.full_name %> +
+
+
+
+ <%= comment.message %> +
+
+
+ <%= I18n.l(comment.created_at, format: :full) %> +
+
+
+
+ <% end %> +
+ <% end %> +
+<% end %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 48eb315ad..b4cab62c5 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -69,6 +69,7 @@ Rails.application.config.assets.precompile += %w(datatables.css) Rails.application.config.assets.precompile += %w(my_modules.js) Rails.application.config.assets.precompile += %w(Sortable.min.js) Rails.application.config.assets.precompile += %w(reports_pdf.css) +Rails.application.config.assets.precompile += %w(print_protocol.css) Rails.application.config.assets.precompile += %w(jszip.min.js) Rails.application.config.assets.precompile += %w(comments.js) Rails.application.config.assets.precompile += %w(projects/show.js) diff --git a/config/locales/en.yml b/config/locales/en.yml index 31657becc..76a5272ef 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2002,6 +2002,16 @@ en: unchangable_error_message: "Predefined roles can not be changed!" protocols: + print: + title: "Print protocol" + button: "Print" + modal: + title: "Print protocol" + content: "Select what to include in the printed version of this protocol." + include_comments: "Include comments when printing" + header: + printed_from: "Printed from" + print_info: "on %{datetime} by %{full_name}" protocols_io_import: title_too_long: "... Text is too long so we had to cut it off." too_long: "... Text is too long so we had to cut it off." diff --git a/config/routes.rb b/config/routes.rb index 6ca2b1df2..3022f0f0a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -492,6 +492,7 @@ Rails.application.routes.draw do resources :protocols, only: [:index, :edit, :create] do resources :steps, only: [:new, :create] member do + get 'print', to: 'protocols#print' get 'linked_children', to: 'protocols#linked_children' post 'linked_children_datatable', to: 'protocols#linked_children_datatable'