mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-01-30 19:48:18 +08:00
Print protocol fixes [SCI-6318] (#3717)
* Fix smart annotations [SCI-6318] * Fix asset rendering [SCI-6316, SCI-6417] * Copy fix [SCI-6315] * Fix print protocol name handling [SCI-6318] * CSS linter fixes * Add support for handson tables [SCI-6318] * Use partial for handsontable formulas [SCI-6318]
This commit is contained in:
artoscinote
GitHub
parent
26b913f444
commit
3f7f576b29
4 changed files with 116 additions and 41 deletions
|
|
@ -6,6 +6,11 @@
|
|||
margin: 8mm;
|
||||
}
|
||||
|
||||
.page-break {
|
||||
clear: both;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Lato, "Open Sans", Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
|
|
@ -89,7 +94,7 @@ hr {
|
|||
}
|
||||
}
|
||||
|
||||
.print-table {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -122,8 +127,20 @@ hr {
|
|||
}
|
||||
|
||||
&.thumbnail {
|
||||
float: left;
|
||||
padding: 1em;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1em 1em 0;
|
||||
text-align: center;
|
||||
width: 15%;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.print-asset-image {
|
||||
flex-basis: .25;
|
||||
}
|
||||
}
|
||||
|
||||
&.thumbnail,
|
||||
|
|
@ -146,8 +163,10 @@ hr {
|
|||
}
|
||||
|
||||
.print-thumbnails {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.print-asset-icon {
|
||||
|
|
@ -189,3 +208,18 @@ hr {
|
|||
font-size: .8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.global-avatar-container.smart-annotation {
|
||||
img {
|
||||
margin-right: .2em;
|
||||
vertical-align: middle;
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.ht_clone_top,
|
||||
.ht_clone_bottom,
|
||||
.ht_clone_left,
|
||||
.ht_clone_top_left_corner {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,37 @@
|
|||
<head>
|
||||
<title><%= t("protocols.print.title") %></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<%= javascript_include_tag 'application' %>
|
||||
<%= javascript_include_tag "handsontable.full" %>
|
||||
<%= render 'shared/formulas_libraries' %>
|
||||
<%= stylesheet_link_tag 'print_protocol', media: 'print, screen' %>
|
||||
<body>
|
||||
<%= yield %>
|
||||
<script>
|
||||
$("[data-role='hot-table']").each(function() {
|
||||
var $container = $(this).find("[data-role='step-hot-table']");
|
||||
var contents = $(this).find('.hot-contents');
|
||||
|
||||
$container.handsontable({
|
||||
startRows: <%= Constants::HANDSONTABLE_INIT_ROWS_CNT %>,
|
||||
startCols: <%= Constants::HANDSONTABLE_INIT_COLS_CNT %>,
|
||||
rowHeaders: true,
|
||||
colHeaders: true,
|
||||
fillHandle: false,
|
||||
formulas: true,
|
||||
readOnly: true
|
||||
});
|
||||
var hot = $container.handsontable('getInstance');
|
||||
|
||||
if (contents.attr("value")) {
|
||||
var data = JSON.parse(contents.attr("value"));
|
||||
if (Array.isArray(data.data)) hot.loadData(data.data);
|
||||
setTimeout(() => {
|
||||
hot.render()
|
||||
}, 0)
|
||||
}
|
||||
});
|
||||
|
||||
window.print();
|
||||
window.onfocus=function(){ window.close(); }
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="modal-footer">
|
||||
<div class="pull-right">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal"><%=t "general.cancel" %></button>
|
||||
<input type="submit" value="<%= t("protocols.print.button") %>", class="btn btn-primary">
|
||||
<input type="submit" value="<%= t("protocols.print.title") %>", class="btn btn-primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,17 @@
|
|||
<span><%= t('.header.print_info', datetime: l(DateTime.current, format: :full), full_name: current_user.full_name) %></span>
|
||||
</p>
|
||||
|
||||
<h1><%= @protocol.name || @protocol.my_module.name %></h1>
|
||||
<div><%= @protocol.description.html_safe %></div>
|
||||
<h1><%= @protocol.linked? ? protocol_name(@protocol.parent) : @protocol.name || @protocol.my_module.name %></h1>
|
||||
<div>
|
||||
<% if @protocol.description.present? %>
|
||||
<%= custom_auto_link(@protocol.tinymce_render(:description),
|
||||
simple_format: false,
|
||||
tags: %w(img),
|
||||
team: current_team) %>
|
||||
<% else %>
|
||||
<em><%= t('my_modules.protocols.protocol_status_bar.no_description') %></em>
|
||||
<% end %>
|
||||
</div>
|
||||
<% @protocol.steps.order(position: :asc).each do |step| %>
|
||||
<div class="print-step">
|
||||
<h2>
|
||||
|
|
@ -16,11 +25,22 @@
|
|||
</div>
|
||||
<%= step.position + 1 %>. <%= step.name %>
|
||||
</h2>
|
||||
<div><%= step.description.html_safe %></div>
|
||||
<div>
|
||||
<% if step.description.blank? %>
|
||||
<em><%= t('protocols.steps.no_description') %></em>
|
||||
<% else %>
|
||||
<div class="ql-editor">
|
||||
<%= custom_auto_link(step.tinymce_render(:description),
|
||||
simple_format: false,
|
||||
tags: %w(img),
|
||||
team: current_team) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% step.checklists.each do |checklist| %>
|
||||
<div class="print-checklist">
|
||||
<h3><%= checklist.name %></h3>
|
||||
<h3><%= smart_annotation_parser(checklist.name, current_team).html_safe %></h3>
|
||||
<% checklist.checklist_items.order(position: :asc).each do |checklist_item| %>
|
||||
<div class="print-checklist-item">
|
||||
<span class="checklist-checkbox <%= 'checked' if checklist_item.checked %>">
|
||||
|
|
@ -28,58 +48,51 @@
|
|||
✓
|
||||
<% end %>
|
||||
</span>
|
||||
<span><%= checklist_item.text %></span>
|
||||
<span><%= smart_annotation_parser(checklist_item.text, current_team).html_safe %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% step.tables.each do |table| %>
|
||||
<% table_data = JSON.parse(table.contents)["data"] %>
|
||||
<h3><%= table.name %></h3>
|
||||
<table class="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<% col = "A" %>
|
||||
<% table_data[0].length.times do %>
|
||||
<th><%= col %></th>
|
||||
<% col.succ! %>
|
||||
<% end %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% table_data.each_with_index do |tr, row| %>
|
||||
<tr>
|
||||
<td><%= row + 1 %></td>
|
||||
<% tr.each do |td| %>
|
||||
<td><%= td %></td>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>
|
||||
<%= auto_link(simple_format(table.name),
|
||||
link: :urls,
|
||||
html: { target: '_blank' }) %>
|
||||
</strong>
|
||||
<div class="print-table">
|
||||
<div class="page-break"></div>
|
||||
<div data-role="hot-table" class="hot-table">
|
||||
<%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
|
||||
<div data-role="step-hot-table" class="step-result-hot-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% step.assets.where(view_mode: "inline").each do |asset| %>
|
||||
<div class="print-asset inline">
|
||||
<div class="print-asset-image">
|
||||
<%= image_tag asset.blob.url %>
|
||||
<p><%= asset.blob.filename %></p>
|
||||
<% if asset.previewable? %>
|
||||
<%= image_tag asset.large_preview %>
|
||||
<% end %>
|
||||
<p><%= asset.render_file_name %></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-break"></div>
|
||||
<% end %>
|
||||
<% step.assets.where(view_mode: "list").each do |asset| %>
|
||||
<div class="print-asset list">
|
||||
<span class="print-asset-icon"><%= file_extension_icon_html(asset) %></span>
|
||||
<span><%= asset.blob.filename %></span>
|
||||
<span><%= asset.render_file_name %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="print-thumbnails">
|
||||
<% step.assets.where(view_mode: "thumbnail").each do |asset| %>
|
||||
<div class="print-asset thumbnail">
|
||||
<div class="print-asset-image">
|
||||
<%= image_tag asset.blob.representation(resize_to_limit: Constants::MEDIUM_PIC_FORMAT).processed %>
|
||||
<p><%= asset.blob.filename %></p>
|
||||
<% if asset.previewable? %>
|
||||
<%= image_tag asset.blob.representation(resize_to_limit: Constants::MEDIUM_PIC_FORMAT).processed %>
|
||||
<% end %>
|
||||
<p><%= asset.render_file_name %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -99,7 +112,7 @@
|
|||
</div>
|
||||
<div class="print-comment-body">
|
||||
<div class="comment-message">
|
||||
<%= comment.message %>
|
||||
<%= smart_annotation_parser(comment.message, current_team).html_safe %>
|
||||
</div>
|
||||
<div class="print-comment-footer">
|
||||
<div class="print-comment-create-date">
|
||||
|
|
@ -112,4 +125,5 @@
|
|||
</div>
|
||||
<% end %>
|
||||
<hr>
|
||||
<div class="page-break"></div>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue