implement signature preview

app/javascript/elements/flow_area.js

@@ -1,5 +1,18 @@
 export default class extends HTMLElement {
   setValue (value) {
-    this.innerHTML = value
+    const { fieldType } = this.dataset
+
+    if (fieldType === 'signature') {
+      [...this.children].forEach(e => e.remove())
+
+      const img = document.createElement('img')
+
+      img.classList.add('w-full', 'h-full', 'object-contain')
+      img.src = value.url
+
+      this.append(img)
+    } else {
+      this.innerHTML = value
+    }
   }
 }

app/javascript/elements/flow_view.js

@@ -14,9 +14,13 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   passValueToArea (e) {
+    this.areasSetValue(e.target.id, e.target.value)
+  }
+
+  areasSetValue (fieldUuid, value) {
     return (this.areas || []).forEach((area) => {
-      if (area.dataset.fieldUuid === e.target.id) {
+      if (area.dataset.fieldUuid === fieldUuid) {
-        area.setValue(e.target.value)
+        area.setValue(value)
       }
     })
   }
@@ -42,6 +46,8 @@ export default actionable(targetable(class extends HTMLElement {
       console.error('Error submitting form:', error)
     }).finally(() => {
       e.target.okButton.disabled = false
+
+      this.areasSetValue(e.target.closest('disable-hidden').dataset.fieldUuid, e.detail)
     })
   }
 
@@ -64,7 +70,7 @@ export default actionable(targetable(class extends HTMLElement {
   }
 
   moveStepBack (e) {
-    e.preventDefault()
+    e?.preventDefault()
 
     const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
 
@@ -75,7 +81,9 @@ export default actionable(targetable(class extends HTMLElement {
     }
   }
 
-  moveNextStep () {
+  moveNextStep (e) {
+    e?.preventDefault()
+
     const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
 
     const nextStep = this.steps[currentStepIndex + 1]
@@ -89,7 +97,7 @@ export default actionable(targetable(class extends HTMLElement {
   }
 
   focusField ({ target }) {
-    this.setVisibleStep(target.dataset.fieldUuid)
+    this.setVisibleStep(target.closest('flow-area').dataset.fieldUuid)
   }
 
   focusArea ({ target }) {

app/javascript/elements/signature_pad.js

@@ -9,7 +9,10 @@ export default actionable(targetable(class extends HTMLElement {
     'canvas',
     'input',
     'okButton',
-    'clearButton'
+    'image',
+    'clearButton',
+    'redrawButton',
+    'nextButton'
   ]
 
   connectedCallback () {
@@ -22,7 +25,7 @@ export default actionable(targetable(class extends HTMLElement {
     this.okButton.disabled = true
 
     this.canvas.toBlob((blob) => {
-      const file = new File([blob], 'signature.jpg', { type: 'image/jpg' })
+      const file = new File([blob], 'signature.png', { type: 'image/png' })
 
       new DirectUpload(
         file,
@@ -38,10 +41,23 @@ export default actionable(targetable(class extends HTMLElement {
           headers: { 'Content-Type': 'application/json' }
         }).then((resp) => resp.json()).then((attachment) => {
           this.input.value = attachment.uuid
-          this.dispatchEvent(new CustomEvent('upload', { details: attachment }))
+          this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
         })
       })
-    }, 'image/jpeg', 0.95)
+    }, 'image/png')
+  }
+
+  redraw (e) {
+    e?.preventDefault()
+
+    this.input.value = ''
+
+    this.canvas.classList.remove('hidden')
+    this.clearButton.classList.remove('hidden')
+    this.okButton.classList.remove('hidden')
+    this.image.remove()
+    this.redrawButton.remove()
+    this.nextButton.remove()
   }
 
   clear (e) {

app/views/submit_flow/_area.html.erb

@@ -1,3 +1,8 @@
-<flow-area data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class=" cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100  %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+<% value = submission.values[field['uuid']] %>
-  <%= submission.values[field['uuid']] %>
+<flow-area data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class="flex cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+  <% if field['type'] == 'signature' && attachment = attachments.find { |a| a.uuid == value } %>
+    <img class="w-full h-full object-contain" src="<%= attachment.url %>" width="<%= attachment.metadata['width'] %>px" height="<%= attachment.metadata['height'] %>px">
+  <% else %>
+    <%= value %>
+  <% end %>
 </flow-area>

app/views/submit_flow/show.html.erb

@@ -1,4 +1,6 @@
 <% fields_index = Flows.build_field_areas_index(@submission.flow) %>
+<% attachment_field_uuids = @submission.flow.fields.select { |f| f['type'].in?(%w[image signature attachment]) }.pluck('uuid') %>
+<% attachments = ActiveStorage::Attachment.where(uuid: @submission.values.values_at(*attachment_field_uuids).flatten).preload(:blob) %>
 <flow-view class="mx-auto block" style="max-width: 1000px">
   <% @submission.flow.schema.each do |item| %>
     <% document = @submission.flow.documents.find { |a| a.uuid == item['attachment_uuid'] } %>
@@ -7,7 +9,7 @@
         <img src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>" loading="lazy">
         <div class="top-0 bottom-0 left-0 right-0 absolute">
           <% fields_index.dig(document.uuid, index)&.each do |values| %>
-            <%= render 'area', submission: @submission, page:, **values %>
+            <%= render 'area', submission: @submission, attachments:, page:, **values %>
           <% end %>
         </div>
       </div>
@@ -66,14 +68,24 @@
                 <button type="submit"><%= button_title %></button>
               </div>
             <% elsif field['type'] == 'signature' %>
+              <% attachment = attachments.find { |a| a.uuid == @submission.values[field['uuid']] } %>
               <signature-pad data-submission-slug="<%= @submission.slug %>" data-action="upload:flow-view#submitSignature">
                 <input data-target="signature-pad.input" type="hidden" name="values[<%= field['uuid'] %>]" value="<%= @submission.values[field['uuid']] %>">
-                <canvas data-target="signature-pad.canvas"></canvas>
+                <canvas class="<%= 'hidden' if attachment %>" data-target="signature-pad.canvas"></canvas>
-                <button data-target="signature-pad.clearButton" data-action="click:signature-pad#clear">
+                <% if  attachment %>
+                  <img data-target="signature-pad.image" src="<%= attachment.url %>">
+                  <button data-target="signature-pad.redrawButton" data-action="click:signature-pad#redraw">
+                    Redraw
+                  </button>
+                  <button data-target="signature-pad.nextButton" data-action="click:flow-view#moveNextStep">
+                    Submit
+                  </button>
+                <% end %>
+                <button class="<%= 'hidden' if attachment %>" data-target="signature-pad.clearButton" data-action="click:signature-pad#clear">
                   Clear
                 </button>
                 <br>
-                <button data-target="signature-pad.okButton" data-action="click:signature-pad#submit">
+                <button class="<%= 'hidden' if attachment %>" data-target="signature-pad.okButton" data-action="click:signature-pad#submit">
                   <%= button_title %>
                 </button>
               </signature-pad>

tailwind.flow.config.js

@@ -3,8 +3,8 @@ const baseConfigs = require('./tailwind.config.js')
 module.exports = {
   ...baseConfigs,
   content: [
-    './app/views/submit_flow/*.erb',
+    './app/views/submit_flow/**/*.erb',
-    './app/views/start_flow/*.erb',
+    './app/views/start_flow/**/*.erb',
-    './app/views/send_submission_copy/*.erb'
+    './app/views/send_submission_copy/**/*.erb'
   ]
 }