allow to make form field optional

app/javascript/submission_form/area.vue

@@ -28,6 +28,9 @@
       <template v-if="field.type === 'checkbox'">
         {{ fieldIndex + 1 }}
       </template>
+      <template v-else-if="!field.required">
+        (optional)
+      </template>
     </div>
     <div
       v-if="isActive"

app/javascript/submission_form/form.vue

@@ -22,7 +22,7 @@
     :values="values"
     :attachments-index="attachmentsIndex"
     :current-step="currentStepFields"
-    @focus-step="goToStep($event, false, true)"
+    @focus-step="[saveStep(), goToStep($event, false, true)]"
   />
   <div>
     <form
@@ -55,14 +55,16 @@
             v-if="currentField.name"
             :for="currentField.uuid"
             class="label text-2xl mb-2"
-          >{{ currentField.name }}</label>
+          >{{ currentField.name }}
+            <template v-if="!currentField.required">(optional)</template>
+          </label>
           <div>
             <input
               :id="currentField.uuid"
               v-model="values[currentField.uuid]"
               class="base-input !text-2xl w-full"
               :required="currentField.required"
-              placeholder="Type here..."
+              :placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
               type="text"
               :name="`values[${currentField.uuid}]`"
               @focus="$refs.areas.scrollIntoField(currentField)"
@@ -74,7 +76,9 @@
             v-if="currentField.name"
             :for="currentField.uuid"
             class="label text-2xl mb-2"
-          >{{ currentField.name }}</label>
+          >{{ currentField.name }}
+            <template v-if="!currentField.required">(optional)</template>
+          </label>
           <div class="text-center">
             <input
               :id="currentField.uuid"
@@ -92,10 +96,12 @@
             v-if="currentField.name"
             :for="currentField.uuid"
             class="label text-2xl mb-2"
-          >{{ currentField.name }}</label>
+          >{{ currentField.name }}
+            <template v-if="!currentField.required">(optional)</template>
+          </label>
           <select
             :id="currentField.uuid"
-            :required="true"
+            :required="currentField.required"
             class="select base-input !text-2xl w-full text-center font-normal"
             :name="`values[${currentField.uuid}]`"
             @change="values[currentField.uuid] = $event.target.value"
@@ -122,7 +128,9 @@
             v-if="currentField.name"
             :for="currentField.uuid"
             class="label text-2xl mb-2"
-          >{{ currentField.name }}</label>
+          >{{ currentField.name }}
+            <template v-if="!currentField.required">(optional)</template>
+          </label>
           <div class="flex w-full">
             <div class="space-y-3.5 mx-auto">
               <div
@@ -140,7 +148,7 @@
                     class="base-radio !h-7 !w-7"
                     :name="`values[${currentField.uuid}]`"
                     :value="option"
-                    required
+                    :required="currentField.required"
                   >
                   <span class="text-xl">
                     {{ option }}
@@ -185,7 +193,7 @@
                   type="checkbox"
                   class="base-checkbox !h-7 !w-7"
                   :checked="!!values[field.uuid]"
-                  @click="values[field.uuid] = !values[field.uuid]"
+                  @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                 >
                 <span class="text-xl">
                   {{ currentField.name || currentField.type + ' ' + (index + 1) }}
@@ -223,14 +231,23 @@
       <div class="mt-8">
         <button
           type="submit"
-          class="base-button w-full"
+          class="base-button w-full flex justify-center"
           :disabled="isSubmitting"
         >
-          <span v-if="isSubmitting">
-            Submitting...
-          </span>
-          <span v-else>
-            Submit
+          <span class="flex">
+            <IconInnerShadowTop
+              v-if="isSubmitting"
+              class="mr-1 animate-spin"
+            />
+            <span v-if="stepFields.length === currentStep + 1">
+              Submit
+            </span>
+            <span v-else>
+              Next
+            </span><span
+              v-if="isSubmitting"
+              class="w-6 flex justify-start mr-1"
+            ><span>...</span></span>
           </span>
         </button>
       </div>
