show field boxes on the submissions page

AlexBTurchyn · omohokcoj · commit a8b5e008148e · 2025-12-15T12:05:37.000+02:00
diff --git a/app/controllers/submissions_controller.rb b/app/controllers/submissions_controller.rb
@@ -12,6 +12,14 @@ class SubmissionsController < ApplicationController
     authorize!(:create, Submission)
   end
 
+  FIELD_ICONS = {
+    'text' => 'text_size', 'signature' => 'writing_sign', 'date' => 'calendar_event',
+    'number' => 'square_number_1', 'image' => 'photo', 'initials' => 'letter_case_upper',
+    'file' => 'paperclip', 'select' => 'select', 'checkbox' => 'checkbox', 'radio' => 'circle_dot',
+    'stamp' => 'rubber_stamp', 'cells' => 'columns_3', 'multiple' => 'checks', 'phone' => 'phone_check',
+    'payment' => 'credit_card', 'verification' => 'id'
+  }.freeze
+
   def show
     @submission = Submissions.preload_with_pages(@submission)
 
diff --git a/app/views/icons/_calendar_event.html.erb b/app/views/icons/_calendar_event.html.erb
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
+  <path d="M16 3l0 4"></path>
+  <path d="M8 3l0 4"></path>
+  <path d="M4 11l16 0"></path>
+  <path d="M8 15h2v2h-2z"></path>
+</svg>
diff --git a/app/views/icons/_checkbox.html.erb b/app/views/icons/_checkbox.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9 11l3 3l8 -8"></path>
+  <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
+</svg>
diff --git a/app/views/icons/_checks.html.erb b/app/views/icons/_checks.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M7 12l5 5l10 -10"></path>
+  <path d="M2 12l5 5m5 -5l5 -5"></path>
+</svg>
diff --git a/app/views/icons/_columns_3.html.erb b/app/views/icons/_columns_3.html.erb
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1zm6 -1v18m6 -18v18"></path>
+</svg>
diff --git a/app/views/icons/_credit_card.html.erb b/app/views/icons/_credit_card.html.erb
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
+  <path d="M3 10l18 0"></path>
+  <path d="M7 15l.01 0"></path>
+  <path d="M11 15l2 0"></path>
+</svg>
diff --git a/app/views/icons/_id.html.erb b/app/views/icons/_id.html.erb
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
+  <path d="M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+  <path d="M15 8l2 0"></path>
+  <path d="M15 12l2 0"></path>
+  <path d="M7 16l10 0"></path>
+</svg>
diff --git a/app/views/icons/_letter_case_upper.html.erb b/app/views/icons/_letter_case_upper.html.erb
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path>
+  <path d="M3 13h7"></path>
+  <path d="M14 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path>
+  <path d="M14 13h7"></path>
+</svg>
diff --git a/app/views/icons/_photo.html.erb b/app/views/icons/_photo.html.erb
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 8h.01"></path>
+  <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path>
+  <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path>
+  <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path>
+</svg>
diff --git a/app/views/icons/_rubber_stamp.html.erb b/app/views/icons/_rubber_stamp.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 17.85h-18c0 -4.05 1.421 -4.05 3.79 -4.05c5.21 0 1.21 -4.59 1.21 -6.8a4 4 0 1 1 8 0c0 2.21 -4 6.8 1.21 6.8c2.369 0 3.79 0 3.79 4.05z"></path>
+  <path d="M5 21h14"></path>
+</svg>
diff --git a/app/views/icons/_select.html.erb b/app/views/icons/_select.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
+  <path d="M9 11l3 3l3 -3"></path>
+</svg>
diff --git a/app/views/icons/_square_number_1.html.erb b/app/views/icons/_square_number_1.html.erb
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
+  <path d="M10 10l2 -2v8"></path>
+</svg>
diff --git a/app/views/icons/_text_size.html.erb b/app/views/icons/_text_size.html.erb
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 7v-2h13v2"></path>
+  <path d="M10 5v14"></path>
+  <path d="M12 19h-4"></path>
+  <path d="M15 13v-1h6v1"></path>
+  <path d="M18 12v7"></path>
+  <path d="M17 19h2"></path>
+</svg>
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
@@ -93,8 +93,10 @@
       <div class="pr-3.5 pl-0.5">
         <% fields_index = Templates.build_field_areas_index(@submission.template_fields || @submission.template.fields) %>
         <% submitters_index = @submission.submitters.index_by(&:uuid) %>
+        <% submitters_order_index = nil %>
         <% attachments_index = ActiveStorage::Attachment.where(record: @submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %>
         <% page_blob_struct = Struct.new(:url, :metadata, keyword_init: true) %>
+        <% bg_classes = %w[bg-red-100 bg-sky-100 bg-emerald-100 bg-yellow-100 bg-purple-100 bg-pink-100 bg-cyan-100 bg-orange-100 bg-lime-100 bg-indigo-100] %>
         <% schema.each do |item| %>
           <% document = @submission.schema_documents.find { |e| e.uuid == item['attachment_uuid'] } %>
           <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
@@ -111,19 +113,29 @@
                 <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
                   <% value = values[field['uuid']].presence || (field['default_value'] != '{{date}}' && field['readonly'] == true && field['conditions'].blank? && field['default_value'].present? ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil) %>
                   <% value ||= field['default_value'] if field['type'] == 'heading' %>
-                  <% next if value.blank? %>
                   <% submitter = submitters_index[field['submitter_uuid']] %>
-                  <% if (mask = field.dig('preferences', 'mask').presence) && signed_in? && can?(:read, @submission) %>
-                    <span class="group">
-                      <span class="hidden group-hover:inline">
-                        <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id: %>
-                      </span>
-                      <span class="group-hover:hidden">
-                        <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value: Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', '), locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id: %>
+                  <% if value.present? %>
+                    <% if (mask = field.dig('preferences', 'mask').presence) && signed_in? && can?(:read, @submission) %>
+                      <span class="group">
+                        <span class="hidden group-hover:inline">
+                          <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id: %>
+                        </span>
+                        <span class="group-hover:hidden">
+                          <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value: Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', '), locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id: %>
+                        </span>
                       </span>
-                    </span>
-                  <% else %>
-                    <%= render 'submissions/value', page_width: width, page_height: height, font_scale:, area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id:, with_submitter_timezone:, with_signature_id_reason: %>
+                    <% else %>
+                      <%= render 'submissions/value', page_width: width, page_height: height, font_scale:, area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter:, with_signature_id:, with_submitter_timezone:, with_signature_id_reason: %>
+                    <% end %>
+                  <% elsif field['readonly'] != true && submitter && !submitter.completed_at? %>
+                    <% submitters_order_index ||= (@submission.template_submitters || @submission.template.submitters).each_with_index.to_h { |s, i| [s['uuid'], i] } %>
+                    <% submitter_index = submitters_order_index[submitter.uuid] %>
+                    <% bg_class = bg_classes[submitter_index % bg_classes.size] %>
+                    <div class="absolute overflow-visible" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%;">
+                      <div class="flex h-full w-full bg-opacity-80 justify-center items-center <%= bg_class %>">
+                        <%= svg_icon(SubmissionsController::FIELD_ICONS[field['type']], class: 'max-h-10 w-full h-full stroke-2 opacity-50') %>
+                      </div>
+                    </div>
                   <% end %>
                 <% end %>
               </div>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`
	`2`	`+ <path d="M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1zm6 -1v18m6 -18v18"></path>`
	`3`	`+</svg>`