Add forms to print protocol [SCI-11648]

This commit is contained in:
Andrej 2025-03-24 15:57:48 +01:00
parent cc79bad19e
commit a377624aee
8 changed files with 154 additions and 0 deletions

View file

@ -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;
}

View file

@ -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"

View file

@ -67,6 +67,8 @@
</div>
<% end %>
</div>
<% when 'FormResponse' %>
<%= render partial: 'protocols/print/form_response_element', locals: { form_response: step_element.orderable }%>
<% end %>
<% end %>

View 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>

View file

@ -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>

View file

@ -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 %>

View file

@ -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 %>

View file

@ -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>"