@@ -262,6 +279,7 @@ import SignatureStep from './signature_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import FormCompleted from './completed'
+import { IconInnerShadowTop } from '@tabler/icons-vue'
 
 export default {
   name: 'SubmissionForm',
@@ -272,6 +290,7 @@ export default {
     SignatureStep,
     AttachmentStep,
     MultiSelectStep,
+    IconInnerShadowTop,
     FormCompleted
   },
   props: {
@@ -369,6 +388,12 @@ export default {
         }
       })
     },
+    saveStep () {
+      return fetch(this.submitPath, {
+        method: 'POST',
+        body: new FormData(this.$refs.form)
+      })
+    },
     async submitStep () {
       this.isSubmitting = true
 

app/javascript/template_builder/area.vue

@@ -44,8 +44,28 @@
         @focus="onNameFocus"
         @blur="onNameBlur"
       >{{ field.name || defaultName }}</span>
+      <div
+        v-if="isNameFocus"
+        class="flex items-center ml-1.5"
+      >
+        <input
+          :id="`required-checkbox-${field.uuid}`"
+          v-model="field.required"
+          type="checkbox"
+          class="checkbox checkbox-xs no-animation rounded"
+          @mousedown.prevent
+        >
+        <label
+          :for="`required-checkbox-${field.uuid}`"
+          class="label text-xs"
+          @click.prevent="field.required = !field.required"
+          @mousedown.prevent
+        >Required</label>
+      </div>
       <button
+        v-else
         class="pr-1"
+        title="Remove"
         @click.prevent="$emit('remove')"
       >
         <IconX width="14" />

app/javascript/template_builder/builder.vue

@@ -321,6 +321,11 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
+        } else if (this.dragFieldType === 'signature') {
+          baseArea = {
+            w: area.maskW / 5 / area.maskW,
+            h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,

app/javascript/template_builder/contenteditable.vue

@@ -9,21 +9,28 @@
       style="min-width: 2px"
       :class="iconInline ? 'inline' : 'block'"
       class="peer outline-none focus:block"
-      @keydown.enter.prevent="onEnter"
+      @keydown.enter.prevent="blurContenteditable"
       @focus="$emit('focus', $event)"
       @blur="onBlur"
     >
       {{ value }}
     </span>
+    <span
+      v-if="withRequired"
+      title="Required"
+      class="text-red-500 peer-focus:hidden"
+      @click="focusContenteditable"
+    >
+      *
+    </span>
     <IconPencil
-      contenteditable="false"
-      class="cursor-pointer ml-1 flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
+      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
-      :class="{ 'absolute': !iconInline, 'inline align-bottom': iconInline }"
+      :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
-      @click="onPencilClick"
+      @click="focusContenteditable"
     />
   </div>
 </template>
@@ -52,6 +59,11 @@ export default {
       required: false,
       default: 30
     },
+    withRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     iconStrokeWidth: {
       type: Number,
       required: false,
@@ -79,10 +91,10 @@ export default {
       this.$emit('update:model-value', this.value)
       this.$emit('blur', e)
     },
-    onPencilClick () {
+    focusContenteditable () {
       this.$refs.contenteditable.focus()
     },
-    onEnter () {
+    blurContenteditable () {
       this.$refs.contenteditable.blur()
     }
   }

app/javascript/template_builder/field.vue

@@ -27,7 +27,28 @@
             @blur="onNameBlur"
           />
         </div>
-        <div class="flex items-center space-x-1">
+        <div
+          v-if="isNameFocus"
+          class="flex items-center relative"
+        >
+          <input
+            :id="`required-checkbox-${field.uuid}`"
+            v-model="field.required"
+            type="checkbox"
+            class="checkbox checkbox-xs no-animation rounded"
+            @mousedown.prevent
+          >
+          <label
+            :for="`required-checkbox-${field.uuid}`"
+            class="label text-xs"
+            @click.prevent="field.required = !field.required"
+            @mousedown.prevent
+          >Required</label>
+        </div>
+        <div
+          v-else
+          class="flex items-center space-x-1"
+        >
           <span
             v-if="field.areas?.length"
             class="dropdown dropdown-end"
@@ -178,6 +199,11 @@ export default {
     }
   },
   emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
+  data () {
+    return {
+      isNameFocus: false
+    }
+  },
   computed: {
     defaultName () {
       const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
@@ -192,6 +218,8 @@ export default {
   },
   methods: {
     onNameFocus (e) {
+      this.isNameFocus = true
+
       if (!this.field.name) {
         setTimeout(() => {
           this.$refs.name.$refs.contenteditable.innerText = ' '
@@ -220,6 +248,8 @@ export default {
         this.field.name = ''
         this.$refs.name.$refs.contenteditable.innerText = this.defaultName
       }
+
+      this.isNameFocus = false
     },
     removeArea (area) {
       this.field.areas.splice(this.field.areas.indexOf(area), 1)

app/javascript/template_builder/field_type.vue

@@ -2,7 +2,7 @@
   <span class="dropdown">
     <label
       tabindex="0"
-      title="Type"
+      :title="$t(modelValue)"
       class="cursor-pointer"
     >
       <component

app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="docuseal" class="h-full">
+<html data-theme="docuseal">
   <head>
     <title>
       Docuseal
@@ -11,7 +11,7 @@
     <%= stylesheet_pack_tag 'application', media: 'all' %>
     <%= yield :head %>
   </head>
-  <body class="h-full">
+  <body>
     <turbo-frame id="modal"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %>

app/views/layouts/form.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="docuseal" class="h-full">
+<html data-theme="docuseal">
   <head>
     <title>
       Docuseal
@@ -11,7 +11,7 @@
     <%= stylesheet_pack_tag 'form', media: 'all' %>
     <%= yield :head %>
   </head>
-  <body class="h-full">
+  <body>
     <%= yield %>
   </body>
 </html>

app/views/submit_form/completed.html.erb

@@ -2,12 +2,12 @@
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
       <div class="flex items-center justify-center">
-        <div class="flex items-center">
+        <a href="/" class="flex items-center">
           <div class="mr-3">
             <%= render 'shared/logo', width: "50px", height: "50px"%>
           </div>
           <h1 class="text-5xl font-bold text-center">DocuSeal</h1>
-        </div>
+        </a>
       </div>
       <div class="flex items-center bg-base-300 rounded-xl p-4 mb-4">
         <div class="flex items-center">

app/views/submit_form/show.html.erb

@@ -1,7 +1,7 @@
 <% attachment_field_uuids = @submitter.submission.template.fields.select { |f| f['type'].in?(%w[image signature file]) }.pluck('uuid') %>
 <% values = @submitter.submission.submitters.reduce({}) { |acc, e| acc.merge(e.values) } %>
 <% attachments = ActiveStorage::Attachment.where(uuid: values.values_at(*attachment_field_uuids).flatten).preload(:blob) %>
-<div class="mx-auto block pb-72 select-none" style="max-width: 1000px">
+<div class="mx-auto block pb-72" style="max-width: 1000px">
   <div class="mt-4 flex">
     <a href="<%= root_path %>" class="mx-auto text-2xl md:text-3xl font-bold items-center flex space-x-3">
       <%= render 'shared/logo', class: 'w-9 h-9 md:w-12 md:h-12' %>

config/routes.rb

@@ -34,7 +34,7 @@ Rails.application.routes.draw do
     resources :submissions, only: %i[index new create]
   end
 
-  resources :start_form, only: %i[show update], path: 't', param: 'slug' do
+  resources :start_form, only: %i[show update], path: 'd', param: 'slug' do
     get :completed
   end