mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-29 16:34:32 +08:00
Add forms to print protocol [SCI-11648]
This commit is contained in:
Andrej
parent
cc79bad19e
commit
a377624aee
8 changed files with 154 additions and 0 deletions
|
|
@ -1,6 +1,8 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
|
||||
@import "sn-inter-font";
|
||||
@import "sn-icon-font";
|
||||
@import "../shared_styles/constants";
|
||||
@import "../constants";
|
||||
|
||||
|
|
@ -294,3 +296,7 @@ hr {
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<%= javascript_include_tag "handsontable.full" %>
|
||||
<%= render 'shared/formulas_libraries' %>
|
||||
<%= stylesheet_link_tag 'print_protocol', media: 'print, screen' %>
|
||||
<%= stylesheet_link_tag 'tailwind', media: 'print, screen' %>
|
||||
<body>
|
||||
<%= yield %>
|
||||
<div id="handson"
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@
|
|||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% when 'FormResponse' %>
|
||||
<%= render partial: 'protocols/print/form_response_element', locals: { form_response: step_element.orderable }%>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
96
app/views/protocols/print/_form_response_element.html.erb
Normal file
96
app/views/protocols/print/_form_response_element.html.erb
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<div class="content__form-container pr-8">
|
||||
<div class="sci-divider my-6"></div>
|
||||
<div class="max-w-[800px] w-full rounded bg-sn-super-light-grey p-6 flex flex-col gap-4">
|
||||
<div class="flex items-center">
|
||||
<h3 class="my-1"><%= form_response.form.name %></h3>
|
||||
<% if form_response.status == 'submitted' %>
|
||||
<div class="ml-auto text-right text-xs text-sn-grey-700">
|
||||
<%= t('forms.response.submitted_on') %> <span><%= I18n.l(form_response.submitted_at, format: :full) %></span><br>
|
||||
<%= t('forms.response.by') %> <%= form_response.submitted_by&.full_name %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="ml-auto text-right text-xs text-sn-grey-700">
|
||||
<%= t('forms.response.not_submitted') %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% form_response.form.form_fields.each do |field| %>
|
||||
<div class="p-4 rounded bg-white text-sm mb-2">
|
||||
<div class="grow">
|
||||
<div class="font-bold">
|
||||
<%= field.name %>
|
||||
<% if field.data&.dig('unit') %>
|
||||
<span>(<%= field.data&.dig('unit') %>)</span>
|
||||
<% end %>
|
||||
|
||||
<% case field.data.dig('type') %>
|
||||
<% when 'SingleChoiceField' %>
|
||||
<span class="font-normal"><%= t("protocols.print.forms.single_choice_html") %></span>
|
||||
<% when 'MultipleChoiceField' %>
|
||||
<span class="font-normal"><%= t("protocols.print.forms.multiple_choice_html") %></span>
|
||||
<% end %>
|
||||
|
||||
<% if field.required %>
|
||||
<span class="text-sn-delete-red">*</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if field.description %>
|
||||
<div>
|
||||
<%= field.description %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="mt-2">
|
||||
<% field_value = form_response.form_field_values.find_by(form_field_id: field.id, latest: true) %>
|
||||
<% field_type = field.data.dig('type') %>
|
||||
|
||||
<% case field_type %>
|
||||
<% when 'TextField' %>
|
||||
<div class="sci-input-container-v2 h-24 mb-1">
|
||||
<textarea class="sci-input box-border" disabled><%= field_value&.formatted %></textarea>
|
||||
</div>
|
||||
|
||||
<% when 'NumberField' %>
|
||||
<div class="sci-input-container-v2">
|
||||
<input
|
||||
type="number"
|
||||
class="sci-input box-border <%= '!border-sn-alert-brittlebush' if field_value&.present? && !field_value&.value_in_range? %>"
|
||||
disabled
|
||||
value="<%= field_value&.number %>" />
|
||||
</div>
|
||||
<% if field_value&.present? && !field_value&.value_in_range? %>
|
||||
<div class="text-xs text-sn-alert-brittlebush">
|
||||
<%= field&.data&.dig('validations', 'response_validation', 'message') %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% when 'DatetimeField' %>
|
||||
<%= render partial: 'protocols/print/element/form_datetime_field_value_element', locals: { field: field, field_value: field_value } %>
|
||||
|
||||
<% when 'SingleChoiceField' %>
|
||||
<%= render partial: 'protocols/print/element/form_choice_value_element', locals: { field: field, selected_options: [field_value&.text] } %>
|
||||
|
||||
<% when 'MultipleChoiceField' %>
|
||||
<%= render partial: 'protocols/print/element/form_choice_value_element', locals: { field: field, selected_options: field_value&.selection } %>
|
||||
|
||||
<% when 'ActionField' %>
|
||||
<%= render partial: 'protocols/print/element/checkbox_button', locals: { value: field_value&.flag, description: I18n.t('forms.fields.mark_as_completed') } %>
|
||||
<% end %>
|
||||
|
||||
<div class="flex items-center justify-end mt-4 gap-4">
|
||||
<% if field_value&.submitted_at %>
|
||||
<span class="text-sn-grey-700 text-xs">
|
||||
<%= I18n.t('forms.fields.submitted_by', date: I18n.l(field_value.submitted_at, format: :full), user: field_value.submitted_by&.full_name) %>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<% if field&.allow_not_applicable %>
|
||||
<%= render partial: 'protocols/print/element/checkbox_button', locals: { value: field_value&.not_applicable, description: I18n.t('forms.fields.mark_as_na') } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end%>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<button class="btn btn-secondary mb-0.5" disabled>
|
||||
<div class="w-4 h-4 border rounded-sm flex items-center justify-center border-sn-grey-500 <%= value ? 'bg-sn-grey-500' : '' %>">
|
||||
<i class="sn-icon sn-icon-check text-white" style="font-size: 16px !important;"></i>
|
||||
</div>
|
||||
<%= description %>
|
||||
</button>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<% field&.data&.dig('options')&.each do |option| %>
|
||||
<div class="print-checklist-item">
|
||||
<span class="checklist-checkbox checked">
|
||||
<% if selected_options&.include?(option) %>
|
||||
<%= image_tag "check-square-solid.svg" %>
|
||||
<% else %>
|
||||
<span class="checklist-checkbox not-checked"></span>
|
||||
<% end %>
|
||||
</span>
|
||||
<div><%= option %></div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<% if field&.data&.dig('range') %>
|
||||
<div class='flex flex-row w-full gap-4 items-center'>
|
||||
<% [field_value&.datetime, field_value&.datetime_to].each_with_index do |date, index| %>
|
||||
<div class="sci-input-container-v2 h-9 w-full">
|
||||
<input class="sci-input box-border items-center" disabled>
|
||||
<span class="flex relative ml-2 align-middle gap-2">
|
||||
<img src="/images/calendar/calendar.svg"/>
|
||||
<% if date %>
|
||||
<%= I18n.l(date, format: field&.data['time'] ? :full : :full_date) %>
|
||||
<% end %>
|
||||
</span>
|
||||
</input>
|
||||
</div>
|
||||
<%= '-' if index === 0 %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="sci-input-container-v2 h-9">
|
||||
<input class="sci-input box-border items-center" disabled>
|
||||
<span class="flex relative ml-2 align-middle gap-2">
|
||||
<img src="/images/calendar/calendar.svg"/>
|
||||
<% if field_value&.datetime %>
|
||||
<%= I18n.l(field_value.datetime, format: field.data['time'] ? :full : :full_date) %>
|
||||
<% end %>
|
||||
</span>
|
||||
</input>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -3583,6 +3583,9 @@ en:
|
|||
header:
|
||||
printed_from: "Printed from"
|
||||
print_info: "on %{datetime} by %{full_name}"
|
||||
forms:
|
||||
single_choice_html: "<em>(Select one)</em>"
|
||||
multiple_choice_html: "<em>(Select multiple)</em>"
|
||||
protocols_io_import:
|
||||
title_too_long: "... Text is too long so we had to cut it off."
|
||||
too_long: "... <span class='label label-warning'>Text is too long so we had to cut it off.</span>"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue