add radio and checkboxes steps

app/javascript/components/field.vue

@@ -41,7 +41,7 @@
         v-for="(area, index) in areas"
         :key="index"
       >
-        {{ area }}
+        Area {{ index + 1 }}
         <button @click="removeArea(area)">
           &times;
         </button>

app/javascript/elements/flow_view.js

@@ -4,8 +4,7 @@ import { actionable } from '@github/catalyst/lib/actionable'
 export default actionable(targetable(class extends HTMLElement {
   static [target.static] = [
     'form',
-    'completed',
-    'submitButton'
+    'completed'
   ]
 
   static [targets.static] = [
@@ -22,16 +21,28 @@ export default actionable(targetable(class extends HTMLElement {
     })
   }
 
-  submitSignature () {
-    this.submitButton.click()
-  }
-
   setVisibleStep (uuid) {
     this.steps.forEach((step) => {
       step.classList.toggle('hidden', step.dataset.fieldUuid !== uuid)
     })
 
-    this.fields.find(f => f.id === uuid).focus()
+    this.fields.find(f => f.id === uuid)?.focus()
+  }
+
+  submitSignature (e) {
+    e.target.okButton.disabled = true
+
+    fetch(this.form.action, {
+      method: this.form.method,
+      body: new FormData(this.form)
+    }).then(response => {
+      console.log('Form submitted successfully!', response)
+      this.moveNextStep()
+    }).catch(error => {
+      console.error('Error submitting form:', error)
+    }).finally(() => {
+      e.target.okButton.disabled = false
+    })
   }
 
   submitForm (e) {

app/javascript/elements/signature_pad.js

@@ -7,7 +7,9 @@ import { DirectUpload } from '@rails/activestorage'
 export default actionable(targetable(class extends HTMLElement {
   static [target.static] = [
     'canvas',
-    'input'
+    'input',
+    'okButton',
+    'clearButton'
   ]
 
   connectedCallback () {
@@ -17,6 +19,8 @@ export default actionable(targetable(class extends HTMLElement {
   submit (e) {
     e?.preventDefault()
 
+    this.okButton.disabled = true
+
     this.canvas.toBlob((blob) => {
       const file = new File([blob], 'signature.jpg', { type: 'image/jpg' })
 

app/views/submit_flow/show.html.erb

@@ -21,18 +21,25 @@
         <% visible_step_index = nil %>
         <% @submission.flow.fields.each_with_index do |field, index| %>
           <% visible_step_index ||= index if @submission.values[field['uuid']].blank? %>
-          <disable-hidden data-field-uuid="<%= field['uuid'] %>" data-targets="flow-view.steps" class="block <%= 'hidden' if index != visible_step_index %>">
+          <disable-hidden data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-targets="flow-view.steps" class="block <%= 'hidden' if index != visible_step_index %>">
             <% if index != 0 %>
               <button data-action="click:flow-view#moveStepBack">
                 Back
               </button>
             <% end %>
             <label for="<%= field['uuid'] %>"><%= field['name'].presence || 'FIeld' %></label>
+            <br>
             <% if index == @submission.flow.fields.size - 1 %>
               <input type="hidden" name="completed" value="true">
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% end %>
             <% if field['type'].in?(['text', 'date']) %>
-              <input <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" value="<%= @submission.values[field['uuid']] %>" type="<%= field['type'] %>" name="values[<%= field['uuid'] %>]">
+              <input class="text-xl" <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" value="<%= @submission.values[field['uuid']] %>" type="<%= field['type'] %>" name="values[<%= field['uuid'] %>]">
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% elsif field['type'] == 'select' %>
               <select <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" name="values[<%= field['uuid'] %>]">
                 <option value="" disabled selected>Select your option</option>
@@ -40,6 +47,9 @@
                   <option <%= html_attributes(selected: 'true') if @submission.values[field['uuid']] == option %> value="<%= option %>"><%= option %></option>
                 <% end %>
               </select>
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% elsif field['type'] == 'image' || field['type'] == 'attachment' %>
               <br>
               <files-list data-field-uuid="<%= field['uuid'] %>">
@@ -52,24 +62,48 @@
                   <input multiple data-target="file-dropzone.input" data-action="change:file-dropzone#onSelectFiles" id="<%= uuid %>" type="file" class="hidden">
                 </file-dropzone>
               </files-list>
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% elsif field['type'] == 'signature' %>
               <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>
-                <button data-action="click:signature-pad#submit">
-                  Ok
-                </button>
-                <button data-action="click:signature-pad#clear">
+                <canvas data-target="signature-pad.canvas"></canvas>
+                <button 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_title %>
+                </button>
               </signature-pad>
             <% elsif field['type'] == 'radio' %>
+              <% field['options'].each do |option| %>
+                <div>
+                  <input <%= html_attributes(checked: true) if @submission.values[field['uuid']] == option %> id="<%= field['uuid'] + option %>" type="radio" name="values[<%= field['uuid'] %>]" value="<%= option %>">
+                  <label for="<%= field['uuid'] + option %>">
+                    <%= option %>
+                  </label>
+                </div>
+              <% end %>
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% elsif field['type'] == 'checkbox' %>
+              <% field['options'].each do |option| %>
+                <div>
+                  <input <%= html_attributes(checked: true) if @submission.values[field['uuid']]&.include?(option) %> id="<%= field['uuid'] + option %>" type="checkbox" name="values[<%= field['uuid'] %>]" value="<%= option %>">
+                  <label for="<%= field['uuid'] + option %>">
+                    <%= option %>
+                  </label>
+                </div>
+              <% end %>
+              <div>
+                <button type="submit"><%= button_title %></button>
+              </div>
             <% end %>
           </disable-hidden>
         <% end %>
-        <button data-target="flow-view.submitButton" type="submit"><%= button_title %></button>
       </form>
       <div data-target="flow-view.completed" class="hidden">
         <p>